:root {
  --main-font: 'Darker Grotesque', 'Rubik', 'Noto Sans SC', sans-serif;
  --bg-color: #2b3440;
  --text-color: #eceff4;
}

body { animation: background 3s forwards ease; }

textarea {
  justify-content: center;
  width: 70vh;
  height: 1.5em;
  background-color: transparent;
  border-color: #2b3440;
  font-family: var(--main-font);
  font-size: 24px;
  resize: none;
  color: #eceff4;
  overflow: hidden;
  transition: all 0.3s ease;
  opacity: 0;
}

textarea:hover {
  border-color: rgba(240, 246, 255, 0.418);
  transition: all 0.3s ease;
}

textarea:focus {
  border-color: azure;
  font-size: 15px;
  transition: all 0.3s ease;
  height: 44px
}

h1, h2, h3{
  font-family: var(--main-font);
  text-align: start;
  width: 55%;
  margin: none;
  opacity: 0;
  animation: rise 2s ease-out forwards;
}

h1 { font-size: 72px; }

h2 { 
  font-size: 28px; 
  animation-delay: 0.5s;
}

h3 { 
  font-size: 24px; 
  animation-delay: 1s;
}

.margin { margin-bottom: 20px; }

.centered {
  position: absolute;
  top: 50vh;
  left: 50vh;
  width: 50vh; 
  height: 50vh;
  display: flex;
  z-index: 3;
}

.text {
  font-family: var(--main-font);
  display: flex;
  bottom: 2vh;
  align-items: center;
  opacity: 0;
  animation: rise 2s ease-out forwards;
  animation-delay: 1.5s;
}

.row { 
  display: flex; 
  width: 20%; 
  z-index: 4;
}

.submit {
  width: 44px;
  height: 44px;
  padding: 10px;
  transition: all 0.3s ease;
  border-radius: 5px;
  opacity: 0;
}

.elements {
  width: 20%;
  height: 44px;
  width: 44px;
  padding: 10px;
  transition: all 0.3s ease;
  border-radius: 5px;
  opacity: 0;
}

.s {
  position: absolute;
  top: 20px;
  right: 20px;
  border-radius: 5px;
}

.full {
  height: 100%;
  width: 100%;
  background-color: transparent;
  position: absolute;
  z-index: 2;
}

.b, .b1, .b2, .b3, .b4, .b5, .toggle, .titler, .info, .bg { animation: rise 1s ease-out forwards; }

.titler {animation-delay: 2s;}

.b { animation-delay: 2.8s; }

.b1 { animation-delay: 3s; }

.b2 { animation-delay: 3.2s; }

.b3 { animation-delay: 3.4s; }

.b4 { animation-delay: 3.6s; }

.b5 { animation-delay: 3.8s; }

.hover {
  color: #eceff4;
  transition: all 0.3s ease;
}

.elements:hover, .submit:hover, .s:hover {
  background-color: #eceff45f;
  transition: all 0.3s ease;
}

.bg {
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  height: 100%;
  animation: background2 2s ease forwards;
}

.dropdown {
  font-family: var(--main-font);
  font-size: larger;
  display: inline-block;
  z-index: 5;
  background-color: transparent;
  color: #eceff4;
  position: absolute;
  top: 10px;
  left: 10px;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: transparent;
  min-width: 160px;
  z-index: 6;
}

.dropdown-content a {
  font-family: var(--main-font);
  font-size: 14px;
  color: #eceff4;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {background-color: #8787872e; border-radius: 5px;}

.dropdown:hover .dropdown-content {
    display: block;
}

html::-webkit-scrollbar {
  width: 8px;
}

html::-webkit-scrollbar-track {
  background-color: transparent;
  border-radius: 100px;
}

html::-webkit-scrollbar-thumb {
  background-color: #ffffff;
  border-radius: 100px;
}

@keyframes background {
  from { background-color: #ffffff; }
  to { background-color: var(--bg-color); }
}

@keyframes background2 {
  from { background-color: var(--bg-color); }
  to { background-color: #ffffff; }
}

@keyframes rise {
  from { 
    transform: translateY(10px);
    opacity: 0;
   }
  to {
    transform: translateY(0);
    opacity: 1;
   }
}

@keyframes fall {
  from {
    transform: translateY(0);
    opacity: 1;
  }
  to {
    transform: translateY(-10px);
    opacity: 0;
  }
}

@media (max-width: 1000px) {
  textarea {
    width: 75vw; 
    font-size: 12px;
  }

  .margin {
    margin-bottom: 5px;
  }

  .centered {
    flex-direction: column;
    align-items: center;
    left: 2vh;
    width: 40vh
  }
  
  .elements {
    margin: 10px 0;
  }
}