@import url(common_style.css);

body {
  display: flex;
  align-items: center;
  flex-direction: column;
  min-height: 100vh;
  background-image: url("/imagine/Logo/Nikon_6.jpg");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

/*nome*/
.name {
  margin: min(1em, 3vh);
  font-size: min(1em, 3vh);
  /* con schermi poco alti si riduce margine e font-size per lasciare spazio al menu */
  padding: 0;
  text-align: center;
  text-shadow: 0 0 12px black;
}

h1 {
  margin: auto;
  padding: 0;
  color: whitesmoke;
  margin-block-start: 0;
  margin-block-end: 0;
  text-transform: uppercase;
}

h2 {
  margin: auto;
  padding: 0;
  color: whitesmoke;
  margin-block-start: 0;
  margin-block-end: 0;
}

/*menu*/
.menu {
  /* calcolo della dimensione del menu in modo che: */
  /* 70vh: non vada mai sopra alle scritte */
  /* 90vw: non sia troppo largo su schermi verticali */
  --limite: min(70vh, 90vw);
  /* dimensione del quadrato che contiene il menu, limitato a max 400px */
  --size: clamp(0px, var(--limite), 400px);
  /* le dimensioni degli elementi figlio sono calcolate in proporzione */

  position: absolute;
  width: var(--size);
  aspect-ratio: 1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: center;
  align-items: center;
}

.menu .toggle {
  position: absolute;
  width: calc(0.625 * var(--size));
  aspect-ratio: 1;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 3;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 3px 4px rgba(0, 0, 0, 0.15);
  font-size: 2em;
  transition: transform 1.25s;
}

.menu.active .toggle {
  transform: rotate(360deg);
}

.menu li {
  position: absolute;
  left: 0;
  list-style: none;
  transform-origin: calc(var(--size) / 2);
  transition: transform 0.5s;
  transition-delay: calc(0.1s * var(--i));
  transform: rotate(0deg) translateX(100px);
}

.menu.active li {
  transform: rotate(calc(360deg / 9 * var(--i)));
}

.menu li a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(0.15 * var(--size));
  aspect-ratio: 1;
  background: #fff;
  border-radius: 50%;
  transform: rotate(calc(360deg / -9 * var(--i)));
  box-shadow: 0 3px 4px rgba(0, 0, 0, 0.15);
  color: #111;
  transition: 0.5s;
}

/*img*/
.png,
.svg {
  width: 50%;
}

.logo {
  margin: auto;
  width: 100%;
  border-radius: 50%;
  text-align: center;
  display: block;
}