:root {
  --big_text: clamp(4rem, 4svmax, 8rem);
  --small_text: clamp(2rem, 2svmax, 4rem);
}

body, html {
  font-family: 'JetBrains Mono', monospace;
  background: black;
  /*background: linear-gradient(105deg, #0f1921, #205275);*/
  height: 100svh;
  margin: 0;
}

#dynamic_background {
  z-index: 0;
  position: fixed;
  height: 100svh;
  width:  100svw;
  background: black;
}

.section {
  z-index: 3;
  height: 100svh;
  transition-timing-function: ease;
  transition-duration: 500ms;
}

#menu {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
}

#sub_menu {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  transform: scale(0);
  filter: blur(1vmax);
}

#info_container {
  height: 75vh;
  width:  75vw;
  display: grid;
  grid-row-gap: .5vmax;
  grid-column-gap: .5vmax;
  grid-template-columns: 2fr 3fr;
}

body[data-active="true"] > #menu {
  transform: translateY(-100%);
  filter: blur(1vmax);
  opacity: 0;
}

body[data-active="true"] > #sub_menu {
  transform: translateY(-100%) scale(1);
  filter: blur(0vmax);
}

body[data-active="true"] > #sub_menu > #info_container > .info_box {
  transform: scale(1);
  filter: blur(0vmax);
}

h {
  color: white;
  z-index: 100;
  font-size: var(--big_text);
}

p {
  color: white;
  z-index: 100;
  font-size: var(--small_text);
}

a {
  display: flex;
  justify-content: center;
  align-items: center;
  height: var(--small_text);
  color: white;
  z-index: 100;
  font-size: calc(var(--small_text) / 2);
  text-decoration: none;
  background: linear-gradient(to right, red, purple);
  background-size: 0, 0;
  background-repeat: no-repeat;
  transition-duration: 250ms;
  transition-timing-function: ease-in-out;
}

a:hover {
  background-size: 100%;
}

.teste {
  color: #FFFFFF;
}