/*Color and Font of the page*/
body{
    color: #D79E06;
    font-family: 'Lato', sans-serif;  
    background-color: #e9eef1;
}

/*Background image styling*/
img {
    top:0%;
    left:0%;
    margin:0;
    height: 100%;
    width: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
    position: absolute;
    z-index: -1;
}


/*Logo and Level header styling*/
#title h1, #title h2 {
    width: 100%;
    text-align: center;
    margin-top: 20px;
    color:#D79E06;
    font-weight: bold;
    text-shadow: 3px 2px rgba(0, 72, 62, 1);
}

/*Font for all Subheaders*/
h2 {
    font-family: 'Marhey', cursive;
}

/*Game introduction text styling */
#title p{
    width: 100%;
    text-align: center;
    color:#D79E06;
    font-weight: bold;
    letter-spacing: 2px;
}

/*Game introduction and game container area*/
.game-section{
    width:100%;
    margin:0;
    display: flex;
    justify-content: center;   
}

/*Game subheader and short description styling*/
#intro-description{
    text-align: center;
}

#intro-description h2{
    margin-top: 10px;
    margin-bottom: 30px;
}

#intro-description p{
    padding: 0.5rem 2rem 0  ;
}

/*Game introduction and navigation container*/
#game-info{
    height: 70vh;
    width: 50vw;
    margin-top: 20px;
    padding: 2rem;
    border-radius: 25px;
    background: rgba(0, 72, 62, 0.9);
    border: 2px solid #D79E06;
}

/*List styling in How to play section */
ol{
    text-align: left;
}

ol li {
    margin-left: 3px;
}

/*Timer turns and game background music container*/
.game-scores{
    margin-top:60px;
    margin-right:1rem;
    margin-left: -6%;
}

/*All navigation buttions*/
.btn{
    font-family: 'Marhey', cursive;
    background-color: #CF9EAC;
    color:white;
    font-weight: 700;
    font-size: x-large;
    border:none;
    justify-content: center;   
}

/*Return button styling udjusted*/
.return {
    max-height: 50px;
    padding-top: 1%;
}

/*Cursor styling on hover*/
/*Cursor emoji taken from https://www.emojicursor.app/*/
.btn:hover{
    background-color: #D79E06;
    color:white;
    cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'  width='40' height='48' viewport='0 0 100 100' style='fill:black;font-size:24px;'><text y='50%'>🍀</text></svg>") 16 0,auto; /*!emojicursor.app*/
}

/*Playing cards container*/
.card-area{
    height: 70vh;
    width: 50vw;
    display: grid;
    grid-template-columns: repeat(4,1fr);
    grid-row: auto;
    gap: 0.5rem;
    margin-top: 20px;
    padding: 10px;
    border-radius: 25px;
    background: rgba(0, 72, 62, 0.9);
}

/*Card styling, positioning and tranform effect to enable turning the card*/
/*Cursor emoji taken from https://www.emojicursor.app/*/
.card{
    position:relative;
    margin:1px;
    border-radius: 25px;
    border:none;
    transform-style: preserve-3d;
    transition: transform 1s ease-in-out;    
    background-color:  rgba(255, 255, 255,0);
    cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'  width='40' height='48' viewport='0 0 100 100' style='fill:black;font-size:24px;'><text y='50%'>🍀</text></svg>") 16 0,auto; /*!emojicursor.app*/       
}


/*Card image styling and positioning within the card*/
.card img {
    height:100%;
    width:100%;
    margin:1px;
    border-radius: 25px;
    object-fit: scale-down;
   
}

/*Front of the card styling and rotation added to enable the card to turn around*/
.card-front{
   position: absolute;
   height: 100%;
   width: 100%;
   margin:1px;
   border-radius: 25px;
   background: linear-gradient(blue, purple);
   backface-visibility: hidden;
   color: white;
   visibility: visible;
   transform: rotateY(180deg);
   text-align: center;
}

/*Card text positioning*/
.card-front p {
    margin-top: 22%;
    font-size: xx-large;
    
}

/*Back of the card styling and positioning*/
.card-back{
    position: absolute;
    height: 100%;
    width: 100%;
    border-radius: 25px;
    background: linear-gradient(135deg, #00C9AC 30%, #fabeb4 50%, #fca99b 80%);
    backface-visibility: hidden;
      
 }

 /*Turn card arround class called when a card is clicked*/
 .turn-card{
    transform: rotateY(180deg);
       
 }

 /*'How to play' and 'Play' section styling  which si displayed when the buttons in game-info area in the main page are clicked*/
.btn-output{
   margin-top: 2%;
   padding: 0.5rem;
   text-align: center;
}

 /*Level A1 and Level B1 button styling*/
.level-A1 {
    margin-top: inherit;
}

.level-A1, .level-B1  {
    font-size: 5rem;
    font-family: 'Lato', sans-serif;
    font-weight: 900;
    padding-top: 5%;
}

 /*Result box container styling and positioning which is displayed when all cards are matched or the time is over*/
#result{
    height: 70vh;
    width: 50vw;
    margin-top: 20px;
    padding: 10px;
    border-radius: 25px;
    border: 2px solid #D79E06;
    background: rgba(0, 72, 62, 0.9);
    /*font-size:80px;*/
    text-align: center;
    vertical-align: middle;
}

/*Result text when user fails -font size and positioning*/
.result-text{
    margin-top: 18%;
    font-size:80px;
}

/*Result text when user wins- ont size and positioning*/
.win-text{
    margin-top: 10%;
    font-size:80px;
}

/*Result navigation buttons styling adjustment*/ 
#result a{
    margin-top: -20%;
    display: block;
    margin: 5px;
}

/*Name and score Save button */
#result button{
    display: block;
    margin: 5px;
    width: 99%;
}

/*Name imput field*/
#name-value{
    display: block;
    margin: 5px;
    background-color: #D79E06;
    width: 99%;
}



/*Score list positioning*/
#score-list{
    margin-left: 40%;
    font-size: large;
}

.no-score{
    margin-top: 18%;
}

 /*Footer styling and positioning*/
footer{
    text-align: center;
    margin-top: 20px;
    color:#D79E06;
}

footer span{
    margin-left: 10px;
}

footer a{
    text-decoration: none;
    color:#D79E06
}

footer a:hover{
    text-decoration: none;
    color:#CF9EAC;
}


/*404 error page styling*/
#error-container{
    height:100vh;
    width:100%;
    background: url(../images/404error-image.jpg);
    background-size: cover;
    background-position: center;
    overflow: hidden; 
    background-repeat: no-repeat;
  
}

#error404{
    height: 60vh;
    position: absolute;
    background: rgba(0, 72, 62, 0.9);
    top: 15%;
    left: 10%;
    text-align: center;
    border: 2px solid #D79E06;
    border-radius: 25px;
    padding: 1.5rem;
}

#error404 h2{
    margin-top: 20%;
    margin-bottom: 2%;
}

#error404 h3{
    margin-top: 3%;
    margin-bottom: 3%;
}

#error404-btn{
    padding: 1rem;
    margin-top: 3%;
    margin-bottom: 3%;
}



@media (max-width: 1731px) {
    .btn-output{
        margin-top: 3%;
    }

    .card-front p {
        margin-top: 25%;
        font-size: x-large;
        
    }

}

@media (max-width: 1500px) {
    .level-A1, .level-B1 {
       padding-top: 6%;
    }

    .card-front p {
        margin-top: 15%;
    }

    .result-text{
        margin-top: 20%;
    }
}

@media (max-width: 1280px) {
   /*Scroll feature added for the text to prevent text overflowing on smaller devices */
    .btn-output{
        overflow: scroll;
    }

    ol{
        overflow: scroll;
    }  

    #title p{
        font-size: smaller;
    }

    .level-A1{
        margin-top: 3% !important;
    }

    .level-A1, .level-B1 {
        padding-top: 4%;
    }

    .return {
        padding-top: 2%;
    }

   .result-text{
        margin-top: 20%;
    }

    #result button{
        width: 98%;
    }
    
    #name-value{
        width: 98%;
    }

    #score-list{
        margin-left: 35%;
    }

    #error404{
        height:60%;
    }
     
    #error404 h2{
        height:10%;
    }
    
    #error404-btn{
        margin-bottom: 8%;
    }
}



@media (max-width: 1200px) {
    #game-info{
        height: 70vh;
        width: 65vw;
    }

}

     
@media (max-width: 950px) {
    #game-info, #result{
        height: 70vh;
        width: 70vw;
     }

    .card-area{
        height: 70vh;
        width: 80vw;
    }

    .card-front p {
        margin-top: 40%;
    }


    .game-scores{
        display: flex;
        position:absolute;
        margin-top: -5px;
        width: 100%;
    }

    #timer{
        margin-left: 22%;     
        margin-right: 2%;  
    }

    #turns-count{
        margin-right: 43%;
    }

    .level-A1{
        margin-top: 10% !important;
    }
    

    .level-A1, .level-B1 {
        padding-top: 15%;
    }

    .return {
        padding-top: 2%;
    }

    #error404 {
        padding: 0 2rem;
    }

    #error404{
        height:50%;
    }

    #error404 h2 {
        margin-top: 17%;
    }
}

@media (max-width: 800px) {
    .level-A1, .level-B1 {
        padding-top: 10%;
    }

     #timer{
        margin-left: 18%;     
        margin-right: 2%;  
    }

    #turns-count{
        margin-right: 50%;
    }

    #error404 {
        left: 10%;  
    }

    #error404 h2 {
        margin-top: 15%;
    }

}


@media (max-width: 700px) {
    #title p{
        font-size: 12px;
    }

    .level-A1, .level-B1 {
        padding-top: 12%;
    }

    .return {
        padding-top: 3.5%;
    }

    #intro-description p{
        padding: 0  1rem ;
    }

    #intro-description h2{
        margin-bottom: 30px ;
    }

    #timer{
        margin-left: 24%;     
        margin-right: 2%;  
    }

    #turns-count{
        margin-right: 35%;
    }

   .result-text {
        margin-top: 25%;
    }

    #score-list{
        margin-left: 30%;
    }

    .no-score{
        margin-top: 30%;
    }

    #error404 h3{
        margin-top: 5%;
        margin-bottom: 5%;
    }

    #error404-btn{
        margin-top: 2%;
        font-size: large;
    }

}


@media (max-width: 630px) {
    #title h2{
        margin-top: 40px;
    }


    .level-A1, .level-B1 {
    padding-top: 14%; 
    }

    #timer{
        margin-left: 20%;     
        margin-right: 2%;  
    }

    #turns-count{
        margin-right: 38%;
    }

    .result-text {
       font-size: 50px;
       margin-top: 40% ;
    }

    .win-text{
        font-size: 50px;
    }

    #score-list{
        margin-left: 25%;
    }

    #error404 {
        left: 15%;
        width: 70%;
        padding-bottom: 8%;
    }

}
    


@media (max-width: 500px) {
    #title h1, #title h2 {
        text-shadow: 2px 1px rgba(0, 72, 62, 1);
    }

    #title p{
        font-size: 10px;
    }

    #game-info, .card-area{
        height: 75vh;
        width: 90vw;
        border-radius: 25px;
        padding: 1.25rem;
    }
    

    #intro-description h2{
        margin-top: 20px;
    }

    #intro-description p{
        font-size:medium;
       
    }

    .level-A1 {
        margin-top: 12% !important;
    }

    .return {
        padding-top: 3%;
    }

     #title h2{
        margin-top: 30px;
    }

    .no-score{
        margin-top: 35%;
    }

    #timer{
        margin-left: 15%;     
        margin-right: 2%;  
    }

    #turns-count{
        margin-right: 40%;
    }

    .card-front p {
        font-size: medium;
        margin-top: 65%;

    }
    
   .result-text {
        margin-top: 55%;
    }

    .win-text {
        margin-top: 30%;    
    }

    #result button {
        width: 97%;
    }
    
    #name-value {
        font-size: smaller;
    }

}

@media (max-width: 380px) {
    #title h2 {
        margin-top: 25px;
    }
  
    #title p{
        font-size: 8px;
    }

    #intro-description h2{
        margin-top: 20px;
    }

    .level-A1 {
        margin-top: 0;
    }


    .game-scores{
        margin: -20px;
        padding: 1rem;  
   
    }

    .return {
        padding-top: 5%;
    }

    #timer{
        margin-left: 10%;     
        margin-right: 4%;  
    }

    #turns-count{
        margin-right: 6%;
    }

    #turns{
        width: fit-content;
    }

    .card-front p {
        margin-top: 55%;
    }

   .result-text{
        margin-top: 50%;
    }

    .win-text {
        margin-top: 15%;
        font-size: 30px;
    }

    #result button {
        width: 96%;
    }

    #score-list{
        font-size: medium;
    }

    .no-score{
        margin-top: 30%;
    }

    footer{
        margin-top: 10px;
    }

    #error404 {
        height: 65%;
    }

}

@media (max-width: 300px) {
    #title h1 {
        margin-top: 15px !important;
        font-size: medium;
    }

    #title h1, #title h2 {
        text-shadow: 1px 1px rgba(0, 72, 62, 1);
    }
    
    #title p{
        font-size: small !important;
    }

    #intro-description h2 {
        margin-top: 0;
    }

    #intro-description p {
        font-size: smaller;
    }

     #game-info{
        height: 75vh !important;
    }

    .btn{
        
        font-size: small !important; 
    }

    .level-A1{
        margin-top: 25% !important;
    }

    .level-A1, .level-B1{
        padding-top: 30%;
    }

    .win-text {
        margin-top: 30%;
      
    }

    footer{
        margin-top: 6px !important;
    }

    #error404 {
        height: 70%;
    }
}

@media (max-height: 850px) {

     /*Scroll feature added to 'How to play' section for the smaller devices */
    .btn-output{
        overflow: overlay;
    }

    ol{
        overflow: overlay;
    }  

    .level-A1, .level-B1 {
        font-size: 4rem;
    }
}

@media (max-height: 800px) {
        #intro-description h2 {
        margin-bottom: 20px;
    } 

    .btn{
        font-size: large;
    }

   
    footer{
        margin-top: 15px;
    }
    
    .level-A1, .level-B1 {
        font-size: 3rem;
         
    }

     .level-A1{
        margin-top: 5px;
    }

}


@media (max-height: 670px) {
   #game-info{
        height: 65vh;
        padding-top: 0;
    }

    #intro-description h2 {
        margin-top: 20px;
        margin-bottom: 10px;
    } 

    #title h1 {
        margin-top: 30px;

    }

    #error404 h2 {
        margin-top: 10%;
    }

}

@media (max-height: 570px) {
    #game-info{
        min-height: 500px;
    }
    
    #result{
        min-height: 450px;
    }
    
    img{
        min-height: 700px;
    }


}

@media (max-height: 550px) {

    #intro-description h2 {
         margin-bottom: 5px; 
   }

    #intro-description p {
        padding-top:0;
    }

    p{
        font-size: small;
    }

    #title h1 {
        margin-top: 10px;
    } 

    p{
        font-size: medium;
    }

    .btn{
        line-height: 2px;
        margin: -1px;
    }

    .btn{
        font-size: large;
    }

    #game-info {
        height: 70vh;
        margin-top:0;

    }


    .level-A1, .level-B1 {
        height: 100px;
        
    }

    footer{
        margin-top: 10px;
    }

    p{
        font-size: small;
    }

   
    #error404 a{
        height:unset;
        line-height: unset;

    }
}


@media (max-height: 400px) {
    .btn {
        font-size: x-small;
        height: 28px;
        padding-top: 15px;
    }
}