/* https://coolors.co/0d0a0b-454955-f3eff5-72b01d-3f7d20 ótima paleta de cores para padronizar o site */
:root {
  font-size: 62.5%;
  --cor-primaria: #3498db;
  --cor-secundaria: #2ecc71;
  --cor-terciaria: #f1c40f;
  --cor-quartenaria: #e74c3c;
  --cor-cinza-claro: #ecf0f1;
  --cor-cinza-escuro: #34495e;
  --cor-branco: #ffffff;
  --cor-preto: #222222;
  --bg-button-hover: var(--cor-primaria);
  --bg-summary: #eeebdc;
  --bg-article: #eeebdcbb;
  --text-summary: #30353b;
}

.light {
  --cor-primaria: #2980b9;
  --cor-secundaria: #27ae60;
  --cor-terciaria: #f39c12;
  --cor-quartenaria: #c0392b;
  --cor-cinza-claro: #bdc3c7;
  --cor-cinza-escuro: #7f8c8d;
  --cor-branco: #222222;
  --cor-preto: #ffffff;
  background: linear-gradient(90deg, #f0f0f0, #d0d0d0, #ffffff);
  --bg-button-hover: var(--cor-secundaria);
  --bg-summary: #1d2024;
  --bg-article: #1d2024ec;
  --text-summary: #eeebdc;
}

@property --angle{
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

body {
  background-color: var(--cor-cinza-escuro);
  background: linear-gradient(90deg, #041110, #143329, #000);
  background-size: 400% 400%;
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: center;
  align-items: center;
  font-family: "Inter", sans-serif;
  font-size: 1.6rem;
  animation: fundo 20s ease infinite;
}

@keyframes fundo {
  0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

header i {
  position: fixed;
  top: 20px;
  right: 20px;
  font-size: 3rem;
  color: var(--cor-preto);
  cursor: pointer;
  transition: filter .3s, color .4s;
  background-color: var(--cor-branco);
  padding: 5px 10px;
  border-radius: 5px;
  z-index: 1;

  &:hover {
    filter: contrast(140%);
    color: orange
  }
}

main {
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;

  & > a {
    text-align: center;
    color: var(--cor-branco);
    font-size: 2rem;
    text-decoration: none;
    transition: all .2s;
    background-color: var(--cor-preto);
    padding: 10px 20px;
    border-radius: 5px;

    &:hover {
      background-color: color-mix(in oklab, var(--bg-button-hover) 60%, black 20%);
      filter: contrast(130%) brightness(1.2);
    }
  }
}

nav {
  display: flex;
  flex-direction: column;
  align-items: center;

  h3 {
    margin-bottom: 0;
  }
  
  ul {
    padding: 5px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    list-style-type: none;
  }

  a {
    text-decoration: none;
    font-size: 2rem;
    color: var(--cor-preto);
    transition: filter .5s;

    &:hover {
      filter: contrast(140%);
    }

    span{
      background-color: var(--cor-secundaria);
      display: inline-block;
      padding: 5px;
      min-width: 80px;
      text-align: center;
      border-radius: 5px;
    }
  }
}

details {
  display: block;
  overflow: hidden;
  width: 500px;
  min-width: 200px;
  max-width: 600px;
  padding: 5px;
  border-radius: 5px;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  backdrop-filter: brightness(1.6) saturate(1.6) blur(5px) contrast(1.1);

  &[open] nav {
    animation: animateUp .4s linear forwards;
  }

  &[open] > summary::after {
    transform: rotate(-180deg);
  }
  
  &[open] summary {border-radius: 5px 5px 0 0;}
}


@keyframes animateUp {
  0% {
    opacity: 0;
    transform: translatey(100%);
  }
  100% {
    opacity: 1;
    transform: translatey(0);
  }
}

summary {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 15px;
  font-weight: bold;
  cursor: pointer;
  color: var(--text-summary);
  border-radius: 5px;
  background: var(--bg-summary);

  &::after {
    content: '';
    width: 0; 
    height: 0; 
    border-top: 10px solid var(--text-summary);
    border-inline: 7px solid transparent;
    transition: 0.2s;
  }

}

article {
  background: var(--bg-article);
  backdrop-filter: blur(5px);
}

::details-content {
  transition: all 0.5s ease, content-visibility 0.5s ease allow-discrete; /* Rely on the special animation powers of content-visibility */
  height: 0;
  overflow: clip; /* Clip off contents while animating */
}

@supports (interpolate-size: allow-keywords) {
    :root {
        interpolate-size: allow-keywords;
    }

    [open]::details-content {
        height: auto;
    }
}

/* Fallback for browsers with no interpolate-size support */
@supports not (interpolate-size: allow-keywords) {
    [open]::details-content {
        height: auto;
        overflow-y: scroll; /* In case the contents should be taller than 150px */
    }
}

@media only screen and (max-width: 650px) {
  header i {
    /* padding: 7px 10px; */
    right: 11px;
    z-index: 2;
    position: absolute;
    height: 40px;
    width: 35px;
    display: grid;
    place-items: center;
  }

  main {
    width: 96%;
    margin-top: 10px;

    & > a {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 5px 15px;
      width: 80%;
      height: 40px;
    }
  }
}

@media only screen and (max-width: 480px) {
  header i {
    /* padding: 7px 10px; */
    right: 11px;
    z-index: 2;
    position: absolute;
    height: 40px;
    width: 35px;
    display: grid;
    place-items: center;
  }

  main {
    width: 96%;
    margin-top: 10px;

    & > a {
      font-size: 1.8rem;
      padding: 5px 15px;
      width: 70%;
      height: 40px;
    }

    details {
      width: auto;
    }
  }
  nav ul {
    display: flex;
    flex-direction: column;
    width: 95%;
    gap: 6px;
  }
  nav ul li { 
    span {
      display: block;
      padding: 8px;
      border-radius: 5px 5px 0px 0px;
      /* color: var(--cor-preto); */
      font-weight: bold;
    }
    & > a {
      display: flex;
      width: 100%;
      padding: 0px 0px 10px;
      background-color: var(--cor-cinza-escuro);
      border-radius: 5px;
      color: var(--cor-cinza-claro);
      text-align: center;
      flex-direction: column;
      gap: 6px;
    }
  }
}


/* Background balls animation */

@keyframes move {
  100% {
    transform: translate3d(0, 0, 1px) rotate(360deg);
  }
}

.background {
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  /* background: #4CB8B6; */
  overflow: hidden;
}

.ball {
  position: absolute;
  width: 25vmin;
  height: 25vmin;
  border-radius: 50%;
  backface-visibility: hidden;
  animation: move linear infinite, hue linear infinite;
}

.ball:nth-child(odd) {
    color: var(--cor-primaria);
    filter: hue-rotate(var(--angle));
}

@keyframes hue {
  0% {
    --angle: 0deg;
  }
  100% {
    --angle: 360deg;
  }
}

.ball:nth-child(even) {
    color: var(--cor-secundaria);
    filter: hue-rotate(var(--angle));
}

.ball:nth-child(1) {
  top: 77%;
  left: 88%;
  animation-duration: 40s;
  animation-delay: -3s;
  transform-origin: 16vw -2vh;
  box-shadow: 40vmin 0 5.703076368487546vmin currentColor;
}
.ball:nth-child(2) {
  top: 42%;
  left: 2%;
  animation-duration: 53s;
  animation-delay: -29s;
  transform-origin: -19vw 21vh;
  box-shadow: -40vmin 0 5.17594621519026vmin currentColor;
}
.ball:nth-child(3) {
  top: 28%;
  left: 18%;
  animation-duration: 49s;
  animation-delay: -8s;
  transform-origin: -22vw 3vh;
  box-shadow: 40vmin 0 5.248179047256236vmin currentColor;
}
.ball:nth-child(4) {
  top: 50%;
  left: 79%;
  animation-duration: 26s;
  animation-delay: -21s;
  transform-origin: -17vw -6vh;
  box-shadow: 40vmin 0 5.279749632220298vmin currentColor;
}
.ball:nth-child(5) {
  top: 46%;
  left: 15%;
  animation-duration: 36s;
  animation-delay: -40s;
  transform-origin: 4vw 0vh;
  box-shadow: -40vmin 0 5.964309466052033vmin currentColor;
}
.ball:nth-child(6) {
  top: 77%;
  left: 16%;
  animation-duration: 31s;
  animation-delay: -10s;
  transform-origin: 18vw 4vh;
  box-shadow: 40vmin 0 5.178483653434181vmin currentColor;
}
.ball:nth-child(7) {
  top: 22%;
  left: 17%;
  animation-duration: 55s;
  animation-delay: -6s;
  transform-origin: 1vw -23vh;
  box-shadow: -40vmin 0 5.703026794398318vmin currentColor;
}
.ball:nth-child(8) {
  top: 41%;
  left: 47%;
  animation-duration: 43s;
  animation-delay: -28s;
  transform-origin: 25vw -3vh;
  box-shadow: 40vmin 0 5.196265905749415vmin currentColor;
}
.ball:nth-child(9) {
  top: 32%;
  left: 27%;
  animation-duration: 65s;
  animation-delay: -6s;
  transform-origin: 10vw -23vh;
  box-shadow: -40vmin 0 5.703026794398318vmin currentColor;
}
.ball:nth-child(10) {
  top: 81%;
  left: 67%;
  animation-duration: 38s;
  animation-delay: -20s;
  transform-origin: 25vw -8vh;
  box-shadow: 40vmin 0 5.196265905749415vmin currentColor;
}


/* https://theme-toggle.rdsx.dev */
::view-transition-group(root) {
  animation-timing-function: var(--expo-out);
}

::view-transition-new(root) {
  mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"><defs><filter id="blur"><feGaussianBlur stdDeviation="2"/></filter></defs><circle cx="20" cy="20" r="18" fill="white" filter="url(%23blur)"/></svg>') center / 0 no-repeat;
  animation: scale 0.8s;
}

::view-transition-old(root),
.light::view-transition-old(root) {
  animation: none;
  z-index: -1;
}
.light::view-transition-new(root) {
  animation: scale 0.8s;
}

@keyframes scale {
  to {
    mask-size: 200vmax;
  }
}

/* animation timing functions */
:root {
  --expo-in: linear(
    0 0%, 0.0085 31.26%, 0.0167 40.94%,
    0.0289 48.86%, 0.0471 55.92%,
    0.0717 61.99%, 0.1038 67.32%,
    0.1443 72.07%, 0.1989 76.7%,
    0.2659 80.89%, 0.3465 84.71%,
    0.4419 88.22%, 0.554 91.48%,
    0.6835 94.51%, 0.8316 97.34%, 1 100%
  );
  --expo-out: linear(
    0 0%, 0.1684 2.66%, 0.3165 5.49%,
    0.446 8.52%, 0.5581 11.78%,
    0.6535 15.29%, 0.7341 19.11%,
    0.8011 23.3%, 0.8557 27.93%,
    0.8962 32.68%, 0.9283 38.01%,
    0.9529 44.08%, 0.9711 51.14%,
    0.9833 59.06%, 0.9915 68.74%, 1 100%
  );
}