@font-face {
    font-family: 'vt323';
    src: url('./fonts/vt323-v17-latin-regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
  }



:root{
    --big-heading-font-size: clamp(2rem, 5vw + 1rem, 3.5rem);

    --heading-font-size: clamp(1.5rem, 1.5vw , 2rem);
    --subheading-font-size: clamp(1.7rem, 1.8vw , 2.5rem);
    --button-font-size:clamp(1.5rem, 1.6vw, 1.8rem);

    --primary-color : #222222;
    --font-color: #fff;
    --secondary-color: #1b1b1b;
    --accent-color :#C30000 ;
}

body {
    min-height: 95vh ;
    font-family: 'vt323';
    color: var(--font-color);
    font-weight: 400;
    font-style: normal;
    background-color: var(--primary-color);
}

h1{
  font-size: var(--big-heading-font-size);
  text-align: center;
}

h2{
  font-size: var(--subheading-font-size);
  text-align: center;
}

.dualImages:hover , .top:hover,.pushDown:hover{
  color: var(--accent-color);
}

a{
  color: var(--font-color);
  font-style: normal;
  text-decoration: none;
  font-size: var(--subheading-font-size);
}

nav{
  position: absolute ;
  bottom: 0;
 
}
.navBar{
  width: max(100vw, 500px);
  display: flex;
  padding-inline: max(1vw, 15px) ;
  justify-content: space-between;
  /* background-color: var(--secondary-color); */
}

.navLogo h1{
  font-size: var(--big-heading-font-size);
}

.navitems{
  display: flex;
  align-self: center;
}

.navElement{
  margin-inline: max(.5vw, 10px) ;
}

.mainSection{
  margin-inline: auto;
  /* margin-block: max(2vw, 20px); */
  width:  90%;
  min-height:80vh;
}

.row{
  display: flex;
  flex-wrap: wrap;
  align-self: center;
  margin-block: max(1vw, 10px);
}

.col{
  align-self: baseline;
  width: max(33.3333333333333%,200px);
}

.left{
  text-align: left;
}

.right{
  text-align: -webkit-right;
}

.middle{
  text-align: -webkit-center;
}

.col img, .col h2{
  width: max(25%, 100px);
  cursor: pointer;
}

#parallax {
  background-image: url("../assets/eye/blink.gif"),url("../assets/eye/eyeLine.png"),url("../assets/eye/Pupil.png"), url("../assets/eye/Eyeframe.png");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  background-position: 50% 60%;
  background-size: 15%;
  min-height: max(200px, 50vh);
}

.pushDown{
  margin-top: max(1vw, 25px);
}

.pushUp{
  /* margin-top:  min(-4vw, -60px); */
}

.dualImages{
  margin-block: max(2vw, 15px);
}

.dualImages img , .dualImages h2 {
 width: max(30%, 150px) ;
}

.flexBottom{
  align-self: flex-end;
}

.noMargin{
  margin-top: 0;
}

.top{
  align-self: center;
}

.muteButton{
  position: absolute;
  top: 20px;
  right: 20px;
}

button{
  margin: .5%;
  /* border: 1px solid #fff; */
  border: none;
  background-color: #1b1b1b00;
  color: #fff;
  border-radius: 30px;
  font-family: 'VT323';
  font-size: var(--button-font-size);
  letter-spacing: 2px;
  padding: 5px 15px;
  width: max-content;
}

button:hover{
  color: var(--accent-color);

}

.red{
  color: var(--accent-color);
  border: 1px solid var(--accent-color);
}


.popup{
  border-radius: 10px;
  background-color: var(--secondary-color);
  position: fixed;    
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50%;
  
}

.closeButton{
  position: absolute;
  cursor: pointer;
  right: 1%;
  top: 2%;
}
.popUpContent{
  display: flex;
  min-height: max(30vh, 300px);
}

.popUpContent h2{
  font-size: clamp(2rem, 3vw + 1rem, 2.5rem);
  margin-inline: auto;
  align-self: center;
}

.popUpContent h2:hover{
  color: var(--accent-color);
}

.info{
  border-radius: 10px;
  padding: max(4vw, 10px);
  padding-top: max(2vw, 5px);
  border: 5px solid var(--accent-color);
}
.title{
  display: flex;
  justify-content: center;
  padding-block-end: max(1vw, 10px) ;
}
.info img{
  max-width: max(8vw, 50px);
}

.info h1{
  align-self: flex-end;
  padding-inline: max(2vw, 15px);
}

.paragraph{
  padding-block-start: max(2vw, 15px) ;
}

#infoPopup{
  display: none;
}

canvas {
  background-color: var(--primary-color);
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1 ;
}



.mobileView{
  display: none;
}

#demo, #leaderboardID {
  display: none;
  padding-top: 20px;
  text-align: center;
}

/* #demo button{

  margin: .5%;
  border: 1px solid #fff;
  background-color: #1b1b1b;
  color: #fff;
  border-radius: 30px;
  font-family: 'VT323';
  padding: 5px 15px;
  width: max-content;
} */

#demo h2:hover, #leaderboardID h2:hover{
  color: #C30000;
}



.walletconnect-qrcode__base{
  max-height: 100vh !important;
}
.walletconnect-modal__base {
  max-height: 80vh !important;
}
.walletconnect-qrcode__image {
  height: 50vh !important;
}
.col{
  align-self: auto;
  width: max(33.3333333333333%,200px);
}
.paradoxTitle{
  margin: 25px 0px;
}
.col img,
.col h2,
.rampp-minting-container{
  margin: auto;
}
.mt-34{
  margin-top: 38px;
}
#parallax {
  background-image: url(../assets/eye/blink.gif),url(../assets/eye/eyeLine.png),url(../assets/eye/Pupil.png), url(../assets/eye/Eyeframe.png);
  background-repeat: no-repeat;
  background-attachment: inherit;
  background-position: center !important;
  background-size: contain;
  min-height: max(200px, 150px);
}

@media (max-width:490px) {
  .walletconnect-qrcode__image {
    height: auto !important;
  }
  .col img{
    width: max(25%, 120px);
  }
  .muteButton {
    z-index: -1;
  }
}