@import url('https://fonts.googleapis.com/css2?family=Zain:ital,wght@0,200;0,300;0,400;0,700;0,800;0,900;1,300;1,400&display=swap');

:root{
    --border-color: rgba(255, 0, 0, 0);

    --soft-teal: rgba(100, 180, 180, 1);
    --misty-aqua: rgba(175, 220, 220, 1);
    --deep-slate: rgba(50, 70, 80, 1);
    --light-mint: rgba(230, 250, 250, 1);
    --deep-orange: rgba(242, 153, 74, 1);

    --hero-size: 20vw;
}


.empty-text{
    font-size: 2.5vw;
    font-weight: 400;
}

.empty-container{
    display: flex;
    justify-content: center;
    align-items: center;
    height: auto;
    width: 65%;
}

/******************************* default container styling *******************************************/

.container{
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid var(--border-color);
}


/******************************* quiz session elements *******************************************/


html, body{
    overflow-x: hidden;
    height: 100%;
    width: 100%;
}

*{
    font-family: 'zain';
}


#lottie-loading-animation{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translateX(-50%);
    display: none;
    justify-content: center;
    align-items: center;
    height: 20%;
    width: 20%;
}

.hero-content{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: auto;
    position: absolute;
    transform: translate(-50%, -50%);


}


.hero-image{
    height: var(--hero-size);
    width: var(--hero-size);
    background-color: var(--soft-teal);
    border-radius: 20px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border: 2px solid var(--deep-slate);
    
}

#hero1{
    top: 60%;
    left: 20%;

}

#image1{

}


#hero2{
    top: 40%;
    left: 80%;

}
#image2{
    background-image: url('../media/Screenshot\ 2025-12-10\ 142044.png');
}


textarea{
    color: var(--deep-slate);
    font-family: inherit;
    border: 4px solid var(--deep-slate);
    width: 45%;
    height: auto;
    overflow: hidden;
    border-radius: 10px;
    font-size: 2vw;
}
textarea:focus{
    border: 4px solid var(--deep-orange);
}



/******************************* name element selectors *******************************************/

body{
    color: var(--deep-slate);
    border: 2px solid var(--border-color);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    background-color: var(--misty-aqua);
    margin: auto;
    padding-bottom: 4vh;
}
header{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    font-size: 3vw;
    height: 10vh;
    width: 100%;
    border: 2px solid var(--border-color);
    background-color: var(--soft-teal);
}

#feedback{
    background-image: url('../icons/icons8-feedback-100.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    margin-right: 2vw;
    height: 90%;
    width: 5%;
    cursor: pointer;
}
#feedback:active{
    filter: brightness(55%);
}

.backdrop{
    height: 100%;
    width: 100%;
    position: fixed;
    top: -100%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(50,70,80,0.25);
    transition: top 0.5s ease-in-out;
    z-index: 10;
}
.backdrop-show{
    top: 50%;
}

.feedback-form{
    position: fixed;
    top: -100%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: auto;
    width: 50%;
    padding: 2%;
    border-radius: 20px;
    z-index: 11;
    transition: top 0.5s ease-in-out;
    background-color: var(--light-mint);
}

.feedback-show{
    top: 50%;
}

.feedback-form > div{
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height: auto;
}

.feedback-form > *{
    background-color: rgba(0,0,0,0);
    width: 100%;
}

fieldset > *{
    margin-bottom: 3vh;
    width: 70%;
}

fieldset > button{
    background-color: var(--deep-slate);
    color: var(--light-mint);
    height: auto;
    font-size: 3vw;
    border: none;
    border-radius: 20px;
}

fieldset > button:hover{
    background-color: var(--light-mint);
    color: var(--deep-slate);
}

#close-feedback{
    background-color: var(--light-mint);
    font-size: 1.5vw;
    border-radius: 10px;
    border: 3px solid var(--deep-slate);
}
#close-feedback:active{
    filter: brightness(75%);
}




footer{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    height: 7vh;
    width: 100%;
    border: 2px solid var(--border-color);
    background-color: var(--soft-teal);
    margin-top: 3vh;

}
h1{
    max-width: 30vw;
    text-align: center;
    border: 2px solid var(--border-color);
    color: var(--deep-slate);
}
form{
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    height: auto;
    width: 45vw;
    background-color: var(--light-mint);
    border: 2px solid var(--border-color);
    padding: 1%;
    border-radius: 20px;
    animation: slide_up .5s ease-out forwards;
    animation-delay: 1000ms;
    opacity: 0;
}

fieldset{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    border: 2px solid var(--border-color);
}

input{
    outline: none;
    border: 2px solid var(--misty-aqua);
    border-radius: 8px;
    width: 40%;
    font-family: inherit;
    font-size: 3vh;
}
input:focus{
    border: 3px solid var(--deep-orange);
}


/******************************** form elements ******************************************/

.captionContainer{
    font-size: 2vw;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    border: 2px solid var(--border-color);
    width: 95%;
    padding: 2%;

}
.inputContainer{
    width: 95%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.75vh;
    margin-bottom: 0.75vh;
}

.addButton{
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    border: 2px solid var(--border-color);
    width: 100%;
    height: 4vh;
}



#addMore{
    background-image: url('../icons/icons8-plus-button-50.png');
    background-repeat: no-repeat;
    background-position: center;
    background-color: rgba(0,0,0,0);
    border: none;
    height: 4vh;
    width: 3vw;
    background-size: contain;
    cursor: pointer;

}

/******************************* anchors *******************************************/

a{
    text-decoration: none;
    color: var(--deep-slate);
}
.blockAnchor{
    display: inline-block;
    height: 3vh;
    width: 5vw;
}

/****************************** back buttons ********************************************/


.backButton{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 5vw;
    height: 3vh;
    border: 2px solid var(--border-color);
    background-color: var(--light-mint);
    background-image: url('../icons/icons8-back-arrow-50.png');
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 10px;
}
.backButton:active{
    filter: brightness(85%);
}
.backButton.extra{
    width: 5vw;
    height: 3vh;
}

.backContainer{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    border: 2px solid var(--border-color);
    height: auto;
    padding-left: 2%;
    animation: slide_up 1s ease-out forwards;
    animation-delay: 800ms;
    opacity: 0;
}
.backContainer.one{
    margin-top: 1vh;
    width: 100vw;
}
.backContainer.two{
    margin-bottom: 1vh;
    width: 70%;
}

/******************************* flashcards *******************************************/


#flashCards{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 70%;
    border: 2px solid var(--border-color);
    padding: 2%;
}

.flashcard{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 70%;
    height: auto;
    border: 2px solid var(--border-color);
    margin-top: 1.25vh;
    margin-bottom: 1.25vh;
    padding: 2%;
    background-color: var(--light-mint);
    border-radius: 20px;
    perspective: 4000px;
}

.content{
    font-size: 2vw;
    height: 100%;
    width: 100%;
    transition: transform 1s;
    transform-style: preserve-3d;
}

.flashcard:hover .content{
    transform: rotateY(180deg);
    transition: transform 0.5s;
    border: 3px solid var(--deep-slate);
    border-radius: 20px;
}

.front,.back{
    backface-visibility: hidden;
}

.front{
    transform: rotateY(0deg);
}
.back{
    transform: rotateY(180deg);
}


/***************************** button class *********************************************/

#enterButton{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 10vh;
    width: 14vw;
    background-color: var(--light-mint);
    border-radius: 20px;
    border: 2px solid var(--border-color);
    transition: background-color .4s ease-in-out;
}
#enterButton:active{
    filter: brightness(85%);
}
#enterButton:hover{
    background-color: var(--deep-slate);
}

#unique{
    display: flex;
    justify-content: center;
    align-items:center;
    height: 10vh;
    width: 14vw;
    font-size: 2.5vw;
    font-weight: 800;
    transition: color .4s ease-in-out;
}
#unique:hover{
    color: var(--light-mint);


}

#entry{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 2px solid var(--border-color);
}

/****************************** button class ********************************************/

.delete-container{
    width: 90%;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    border: 2px solid var(--border-color);
}

.delete-button{
    border: none;
    border-radius: 10px;
    background-color: rgba(0,0,0,0);
    height: 4vh;
    width: 3vw;
    background-image: url('../icons/delete-icon.svg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    transition: height 0.3s ease-in-out;
}
.delete-button:hover{
    height: 6vh;   
}

.delete-button:hover{
    filter: invert(11%) sepia(97%) saturate(5453%);
}

#clear-button-container{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 2px solid var(--border-color);
}
.subtext-container{
    font-size: 1.7vh;
}

/****************************** button class ********************************************/

.progressButton{
    border: 2px solid var(--border-color);
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 6vh;
    width: 8vw;
    font-size: 1.5vw;
    cursor: pointer;

}
.progressButton:active{
    filter: brightness(85%);
}
.progressButton.zero{
    background-color: var(--misty-aqua);
}
.progressButton.one{
    background-color: var(--light-mint);
}


.icon-container{
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    border: 2px solid var(--border-color);
    width: 90%;
    height: 7vh;
}

/****************************** icons ********************************************/

.imageContainer{
    background-image: url('../icons/icons8-stack-of-books-100.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    height: 12vh;
    width: 7vw;
    border: 2px solid var(--border-color);
    
}


.logo{
    animation: slide_right 1s ease-out forwards;
    animation-delay: 700ms;
    transform: translateX(-20vw);
}

/****************************** animation functions ********************************************/

@keyframes slide_up{
    0%{
        transform: translateY(5vh);
    }
    100%{
        transform: translateY(0vh);
        opacity: 1;
    }
}

@keyframes slide_right{
    0%{
        transform: translateX(-20vw);
    }
    100%{
        transform: translateX(0vw);
    }
}