/*
© Copyright 2023 BAE Systems Applied Intelligence
*/

:root {
    --yellow: #A6891F;
    --orange: #fc4c02;
    --orange-border: #f26521;
    --orange-dark: rgb(202, 69, 2);
    --background: #1e1e1e;
    --green: #689b50;
    --green-dark: #3b6e22;
    --light-grey: #d0d3d4;
    --dark-grey: #3d4146;
    --border-color: #dee2e6;
    --content-top-header: 160px;
    --content-top: 90px;
    --content-bottom: 80px;
    --content-bottom-small: 25px;
}

body {
    font-family: 'Arvo';
    background: var(--background);
    font-size: 16px;
}


main {
    padding-top: var(--content-top);
    padding-bottom: var(--content-bottom);
}

.banner {
    padding-bottom: var(--content-bottom);
}

main:has(+.banner) {
    padding-bottom: var(--content-bottom-small);
}

main:has(.level-select) {
    padding-top: var(--content-top-header);
}

main>.container {
    padding: 15px 15px 0;
}

.legal {
    padding-top: var(--content-top-header);
    padding-bottom: var(--content-bottom) !important;
    background-color: var(--light-grey);
}

.game-main {
    padding-top: var(--content-top);
    padding-bottom: 0px;
}

@media (min-width: 860px) {
    .game-main {
        padding-top: 40px;
    }
}

.sticky-column {
    top: var(--content-top-header);
}

.apply-button {
    margin-top: 10px;
    border-color: var(--orange-border);
    background-color: var(--orange-dark);
}

.apply-button:hover,
.apply-button:active,
.apply-button:focus-visible {
    box-shadow: 0 1px 1px rgba(0, 0, 0, .075),
        0 0 18px rgba(242, 101, 33, 0.6);
    background-color: var(--orange);
}

.apply-button>a {
    text-decoration: none !important;
}

a:link,
a:visited,
a:hover,
a:active {
    color: white;
}

@font-face {
    font-family: 'baeicon';
    src: url(/challenge/static/fonts/baeicons.eot);
    src: url(/challenge/static/fonts/baeicons.eot#iefix) format("embedded-opentype"),
        url(/challenge/static/fonts/baeicons.ttf) format("truetype"),
        url(/challenge/static/fonts/baeicons.woff) format("woff"),
        url(/challenge/static/fonts/baeicons.svg) format("svg");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'BAESystemsWeb-Light';
    font-style: normal;
    font-weight: 100;
    src: url(/challenge/static/fonts/BAESystemsWeb-Light.eot);
    src: url(/challenge/static/fonts/BAESystemsWeb-Light.eot?#iefix) format("embedded-opentype"),
        url(/challenge/static/fonts/BAESystemsW05-Light.woff2) format("x-woff2"),
        url(/challenge/static/fonts/BAESystemsW05-Light.woff) format("woff");
}

@font-face {
    font-family: 'BAESystemsWeb-Regular';
    font-style: normal;
    font-weight: 400;
    src: url(/challenge/static/fonts/BAESystemsWeb-Regular.eot);
    src: url(/challenge/static/fonts/BAESystemsWeb-Regular.eot?#iefix) format("embedded-opentype"),
        url(/challenge/static/fonts/BAESystemsW05-Regular.woff2) format("x-woff2"),
        url(/challenge/static/fonts/BAESystemsW05-Regular.woff) format("woff");
}

@font-face {
    font-family: 'BAESystemsWeb-Bold';
    font-style: normal;
    font-weight: 700;
    src: url(/challenge/static/fonts/BAESystemsWeb-Bold.eot);
    src: url(/challenge/static/fonts/BAESystemsWeb-Bold.eot?#iefix) format("embedded-opentype"),
        url(/challenge/static/fonts/BAESystemsW05-Bold.woff2) format("x-woff2"),
        url(/challenge/static/fonts/BAESystemsW05-Bold.woff) format("woff");
}

@font-face {
    font-family: 'HyliaSerif';
    src: url('/challenge/static/fonts/HyliaSerif.eot');
    src: url('/challenge/static/fonts/HyliaSerif.eot?#iefix') format('embedded-opentype'),
        url('/challenge/static/fonts/HyliaSerif.woff2') format('woff2'),
        url('/challenge/static/fonts/HyliaSerif.woff') format('woff'),
        url('/challenge/static/fonts/HyliaSerif.ttf') format('truetype'),
        url('/challenge/static/fonts/HyliaSerif.svg') format('svg');
}


.copyright {
    padding: 12px 0;
    color: var(--light-grey);
    font-size: 12px;
    margin: 0;
}

footer>.container {
    max-width: 1200px;
    display: block;
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

footer {
    color: #f7f7f7;
    font-size: 14px;
    background: #000;
    font-family: Tahoma, Verdana, Segoe, sans-serif;
    font-weight: 400;
}

.footer-row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
    align-items: flex-start;
    justify-content: space-between;
    padding: 12px 0px;
}

.footer-row .footer-link {
    float: left;
    position: relative;
    border-right: 1px solid white;
}

.footer-row .footer-link:last-child {
    border: none;
}

.footer-link {
    font-size: 12px;
    padding: 0 10px;
}

.logo {
    width: 190px;
    display: block;
}

.name {
    font-family: 'HyliaSerif';
    text-align: center;
    color: var(--yellow);
    display: flex;
    flex-direction: column;
    margin-bottom: 0;
}

.top {
    font-size: 2.125rem;
}

.main {
    font-size: 4rem;
    line-height: 4rem;
}

.hacker-quest-characters {
    height: 3rem;
}

@media (min-width: 768px) {
    .top {
        font-size: 3.375rem;
        line-height: 3.375rem;
    }

    .main {
        font-size: 7rem;
        line-height: 7rem;
    }
}

@media (min-width: 992px) {
    .hacker-quest-characters {
        height: 4rem;
    }
}

.faq {
    max-width: 500px;
}

[class*="icon-"],
[class^="icon-"] {
    font-family: 'baeicon' !important;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -moz-osx-font-smoothing: grayscale;
}

.icon-menu:before {
    color: var(--orange) !important;
    content: "\e90f";
}

.nav-page:link,
.nav-page:visited {
    font-family: 'BAESystemsWeb-Bold';
    font-size: 18px;
    font-weight: 700;
    color: #333;
    text-decoration: none;
}

.nav-link:hover,
.nav-page:hover,
.active {
    color: var(--orange) !important;
}

.nav-page.disabled {
    background-color: var(--light-grey) !important;
    border-top: solid 1px var(--background) !important;
    border-bottom: solid 1px var(--background) !important;
}

li:has(+.nav-heading)>.dropdown-divider {
    margin-bottom: 0px;
}

.dropdown-header {
    text-transform: uppercase;
    font-size: 1rem;
    font-feature-settings: 'smcp';
    font-variant: small-caps;
    font-family: 'BAESystemsWeb-Bold';
}

.dropdown-item:hover,
.dropdown-item.active,
.dropdown-item:active {
    color: var(--orange) !important;
    background-color: white;
}

@media (max-width:992px) {

    .dropdown-menu.show {
        border-style: none;
    }

    main:has(+.banner) {
        padding-bottom: var(--content-bottom-small) !important;
    }

    .legal {
        padding-top: calc(var(--content-top-header) - 25px);
    }
}

.navbar {
    background-color: white;
}

.navbar-nav>li {
    border-bottom: 1px solid var(--light-grey);
}

.navbar-nav>li:nth-child(2) {
    border-bottom: none;
    padding-bottom: 0px !important;
}

@media (min-width: 992px) {
    .navbar-collapse {
        flex-basis: auto;
    }

    .navbar-nav>li {
        border-bottom: none;
    }

}

.game-container {
    display: none !important;
}

@media (min-width: 860px) {
    .game-container {
        display: flex !important;
    }
}

.mobile-container {
    display: flex !important;
}

@media (min-width: 860px) {
    .mobile-container {
        display: none !important;
    }
}

.game-canvas {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0), 0px 0px 20px 20px rgba(255, 255, 255, 0.1);
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    image-rendering: crisp-edges;
}

.message-header,
.message-body {
    text-align: center;
}

.mobile-message {
    font-family: 'Press Start 2P';
    font-weight: 700;
    color: var(--yellow);

    background: black;
    border: 2px solid var(--yellow);
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.2), 5px 5px 10px 10px rgba(0, 0, 0, 0.6);
}

.game-message {
    font-family: 'Press Start 2P';
    font-weight: 700;
    color: var(--yellow);
    width: 760px;

    background: black;
    border: 2px solid var(--yellow);
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.2), 5px 5px 10px 10px rgba(0, 0, 0, 0.6);
}

.game-dialog {
    z-index: 1;
}

.instructions {
    font-family: 'BAESystemsWeb-Regular';
    padding-top: 10px;
    text-align: center;
    width: 800px;
    color: var(--orange);
}

.question {
    font-family: 'BAESystemsWeb-Bold';
    color: var(--orange);
    font-size: 22px;
    margin-bottom: 5px;
}

.answer {
    font-family: 'BAESystemsWeb-Regular';
    color: white;
    font-size: 16px;
}

.answer b {
    color: var(--orange);
}

.main-button {
    font-family: 'Press Start 2P';
    font-weight: 700;
    font-size: 20px;
    padding: 30px 50px;
    text-decoration: none;
    color: white;
    text-align: center;
}

.btn-text {
    margin: 0px;
}

.start {
    background-color: var(--green);
    border: 4px solid var(--green-dark);
    text-align: center;
}

.start:hover {
    background-color: var(--green-dark);
}

.sorry {
    padding: 15px var(--content-bottom-small);
    border: 4px solid orange;
    background-color: var(--yellow);
}

.role {
    color: white;
    font-family: 'BAESystemsWeb-Regular';
    line-height: 40px;
    text-align: center;
    margin: 0px;
}

.spacer {
    color: var(--orange);
    font-family: 'BAESystemsWeb-Regular';
    font-size: 40px;
    line-height: 40px;
    text-align: center;
    max-width: 5px;
}

.sprite {
    text-align: center;
}

.sprite>img {
    width: 100%;
    max-width: 100%;
}



.legal-body {
    font-family: Tahoma, Verdana, Segoe, sans-serif;
    font-size: 16px;
    color: var(--dark-grey);
}

.highlight {
    color: var(--orange);
    padding-bottom: 10px;
    padding-top: 20px;
}

.para-space {
    padding-top: 20px;
}

.accordion-header {
    margin-top: 5px;
}

.accordion-button {
    background-color: var(--background);
    color: var(--orange);
}

.accordion-button::after {
    filter: invert(36%) sepia(40%) saturate(6417%) hue-rotate(2deg) brightness(104%) contrast(98%);
}

.accordion-button:not(.collapsed) {
    color: var(--background);
    background-color: var(--orange);
}

.accordion-button:not(.collapsed)::after {
    filter: invert(9%) sepia(5%) saturate(7%) hue-rotate(319deg) brightness(97%) contrast(93%);
}

.legal-body a {
    color: var(--dark-grey);
}

.page-title {
    background-color: var(--background);
    padding-bottom: 15px;
}

.level-link {
    font-family: 'Press Start 2P';
}

.level-link:hover {
    color: var(--orange);
}

.level-row {
    height: 3rem;
}

.level-row th,
.level-row td {
    padding: 0;
}

.icon>svg {
    max-height: 30px;
    max-width: 30px;
}

.level-select {
    margin-top: -1rem;
    border-width: 1px;
    border-radius: 0.5rem;
    padding: 1rem;
    border: solid var(--border-color);
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0), 0px 0px 20px 20px rgba(255, 255, 255, 0.1);
    max-width: 400px;
    min-width: 343px;
}

.level-select table {
    margin: 0;
}

#locked {
    fill: var(--orange);
}

#next {
    fill: var(--green-dark);
}

#solved {
    fill: var(--yellow);
}

.row-link:hover {
    cursor: pointer;
}

.level-row:hover .icon #next {
    fill: var(--green);
}

.level-row:hover .icon #locked {
    fill: red;
}

.level-row:hover .icon #solved {
    fill: yellow;
}

.level-code {
    margin-top: 1rem;
    border-width: 1px;
    border-radius: 0.5rem;
    padding: 1rem;
    border: solid var(--border-color);
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0), 0px 0px 20px 20px rgba(255, 255, 255, 0.1);
    color: white;
    max-width: max-content;
    min-width: max-content;
}

.pic {
    border: 4px solid gray;
    border-radius: 0.5rem;
    margin-top: .5rem;
    margin-bottom: .5rem;
    background-color: darkgray;
    padding-top: 4rem;
}

.num {
    max-height: 3rem;
}

.unlock-btn {
    font-family: 'Press Start 2P';


    background-color: var(--green);
    border: 4px solid var(--green-dark);
    text-align: center;
}

.unlock-btn:hover {
    background-color: var(--green-dark);
}

.btn-spin {
    font-family: 'Press Start 2P';
    color: white;
    border: 4px solid orange;
    background-color: var(--yellow);
    text-align: center;
    min-width: 4rem;
    padding: 0.1rem;
}

.btn-spin:hover {
    background-color: orange;
}

@keyframes pass {
    0% {
        background-color: darkgray;
    }

    50% {
        background-color: green;
    }

    100% {
        background-color: darkgray;
    }
}

@keyframes fail {
    0% {
        background-color: darkgray;
    }

    50% {
        background-color: red;
    }

    100% {
        background-color: darkgray;
    }
}

.pass-unlock {
    animation-name: pass;
    animation-duration: 400ms;
    animation-iteration-count: 3;
    animation-timing-function: ease-in-out;
}

.fail-unlock {
    animation-name: fail;
    animation-duration: 400ms;
    animation-iteration-count: 3;
    animation-timing-function: ease-in-out;
}

.code-message {
    font-family: 'Press Start 2P';
    font-size: smaller;
    color: white;
    margin-top: 1.5rem;
}

.game-code {
    border-width: 1px;
    border-radius: 0.5rem;
    padding: 0.5rem;
    border: solid var(--border-color);
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0), 0px 0px 20px 20px rgba(255, 255, 255, 0.1);
    color: white;
    max-width: max-content;
}

.code-pic {
    max-height: 4rem;
}

code {
    font-family: 'Press Start 2P';
}

.job-link {
    list-style-type: none;
}

.job-link::before {
    content: "";
    display: inline-block;
    width: 1.8em;
    height: 1.8em;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-link-45deg" viewBox="0 0 16 16"><path d="M4.715 6.542 3.343 7.914a3 3 0 1 0 4.243 4.243l1.828-1.829A3 3 0 0 0 8.586 5.5L8 6.086a1 1 0 0 0-.154.199 2 2 0 0 1 .861 3.337L6.88 11.45a2 2 0 1 1-2.83-2.83l.793-.792a4 4 0 0 1-.128-1.287z" /><path d="M6.586 4.672A3 3 0 0 0 7.414 9.5l.775-.776a2 2 0 0 1-.896-3.346L9.12 3.55a2 2 0 1 1 2.83 2.83l-.793.792c.112.42.155.855.128 1.287l1.372-1.372a3 3 0 1 0-4.243-4.243z" /></svg>');
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle;
}

.job-link>a {
    font-size: large;
}

a {
    text-decoration-style: dotted;
}

@media (min-width: 768px) {

    .level-select {
        margin-top: 2rem;
        padding: 1.5rem;
    }

    .level-row {
        height: 4.5rem;
    }

    .level-link {
        font-size: larger;
    }

    .icon>svg {
        max-height: 45px;
        max-width: 45px;
    }

    .level-code {
        margin-top: 4rem;
        padding: 1.5rem;
    }

    .pic {
        margin-top: .5rem;
        margin-bottom: .5rem;
        padding-top: 7rem;
    }

    .num {
        max-height: inherit;
    }

    .unlock-btn,
    .btn-spin {
        font-size: larger;
    }

    .btn-spin {
        min-width: 7rem;
        padding: 0.5rem;
    }
}