html,
body {
  margin: 0;
  padding: 0;
  color: #e0e0e0;
  font-family: "JetBrains", sans-serif;
}

#starfield {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
}

#content {
  margin: 10vw;
}
@media (min-width: 1000px) {
  #content {
    margin: 100px;
  }
}
#mainCard {
  left: 50%;
  width: 268px;
  padding: 25px;
  background-color: rgb(20, 20, 30);
  -webkit-box-shadow: 0px 0px 10px 5px rgba(61, 90, 255, 0.75);
  -moz-box-shadow: 0px 0px 10px 5px rgba(61, 90, 255, 0.75);
  box-shadow: 0px 0px 10px 5px rgba(61, 90, 255, 0.75);
}
@media (max-width: 1000px) {
  #mainCard {
    position: relative;
    transform: translateX(-50%);
  }
}
@media (min-width: 1000px) {
  #mainCard {
    width: auto;
    height: 128px;
    max-width: fit-content;
  }
}
.list {
  text-align: center;
}
#headerMain {
  margin-bottom: 28px;
}
@media (max-width: 1000px) {
  #headerMain {
    font-size: x-large;
  }
  #headerDesc {
    font-size: smaller;
  }
}
#mainCard p {
  margin: 25px 0px 0px 35px;
}
#mainCard > div > div.flow {
  flex-direction: column;
}

.flow {
  display: flex;
  flex-direction: column;
}
@media (min-width: 1000px) {
  .flow {
    flex-direction: row;
  }
}

#socialCard {
  margin-top: 50px;
  left: 50%;
  padding: 25px;
  width: 268px;
  background-color: rgb(20, 20, 30);
  -webkit-box-shadow: 0px 0px 10px 5px rgba(61, 90, 255, 0.75);
  -moz-box-shadow: 0px 0px 10px 5px rgba(61, 90, 255, 0.75);
  box-shadow: 0px 0px 10px 5px rgba(61, 90, 255, 0.75);
}
@media (max-width: 1000px) {
  #socialCard {
    position: relative;
    transform: translateX(-50%);
  }
}
@media (min-width: 1000px) {
  #socialCard {
    position: absolute;
    bottom: 100px;
    left: 100px;
    width: 610px;
  }
}

.container {
  display: flex;
  justify-content: center;
}
#socialCard > div > div:nth-child(3) > a > div {
  flex-direction: row;
}
.container img {
  height: 50px;
  margin-top: 10px;
}
#discord {
  height: 40px;
  padding-top: 7px;
}

.vr {
  opacity: 1;
  width: 240px;
  margin: 15px 0px 15px 20px;
  -webkit-box-shadow: 0px 0px 1px 1px rgba(61, 90, 255, 0.75);
  -moz-box-shadow: 0px 0px 1px 1px rgba(61, 90, 255, 0.75);
  box-shadow: 0px 0px 1px 1px rgba(61, 90, 255, 0.75);
}
@media (min-width: 1000px) {
  .vr {
    opacity: 1;
    height: 70px;
    width: 0px;
    margin: 0px 20px;
  }
}

.container a {
  color: #e0e0e0;
  text-decoration: none;
}
.container h2 {
  margin-left: 10px;
}

#btnAudioToggle {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: rgb(10, 10, 20);
  border: none;
  padding: 10px;
  border-radius: 8px;
  cursor: pointer;
}

#btnAudioToggle img {
  width: 24px;
  height: 24px;
}

#btnAudioToggle:hover {
  background-color: rgb(30, 30, 40);
}

#spanAudioInfo {
  position: fixed;
  bottom: 75px;
  /* Positioned on top of audio toggle */
  right: 20px;
  margin-left: 10px;
  background-color: rgb(10, 10, 20);
  border: none;
  padding: 10px;
  border-radius: 2px;
  transition: opacity 0.5s ease;
  opacity: 0;
  /* Hide at start */
  white-space: nowrap;
  color: #999999;
  font-size: x-small;
}

@media (min-width: 1000px) {
  #spanAudioInfo {
    /* Positioned to the left of audio toggle */
    bottom: 24px;
    right: 70px;
  }
}

#spanAudioInfo a {
  color: #797979;
}

/* ***** Fonts ***** */

@font-face {
  font-family: "JetBrains";
  src: url("assets/fonts/JetBrainsMono-Thin.woff2") format("woff2");
  font-weight: lighter;
}
@font-face {
  font-family: "JetBrains";
  src: url("assets/fonts/JetBrainsMono-Regular.woff2") format("woff2");
  font-weight: normal;
}
@font-face {
  font-family: "JetBrains";
  src: url("assets/fonts/JetBrainsMono-ExtraBold.woff2") format("woff2");
  font-weight: bold;
}