/* General CSS for the game, includes the entire page
 * includes the background darkening effect on splash screen
 * and the splash screen itself
*/


* {
    margin: 0;
    padding: 0;

    /* dark theme colours */
    --main-bg-color-dark: #1a161d;
    --darken-bg-color-dark: rgba(0, 0, 0, 0.4);

    --splash-bg-color-dark: #ffffff;
    --splash-h1-text-dark: rgb(95, 95, 95);
    --splash-label-text-dark: rgb(120, 120, 120);

    --line-color-dark: gray;
    --border-bottom-dark: 1px solid #eaeaea;

    --anchor-parag-color-dark: rgb(255, 255, 255);

    --character-container-p-color-dark: rgb(255, 255, 255);

    --game-desc-title-color-dark: rgb(95, 95, 95);
    --game-desc-text-color-dark: rgb(120, 120, 120);

    --choice-text-color-dark: rgb(100, 100, 100);

    --start-color-dark: rgb(92, 179, 92);
    --start-box-shadow-dark: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
    --start-bttn-text-color-dark: rgb(255, 255, 255);
    
    --restart-color-dark: rgb(255,0,0);
    --choice-overlay-shadow-dark: inset 0 0 10px rgb(150, 150, 150), 0 0 10px rgb(150, 150, 150);

    --guess-input-color-dark: rgba(70, 70, 70, 0.75);


    /* light theme colours */
    --main-bg-color-light: #eae3ef;
    --darken-bg-color-light: rgba(224, 207, 207, 0.4);

    --splash-bg-color-light: #030303;
    --splash-h1-text-light: rgb(95, 95, 95);

    --line-color-light: gray;
    --border-bottom-light: 1px solid #0e0e0e;

    --anchor-parag-color-light: rgb(18, 18, 18);

    --character-container-p-color-light: rgb(0, 0, 0);

    --game-desc-text-color-light: rgb(120, 120, 120);
    --game-desc-title-color-light: rgb(95, 95, 95);

    --choice-text-color-light: rgb(100, 100, 100);

    --start-color-light: rgb(92, 179, 92);
    --start-box-shadow-light: rgba(245, 243, 243, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
    --start-bttn-text-color-light: rgb(17, 17, 17);


    --choice-overlay-shadow-light: inset 0 0 10px rgb(150, 150, 150), 0 0 10px rgb(150, 150, 150);

    --guess-input-color-light: rgba(210, 210, 210, 0.75);
    --lives-color-light: rgb(0, 0, 0);
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--main-bg-color-dark);
    flex-direction: column;
}

body.light_theme {
    background-color: var(--main-bg-color-light);
}

.darken_bg {
    display: flex;
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;

    justify-content: center;
    align-items: center;

    overflow: auto;
    background-color: var(--darken-bg-color-dark);
    z-index: 999;
}

body.light_theme .darken_bg {
    background-color: var(--darken-bg-color-light);
}

@keyframes fade_in {
    0% {
        opacity: 0;
        transform: translateY(-20px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fade_in_2 {
    0% {
        opacity: 0;
        transform: scale(0.95);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }

}


/* 
 * The css below is for displaying the navbar of the game
*/


header {
    width: 50%;
    height: 100%;
    padding: 0.5rem;
    border-bottom: var(--border-bottom-dark);
    z-index: 999;
}

body.light_theme header {
    border-bottom: var(--border-bottom-light);
}

@media (max-width: 1195px) {
    header {
        width: 70%;
    }
}

@media (max-width: 768px) {
    header {
        width: 90%;
    }
}

header>nav>ul, .btns, .title {
    display: flex;
    justify-content: start;
    align-items: center;
    list-style-type: none;
}

.btns {
    margin-left: auto;
}

.parag, .anchor {
    text-decoration: none;
    color: var(--anchor-parag-color-dark);
    font-size: 1.5rem;
    font-weight: 600;
    font-family: 'Roboto', sans-serif;
}

body.light_theme .parag, body.light_theme .anchor {
    color: var(--anchor-parag-color-light);
}

.title {
    text-decoration: none;
}


/* 
 * The css below is for the settings / leaderboard splash screen, e.g. line creation
*/


.splash_content {
    background-color: var(--splash-bg-color-dark);
    padding: 20px;
    margin: 7px;
    border-radius: 10px;
    animation: fade_in 0.5s;
    position: relative;
    display: flex; 
    flex-direction: column;
}

.close_container {
    width: 20px;
    height: 20px;
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
}

.line {
    width: 100%;
    height: 2px;
    background-color: var(--line-color-dark);
    position: absolute;
    top: 50%;
    left: 0;
    pointer-events: none;
}

body.light_theme .line {
    background-color: var(--line-color-light);
}

.splash_h1_txt {
    font-size: 2rem;
    color: var(--splash-h1-text-dark);
    font-weight: 600;
    font-family: 'Roboto', sans-serif;
    text-align: center;
    padding-bottom: 1em;
}

body.light_theme .splash_h1_txt {
    color: var(--splash-h1-text-light);
}

.splash_label_txt {
    font-size: 1rem;
    color: var(--splash-h1-text-dark);
    font-weight: 500;
    font-family: 'Roboto', sans-serif;
    text-align: center;
    padding: 1em
}

body.light_theme .splash_label_txt {
    color: var(--splash-h1-text-light);
}


/* 
 * The css below is for character container,  this is for playing the game generating the characters and input to enter the guesses 
*/


.character_container {
    justify-content: center;
    align-items: center;
    display: flex;
    height: 100vh;
    width: 100vw;

    flex-direction: column;
    overflow: auto;

    position: absolute;
    top: 0;
    left: 0;
    z-index: 997;
}

.character_container img {
    width: auto;
    height: 90vh;

    animation: fade_in_2 1s;
}

.character_container p {
    font-size: 1.5rem;
    color: var(--character-container-p-color-dark);
    padding: 10px;
    font-family: 'Roboto', sans-serif;
}

body.light_theme .character_container p {
    color: var(--character-container-p-color-light);
}


/* 
 * The css below is for the splash screen that that appears on game load and on game over, on settings etc
*/


.game_desc {
    font-size: 1rem;
    color: var(--game-desc-text-color-dark);
    font-weight: 550;
    font-family: 'Roboto', sans-serif;
    text-align: justify;
}

body.light_theme .game_desc {
    color: var(--game-desc-text-color-light);
}

.game_desc_title {
    font-size: 2rem;
    color: var(--game-desc-title-color-dark);
    font-weight: 600;
    font-family: 'Roboto', sans-serif;
    text-align: center;
}

body.light_theme .game_desc_title {
    color: var(--game-desc-title-color-light);
}

@keyframes pulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(0.95);
    }
}

.choose_mode_div {
    margin-top: 15px;
    width: 100%;
    display: flex;
    justify-content: center;
}

.choice:nth-child(1) {
    border-radius: 5px 0 0 5px
}

.choice:nth-child(3) {
    border-radius: 0 5px 5px 0
}

.choice {
    width: 33%;
    height: 50px;
    border: none;
    font-weight: 500;
    font-family: 'Roboto', sans-serif;
    font-size: 1.2rem;
    color: var(--choice-text-color-dark);
}

body.light_theme .choice {
    color: var(--choice-text-color-light);
}

.start {
    width: 100%;
    height: 100px;
    border-radius: 2rem;
    margin-top: 15px;
    background-color: var(--start-color-dark);
    font-family: 'Roboto', sans-serif;
    border: none;

    box-shadow: var(--start-box-shadow-dark);

    animation: pulse 2s infinite;

    font-size: 2rem;
    color: var(--start-bttn-text-color-dark);
    font-weight: 600;
}

body.light_theme .start {
    background-color: var(--start-color-light);
    box-shadow: var(--start-box-shadow-light);
}

.restart {
    background-color: var(--restart-color-dark);
    margin-top: -20px;
}

.choice_overlay {
    position: absolute;
    box-sizing: border-box;
    pointer-events: none;
    border-radius: 5px;
    transition: top 0.5s, left 0.5s, width 0.5s, height 0.5s;
    box-shadow: var(--choice-overlay-shadow-dark);
    z-index: 1000;
}

body.light_theme .choice_overlay {
    box-shadow: var(--choice-overlay-shadow-light);
}


/* 
 * The css below is for the user interface, which holds input field, score, lives, time, skips and stop,  and the ui buttons
*/


.user_interface{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    width: fit-content;
    height: fit-content;
    z-index: 998;

    position: absolute;
    top: 65%;
    left: 50%;
    transform: translate(-50%, -50%);
    backdrop-filter: blur(3px);
}

.ui_elements_container {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
}

.left_arrow, .right_arrow, .enter_bttn, .lives, .timer, .score, .skip_stop {
    display: none;
    width: fit-content;

    margin: 10px;
    padding-right: 10px;
    padding-left: 10px;
    height: 50px;

    font-size: 1.5rem;
    font-family: 'Roboto', sans-serif;
    font-weight: 600;

    color: rgb(255, 255, 255);
    background-color: rgba(128, 128, 128, 0.795);

    border: none;
    border-radius: 5px;
    
    cursor: pointer;
    box-shadow: var(--start-box-shadow-dark);

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

.left_arrow {
    margin-right: 5px;
}

.right_arrow {
    margin-left: 5px;
}

.left_arrow:hover, .right_arrow:hover, .enter_bttn:hover, .skip_stop:hover{
    transform: scale(1.1);
}

.enter_bttn {
    font-size: 1rem;
}


/* 
 * The css below is for the timer  in best time gamemode
*/


.timer {
    font-family: 'Roboto', sans-serif;
    font-size: 1rem;
    align-items: center;
    justify-content: center;
}


/* 
 * The css below is for score, shows the user their streak
*/


.score, .score_txt {
    font-size: 1rem;
}


/* 
 * The css below is for the lives of the user, shows how many lives they have left
*/


.lives {
    display: none;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.lives_txt {
    font-size: 1rem;
}

.lives li {    
    text-decoration: none;
    list-style: none;
    margin-left: 3px;
    margin-right: 3px;

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


/* 
 * The css below is for the skip stop in infinite gamemode
*/

.skip_stop {
    font-size: 1rem;
}



/* 
 * The CSS below is for the input field(s) when guessing
*/


.input_container {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.input_one_char {
    width: 70px;
    height: 70px;
    font-size: 2rem;
    font-weight: 700;
    text-align: center;
    margin: 0 3px;
    font-family: 'Roboto', sans-serif;

    background: var(--guess-input-color-dark);
    color: white;
    border: none;
    border-bottom: 2px solid yellow;
    margin-top: 10px;
    /* !!! Margin top 10px needed as the width and height gets changed by 10 px, otherwise causes weird shifting*/
    transition: width 0.3s ease, height 0.3s ease, margin-top 0.3s ease, background-color 0.3s ease-in-out;
}

body.light_theme .input_one_char {
    background: var(--guess-input-color-light);
}

.input_one_char:focus {
    outline: none;
    width: 80px;
    height: 80px;
    margin-top: 0px;
    /* here margin top is 0 px to counteract the margin top 10px from above, 80px-10px gives the original height and width px */
}

/* the spacing is used as empty space between words */
.input_one_char_spacing {
    height: 70px;
    width: 70px;
    display: inline-block;
}


/* 
 *Below is the splash.js for css, including the switch 
*/


.splash_div {
    display: flex;
    flex-direction: row;
    padding: 5px;
    width: 100%;
    border-bottom: 1px solid var(--guess-input-color-light);
    margin-bottom: 12px;
}

.splash_label_container {
    width: 100%;
}

.splash_label {
    font-size: 1.2rem;
    font-family: 'Roboto', sans-serif;
    color: var(--splash-label-text-dark);
}

.input_switch_div {
    margin-left: auto;
}

input:where([type="checkbox"][role="switch"]) {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    position: relative;
    font-size: inherit;
    width: 2em;
    height: 1em;
    box-sizing: content-box;
    border: 1px solid;
    border-radius: 1.5em;
    vertical-align: text-bottom;
    margin-left: auto;
    color: var(--main-bg-color-dark);
}


input:where([type="checkbox"][role="switch"])::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(0, -50%);
    box-sizing: border-box;
    width: 0.7em;
    height: 0.7em;
    margin: 0 0.15em;
    border: 1px solid;
    border-radius: 50%;
    background: currentcolor;
    transition: left 0.3s ease-in-out;
}

input:where([type="checkbox"][role="switch"]):checked::before {
    left: 1em;
}

.clear_stats_div {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    color: var(--main-bg-color-dark);
}

.clear_stats_div::before {
    content: "delete";
    font-family: 'Roboto', sans-serif;
    font-size: 1rem;
}

.clear_stats_div:hover {
    cursor: pointer;
}