h2{
    color: white;
}

nav{
  overflow-x: hidden;
}


canvas {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
}


a{
  background-color: transparent !important;
  transition: scale 0.1s;
}

a:hover{
  color: #3333FF !important;
  scale:0.9;
}

a:hover svg {
  filter: drop-shadow(0 0 5px #3333FF);
  fill: #3333FF;
  width: 5vw;
}

/* for discord */
a:hover img { 
  filter: drop-shadow(0 0 5px #3333FF);
  fill: #99CCFF;
}

.main-content{
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

nav{
  background-color: transparent;
}

#hide-galaxy{
  bottom: 0 !important;
  position: absolute;
  background-color: transparent;
  z-index: 999;
}

#hide-galaxy button{
  padding: 0.5em;
  border-radius: 25px;
  color: white;
  margin-bottom: 1vh;
  border-style: ridge;
  border-color: #99CCFF;
}

#hide-galaxy button:hover{
  filter: drop-shadow(0 0 5px rgb(255, 255, 255));
}

#hide-galaxy button:focus{
  outline: none;
}

.background{
  background: radial-gradient(circle, #080920 22%, #060719 100%) !important;
  color: white;
}

.bg-blue{
  background: #3333FF;
}

.hover-blue:hover{
  background: #33F9; 
}

.foreground{
  z-index: 999;
  position: relative;
}



#main-logo {
 overflow: hidden; 
}


#main-logo img{
  height: 25vh;
  filter: drop-shadow(0 0 5px #3333FF);
}

.discord img{
  height: 5vh;
}


#logo-2{
  width: max-content;
  top: 0;
  right: 0;
  position: fixed;
}

#logo-2 img{
  height: 15vh;
  filter: drop-shadow(0 0 5px #3333FF);
}


.main-content-div{
  z-index: 100;
  position: relative;
  background: transparent !important;
  width: 95vw;
  color: white;

  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  
}

.bg-whiteish{
  background-color: #060719bf;
  color: white;
}

.main-content-div table{
  border-style:solid;
  border-color: #3333FF;
  border-width: 1px;
  border-radius: 25px;
  color: white;
}

.main-content-div table th{
  filter: drop-shadow(0 0 5px #3333FF);
}

.blue-shadow{
  box-shadow: 0 0 10px #FFF9, 0 0 10px #33F9, 0 0 10px #33F9;
}

form label{
  color: white !important;
  filter: drop-shadow(0 0 5px #3333FF);
}

form input{
  color: white !important;
  background-color: #060719 !important;
  filter: drop-shadow(0 0 1px #3333FF);
}

.white-color{
  color: white !important;
}

.light-blue{
 color: #99CCFF !important;
}

.b1{
  margin-bottom: 15vh;
}

.challenges{
  background-color: #000115 !important;
  border-style: solid;
  border-color: #c4cdff;
  border-width: 2px;
  color: white !important;
}

.challenges:hover{
  box-shadow: 0 0 10px #3333FF, 0 0 10px #3333FF, 0 0 10px #3333FF !important;
}


.button-a {
  position: relative;
  padding: 0.3em 0.5em;
  color: #99CCFF;
  text-decoration: none;
  overflow: hidden;
  transition: 0.2s;
  display: flex;
  align-content: center;
  justify-content: center;
  text-align: center;
}
.button-a:visited {
  color: #99CCFF;
}
.button-a:hover {
  color: #99CCFF;
  border-radius: 7px;
  box-shadow: 0 0 10px #3333FF, 0 0 10px #3333FF, 0 0 10px #3333FF;
  transition-delay: 100ms;
}
.button-a span {
  position: absolute;
  display: block;
}

.button-a span:nth-child(1) {
  top: 0;
  left: -100%;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #99CCFF);
}

.button-a:hover span:nth-child(1) {
  left: 100%;
  transition: 200ms;
}

.button-a span:nth-child(3) {
  bottom: 0;
  right: -100%;
  width: 100%;
  height: 2px;
  background: linear-gradient(270deg, transparent, #99CCFF);
}

.button-a:hover span:nth-child(3) {
  right: 100%;
  transition: 1s;
  transition-delay: 50ms;
}

.button-a span:nth-child(2) {
  top: -100%;
  right: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(180deg, transparent, #99CCFF);
}

.button-a:hover span:nth-child(2) {
  top: 100%;
  transition: 1s;
  transition-delay: 100ms;
}

.button-a span:nth-child(4) {
  bottom: -100%;
  left: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(360deg, transparent, #99CCFF);
}

.button-a:hover span:nth-child(4) {
  bottom: 100%;
  transition: 1s;
  transition-delay: 450ms;
}



@media screen and (max-width: 651px) {

  #main-logo img{
    height: 17vh;
  }
  .discord img{
    height: 4vh;
  }
}