@import url('https://fonts.googleapis.com/css2?family=Montserrat+Alternates:wght@500&family=Poppins&family=Roboto&family=Roboto+Mono&display=swap');

/* ------------------------------ BASE RULES / BASE STYLES ------------------------------ */
:root { /* Or html {} */
    /* Layout */
    box-sizing: border-box;

    /* Typography */
    --font-size-default: .875em; /* sets the default size to 14px (i.e. 14/16 = 0.875) */
    --font-size-primary: 3rem;
    --font-size-secondary: calc(2em + 1vw);
    --font-family: "Roboto", "Helvetica", "Arial", sans-serif;
    --font-family-footer: "Roboto Mono", "Helvetica", "Arial", sans-serif;

    /* HSL color mode */
    --color-primary: #335C67;
    --color-secondary: hsl(60, 55.56%, 91.18%);
    --color-tertiary: #EB5E28;
    --color-black: hsl(0, 0%, 49%);
    --universal-yellow: #FFF3B0;
    --scroll-bar-color: var(--color-primary);
    --scroll-thumb-hover-color: royalblue;
}

*,
::before,
::after {
    box-sizing: inherit; /* Third-party css compoonents might come with "content-box" top-level containers */
    padding: 0;
    margin: 0;
    overflow: hidden;
}

body {
    font-family: var(--font-family);
    background-color: black;
}


/* ------------------------------ MODULE RULES ------------------------------ */
/* .container {
    
} */

.main {
    display: grid;
    grid-template-rows: 1fr 1fr;
}

/*---- SEO ----*/
.title {
    position: fixed;
    bottom: 0;
    right: 0;
}

.timer {
    background-color: var(--color-primary);
    text-align: center;
    padding: .5em;
    color: var(--color-secondary);
    font-size: var(--font-size-secondary);
    display: flex;
    justify-content: center;
    align-items: center;
}

/*---- TIMER ----*/
.timer__play-stop {
    cursor: pointer;
    overflow-x: auto;
    width: 100%;
    height: 100%;
    border: none;
    text-align: center;
    background: none;
    font-size: var(--font-size-secondary);
    color: var(--universal-yellow);
}

/*---- CONSOLE ----*/
.console {
    width: 100%;
}
/* Question */
.console__question {
    background-color: #FFFCF2;
    display: grid;
    justify-content: center;
    align-items: center;
    text-align: center;
}
/* Answer */
.console__answer {
    text-align: center;
}
.console__answer-a,
.console__answer-b {
    font-size: var(--font-size-primary);
    color: var(--color-tertiary);
    background-color: var(--color-secondary);
    line-height: 2.5em;
}
/*.console__answer-a:hover,
.console__answer-b:hover {
  background-color: #FFFCF2;
}*/
.console__x, .console__y, .console__plus {
    font-size: var(--font-size-primary);
    color: var(--color-primary);
}
input[name=answer] {
    display: none; /* Hide radio button (the round disc) */
}
/* Progress */
.console__progress {
    background-color: whitesmoke;
    overflow: hidden;
    display: flex;
    justify-content: center;
}
.console__progress-bar {
    transition: .4s;
}
/* Difficulty */
.console__difficulty {
    background-color: whitesmoke;
    display: -ms-flexbox; /* For IE10 */
    display: -webkit-flex; /* For Safari 8 */
    display: flex;
    justify-content: space-around;
    align-items: center;
}
input[name=levels] {
    display: none; /* Hide radio button (the round disc) */
}
/*
    Change the look'n'feel of labels (which are adjacent to radiobuttons).
    Add some margin, padding to label
*/
input[name=levels] + label { /* could have been just "label" */
    cursor: pointer;
    color: var(--color-primary);
    font-size: var(--font-size-default);
    line-height: 3em;
    padding: .3em 1.5em;
    /* border-radius: 2em; */
    font-size: calc(var(--font-size-default) + 10%);
}
/*
Change background color for label next to checked radio button
to make it look like highlighted button
*/
input[name=levels]:checked + label { 
    background-color: #EB5E28;
    color: whitesmoke;
    /* text-transform: uppercase; */
}

/*---- FOOTER ----*/
.console__footer {
    background-color: whitesmoke;
}
.console__footer-text {
    font-family: var(--font-family-footer);
    font-size: calc(var(--font-size-default) - 25%);
    color: var(--color-black);
    padding: .5em 0;
    margin-bottom: 0;
    width: 100%;
    text-align: center;
}

/* ---------- SCROLL BAR ---------- */
/* ::-webkit-scrollbar {
    width: .60rem;
    background-color: var(--scroll-bar-color);
}
::-webkit-scrollbar-thumb {
    background-color: var(--universal-yellow);
}
::-webkit-scrollbar-thumb:hover {
    background-color: var(--scroll-thumb-hover-color);
} */


/* ------------------------------ UTILITY CLASSES ------------------------------ */
.grid--question {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.pointer {
    cursor: pointer;
}


/* ---------- BREAKPOINTS ---------- */
/* For small devices */
@media (max-width: 991.98px) {
    .timer {
        height: calc(100vh - 333.8px);
    }

    .console {
        position: fixed;
        bottom: 0;
    }
}

/* For medium devices */
@media (min-width: 992px) {
    .timer {
        height: calc(100vh - 333.8px);
    }

    .console {
        position: fixed;
        bottom: 0;
    }
}