@import url('https://fonts.googleapis.com/css2?family=Jost&family=Press+Start+2P&display=swap');

:root {
  --basicblue: #20212400;
  --activeblue: #07070775;
  --shadow-top: #ae0930;
}
.body{
  text-align: center;
  margin: 0 0 0 0;
}



.background{
  width: 100%;
  height:100%;
  position: fixed;
  background-size: cover;
  z-index: 0;
  bottom: 0px;
  transition: all 0.5s ease;
  background-image: url("../assets/sprites/bg.png"), url("../assets/sprites/bgGreen.png");
}

.distancer{
  width: 100%;
  height:50px;
  position: relative;
}


.logo{
  margin-top: -200px;
  margin-bottom: -200px;
  width: 600px;
  height:600px;
  position: relative;
  background-image:  url("../assets/sprites/Logo600.png");
  background-size: cover;
  margin-left: auto;
  margin-right: auto;
  transition: all 0.5s ease;
}

.linkCard{
  cursor: pointer;
  width: 100%;
  line-height: 50px;
  height:50px;
  margin-bottom: 15px;
  border-radius: 12px;
  font-size: 14px;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  box-shadow: 1px 6px 5px -4px var(--shadow-top) inset; 
  text-align: center;
  font-family: "Press Start 2P", bold;
  color: #ffffff;
  z-index: 999;
  transition: all 0.5s ease;
}
.cardBox{
  cursor: pointer;
  width: 90%;
  max-width: 360px;
  line-height: 50px;
  height:50px;
  margin-bottom: 20px;
  border-radius: 12px;
  font-size: 14px;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  font-family: "Press Start 2P", bold;
  color: #ffffff;
  z-index: 999;
}



.networkSwitchContainer{
  cursor: pointer;
  width: 95%;
  height:50px;
  max-width: 300px;
  line-height: 50px;
  position: relative;
  display: flex;
  border-radius: 12px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 20px;
  text-align: center;
  font-family: "Press Start 2P", bold;
  font-size: 14px;
  color: #ffffff;
  overflow: hidden;
}

.networkSwitch{
  cursor: pointer;
  width:50%;
  height:100%;
  position: relative;
  background-color: var(--activeblue);
  border-radius: 12px 0px 0px 12px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 25px;
  text-align: center;
  font-family: "Press Start 2P", bold;
  font-size: 14px;
  color: #ffffff;
  user-select: none;
  box-shadow: 1px 6px 5px -4px var(--shadow-top) inset; 
  transition: box-shadow 0.5s ease;
}

.networkSwitch:hover{
  font-size: 14px;
}
.networkSwitch:focus{
  font-size: 14px;
}

.testnetWorkSwitch{
  background-color: var(--basicblue);

  width:50%;
  user-select: none;
  border-radius: 0px 12px 12px 0px;
}

.seasonButtonContainer{
  cursor: pointer;
  width: 95%;
  max-width: 320px;
  height:50px;
  line-height: 50px;
  position: relative;
  display: flex;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 25px;
  text-align: center;
  font-family: "Press Start 2P", bold;
  font-size: 14px;
  color: #ffffff;
}

.seasonButton{
  width: 50px;
  height:50px;
  background-image: url('../assets/sprites/left-arrow.png');
  background-size: 50% 50%;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 12px;
  box-shadow: 1px 6px 5px -4px var(--shadow-top) inset; 
  transition: box-shadow 0.5s ease;
}

.seasonButton:hover{
  background-size: 60% 60%;
}

.seasonButtonRight{
  background-image: url('../assets/sprites/right-arrow.png');

}

.seasonContainer{
  width: calc(100% - 100px);
  height:50px;
  background-color: var(--activeblue)
}

.seasonText{
  width: 100%;
  height:50px;
  border-radius: 12px;
  box-shadow: 1px 6px 5px -4px var(--shadow-top) inset; 
  transition: box-shadow 0.5s ease;
}

.shadowBox{
  border-radius: 12px;
  box-shadow: 1px 3px 10px 2px #090000;
}

.smallMargin{
  margin-left: 10px;
  margin-right:10px;
}


.footer{
  bottom: 20px;
  display: flex;
  width:100%;
}

.footerLink{
  color: #ffffff;
  cursor: pointer;
  font-family: "Press Start 2P", bold;
  font-size: 12px;
}
.footerDistancer{
  color: #ffffff;
  width: 40px;
  text-align: center;
  font-family: "Press Start 2P", bold;
  font-size: 12px;
}
.linkCard:hover{
  background-color: var(--activeblue);

}
.textContainer{
  width: 200px;
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
  line-height: 1.2;
  color: antiquewhite;
  z-index: 10;
  position: fixed;
  bottom: 20px;
  left: calc(50% - 100px);
  text-align: center;
}
.coloredText{
  color: white;
  cursor: pointer;
}
.coloredText:hover{
  font-weight: 700;
}

.mintContainer{
  visibility: hidden;
}

.logo{
  margin-top: -200px;
  margin-bottom: -200px;
  width: 600px;
  height:600px;
  position: relative;
  background-image:  url("../assets/sprites/Logo600.png");
  background-size: cover;
  margin-left: auto;
  margin-right: auto;
  transition: all 0.5s ease;
}


.logoContainer{
  width: 100%;
}
@media screen and (max-width: 600px) {
  .linkCard {
    line-height: 50px;
    height:50px;
    margin-bottom: 15px;
    border-radius: 12px;
    font-size: 14px;
  }

  .logo{

    position: relative;
    margin-top: -35vw;
    margin-bottom: -40vw;
    width: 100%;
    height: auto;
    object-fit: contain;
    aspect-ratio: 1/1; /* Set the aspect ratio based on your image */
  }
  .cardBox{
    line-height: 50px;
    height:50px;
    margin-bottom: 15px;
    border-radius: 12px;
  }

  .textContainer{
    bottom: auto;
    top: 20px;
  }
}