/* 
AUTHOR: Rikki Tomiko Ehrhart (rikki.ehrhart@g.austincc.edu) 
LAST UPDATE: 02.23.2025 

FILE: portfolio/public/projects/3/styles.css
DESCRIPTION: This is a project made on behalf of Lou DiSimone 
             (lou.disimone@g.austincc.edu), Phi Theta Kappa 
             Chapter Alpha Gamma Pi, President for the Spring 
             2025 Semester. He requested I turn his "The 
             Princess Bride" personality quiz into a working
             website quiz that they can use at the next Phi 
             Theta Kappa conference (TRC 2025).
*/

/* FONTS */
@import url('https://fonts.googleapis.com/css2?family=Meow+Script&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Delius&display=swap');
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c&display=swap');


:root {
    /* BRAND FONTS */
    --fancy: "Meow Script", serif;
    --title: "Delius", serif;
    --main: "M PLUS Rounded 1c", serif;
}



/* BODY STYLES */
html {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 0;
}


body {

    margin: 0;
    padding: 0;

    background-color: #cee5e5;
    color: #3f5444;

    font-family: var(--main);

    max-width: 1000px;
}





/* NAV STYLES */
nav {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 15px;
}

.logo {
    width: 150px;
    height: auto;
}

.game-buttons {
    width: 50%;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
}

.game-buttons div button {
    width: 150px;
    height: 40px;
    
    background-color: #b9dad6;
    color: #5b7060;
    border: 1px solid #a1c6bb;
    border-radius: 25px;
    box-shadow: 0px 0px 10px #00000025;
    text-shadow: 1px 1px 1px #00000050;

    font-family: var(--title);
    font-size: 1rem;
    letter-spacing: 2px;

    transition: box-shadow .25s ease;
}

.game-buttons div button:active {
    box-shadow: none;
}

#leave-button button{
    width: 75px;
}

/* MAIN STYLES */
.title {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin-top: 0;
    padding-top: 0;
}

h1 {
    font-family: var(--fancy);
    text-align: center;
    font-size: 3.25rem;
    text-shadow: 2px 2px 2px #00000050;
    padding: 0px 100px 0px 100px;
    margin-top: -50px;

}


/* QUIZ STYLES */

#err {
    color: red;
    text-align: center;
    margin-top: -50px;
}

h3 {
    font-size: 1.5rem;
    font-family: var(--title);
}


.questionContainer {
    margin: auto;
    width: 75%;
    background: #f2f1ed;
    padding: 10px 25px 25px 25px;
    margin-top: 25px;
    border-radius: 25px;
    box-shadow: 3px 3px 20px #00000025;
}

.choicesContainer label{
    padding: 10px;
}

#next {
    width: 100%;
    height: 30px;
    
    background-color: #b9dad6;
    color: #705b60;
    border: 1px solid #a1c6bb;
    border-radius: 25px;
    box-shadow: 0px 0px 10px #00000025;
    text-shadow: 1px 1px 1px #00000050;
    
    font-family: var(--title);
    font-size: .75rem;
    letter-spacing: 2px;
    
    margin-top: 20px;
    align-items: right;
    transition: box-shadow .25s ease;
}

#next:active {
    box-shadow: none;
}




/* RESULTS STYLE */
.winner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.winner h2 {
    font-size: 4rem;
    margin-top: 0px;
    font-family: var(--fancy);
    text-shadow: 2px 2px 3px #00000050;
}

.winner p {
    margin-top: -40px;
}


.winner img {
    margin-top: 0px;
    width: 35%;
}