@charset "UTF-8";
/* CSS Document */

/*Phones*/
@media (min-width: 391px) {
:root {
  /* Adjust these to change the look */
  --circle-size: 60vw;     /* Diameter of the circle */
  --max-circle: 500px;     /* Cap the size for desktop */
  --img-size: 80px;        /* Size of each image */
	}}

/*Larger devices (such as desktops)*/
@media only screen
and (min-device-width: 1024px) {
:root {
  /* Adjust these to change the look */
  --circle-size: 20vw;     /* Diameter of the circle */
  --max-circle: 500px;     /* Cap the size for desktop */
  --img-size: 80px;        /* Size of each image */
	}}

/*Small devices such as tablets*/
@media only screen
and (min-device-width: 768px)
and (orientation: landscape) {
:root {
  /* Adjust these to change the look */
  --circle-size: 30vw;     /* Diameter of the circle */
  --max-circle: 500px;     /* Cap the size for desktop */
  --img-size: 80px;        /* Size of each image */
	}}

.circle-container {
  position: relative;
  width: var(--circle-size);
  height: var(--circle-size);
  max-width: var(--max-circle);
  max-height: var(--max-circle);
  margin: 100px auto;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
	top: 17%;
}

/*Small devices such as tablets*/
@media only screen
and (min-device-width: 768px)
and (orientation: landscape) {
.circle-container {
  position: relative;
  width: var(--circle-size);
  height: var(--circle-size);
  max-width: var(--max-circle);
  max-height: var(--max-circle);
  margin: 100px auto;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
	top: 9%;
	}}

.item {
  position: absolute;
  width: var(--img-size);
  height: var(--img-size);
  
  /* The Math: Rotate the container, move it out, then rotate the image back */
  /* Formula: rotation * index */
  transform: rotate(calc(var(--i) * 45deg)) 
             translateY(calc(var(--circle-size) / -2)) 
             rotate(calc(var(--i) * -45deg));
}

/* Ensure the circle scales on small screens */
@media (max-width: 600px) {
  .item {
    transform: rotate(calc(var(--i) * 45deg)) 
               translateY(calc(var(--circle-size) / -2)) 
               rotate(calc(var(--i) * -45deg));
    --img-size: 60px; /* Smaller images on mobile */
  }
}

.item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%; /* Makes the images circular */
  border: 2px solid #333;
	box-shadow: 
    0 0 3px 3px #fff; /* Outer colored glow */
}

#button10,
#button11 {
    visibility: hidden;
}

#button10.wy-finale-visible,
#button11.wy-finale-visible {
    visibility: visible;
}

#buttoncredits {
    visibility: hidden;
}