/* FONTS */

@font-face{
  font-family: "anta";
  src: url("../fonts/Anta/Anta-Regular.ttf") format("truetype");
  font-display: swap;
}

@font-face{
  font-family: "BarlowCondensed-Bold";
  src: url("../fonts/barlow condensed/BarlowCondensed-Bold.ttf") format("truetype");
  font-display: swap;
}

@font-face{
  font-family: "BarlowCondensed-Light";
  src: url("../fonts/barlow condensed/BarlowCondensed-Light.ttf") format("truetype");
  font-display: swap;
}

/*rest of the code*/
body{
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #E4EEF0;
}

/*universal code */
h2{
  font-family: BarlowCondensed-Bold;
  color: #E4EEF0;
}

code{
  color: #FF5B04;
}

p{
  font-family: BarlowCondensed-Light;
  color: #E4EEF0
}

  /* HEADER CODE */
#mainbox{
  width: 800px;
  height: 400px;
  display: flex;
  flex-direction: column;
  background: #075056;
  border: 2px solid green;
  border-radius: 25px;
  margin: 25px;
  padding: 15px;
}

/*#code{
  display: flex;
  direction: flex-start;
}*/

#cen h2{
  font-family: anta;
  font-size: 50px;
  margin: 0;
}

#cen{
  flex: 1;                   
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;   
  align-items: center;      
  text-align: center;
}


nav{
  display: flex;
  flex-direction: column; 
  gap: 6px;
}

nav a{
  color: #ff5b04;
}

/* ABOUT BOX */
#abt{
  display: grid;
  grid-template-columns: 550px 250px;
  gap: 18px;
}

main{
  padding: 18px;
  border: 2px dotted green;
  border-radius: 12px;
  background: #16232A;
}

#tst{
  padding: 8px;
  border: 2px dotted green;
  border-radius: 12px;
  background: #16232A;
}


#test h4{
  font-family: BarlowCondensed-Bold;
  text-align: center;
  color: #ff5b04;
}

/* STRIPES BTW */
#stripes{
  width: 800px;
  height: 70px;
  margin: 20px;
  background: repeating-linear-gradient(
    45deg,
    #ff5b04 0 5px,   
    #16232A 10px 20px  
  );
}

#stxt{
  text-align: center;
  display: flex;
  flex-direction: column;
}

#stxt h2{
  font-family: anta;
  margin: 0;
  font-size: 100px;
  color: #FF5B04;
}

#stxt p{
  font-size: 25px;
  margin: 0;
}

#stxt button{
  border: 1px solid #FF5B04;
  border-radius: 35px;
  height: 40px; 
  background: #FF5B04;
  margin-top: 40px;
  margin-bottom: 0;
}

#lst{
  display: grid;
  grid-template-columns: 600px 200px;
  gap: 20px;
  padding: 20px;
  height: 500px;
}

/* THE SECOND BOX */
#usrbx{
  border: 2px dotted green;
  border-radius: 12px;
  padding: 20px;
  background: #16232A;
}

#usrbx input {
  width: 350px;
  height: 40px;
  border: 2px solid green;
  border-radius: 25px;
  padding: 8px;
}

#usrbx button{
  width: 70px;
  height: 40px;
  border: 2px solid green;
  border-radius: 25px;
}

/* THE BOX AND THE LOGO */
#pack{
  border: 2px dotted green;
  border-radius: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #16232A;
}

#pack img{
  width: 400px;
  height: 400px;
}
  
/* USERNAME CLAIM + TESTER SIGN-UP */
#tester-btn,
#usrbx button{
  cursor: pointer;
}

#name-result,
#claim-status{
  font-size: 20px;
  min-height: 24px;
  margin: 10px 0;
}

.ok{
  color: #7dd87d;
}

.bad{
  color: #FF5B04;
}

#claim-form{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

#claim-form[hidden]{
  display: none;
}

#claim-age{
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: BarlowCondensed-Light;
  font-size: 18px;
  color: #E4EEF0;
}

#claim-age input{
  width: 18px;
  height: 18px;
  padding: 0;
  accent-color: #FF5B04;
}

#claim-status{
  margin: 0;
}

#claim-note{
  font-size: 14px;
  margin: 0;
  opacity: 0.8;
}

#claim-note a{
  color: #ff5b04;
}

#name-ideas{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#name-ideas button{
  width: auto;
  padding: 0 14px;
  background: #16232A;
  color: #FF5B04;
  border: 2px dotted green;
  font-family: monospace;
}

#name-ideas button:hover{
  border-color: #FF5B04;
}