/*
© Copyright 2022 BAE Systems Applied Intelligence
*/

:root {
    --yellow: #A6891F;
    --orange: #fc4c02;
}

body {
    font-family: "Arvo";
    background: #1e1e1e;
    font-size: 16px;
}

a:link,
a:visited,
a:hover,
a:active {
    color: #FFFFFF;
}

@font-face {
    font-family: 'baeicon';
    src: url(../fonts/baeicons.eot);
    src: url(../fonts/baeicons.eot#iefix) format("embedded-opentype"),
         url(../fonts/baeicons.ttf) format("truetype"),
         url(../fonts/baeicons.woff) format("woff"),
         url(../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(../fonts/BAESystemsWeb-Light.eot);
    src: url(../fonts/BAESystemsWeb-Light.eot?#iefix) format("embedded-opentype"),
         url(../fonts/BAESystemsW05-Light.woff2) format("x-woff2"),
         url(../fonts/BAESystemsW05-Light.woff) format("woff");
}

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

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

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

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

.copyright {
    padding: 12px 0;
    color: #d0d3d4;
    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-links {
    padding: 12px 0;
    float: none;
    list-style: none;
    margin: 0;
}

.footer-links li {
    float: left;
    position: relative;
    border-right: 1px solid #fff;
}

.footer-links li:last-child {
    border: none;
}

.footer-links li a {
    font-size: 12px;
    padding: 0 10px;
}

.footer-row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
    -webkit-box-align: start;
    align-items: flex-start;
    -webkit-box-pack: justify;
    justify-content: space-between;
}

.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;
}

.cyber-king-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) {
    .cyber-king-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;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing:grayscale;
}

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

.mobile-menu-button {
    border: none;
    background-color: #FFFFFF;
}


.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;
}

.navbar {
    background-color: #FFFFFF;
}

.navbar-nav > li {
    border-bottom: 1px solid #d0d3d4;
}

.navbar-nav > li:nth-child(2) {
    border-bottom: none;
}

 @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: -webkit-crisp-edges;
}

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

.mobile-message {
    font-family: 'Press Start 2P';
    font-weight: 700;
	color: #A6891F;

	background: black;
	border: 2px solid #A6891F;
	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: #A6891F;
    width: 760px;

	background: black;
	border: 2px solid #A6891F;
	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;
    margin-bottom: 100px;

}

.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; 
}

.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:#689b50;
	border:4px solid #3b6e22;
    text-align: center;
}

.start:hover {
	background-color:#3b6e22;
}

.sorry {
    padding: 15px 25px;
    border: 4px solid orange;
    background-color: #A6891F;
}

.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 {
        background-color: #d0d3d4;
        display: none;
}

.legal-body {
    font-family: Tahoma,Verdana,Segoe,sans-serif;
    font-size: 16px;
    color: #3d4146;
}

.highlight {
    color: #fc4c02;
}

.legal-body a {
    color: #3d4146;
}

.legal-title {
    background-color: #1e1e1e;
}

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

.level-link:hover {
    color: #fc4c02;
}

.level-row {
    height: 75px;
}

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

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

.level-select {
    margin-top: 2rem;
    border-width: 1px;
    border-radius: 0.5rem;
    padding: 1.5rem;
    border: solid #dee2e6;   
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0), 0px 0px 20px 20px rgba(255, 255, 255, 0.1); 
    max-width: 400px;
}

.level-select table {
    margin: 0;
}

#locked {
    fill:#fc4c02;
}

#next {
	fill:#3b6e22;    
}

#solved {
	fill:#A6891F;
}

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

.level-row:hover .icon #next {
	fill:#689b50;
}

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

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