#welcome{
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
  animation: welcome ease 1s 1;
  position: relative;
 }

 @keyframes welcome {
  0% {
    top:-20px;
  }
  100% {
    top:0px;
  }
 } 

 #underwel{
  color: rgb(255, 255, 255);
  text-align: center;
  font-family: sans-serif, 'Times New Roman', Times, serif;
  font-size: x-large;
  animation: underwel ease 1.5s 1;
  position: relative;
}

@keyframes underwel {
  0% {
    top:-10px;
  }
  100% {
    top:0px;
  }
 }
 
 a{
  text-decoration: none;
 }

.bodoni-moda-ok {
  font-family: sans-serif, 'Times New Roman', Times, serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

body{
  background: linear-gradient(-57deg, #130c20, #040754, #211d8c, #660ca1, #3f0c6c);
  background-size: 400% 400%;
  animation: gradient ease 20s infinite;
  height: 100vh;
  text-decoration: none;
  overflow: none;
  margin: 0px;
}

#element{
  background-image: linear-gradient(-57deg, cyan, magenta, cyan);
  color: transparent;
  background-clip: text;
  animation: change-color ease 2s infinite;
  text-shadow: -2px -2px 0 #ffffff,;
  background-size: 400%;
} 

@keyframes change-color {
  0% {
    background-position: 0%;
  }
  100% {
    background-position: 100%;
  }
  0% {
    background-position: 0%;
}
}

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


#downloados{
  color: rgb(0, 0, 0);
  border-radius: 25px;
  background-color: rgb(170, 170, 238);
  margin: 25px;
  padding: 25px;
 text-decoration: none;
 display: block;
 margin: auto;
 animation: downloados ease 1s 1;
  position: relative;
  border-color: transparent;
  transition: 0.5s;
 }

#downloados:hover {
  background-color: rgb(156, 156, 222);
}

 @keyframes downloados {
  0% {
    top:-5px;
  }
  100% {
    top:0px;
  }
 }

.downloados{
  font-weight: bold;
  text-align: center;
  justify-content: flex-start;
  position: relative;
  text-decoration: none;
}

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

.downloados::after, .downloados::before{
  content: '';
  position: absolute;
  height: 100%;
  width: 100%;
  background-image: conic-gradient(from var(--angle), rgb(235, 188, 255), rgb(88, 118, 227),rgb(235, 188, 255));
  border-radius: 25px;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  z-index: -1;
  padding: 3px;
  animation: 3s spin linear infinite;
}

@keyframes spin{
  from{
    --angle: 0deg;
  }
  to{
    --angle: 360deg;
  }
}

.downloados::before{
  filter: blur(1.5rem);
  opacity: 0.7;
}

#releases{
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
  scale: 50%;
  animation: releases ease 0.5s 1;
  position: relative;
 }
 @keyframes releases {
   0% {
     top:-20px;
   }
   100% {
     top:0px;
   }
 }
 
 #vpre{
  padding: 20px;
  text-align: center;
  border-radius: 25px;
  color: white;
  font-family: sans-serif, 'Times New Roman', Times, serif;
  display: block;
  margin: auto;
  animation: pre-release ease 0.5s 1;
  position: relative;
  transition: 0.5s;
 }
 @keyframes pre-release {
   0% {
     top:-5px;
   }
   100% {
     top:0px;
   }
 }
 
#vpre:hover{
  transition: 0,5s;
  scale: 110%;
}

 #vbeta{
  padding: 20px;
  text-align: center;
  border-radius: 25px;
  color: white;
  font-family: sans-serif, 'Times New Roman', Times, serif;
  display: block;
  margin: auto;
  animation: beta ease 0.5s 1;
  position: relative;
  transition: 0.5s;
 }
 @keyframes beta {
   0% {
     top:-3px;
   }
   100% {
     top:0px;
   }
 }
 
#vbeta:hover{
  transition: 0.5s;
  scale: 110%;
}

#devs{
  color: white;
  font-family: sans-serif, 'Times New Roman', Times, serif;
  text-align: center;
  text-decoration: none;
  text-decoration-color: none;
}

#v10{
  padding: 20px;
 text-align: center;
 border-radius: 25px;
 color: white;
 font-family: sans-serif, 'Times New Roman', Times, serif;
 display: block;
 margin: auto;
 animation: v-one ease 0.5s 1;
 position: relative;
 transition: 0.5s;
 }
 
 @keyframes v-one {
  0% {
    top:-10px;
  }
  100% {
    top:0px;
  }
 } 

#v10:hover{
  transition: 0.5s;
  scale: 110%;
}

 #v15{
  padding: 20px;
 text-align: center;
 border-radius: 25px;
 color: white;
 font-family: sans-serif, 'Times New Roman', Times, serif;
 display: block;
 margin: auto;
 animation: v-15 ease 0.5s 1;
 position: relative;
 transition: 0.5s;
 }

 #v15:hover{
  transition: 0.5s;
  scale: 110%;
 }

#customize{
  animation: customize ease 0.5s 1;
  margin: auto;
  display: block;
  position: relative;
}

 
 #v2{
  padding: 20px;
 text-align: center;
 border-radius: 25px;
 color: white;
 font-family: sans-serif, 'Times New Roman', Times, serif;
 display: block;
 margin: auto;
 animation: v-15 ease 0.5s 1;
 position: relative;
 transition: 0.5s;
 }

 #v2:hover{
  transition: 0.5s;
  scale: 110%;
 }

 @keyframes v-15 {
  0% {
    top:-15px;
  }
  100% {
    top:0px;
  }
 } 

 @keyframes customize {
  0% {
    top:-15px;
  }
  100% {
    top:0px;
  }
 } 

 #home{
  margin: 25px;
  padding: 15px;
 text-decoration: none;
 display: block;
 margin: auto;
 border-radius: 9px;
 background-color: rgb(170, 170, 238);
 font-size: large;
 animation: home ease 0.5s 1;
  position: relative;
  border-color: transparent;
  transition: 0.5s;
 }

 #home:hover {
  background-color: rgb(156, 156, 222);
}
 
 @keyframes home {
   0% {
     top:-2px;
   }
   100% {
     top:0px;
   }
 }
 

.home{
  font-weight: bold;
  position:relative;
  text-align: center;
  justify-content: flex-start;
  position: relative;

}

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

.home::after, .home::before{
  content: '';
  position: absolute;
  height: 100%;
  width: 100%;
  border-radius: 10px;
  background-image: conic-gradient(from var(--angle), rgb(235, 188, 255), rgb(88, 118, 227),rgb(235, 188, 255));
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  z-index: -1;
  padding: 3px;
  animation: 3s spin linear infinite;
}

@keyframes spin{
  from{
    --angle: 0deg;
  }
  to{
    --angle: 360deg;
  }
}

.home::before{
  filter: blur(1.5rem);
  opacity: 0.7;
}

.about{
  text-align: center;
  color: white;
  font-family: sans-serif, 'Times New Roman', Times, serif;
}

@keyframes fade-in{
  from {opacity: 0;}
  to {opacity: 100;}
}

.fade-in {
  animation-name: fade-in;
  animation-duration: 2s;
}

#bg-img-bigger{
  max-width: 100%;
  height: 1000px;
  z-index: -1;
  position: absolute;
  left: 0px;
  top: 0px;
  opacity: 0.3;
}

#bg-img{
  max-width: 100%;
  height: auto;
  z-index: -1;
  position: absolute;
  left: 0px;
  top: 0px;
  opacity: 0.3;
}

/*Button Effects*/

.hover-animation:hover {
  scale: 110%;
  transition: 0.5s;
}

.hover-animation{
  transition: 0.5s;
  scale: 100%;
}

/*End Button Effects*/

#terms{
  color: white;
  margin: 5px;
  font-family: sans-serif, 'Times New Roman', Times, serif;
  cursor: pointer;
  float: left;
  margin-left: 50px;
  margin-top: 20px;
  transition: 0.5s;
  scale: 100%;
}

#terms:hover{
  background: linear-gradient(60deg, #ffffff, #a35ce2);
  background-clip: text;
  color: transparent;
  scale: 110%;
  transition: 0.5s;
}

.fa-solid fa-book fa-lg{
  color: white;
}

#cont{
  color: white;
  margin: 5px;
  font-family: sans-serif, 'Times New Roman', Times, serif;
  cursor: pointer;
  float: left;
  margin-top: 20px;
  transition: 0.5s;
  scale: 100%;
}

#cont:hover{
  background: linear-gradient(60deg, #ffffff, #a35ce2);
  background-clip: text;
  color: transparent;
  scale: 110%;
  transition: 0.5s;
}

.fa-solid fa-user fa-lg{
  color: white;
}

#partners{
  color: white;
  font-family: sans-serif, 'Times New Roman', Times, serif;
  margin: 5px;
  text-align: center;
}

#contributers{
  color: white;
  font-family: sans-serif, 'Times New Roman', Times, serif;
  margin: 5px;
  text-align: center;
}

.partners{
  width: 100%;
}

/* Confusing Grid Area */

.grid-container{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-areas: ". k3y .";
  gap: 10px;
}

.accordion{
  grid-area: "k3y";
}

/* End Confusing Grid Area */

#k3y-logo{
  width: 45px;
  height: 45px;
}

#down-icon{
  width: 15%;
  height: 15%;
}

#pre-down-icon{
  width: 10%;
  height: 10%;
}