body{
    font-family: 'TT Norms';
}

.backgroundImage {
    position: fixed;
    background-image: url(../assets/bg.png);
    background-position: center bottom;
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    z-index: -1;
     /* min-height: max(95vh, 700px); */
}

.row{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.col{
    min-width: 20%;
    width: 100%;
    text-align: end;
}

#failedStatus, #successfulStatus, #processingStatus{
    display: none;
}


.col button{
    width: auto;
    padding-inline: 1em;
}

.main_logo{
    width: 100%;
    padding: max(10px, .3vw);
    text-align: -webkit-center;
}

.main_logo img{
    max-width: 20%;
    margin-block: -10px;

}

.container{
    background-color: rgba(0, 29, 49, 0.72);
    text-align: center;
    margin-inline: auto;
    padding: max(1vw, 15px);
    max-width: 80%;
    padding: max(20px, 4vw);
}


.main{
    display: flex;
    flex-direction: column;
    position: relative;
    font-family: 'TT Norms';
    font-weight: 400;
    /* min-height: 70vh; */
    color: var(--secondary-color);
    font-style: normal;
    justify-content: center;
    align-items: center;
}

.main_buttons{
    margin: auto;
    width: 70%;
}

.big_button{
    position: relative;
    border: 3px solid var(--primary-color);
    width: 50%;
    margin: max(5px, 1vw);
    margin-block:max(15px, 2vw);
    text-align: left;
    padding: max(30px, 4vw);
    overflow: hidden;
    padding-left: 20px;
    border-radius: 0px;
    background-color: #fff;
}



.big_button:hover{
    border:3px solid var(--secondary-color);;
    background-color: #0075B7;
}

.big_button:hover h2{
    color: #fff;
}

.big_button:hover img{
    width: 50%;
    mix-blend-mode: normal;
}

.big_button h2{
    font-size: clamp(1.2em, 4vw, 5em);
    color: var(--primary-color);
}

.big_button img{
    mix-blend-mode: luminosity;
    position: absolute;
    width: 48%;
    right: -40px;
    bottom: -30px;
}

.lock{
    position: absolute ;
    width: 5% ;
    left: 20px;
    top:-25px;
}

.big_button:hover .lock{
    fill: #ffffff;
}


.countdown{
    position: absolute;
    top: 0;
    width: 94%;
    display: flex;
    background-color: #fff;
    color: #000;
    border-inline: 2px solid #fff;
    justify-content: center;
    font-size: 0.9rem;
    font-weight: 600;
}

.countdown div{
    width: 25%;
    text-align: center;
}

#claimDash{
    min-width: 50%;
}

.nftPreloadingAnim{
    position: absolute;
    width: 100%;
    height: 100%;
    bottom: 0px;
    /* background-color: var(--primary-color); */
    backdrop-filter: blur(10px);
    text-align: center;
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
}


.stake_unstake_header{
    position: relative;
    display: flex;
    border-bottom: 2px solid #fff;
    width: 90%;
    margin: auto;
    margin-bottom: 10px;
    text-align: center;
    justify-content: center;
}

.stake_unstake_header h2{
    background-color: #fff;
    width: fit-content;
    padding: 5px 15px;
    color: #000;
    font-size: clamp(1em, 1.2vw, 2em);
    cursor: pointer;
}

.stake_unstake_header .heading_active{
        color: #fff;
        background-color: #00ADF0;
}

.stake_button{
    width: 20% !important;
    background-color: #000;
    border: 2px solid #fff;
    color: #fff;
    border-radius: 0px;
    margin-bottom: -10px;
    padding: 0.5em;
    text-align: center;
    cursor: pointer;
}

.stake_button:disabled{
    color: #959595;
    border-color:  #959595;
}

.stake_button:hover{
    color: black;
    border-color: black;
    background-color: #fff;
}

.no_nfts_found{
    width: 75vw;
    min-height: 30vh;
    display: flex;
    justify-content: center;
    align-items: center;
    scale: 1.3;
}

.checkbox{
    width: 20px;
    height: 20px;
    background-color: #fff;
    position: absolute;
    top: 5px;
    right: 10px;
}

.checkbox:focus{
    outline: none ;
}

.splideone{
    /* display: none; */
    position: relative;
    text-align: -webkit-center;
}

.CLAIMED {
    background: var(--accent-color);
}

.splide__track--draggable {
    padding-left: 0px;
    padding-right: 0px;
    width: 90%;
    padding-block: 1em;
}

.nftSlot {
    max-width: 95%;
}

.nftSlot img{
    border: 2px solid #fff;
    border-bottom: none;
}

#claimForm{
    width: 100%;
    /* display: none; */
}
.main_buttons_big{
    display: flex;
}

input{
    padding:.5em;
    margin: .2em;
    border: none;   
}

input:focus{
    outline: 2px solid #000;
}

form{
    width: 75%;
    margin: auto;
}

.formInputs{
    margin: 1em;
    text-align:left ;
}

.formInputs *{
    margin: .2em;
}
.custom{
    width: 100%;
    display: flex;
}
.guidelines{
    width: 60%;
}
textarea{
    width: 100%;
}
.imageContainer{
    width: 40%;
}

#displayForm{
    width: 90%;
    margin: auto;
}

.buttonsDiv{
    padding-top: max(1vw, 15px);

    display: flex;
    justify-content: center;
}
.basicInputFeilds{
    text-align: center;
}

.basicInputFeilds input{
    width: 30%;
}
.backIcon{
    position:absolute;
    left: 0;
    background-color: #fff;
    bottom: 0;
    padding: 4px 15px;
    color: #000;
    cursor: pointer;
    z-index: 10;

}

.backIcon:hover{
    background-color: #000;
    color: #fff;
}

.address{
    width: max-content;
    max-width: 100%;
    margin: auto;
}

.address input{
    width: 32.4% !important;
}

.sendImage{
    margin: .2em;
    display: flex;
}

.sendImage img{
    width: max(30px, 8%);
}


.connetYourWallet{
    position: relative;
    padding-block: max(50px, 4vw);
    font-size: 1.8em;
}

.connetYourWallet span{
    color: var(--accent-color);
}

.nft_Button{
    width: 100%;
    margin: 0;
    /* font-weight: 900; */
    border: none;
    border: 2px solid #fff;
    border-radius: 0px;
    padding: 5px;
    font-size: .9em;
}

.stake_dash{
    padding-inline: 10px !important;
}
.claim_dash{
    padding-inline: 10px !important;
}

h1, h2 {
    font-weight: 800;
}

nav {
    padding-top: max(1vw, 10px);
    padding-inline: max(2vw, 10px);
}


nav img {
    width: max(100px, 10%);
}


.mainSection{
    display: flex;
    width: 90vw;
    margin: auto;
    padding-bottom: 100px;
}

.leftColumn{
    color: #1c1d23;
    max-width: 50%;
}

.leftColumn img{
    max-width: 35%;
}

.rightColumn {
    background-color: var(--primary-color);
    text-align: center;
    margin-inline: auto;
    border: 3.5px solid var(--accent-color);
    border-radius: 15px;
    padding: max(1vw, 15px);
    width: max(280px, 28vw);
}

.mainHeading {
    padding-block: max(.7vw, 10px);
    border-bottom: 2px solid var(--accent-color);
}

.stats {
    text-align: left;
    padding-block: max(.6vw, 10px);
    border-bottom: 2px solid var(--accent-color);
}

.subheading {
    display: flex;
    justify-content: space-between;
    padding-bottom: 5px;
    padding-inline: max(.3vw, 5px);
}

.nftImage {
    width: max(16vw, 180px);
    margin-inline: auto;
    margin-block: max(1vw, 10px);
    border-radius: 10px;
    background-color: #1c1d23;
}

.nftImage img {
    border-radius: 10px 10px 0 0;
}

.canMint {
    padding-block: 5px;
    margin-top: 10px;
    background-color: white;
    color: black;
    font-family: 'Anton';
    border-radius: 5px;
}

.nftImage input {
    width: 100%;
}

button:disabled {
    filter: grayscale(1);
}

#inputButton {
    display: none;
}

.nalikesFooter {
    background-color: var(--primary-color);
    position: fixed;
    bottom: 0;
    width: 100%;
}

.nalikesFooter h3 {
    font-size: var(--paragraph-font-size);
    padding-block: 5px;
    display: flex;
    justify-content: center;
    place-items: center;
}

.nalikesFooter img {
    max-width: max(4%, 50px);
}

.cryptoButton {
    display: flex;
    justify-content: center;
    align-content: center;
}

.cryptoButton img {
    width: max(10px, 9%);
}


.connectWallet {
    width: 96%;
    /* padding: max(2vw, 10px); */
    text-align: center;
    margin: auto;
}

.connectWallet button {
    width: 100%;
    font-weight: 600;
    font-size: 1em;
    background-color: #fff;
    color: #000;
    border-radius: 0;
    border-color: #000;
    transition: all 0.1s ease-in-out;
    letter-spacing: .5px;
    cursor: pointer;

}

.connectWallet button:hover {
    background-color: #0075B7;
    color: #fff;
    border-color: #fff;
}



.disconnectButton {
    display: none;
    justify-content: center;
    align-content: center;
    text-decoration: underline;
}

#btn-disconnect{
    background-color: #0075B7;
    color: #fff;
    border-color: #fff;
  }

.disconnectButton:hover {
    
}

.popup {
    min-height: 100vh;
    width: 100vw;
    position: fixed;
    backdrop-filter: blur(5px);
    z-index: 1;
    /* needs to be flex */
    display: none;
    justify-content: center;
    place-items: center;
}

.popupBox {
    width: max(300px, 22.5vw);
    background-color: #fff;
    text-align: center;
    min-height: 25vh;
    /* border-radius: 10px; */
    border: 2px solid #000;
    padding: max(1vw, 5px);
    text-align: -webkit-center;
}

.popup h1 {
    font-weight: 700;
    color: #000;
    font-size: clamp(1rem, 1.3vw, 2rem);
}

.popup p{
    font-family: 'VarelaRound';
    color: #000;
    padding-inline: inherit;
}


.popup img {
    max-width: 30%;
    margin: max(1.5vw, 10px);
}

.popup h2 {
    font-size: clamp(1rem, 1.1vw, 2rem);
    font-family: Arial, Helvetica, sans-serif;
    color: #959595;
    font-weight: 400;
    padding-bottom: 10px;
}

.popup a:hover{
    color: var(--accent-color);
}

.popupHeading {
    display: flex;
}

.statusHeading {
    width: 94%;
    padding-left: 6%;
}

.closeX {
    width: 5%;
    text-align: right;
    color: #000 !important;
    font-family: Arial, Helvetica, sans-serif;
    cursor: pointer;
    font-size: large !important;
}

.splide__arrow--next {
    right: 0em !important;
}

.splide__arrow--prev {
    left: 0em !important;
}
.preloading {
    display: flex;
    background-color: #fff;
}

.preloading img {
    max-width: 30%;
    /* -webkit-animation: flickerAnimation 2.5s infinite;
    -moz-animation: flickerAnimation 2.5s infinite;
    -o-animation: flickerAnimation 2.5s infinite;
    animation: flickerAnimation 2.5s infinite; */
}

.nftpaypopup {
    width: 100%;
    height: 100%;
    position: absolute;
    backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    justify-content: center;
}

#nftpaypopup {
    display: none;
}
.nftpay_iframe {
    height: max(510px, 65vh);
    border: none;
    border-radius: 10px;
    background-color: white;
    padding: 2vw;
}

.closeNFTPay {
    width: 5%;
    text-align: left;
    color: #8c4bdc;
    font-family: "VarelaRound";
    cursor: pointer;
    position: absolute;
    right: 4%;
    top: 2%;
}

.nftpayinner {
    position: relative;
    
}

* {
    transition: all 0.1s ease-in-out;
}

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

    50% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-o-keyframes flickerAnimation {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-moz-keyframes flickerAnimation {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-webkit-keyframes flickerAnimation {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}


.spinner {
    display: flex;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    /* margin: max(2vw, 40px); */
    background: radial-gradient(farthest-side, var(--accent-color) 94%, #0000) top/5px 5px no-repeat,
        conic-gradient(#0000 40%, var(--accent-color));
    -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 5px), #000 0);
    animation: spinner-c7wet2 1s infinite linear;
}

.bigSpinner{
    width: 5rem;
    height: 5rem;
    margin: max(2vw, 40px);
    background: radial-gradient(farthest-side, var(--accent-color) 94%, #0000) top/9px 9px no-repeat,
    conic-gradient(#0000 40%, var(--accent-color));
-webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 9px), #000 0);
}

@keyframes spinner-c7wet2 {
    100% {
        transform: rotate(1turn);
    }
}

.footer{
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 80%;
    padding-top:80px ;
    padding-bottom: 10px;
    margin-inline: auto;
}

.social_media_icon{
    display: flex;
    cursor: pointer;
}


.social_media_icon a img{
    width: 70%;
}
.nav_menu{
    display: flex;
}
.nav_item{
    margin-inline: 10px ;
    font-weight: 600;
    color: #000;
    font-size: 1.4em;
    cursor: pointer;
}
#connecting-btn{
    justify-content: center;
    align-items: center;
}
#connecting-btn:hover{
    background-color: #fff;
    color: #000;
    border-color: #000;
    cursor: default;
}
#btn-disconnect{
    align-items: center;
    justify-content: center;
}

#displayForm{
    display: flex;
}
.claimOrder{
    width: 25%;
}
.claimOrder h2{
    background-color: #fff;
    border: 2px solid #000;
    color: #000;
    border-top: none;
}
.claimOrder img{
    border: 2px solid #000;
    
}

.sendImage input{
 width: auto !important;   
}