@import url("https://fonts.cdnfonts.com/css/panton");
    

@font-face  {
    
  font-family:  circularStd;
    
  src:  url(./assets/circularstd.ttf) format('truetype');
    
}

: root  {
    
  --darkgrey-color:  #201f1d;
    
  --red-color:  #da5a57;
    
  --blue-color:  #49add7;
    
  --purple-color:  #ba3ee9;
    
  --orange-color:  #e79238;
    
  --green-color:  #41bd4b;
    
}

body  {
    
  background-color:  #181818;
    
  color:  white;
    
  width:  100%;
    
  height:  100%;
    
  text-align:  center;
    
  display:  flex;
    
  flex-direction:  column;
    
  font-family:  "circularStd",  sans-serif;
    
  margin:  0;
    
  padding:  0;
    
}

.animatedIntroduction  {
    
  position:  absolute;
    
  top:  50%;
    
  left:  50%;
    
  transform:  translate(-50%,  -50%);
    
  font-size:  2em;
    
  animation:  fadeOut 500ms 0.6s both;
    
}

.fancyText  {
    
  background:  linear-gradient(to right,  #12c2e9,  #c471ed,  #f64f59,  lightpink);
    
  -webkit-text-fill-color:  transparent;
    
  -webkit-background-clip:  text;
    
  background-clip:  text;
    
}

nav  {
    
  position:  absolute;
    
  top:  0;
    
  left:  0;
    
  width:  100%;
    
  height:  125px;
    
  display:  flex;
    
  justify-content:  space-between;
    
  align-items:  center;
    
  background-color:  #0a0a0a;
    
  animation:  fadeIn 1s ease-in-out 1s both;
    
  padding:  10px 20px 20px;
    
  box-sizing:  border-box;
    
  transition:  all 0.2s;
    
  z-index:  100;
    
  overflow:  auto;
    
}

.navbarfiller  {
    
  height:  125px;
    
  width:  100%;
    
}

home  {
    
  transition:  all 0.3s ease-in-out;
    
  overflow:  hidden;
    
}

settings, 
staff  {
    
  opacity:  0;
    
  display:  none;
    
  transition:  all 0.3s ease-in-out;
    
  visibility:  hidden;
    
}

.logo  {
    
  font-weight:  100;
    
  font-size:  2.25em;
    
  color:  white;
    
  display:  flex;
    
  height:  100%;
    
  align-items:  center;
    
}

.fadeInFirst  {
    
  animation:  fadeIn 1s ease-in-out 1.1s both;
    
}

.fadeIn  {
    
  animation:  fadeIn 0.3s ease-in-out 0s backwards;
    
}

.container  {
    
  display:  flex;
    
  height:  100%;
    
  align-items:  center;
    
  transition:  all 0.2s;
    
}

.button  {
    
  margin:  0 7px;
    
  width:  75px;
    
  height:  25px;
    
  font-size:  1.25em;
    
  border:  none;
    
  position:  relative;
    
  cursor:  pointer;
    
  padding:  10px 20px;
    
  display:  flex;
    
  align-items:  center;
    
  justify-content:  center;
    
  border-radius:  10px;
    
  transition:  all 0.2s;
    
  color:  white;
    
}

.button: hover  {
    
  background:  var(--darkgrey-color);
    
  transform:  scale(1.1);
    
}

.selectedButton  {
    
  background:  var(--darkgrey-color);
    
  border:  3px solid #28282d;
    
}

.box  {
    
  font-family:  'Panton';
    
  font-weight:  bold;
    
  height:  45px;
    
  width:  45px;
    
  background-color:  var(--darkgrey-color);
    
  border:  3px solid #28282d;
    
  border-radius:  15%;
    
  display:  flex;
    
  align-items:  center;
    
  justify-content:  center;
    
  color:  white;
    
  transition:  all 0.2s;
    
}

.box: hover  {
    
  transform:  scale(1.1);
    
  cursor:  pointer;
    
}

.launch  {
    
  background-image:  url(./assets/bg.jpeg);
    
  background-size:  cover;
    
  width:  100%;
    
  height:  100%;
    
  display:  flex;
    
}

.launchbutton  {
    
  width:  410px;
    
  height:  90px;
    
  font-family:  "Panton";
    
  font-weight:  400;
    
  text-shadow:  0 0 10px rgba(0,  0,  0,  0.5);
    
  letter-spacing:  5px;
    
  font-size:  2em;
    
  background-color:  var(--blue-color);
    
  opacity:  0.85;
    
  box-shadow:  0 0 30px --blue-color,  0 0 45px --blue-color;
    
  color:  white;
    
  position:  absolute;
    
  transition:  all 1s;
    
  user-select:  none;
    
}

.launchbutton: before  {
    
  content:  "";
    
  position:  absolute;
    
  top:  0;
    
  left:  0;
    
  width:  100%;
    
  height:  100%;
    
  background:  #18181d;
    
  clip-path:  circle(0% at 50% 50%);
    
  transition:  all 1s;
    
}

.launchbutton: hover  {
    
  box-shadow:  0 0 30px #18181d,  0 0 45px #18181d;
    
  transform:  scale(1.1);
    
  color:  var(--blue-color);
    
}

.launchbutton: hover:before, 
.launchbutton:focus:before, 
.launchbutton:active:before  {
    
  clip-path:  circle(150% at 50% 50%);
    
}

.subheading  {
    
  font-size:  1.75em;
    
  position:  relative;
    
  top:  8px;
    
  letter-spacing:  4px;
    
  font-family:  Panton;
    
}

.newsContainer  {
    
  height:  320px;
    
  margin-top:  20px;
    
  justify-content:  center;
    
  box-sizing:  border-box;
    
}

.news  {
    
  margin:  0 10px;
    
  width:  500px;
    
  height:  100%;
    
  background-color:  var(--darkgrey-color);
    
  border-radius:  2%;
    
  flex-direction:  column;
    
  font-weight:  lighter;
    
  font-size:  1em;
    
}

.news img  {
    
  border-radius:  2% 2% 0 0;
    
  object-fit:  cover;
    
}

.newsContent, 
.newsFooter  {
    
  width:  100%;
    
  padding:  3px 8px 0 12px;
    
  box-sizing:  border-box;
    
}

.newsContent  {
    
  text-align:  left;
    
  align-items:  flex-start;
    
  height:  20%;
    
  overflow:  hidden;
    
}

.newsFooter  {
    
  height:  10%;
    
  justify-content:  space-between;
    
  color:  gray;
    
}

footer .container  {
    
  background-color:  #141312;
    
  height:  30px;
    
  justify-content:  space-between;
    
  padding:  0 10px;
    
  color:  #3c3c3d;
    
  font-weight:  400;
    
}

.socials  {
    
  height:  91%;
    
  transition:  all 0.2s;
    
}

.socials: hover  {
    
  transform:  scale(1.1);
    
  cursor:  pointer;
    
}

.servers  {
    
  height:  250px;
    
  margin-top:  20px;
    
}

body>div.container.servers>div: nth-child(2)>div:nth-child(3)  {
    
  border-left:  3px solid #28282d;
    
  justify-content:  flex-start;
    
  align-items:  center;
    
  flex-direction:  column;
    
  color:  #ff5;
    
  overflow:  auto;
    
  width:  30%;
    
}

body>div.container.servers>div: nth-child(2)>div:nth-child(2)>span:nth-child(1)  {
    
  font-size:  2.5em;
    
  font-weight:  400;
    
  color:  #12c2e9;
    
}

.arrow  {
    
  transition:  all 0.3s;
    
  display:  inline-block;
    
}

.dropdown  {
    
  position:  relative;
    
  display:  block;
    
  user-select:  none;
    
}

.dropdown-content  {
    
  margin-top:  3px;
    
  right:  -2px;
    
  text-align:  left;
    
  padding:  10px;
    
  position:  absolute;
    
  background-color:  var(--darkgrey-color);
    
  font-size:  0.75em;
    
  transition:  all 0.5s;
    
  border-radius:  5px;
    
  opacity:  0;
    
  visibility:  hidden;
    
  height:  max-content;
    
  user-select:  text;
    
}

.dropdown .dropdown-content: hover, 
.dropdown:hover, 
.dropdown:active  {
    
  cursor:  pointer;
    
}

.dropdown .dropdown-content: hover .dropdown-content, 
.dropdown:hover .dropdown-content, 
.dropdown:active .dropdown-content  {
    
  visibility:  visible;
    
  height:  110px;
    
  opacity:  1;
    
}

.dropdown .dropdown-content: hover .arrow, 
.dropdown:hover .arrow, 
.dropdown:active .arrow  {
    
  transform:  rotate(-180deg);
    
}

.settingCategory  {
    
  color:  gray;
    
  font-size:  1.3em;
    
  margin-top:  16px;
    
}

settings .container  {
    
  width:  100%;
    
  box-sizing:  border-box;
    
}

settings .container .container  {
    
  margin:  15px 0;
    
}

.settingContainer  {
    
  height:  70px;
    
}

.settingTitleDescContainer  {
    
  display:  flex;
    
  width:  50%;
    
  height:  100%;
    
  flex-direction:  column;
    
  justify-content:  center;
    
  align-items:  flex-start;
    
}

.settingExplanation  {
    
  font-size:  0.9em;
    
  font-weight:  300;
    
  color:  gray;
    
  margin:  0;
    
}

.optionContainer  {
    
  display:  flex;
    
  width:  50%;
    
  height:  100%;
    
  justify-content:  flex-end;
    
  padding-right:  36px;
    
  align-items:  center;
    
}

label  {
    
  font-size:  2em;
    
}

select, 
input, 
.optionContainer .container .button  {
    
  font-size:  1em;
    
  width:  200px;
    
  height:  56px;
    
  margin-left:  10px;
    
  border:  none;
    
  color:  white;
    
  border-radius:  10px;
    
  appearance:  none;
    
  background:  var(--darkgrey-color);
    
  text-align:  center;
    
}

input: focus  {
    
  outline:  none;
    
}

input: focus~.placeholder  {
    
  display:  none;
    
}

.placeholder  {
    
  color:  gray;
    
  position:  absolute;
    
}

select  {
    
  padding:  10px;
    
}

.saveSettingsButton  {
    
  margin:  0 40px;
    
  width:  200px;
    
  background-color:  var(--green-color);
    
  justify-content:  center;
    
  overflow:  hidden;
    
}

.saveSettingsButton: hover:after  {
    
  left:  120%;
    
}

.saveSettingsButton: after  {
    
  left:  -65px;
    
  position:  absolute;
    
  width:  20%;
    
  height:  200%;
    
  content:  "";
    
  background-color:  white;
    
  opacity:  0.7;
    
  transform:  rotate(30deg);
    
  transition:  left 0.7s ease-in-out;
    
  z-index:  1234;
    
}

.allSettingsContainer  {
    
  background-color:  #121315;
    
  flex-direction:  column;
    
  align-items:  flex-start;
    
  justify-content:  flex-start;
    
  padding-left:  36px;
    
}

#newsImage1, 
#newsImage2, 
#newsImage3  {
    
  height:  70%;
    
  width:  100%;
    
}

@media screen and (max-width:  1000px)  {
    
  .button  {
    
    font-size:  1em;
    
    width:  30px;
    
  }

  .launchbutton  {
    
    font-size:  1.75em;
    
    width:  250px;
    
  }

  .logo  {
    
    display:  none;
    
  }

  .news: nth-child(2)  {
    
    display:  none;
    
  }

  .news: nth-child(3)  {
    
    display:  none;
    
  }

  #hidemobile  {
    
    display:  none;
    
  }

  body>div.container.servers>div: nth-child(2)>div:nth-child(2)>span:nth-child(1)  {
    
    font-size:  2em;
    
  }

  body>div.container.servers>div: nth-child(2)>div:nth-child(3)  {
    
    width:  50%;
    
  }

  .allSettingsContainer>div: nth-child(1)  {
    
    flex-direction:  column;
    
    align-items:  center;
    
  }

  .settingContainer  {
    
    height:  200px;
    
    flex-direction:  column;
    
    margin:  0;
    
  }

  .settingTitleDescContainer  {
    
    align-items:  center;
    
  }

  .optionContainer  {
    
    justify-content:  center;
    
    padding:  0;
    
  }

  .allSettingsContainer  {
    
    align-items:  center;
    
    padding-left:  0;
    
  }

  .saveSettingsButton  {
    
    margin:  0 0 10px 0;
    
    width:  150px;
    
  }

  select, 
  input, 
  .optionContainer .container .button  {
    
    margin:  0;
    
  }

  nav  {
    
    justify-content:  center;
    
  }

  nav .container  {
    
    display:  none;
    
  }
}

@keyframes fadeOut  {
    
  0%  {
    
    opacity:  1;
    
    font-size:  3em;
    
  }

  100%  {
    
    opacity:  0;
    
    font-size:  3.5em;
    
  }
}

@keyframes fadeOut2  {
    
  0%  {
    
    opacity:  1;
    
  }

  100%  {
    
    opacity:  0;
    
  }
}

@keyframes fadeIn  {
    
  0%  {
    
    opacity:  0;
    
  }

  100%  {
    
    opacity:  1;
    
  }
}