@charset "utf-8";
@import 'variables.css';
@import 'utilities.css';
@import 'elements.css';
@import 'header.css';
@import 'footer.css';


/*! modern-normalize v1.0.0 | MIT License | https://github.com/sindresorhus/modern-normalize */
*,::before,::after{box-sizing:border-box}:root{-moz-tab-size:4;tab-size:4}html{line-height:1.15;-webkit-text-size-adjust:100%}*{box-sizing:border-box}html,body{width:100%;}body{margin:0;font-family:system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji'}img,svg{max-width:100%;vertical-align:middle}hr{height:0;color:inherit}abbr[title]{text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Consolas,'Liberation Mono',Menlo,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.5;margin:0}button,select{text-transform:none}button,[type='button'],[type='reset'],[type='submit']{-webkit-appearance:button}::-moz-focus-inner{border-style:none;padding:0}:-moz-focusring{outline:1px dotted ButtonText}:-moz-ui-invalid{box-shadow:none}legend{padding:0}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type='search']{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}


/*__________________________ TYPOGRAPHY __________________________*/
@font-face {
    font-family: SairaBold;
    src: url("/assets/fonts/Saira-Bold.ttf") format("truetype");
}

@font-face {
    font-family: SairaSemibold;
    src: url("/assets/fonts/Saira-SemiBold.ttf") format("truetype");
}

@font-face {
    font-family: SairaRegular;
    src: url("/assets/fonts/Saira-Regular.ttf") format("truetype");
}

@font-face {
    font-family: VideoBold;
    src: url("/assets/fonts/Video-Bold.ttf") format("truetype");
}

@font-face {
    font-family: VideoSemibold;
    src: url("/assets/fonts/Video-SemiBold.ttf") format("truetype");
}



body{
    /* background:
        radial-gradient(100% 100% at 50% 50%, var(--color_gradient_center) 0%, #FFFFFF00 100%),
        radial-gradient(120% 120% at 0% 0%, var(--color_gradient_top_left) 40%, #FF000000 100%),
        radial-gradient(120% 120% at 100% 0%, var(--color_gradient_top_right) 40%, #FF000000 100%),
        radial-gradient(120% 120% at 0% 100%, var(--color_gradient_bottom_left) 40%, #FF000000 100%),
        radial-gradient(120% 120% at 100% 100%, var(--color_gradient_bottom_right) 40%, #FFFFFF00 100%);
    background-attachment: fixed; */
    background:
        radial-gradient(100% 20% at 40% 20%, var(--color_gradient_center) 10%, #FF000000 80%),
        linear-gradient(to bottom, var(--color_gradient_bottom_right) 20%, #001C39 40%, #001c39 50%),
        #001c39;
    transition: --color_gradient_top_right 0.5s;
    font-family: SairaRegular;
    font-size: 18px;
    line-height: 1.2;
}
@media screen and (min-width:1200px){
    body{
        background:
            radial-gradient(40% 40% at 0% 50%, var(--color_gradient_center) 10%, #FF000000 90%),
            linear-gradient(to right, var(--color_gradient_bottom_right) 25%, #001C39 50%, #001c39 50%),
            #001c39;
        background-attachment: fixed;
    }
}

/* Knowledge Check - Data & AI */
body.active_9{
    --color_gradient_center: #6c5fe3;
    --color_gradient_top_left: #0d1745;
    --color_gradient_top_right: #b760e9;
    --color_gradient_bottom_left: #03103e;
    --color_gradient_bottom_right: #523082;
}

/* Knowledge Check - Automation */
body.active_10{
    --color_gradient_center: #7c8f17;
    --color_gradient_top_left: #12361f;
    --color_gradient_top_right: #c3c808;
    --color_gradient_bottom_left: #0f301c;
    --color_gradient_bottom_right: #545a00;
}

/* Knowledge Check - Security */
body.active_11{
    --color_gradient_center: #157bc6;
    --color_gradient_top_left: #143ab6;
    --color_gradient_top_right: #18aef4;
    --color_gradient_bottom_left: #11297a;
    --color_gradient_bottom_right: #0d66bc;
}

/* Knowledge Check - Sustainability */
body.active_12{
    --color_gradient_center: #0b4143;
    --color_gradient_top_left: #0d181b;
    --color_gradient_top_right: #2ab378;
    --color_gradient_bottom_left: #0f1a1d;
    --color_gradient_bottom_right: #083b42;
}

/* Top Fade */
/* body:before{
    content: '';
    width: 100%;
    height: 265px;
    background: linear-gradient(180deg, #01122E, transparent);
    position: fixed;
    top: 0;
    left: 0;
} */


/* Page Wrapper */
.wrapper{
    position: relative;
    padding:0 20px;
}
@media screen and (min-width:1200px){
    .wrapper{
        padding:0 20px;
    }
}


/* Basic Layout */
#grid{
    display: grid;
    width: 100%;
    height: 100%;
    gap:40px;
    grid-template-areas:
        "header"
        "question"
        "game"
        "footer";
    grid-template-columns: 1fr;
    grid-template-rows: min-content min-content min-content min-content;
}
@media screen and (min-width:1200px){
    #grid{
        height: 100%;
        gap: 40px 50px;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto auto;
        grid-template-areas:
            "header game"
            "question game"
            "footer game";
    }
}

.header {
    grid-area: header;
    display: grid;
    place-items: center;
    min-height: 80px;
    padding-block: 30px 30px;
}
@media screen and (min-width:1200px){
    .header {
        min-height: 40px;
    }
}
#big_logo{display:none;max-width: 690px;}
#small_logo{display:block;max-width: 432px;}




/* Forms */
.f_error{
    color:#A81300;
}
.star {
    color:var(--color_red_100);
}
.field{
    text-align: left;
}
label > span{
    font-size: 14px;
}
.f_error_message{
    margin-inline: auto 0;
    font-size: 12px;
}
.f_error :is(select, input[type=text], input[type=email]){
    border: 1px solid var(--color_red_100);
    background: #FFF5F4;
}
:is(#screen_4, #screen_5, #screen_6, #screen_7, #screen_9, #screen_10, #screen_11, #screen_12) .f_error_message{
    text-align: center;
    display: inline-block;
    width: 100%;
}







.question {
    grid-area: question;
    position:relative;
    padding: 50px 7% 40px;
}
.footer {
    grid-area: footer;
    text-align: center;
    padding-bottom: 20px;
}
.footer > div {
    font-size: 12px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    line-height: 1.2;
    align-items: center;
    justify-content: center;
}
.footer > div div {
    font-size: 12px;
    display: flex;
    gap: 40px;
    line-height: 1.2;
    align-items: flex-start;
    justify-content: center;
}
@media screen and (min-width:1200px){
    .footer > div {
        flex-direction: row;
        gap: 40px;
    }
}
.game {
    grid-area: game;
    display: grid;
    place-items: start;
    position:relative;
    outline: 0;
    margin-inline: -20px -10px;
}
@media screen and (min-width:1200px){
    .game {
        margin-inline: revert;
    }
}
/* So you can scroll if you're over the game */
/* .game:after {
    content: '';
    inset: 26% 0 0 0;
    position: absolute;
}
.game:before{
    content: '';
    inset: 0% 0 89% 0;
    position: absolute;
    z-index: 1;
} */
.game > img {
    margin-top: 100px;
    max-width: 611px;
}
#unity-canvas{
    width: 100%;
    background: transparent;
    max-width: 960px;
    max-height: calc(100vh - 10px);
    aspect-ratio: 3 / 4.15;
    position: sticky;
    top: 0;
    outline:0;
    margin-inline: auto;
}



/* Question Background */
.bg{
    background: #ffffffa3;
    border: 5px solid var(--color_white_100);
    opacity: 1;
    position: absolute;
    inset: 0;
    clip-path: polygon(0 0, calc(100% - 60px) 0, 100% calc(0% + 60px), 100% 100%, calc(0% + 60px) 100%, 0 calc(100% - 60px));
    border-radius: 10px;
}
.bg:before{
    content: '';
    display: block;
    position: absolute;
    background: var(--color_white_100);
    width: 85px;
    height: 5px;
    top: 0;
    right: 0;
    rotate: 45deg;
    translate: 6px 56px;
    transform-origin: top right;
}
.bg:after{
    content: '';
    display: block;
    position: absolute;
    background: var(--color_white_100);
    width: 85px;
    height: 5px;
    bottom: 0;
    left: 0;
    rotate: 45deg;
    translate: -27px 6px;
    transform-origin: top right;
}
/* .bg_inner{
    background: #a0bfcc;
    position: absolute;
    inset: 0;
    clip-path: polygon(0 0, calc(100% - 58.5px) 0, 100% calc(0% + 58.5px), 100% 100%, calc(0% + 58.5px) 100%, 0 calc(100% - 58.5px));
    border-radius: 8px;
    scale: 0.975 0.992;
}
@media screen and (min-width:400px){
    .bg_inner{
        scale: 0.985 0.99;
    }
}
@media screen and (min-width:800px){
    .bg_inner{
        scale: 0.995 0.99;
    }
}
@media screen and (min-width:1200px){
    .bg_inner{
        clip-path: polygon(0 0, calc(100% - 58.5px) 0, 100% calc(0% + 58.5px), 100% 100%, calc(0% + 58.5px) 100%, 0 calc(100% - 58.5px));
        scale: 0.99 0.99;
    }
} */


/* Form Actions */
.submit_wrapper{
    display: flex;
    gap: 20px;
    align-items: center;
    margin-top: 40px;
    position: relative;
    justify-content: center;
}


/* Prev / Next Buttons */
.question_actions{
    display: flex;
    gap: 20px;
    align-items: center;
    margin-top: 40px;
    position:relative;
    justify-content: center;
}
.question_actions :where(span, svg) {
    pointer-events: none;
}
.question_actions :where([value=prev]){
    background: transparent;
}
.question_actions [disabled]{
    cursor:wait;
}




#screens{
    position:relative;
    color: var(--color_black_100);
    text-align: center;
}
/* Hide all screens */
#screens > div{
    display:none;
}
/* Show home screen by default*/
.active_0 #screen_0{
    display:revert;
    text-align: left;
}



/* Home Page */
.active_0 .bg{
    display:none;
}
.active_0 .question{
    padding-top: 0;
}
.active_0 #screens{
    color:#fff;
}
.active_0 #big_logo {
    display:block;
}
.active_0 #small_logo {
    display:none;
}
/* #screen_0 img{
    max-width: 690px;
    display: block;
    margin: 0 auto 40px;
} */
#screen_0 li{
    display: flex;
    gap: 10px;
    align-items: center;
}
.active_0 .question_actions{
    justify-content: flex-start;
}
.active_0 [value="prev"]{
    display:none;
}


/* Screen 1 */
.active_1 #screen_1{display:revert;}
#screen_1{}



/* Screen 2 */
.active_2 .bg{
    display:none;
}
.active_2 #big_logo {
    display:block;
}
.active_2 #small_logo {
    display:none;
}
.active_2 #screen_2{display:revert;}
#screen_2 {
    text-align:left;
    color:white;
}
#screen_2 :is(h1, h2){
    color:white;
}
.active_2 .question{
    padding-top:0;
}
.active_2 .header{
    padding-bottom: 0;
}
.active_2 .question_actions{
    justify-content:left;
}
.active_2 [value="prev"]{
    display:none;
}
#screen_2 li{
    display: flex;
    gap: 10px;
    align-items: center;
}
#screen_2 .controls{
    color: black;
    padding: 10px;
    background: #ffffff7a;
    border: 2px solid white;
    border-radius: 5px;
    margin-top: 5px;
}



/* Screen 3 */
.active_3 #screen_3{display:revert;}
.active_3 .question_actions{display:none;}
.preferred_grid{
    display:flex;
    gap:20px;
    width: fit-content;
    justify-content: center;
    flex-wrap: wrap;
    margin-inline: auto;
    width: fit-content;
}
.preferred_wrapper .grid{
    align-items: flex-end;
    padding-block: 20px 0;
}
#screen_3 form{
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px 40px;
    text-align:center;
}
@media screen and (min-width:1200px){
    #screen_3 form{
        grid-template-columns: 1fr 1fr;
    }
}
form .wide{
    grid-column: 1 / -1;
}
/* Form Fields */
form label{
    display: grid;
    gap: 3px;
    text-align: left;
    user-select:none;
    font-size: 16px;
    line-height: 20px;
    letter-spacing: 0.32px;
    cursor:pointer;
}

form :where([type=text], [type=email]){
    border-radius: 999px;
    border: 1px solid #fff;
    padding: 10px 20px;
    line-height: 1;
    width: 100%;
}

#screen_3 form .radios{
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-block: 20px;
}
#screen_3 .preferred_wrapper{
    padding-block:20px;
    border-top:2px solid rgba(255,255,255,0.5);
    border-bottom:2px solid rgba(255,255,255,0.5);
    font-size: 14px;
    line-height: 1.2;
}


/* PROFILE Questions */
.profile label > span {
    font-size: 18px;
    font-family: 'SairaSemibold';
    letter-spacing:0.36px;
}


/* Knowledge Questions */
.knowledge_questions{
    display: grid;
    gap: 40px;
    grid-template-columns: 50%;
    text-align: left;
}
@media screen and (min-width:1200px){
    .knowledge_questions{
        gap: 20px;
        grid-template-columns: 50% 50%;
    }
}
.title{
    display: flex;
    align-items: center;
    gap: 20px;
    text-align: left;
    width: fit-content;
    margin-inline: auto;
}
.title h3{
    color:var(--color_black_100);
    margin-bottom:0;
}


.quiz h4{
    color:var(--color_blue_100);
    margin-block: 40px 20px;
}

/* Screen 4 */
.active_4 #screen_4{display:revert;}
.active_4 [value="prev"]{
    display:none;
}

/* Screen 5 */
.active_5 #screen_5{display:revert;}
.active_5 [value="prev"]{
    display:none;
}

/* Screen 6 */
.active_6 #screen_6{display:revert;}
.active_6 [value="prev"]{
    display:none;
}

/* Screen 7 */
.active_7 #screen_7{display:revert;}
.active_7 [value="prev"]{
    display:none;
}

/* Screen 8 */
.active_8 #screen_8{display:revert;}
#screen_8 .extended_play{
    margin: 40px 0 0 0;
    color: var(--color_green_100);
    font-family: 'SairaSemibold';
}
#screen_8 .extended_play a {
    color: var(--color_black_100);
}
.active_8 .question_actions{display:none;}




/* QUIZ Questions */
.quiz label > span {
    font-size: 18px;
    font-family: 'SairaSemibold';
    letter-spacing:0.36px;
}
.correct{
    background: #D5FFEB;
    padding: 5px 10px;
    border: 2px solid #33DD8F;
    border-radius: 5px;
}
.incorrect{
    background: #FFF5F4;
    padding: 5px 10px;
    border: 2px solid #F54A38;
    border-radius: 5px;
}

/* Screen 9 */
.active_9 #screen_9{display:revert;}
.active_9 .question_actions button[value=prev]{
    display: none;
}

/* Screen 10 */
.active_10 #screen_10{display:revert;}
.active_10 .question_actions button[value=prev]{
    display: none;
}

/* Screen 11 */
.active_11 #screen_11{display:revert;}
.active_11 .question_actions button[value=prev]{
    display: none;
}

/* Screen 12 */
.active_12 #screen_12{display:revert;}
.active_12 .question_actions button[value=prev]{
    display: none;
}

/* Screen 13 */
.active_13 #screen_13{display:revert;}
.active_13 .question_actions {
    display: none;
}


/* NOT FOUND PAGE */
#not_found #small_logo{
    display:block;
}
#not_found .page{
    display: grid;
    height: 100vh;
    grid-template-rows: min-content auto min-content;
    grid-template-columns: 1fr;
    grid-auto-flow: row;
    grid-template-areas:
        "header"
        "body"
        "footer";
}
#not_found .content{
    grid-area:body;
}
#not_found .content img{
    max-width: 600px;
    display: block;
    margin: 100px auto 40px;
}


/* ________________________________________ CUSTOM SCROLLBAR ______________________________ */
/* ...Firefox */
* {scrollbar-width: 10px; scrollbar-color: var(--color_blue_100) var(--color_white_100);}
/* ...Chrome, Edge, and Safari */
*::-webkit-scrollbar {width: 10px; height: 10px;}
*::-webkit-scrollbar-track {background: var(--color_blue_100);background: transparent;}
*::-webkit-scrollbar-thumb {border-radius: 8px;border: 8px solid var(--color_white_100);border: 8px solid var(--color_blue_100);}