@import url('https://fonts.googleapis.com/css2?family=Mouse+Memoirs&display=swap');
:root{
    --color-lightBlue:#ebf2fa;
    --color-blue:#427aa1;
    --color-darkBlue:#064789;
    --color-green:#679436;
    --color-yellowGreen:#cae900;
}

*{
    margin:0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Mouse Memoirs', sans-serif;
}
#appContainer{
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url("./assets/background.jpg");
    background-repeat: no-repeat;
    background-size: cover;
}

#root{
    background-color: var(--color-lightBlue);
    border-radius: 1rem;
    border: 2px solid var(--color-green);
    width: 80vw;
    height: 90vh;
    position: relative;
    padding: 0.5rem;
}

h1{
    font-size: 4rem;
    text-align: center;
}

h2{
    font-size:3rem;
    text-align: center;
}

h3{
    font-size: 2rem;
    text-align: center;
}

.inner { 
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0.5rem 1rem;
   
}

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

#backHomePage {
    font-size: 1.3rem;
    position: absolute;
    right: 2rem;
    bottom: 2rem;
}

p{
    font-size: 2rem;
    text-indent: 2rem;
    margin: 0.5rem;
}

/*welcome page*/



#welcomeTitle{
    margin:1rem;
    text-align: center;
    color: var(--color-darkBlue);
}

.buttonContainer{
    margin:2rem 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.buttonContainer h3{
    font-weight: lighter;
    margin-bottom: 1rem;
}

.start{
    font-size: 1.8rem;
}

.btn{
    color:var(--color-yellowGreen);
    background-color: var(--color-darkBlue);
    border: 2px solid var(--color-green);
    border-radius: 1rem;
    position: relative;
    width: 10rem;
    height: 3rem;
    cursor: pointer;
    transition: all 0.3s ease;
}
.btn:hover{
    transform: rotate(-5deg) scale(1.05);
    color: var(--color-darkBlue);
    background-color: var(--color-yellowGreen);
}





/*Animal Tour Page*/


#tourCardContainer{
    height: 25rem;
}
#tourCardContainer div{   
    display: flex;
    justify-content: center;
    align-items: center;
}

.tourImgContainer{
    margin: 2rem;
}

.tourImgContainer img {
    height: 22rem;
    width: 22rem;
    object-fit: contain;
}

.tourTableContainer{
    font-size: 1.3rem;
}

.tourTableContainer th{
    font-size: 1.8rem;
}
.tourTableContainer td{
    padding: 0.4rem 0.8rem;
}


#getData{
    font-size: 2rem;
    width: 14rem;
    position: absolute;
    bottom: 4rem;
}



/*Comparison Page*/

.chooseNumber{
    display: flex;
}
.chooseNumber div{
    font-size: 2.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--color-darkBlue);
    color: var(--color-yellowGreen);
    margin: 1rem;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    border:2px solid var(--color-green);
    cursor: pointer;
    transition: all 0.3s ease;
}
.chooseNumber div:hover {
    transform: rotate(15deg) scale(1.1);
    color: var(--color-darkBlue);
    background-color: var(--color-yellowGreen);
    
}

#sortSelect{
    display: none;
    font-size:1.5rem;
    position: absolute;
    bottom:2rem;
}

#sortSelect:hover{
    transform: rotate(0deg) scale(1);
}

#cardContainer{
    display: flex;
    justify-content: space-evenly;
    height: 23rem;
}

.card{
    margin: 0.5rem 1rem;
}

.card img{
    width: 10rem;
    height:10rem;
    object-fit: contain;
}

#comparisonTableContainer{
    font-size: 1.3rem;
}

#comparisonTableContainer td{
    padding: 0.2rem 0.5rem;
}

/*Memory Game Page*/



#startPage{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}


form{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    max-width: 80%;
    
}

form,input{
    font-size: 1.5rem;
    margin:0.5rem;   
}

label{
    margin:0.5rem 1rem;
    font-size: 2rem;
}

input{
    background-color: var(--color-lightBlue);
    color:var(--color-darkBlue);
    border:2px solid var(--color-green);
    border-radius: 1rem;
    padding: 0.5rem;
}

input::placeholder{
    color:var(--color-blue);
    opacity: 0.7;
}

input[type="checkbox"]{
    transform: scale(2.5);
    margin-right:1rem;
}

#showCount{
    display: none;
   
    justify-content: center;
    align-items: center;
    width:4rem;
    height:4rem;
    background-color:var(--color-darkBlue);
    color: var(--color-yellowGreen);
    font-size: 3rem;
    border-radius: 50%;
    border: 4px solid var(--color-green);
}

.disabled{
    pointer-events: none;
    opacity: 0.5;
}

.memorizingImg{
    width:23rem !important;
    height: 23rem !important;
    object-fit: contain;
}

#yesBtn,#noBtn{
    font-size: 1.8rem;
    width:20rem;
    margin:1rem;
}

.queButtons{
    display: flex;
    flex-direction: column;
}

.queBtn{
    font-size: 1.5rem;
    margin:0.3rem 1rem;
}

.questionContainer{
    padding:1rem;
    
}

#showHint{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 2.2rem;
    font-size: 1.2rem;
    padding:0 1rem;
    margin: 1rem; 
    border-radius: 0.5rem;
}

#trueAnswer{
    font-size: 1.5rem;
    margin: 0.5rem;
}


/*Media Queries*/

@media screen and (max-width:1200px){
    #cardContainer{
        flex-direction: column;
        justify-content: unset;
        overflow-y: scroll;
        scroll-behavior: smooth;
    }
    #cardContainer .card{
        display: flex;
        
    }
}


@media screen and (max-width:960px) {
    h1 {
        font-size: 2.5rem;
    }
    
    h2 {
        font-size: 2rem;
    }
    
    h3 {
        font-size: 1.8rem;
    }
    .btn{
        height: 2.5rem;
    }
    
    #getData {        
        bottom: 4rem;
        font-size: 1.5rem;
        width: 12rem;
    }
    #backHomePage {
        right:unset;
        bottom: 1rem;
    }
    #tourCardContainer{
        overflow-y: scroll;
        scroll-behavior: smooth;
        height: 40rem;
    }
    #tourCardContainer div {
        flex-direction: column;
    }
    .tourImgContainer {
        margin: 1rem;
    }
    .tourImgContainer img {
        height: 13rem;
        width: 13rem;
    }
    .tourTableContainer {
        font-size: 1.1rem;
    }
    .tourTableContainer th {
        font-size: 1.6rem;
    }
    .tourTableContainer td {
        padding: 0.1rem 0.5rem;
    }
    #sortSelect {
        font-size: 1.2rem;
        height: 2rem;
        bottom: 4rem;
    }
    .questionContainer {
        flex-direction: column;
    }
    .memorizingImg {
        width: 15rem !important;
        height: 15rem !important;
    }
    #showHint {    
        margin: 0.3rem; 
    }
    .queBtn{
        height: 2rem;
        font-size: 1.2rem;
    }
    

}
@media screen and (max-width:640px) {
    
    p {
        font-size: 1rem;
        text-indent: 1rem;
    }
    #tourCardContainer {
        height: 30rem;
    }
    #cardContainer .card{
        display: block;
    }
    .chooseNumber div {
        font-size: 2rem;
        margin: 0.3rem 0.5rem;
        width: 2.5rem;
        height: 2.5rem;
    }
    .labels{
        flex-direction: column;
    }
    label {
        margin: 0 0.5rem;
        font-size: 1.5rem;
    }
    .memorizingImg {
        width: 12rem !important;
        height: 12rem !important;
    }
    #yesBtn,
    #noBtn {
        font-size: 1.5rem;
        width: 15rem;
    }

}