@import url(https://db.onlinewebfonts.com/c/01c2d48a8d3bbd9730fccb2354765d43?family=Montserrat+Medium);

* {
    box-sizing: border-box;
}

html, body {
    padding: 0;
    margin : 0;
    height : 100dvh;
    overflow:hidden;
}

.nt-wrapper {

    width: 100dvw;
    height: 100dvh;
    background-color: #000;

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

.nt-progress-bar-cont {
    width: 45%;
    max-width: 250px;
    height : 7px;
    /* border : 1px solid red; */
    position: relative;
}

.nt-progress-bar {

    width: 100%;
    height : 100%;
    border : 1px solid #333;
    border-radius: 3px;
    overflow: hidden;
    position: absolute;
}

.nt-progress {
    width : 1%;
    height : 100%;
    background-color: black;
    position: absolute;
}

.nt-ad-container {

    width: auto;
    height : auto;
    overflow: hidden;
    background-color: #FF6B00;
    position: absolute;
    display: none;
}


.nt-ad-container * {
    width: 100%;
    height : 100%;
    position:absolute;
    pointer-events: none;
}

.border {
    border : 1px solid #000;
    z-index: 999;
    pointer-events: none;
}

.hs{
   /*background-color: #ff000090;*/
   pointer-events: all;
   width:100%;
   left:50%;
   transform: translateX(-50%);
}
.hs-bgclick{
   height: 0%;
 }

.bg1 { 
    background: url('images/bg1.jpg') no-repeat center center;
    background-size: contain;
}
.bg2 { 
    background: url('images/bg2.jpg') no-repeat center center;
    background-size: contain;
}
.bg3 { 
    background: url('images/bg3.jpg') no-repeat center center;
    background-size: contain;
}
.cardfront1 { 
    background: url('images/cardfront1.png') no-repeat center center;
    background-size: contain;
}
.cardfront2 { 
    background: url('images/cardfront2.png') no-repeat center center;
    background-size: contain;
}
.cardfront3 { 
    background: url('images/cardfront3.png') no-repeat center center;
    background-size: contain;
}
.cardfront4 { 
    background: url('images/cardfront4.png') no-repeat center center;
    background-size: contain;
}
.cardfront5 { 
    background: url('images/cardfront5.png') no-repeat center center;
    background-size: contain;
}
.cardfront6 { 
    background: url('images/cardfront6.png') no-repeat center center;
    background-size: contain;
}
.cardfront7 { 
    background: url('images/cardfront7.png') no-repeat center center;
    background-size: contain;
}
.cardfront8 { 
    background: url('images/cardfront8.png') no-repeat center center;
    background-size: contain;
}
.cardfront9 { 
    background: url('images/cardfront9.png') no-repeat center center;
    background-size: contain;
}
.cardfront10 { 
    background: url('images/cardfront10.png') no-repeat center center;
    background-size: contain;
}
.cardfront11 { 
    background: url('images/cardfront11.png') no-repeat center center;
    background-size: contain;
}
.cardfront12 { 
    background: url('images/cardfront12.png') no-repeat center center;
    background-size: contain;
}
.cardpair1 { 
    background: url('images/cardpair1.png') no-repeat center center;
    background-size: contain;
}
.cardpair2 { 
    background: url('images/cardpair2.png') no-repeat center center;
    background-size: contain;
}
.cardpair3 { 
    background: url('images/cardpair3.png') no-repeat center center;
    background-size: contain;
}
.cardpair4 { 
    background: url('images/cardpair4.png') no-repeat center center;
    background-size: contain;
}
.cardpair5 { 
    background: url('images/cardpair5.png') no-repeat center center;
    background-size: contain;
}
.cardpair6 { 
    background: url('images/cardpair6.png') no-repeat center center;
    background-size: contain;
}
.cta { 
    background: url('images/cta.png') no-repeat center center;
    background-size: contain;
}
.endcopy1 { 
    background: url('images/endcopy1.png') no-repeat center center;
    background-size: contain;
}
.endcopy2 { 
    background: url('images/endcopy2.png') no-repeat center center;
    background-size: contain;
}
.endcopy3 { 
    background: url('images/endcopy3.png') no-repeat center center;
    background-size: contain;
}
.endcopy4 { 
    background: url('images/endcopy4.png') no-repeat center center;
    background-size: contain;
}
.start { 
    background: url('images/start.png') no-repeat center center;
    background-size: contain;
}

.introclouds { 
    background: url('images/introclouds.png') no-repeat center center;
    background-size: contain;
}
.introcopy1 { 
    background: url('images/introcopy1.png') no-repeat center center;
    background-size: contain;
}
.introcopy2 { 
    background: url('images/introcopy2.png') no-repeat center center;
    background-size: contain;
}


.logo { 
    background: url('images/logo.png') no-repeat center center;
    background-size: contain;
}

.game,.end{
    opacity:0;
}
.timer{
    font-family: "Monserrat Medium";
    font-size: 1.5rem;
    color:#fff;
    /*margin-top:30px;*/
    /*margin-left:15px;*/
    padding: 5% 5% 29% 1%;
    
    /*background-color: #ffa566;*/
    width: 10%;
    height: 8%;
}
.timer-container {
    position: relative;
    width: 30%;
    height: 7%;
    top: 10.8%;
    left: -10%;
    font-family: 'Monserrat Medium', sans-serif;
    font-weight: 900;
    font-size: 40px;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    /*background-color: #ffa566; */
    border-radius: 30px;
}
@media screen and (max-width: 768px) {
    .timer {
        font-size: 1.3rem; /* Adjust font size for smaller screens */
    }
}

@media screen and (min-width: 1200px) {
    .timer {
        font-size: 1.5rem; /* Adjust font size for larger screens */
    }
}
.cardscontainer{
    left:50%;
    transform:translateX(-50%);
    bottom: 15%;
    height: auto;
    width:78%;
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 columns */
    gap: 10px 10px;
    align-items: center;
    perspective: 2000px;

}
.card{
    position:relative;
    aspect-ratio: 166/210;
    width:100%;
    height: auto;
    transform-style: preserve-3d;
    pointer-events: all;
    box-shadow: 0px 0px 12px 2px rgba(0,0,0,0.2);
-webkit-box-shadow: 0px 0px 12px 2px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 0px 12px 2px rgba(0,0,0,0.2);
}
.cardfront,.cardback{
    backface-visibility: hidden;
}
.cardback{
    transform: rotateY(180deg);
}