@font-face{
  font-family: Orbitron;
  src: url(../assets/fonts/Orbitron-Bold.ttf);
}

@font-face{
  font-family: Tauri;
  src: url(../assets/fonts/Tauri-Regular.ttf);
}

:root {
  --primary: #a259ff;
  --secondary: #2d033b;
  --accent: #ff6f91;
  --bg: #24011D;
  --text: #fff;
  --muted: #bdbdbd;

  --ttls-ff: 'Orbitron', 'Montserrat', Arial, Helvetica, sans-serif;
  --sbttls-ff: 'Tauri', 'Montserrat', Arial, Helvetica, sans-serif;
  --txt-ff: 'Tauri', 'Montserrat', Arial, Helvetica, sans-serif;

  --ttls-fs: 3rem;
  --sbttls-fs: 1.5rem;
  --txt-fs: 1rem;
  --sm-fs: 2.5rem;

  --bg-glass: rgba(65, 32, 90, 0);
  --shdw-glass: 0 4px 30px rgba(0, 0, 0, 0);
  --filter-glass: blur(10px);

  --bg-glass-inp: rgba(65, 32, 90, 0.608);
  --shdw-glass-inp: 0 4px 30px rgba(0, 0, 0, 0.536);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  scroll-behavior: smooth;
}

body {
  font-family: 'Tauri', Arial, sans-serif;
  background-color: var(--bg); /* your background color */
  background-image: url('../assets/icons/deco.svg'); /* your SVG image */
  background-repeat: no-repeat;
  background-position: top; /* or top, bottom, etc */
  background-size: 130%; /* or contain, or specific sizes */
  color: var(--text);
  min-height: 100vh;
}

header{
  height: 60px;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  gap: 30px;
  padding: 0 10%;
  background: var(--bg-glass);
  box-shadow: var(--shdw-glass);
  backdrop-filter: var(--filter-glass);
}

a{
  text-decoration: none;
  gap: 10px;
  max-width: 260px;
}

.prm-clr{
  color: var(--primary);
}

.ntr-clr{
  color: var(--text);
}

.pstv-clr{
  color: rgb(0, 255, 0);
  text-align: center;
}

.sm-fs{
  font-size: var(--sm-fs) !important;
}

.nd-dc{
  border-bottom: 3px solid var(--primary);
}

input, .primary-btn, .secondary-btn, select, .primary-btn-ds{
  border: none;
  border-radius: 5px;
  min-width: 100px;
  width: auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

input, select{
  padding: 7px 15px;
  background: var(--bg-glass-inp);
  backdrop-filter: var(--filter-glass);
  border: 1px solid #ffffff21;
  outline: none;
  color: var(--text);

}

textarea{
  border: none;
  border-radius: 5px;
  min-width: 100px;
  width: auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 7px 10px;
  background: var(--bg-glass-inp);
  backdrop-filter: var(--filter-glass);
  border: 1px solid #ffffff21;
  outline: none;
  color: var(--text);
}

.primary-btn, .secondary-btn, .primary-btn-ds{
  padding: 7px 40px;
  cursor: pointer;
}

.title{
  font-family: var(--ttls-ff);
  font-size: var(--ttls-fs);
  color: var(--primary);
}

.subtitle{
  font-family: var(--sbttls-ff);
  font-size: var(--sbttls-fs);
  color: var(--text);
}

.text{
  font-family: var(--txt-ff);
  font-size: var(--txt-fs);
  color: var(--text);
}

.primary-btn, .primary-btn-ds{
  font-family: var(--sbttls-ff);
  font-size: var(--txt-fs);
  background-color: var(--primary);
  transition: all ease-in-out .1s;
  color: var(--text);
}

.primary-btn-ds{
  cursor: default !important;
}

.secondary-btn{
  font-family: var(--sbttls-ff);
  font-size: var(--txt-fs);
  border: 2px solid var(--primary);
  transition: all ease-in-out .1s;
  color: var(--primary); 
}

.primary-btn:hover{
  background-color: var(--secondary);
  color: var(--primary);
}

.primary-btn-ds:hover{
  background-color: var(--primary) !important;
  color: var(--text) !important;
}

.secondary-btn:hover{
  border: 2px solid var(--text);
  color: var(--text);
}

.link{
  font-family: var(--sbttls-ff);
  font-size: var(--txt-fs);
  color: var(--text);
  transition: all ease-in-out .1s;
}

.link:hover{
  color: var(--text);
  text-decoration: underline;
}

#hamburger .icon{
  fill: var(--text);
  cursor: pointer;
}

#hamburger{
  display: none;
}

#logo{
  display: flex;
  justify-content: center;
  align-items: center;
}

#logo img{
  width: 100%;
  max-width: 70px;
}

nav{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 30px;
}

#nbsp{
  display: none;
}

#hero{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  width: 100%;
  padding: 0 10%;
  gap: 50px;
}

#hero > div{
  width: 100%;
}

#hero #flag{
  display: flex;
  align-items: center;
  justify-content: center;
}

#hero #flag span{
  color: var(--primary);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

#hero #emblem{
  display: flex;
  align-items: center;
  justify-content: center;
}

#hero #emblem img{
  width: 100%;
  max-width: 500px;
}

#hero #cta{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

#hero #cta a{
  width: 100%;
}

#hero #social, #hero #scroll{
  display: flex;
  align-items: center;
  justify-content: center;
}

#hero #scroll span{
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 35px;
  width: 35px;
  border-radius: 50%;
  background-color: var(--primary);
}

#banner{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  width: 100%;
  padding: 60px 10%;
  gap: 20px;
  word-wrap: break-word;
}

#banner > div{
  width: 100%;
  text-align: center;
}

#banner > div > img{
  border-radius: 10px;
  width: 100%;
  max-width: 700px;
}

#banner #details{
  display: flex;
  flex-direction: row;
  align-items: self-start;
  justify-content: center;
  gap: 20px;
}

#banner #details .detail{
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  text-align: center;
}



#about{
  display: flex;  
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 50px;
  height: 100vh;
  width: 100%;
  padding: 60px 10%;
  word-wrap: break-word;
}

#about > div{
  width: 100%;
  flex: 1;
}

#about #illustration img{
  width: 100%;
  border-radius: 10px;
}

#about #content{
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: center;
  gap: 20px;
}

#about #content > *{
  width: 100%;
}

#schedule{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  min-height: 100vh;
  width: 100%;
  padding: 60px 10%;
  word-wrap: break-word;
  background-color: #150817;
}

#schedule #journey #track, #schedule #journey #agenda{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 100%;
}

#schedule #journey #track{
  padding: 0 10%;
}

#schedule #journey #track hr{
  height: 2px;
  width: 100%;
  background-color: var(--text);
}

#schedule #journey #track .step span{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 35px;
  width: 35px;
  border-radius: 50px;
  background-color: var(--primary);
}

#schedule #journey #track .path{
  width: 100%;
}

#schedule #journey #agenda > div{
  flex: 1;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  height: 100%;
}

#informations{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  min-height: 50vh;
  width: 100%;
  padding: 60px 10%;
}

#informations h3{
  text-align: center;
}

#informations #cards{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

#informations #cards .card{
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  height: 150px;
  text-align: center;
}

#register{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
  min-height: 100vh;
  width: 100%;
  padding: 50px 10%; 
  word-wrap: break-word;
  background-color: #150817;
}

#register h1{
  text-align: center;
}

#register > div:first-of-type{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 15px;
  width: 100%;
}

#register > div:first-of-type > *{
  width: 100%;
}

#register #form{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 50px;
}

#register #form > *{
  width: 100%;
  flex: 1;
}

#register #form #decoration{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
  width: 100%;
}

#register #form #decoration img{
  width: 100%;
  flex: 1;
  border-radius: 10px;
}

#register #countdown{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 400px;
}

#register #countdown > div{
  flex: 1;
  width: 100%;
}

#register #countdown .countdown-item{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
}

#register #countdown .countdown-item .countdown-number{
  color: var(--primary);
}

#register #form form{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

#register #form form .input-group{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 10px;
  width: 100%;
}

#register #form form .input{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: start;
  gap: 5px;
  width: 100%;
}

#register #form form .input > *, #register h1 > *{
  min-width: 100%;
}

#register #form form button{
  width: 100%;
  margin: 15px;
}

footer{
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 50px;
  align-items: center;
  padding: 20px 10%;
  width: 100%;
}

footer > div{
  width: 100%;
}

footer #bars{
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  gap: 5px;
  align-items: center;
}

footer #bars .bar{
  display: flex;
  flex-direction: row;
  gap: 10px;
  width: 100%;
}

@media screen and (min-width: 767px) and (max-width: 991px){
  /* Tablet */

  body{
      padding-top: 55px;
  }

  header{
      height: 55px;
  }

  #logo img{
      width: 200px;
  }

  nav{
      gap: 20px;
  }
}

@media screen and (min-width: 50px) and (max-width: 767px){

  /* Mobile */

  body{
      padding-top: 50px;
  }

  header{
      height: 50px;
      gap: 0;
      padding: 0;
  }

  #hamburger{
      display: flex;
      align-items: center;
      justify-content: center;
      flex: 1;
  }

  nav{
      position: fixed;
      top: 50px;
      left: -100%;
      width: 60%;
      max-width: 400px;
      height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: start;
      align-items: center;
      padding: 20px 30px;
      transition: all ease-in-out .1s;
      margin-left: none;
      background: var(--bg);
  }

  nav a{
      width: 100%;
      text-align: center;
  }

  nav .main-btn{
      min-width: 100%;
  }

  #logo{
      flex: 3;
  }

  #logo img{
    width: 60px;
    max-height: 90%;
  }

  #nbsp{
      display: flex;
      flex: 1;
  }

  #hero #cta{
    flex-direction: column;
  }

  #about{
    flex-direction: column;
    padding: 60px 5%;
    text-align: center;
    gap: 25px;
  }

  #about #content{
    align-items: center;
    justify-content: center;
  }
  
  #schedule #journey{
    display: flex;
    flex-direction: row;
    align-items: self-start;
    justify-content: space-between;
    gap: 10px;
  }

  #schedule #journey > div{
    height: 100% !important;
  }

  #schedule #journey #track hr{
    width: 2px;
    height: 100px;
    background-color: var(--text);
  }

  #schedule #journey #track, #schedule #journey #agenda{
    flex-direction: column;
    padding: 10px 0;
  }

  #schedule #journey #track{
    width: 50px !important;
    height: 100% !important;
  }

  #schedule #journey #track{
    gap: 11px;
  }

  #schedule #journey #agenda{
    gap: 40px;
  }

  #schedule #journey #track .path{
    display: flex;
    align-items: center;
    justify-content: center;
  }

  #informations #cards{
    flex-direction: column;
  }

  #register #form{
    flex-direction: column-reverse;
    width: 100%;
  }

  #register #form #decoration img{
    display: none;
  }

  #register #form form .input-group{
    flex-direction: column;
    width: 100%;
  }

  footer{
    flex-direction: column-reverse;
  }

  header, #hero, #banner, #about, #schedule, #informations, #register, footer{
    padding-left: 5%;
    padding-right: 5%;
  }

}