styles.css

/* Import the game's unique font */

@font-face {
    font-family: "Wargate Normal";
    src: url("fonts/Wargate-Normal.ttf");
}

/* This snippet prevents scrolling at the start of the game so that intro can play out */

html,
body,
.lock-display,
.reload-btn,
.end-header,
.status-overlay,
.sidebar {
    margin: 0;
}

.lock-display {
     overflow: hidden;  
}

/* Universal styles, including fonts */

html,
body,
.status-overlay,
.sidebar {
    overflow-x: hidden;
}

a {
    text-decoration: none;
}

#story-scroll-text,
.title-animation-1,
.title-animation-1-5,
.end-titles-usa,
.end-titles-russia {
    font-family: 'Amethysta', serif;
    line-height: 1.8;
    transform: translateY(100%);
}

/* 'wargate' is a military-style font class used for certain headers */

body:not(.wargate),
select {
    font-family: "Libre Franklin", sans-serif;
    letter-spacing: 1.5px;
}

.wargate,
.swal-title,
.swal-text,
.swal-button {
    letter-spacing: .1em;
}

.wargate, 
.swal-title,
.swal-button {
    color: #000;
}

.wargate,
.swal-title {
    font-family: "Wargate Normal", sans-serif;
}

.main-titles .wargate {
    font-size: 4.5rem;
}

/* Radar with sweep animation on tactical map - credit to Ana Tudor */

.radar,
.sweep,
.slider__nav {
    z-index: 10;
}

.radar {
    border-radius: 50%;
    height: 180px;
    left: 12%;
    margin: -117px;
    top: 88vh;
    transition: 8s;
    width: 180px;
    box-shadow: 0 0 0 1px hsla(0, 0%, 0%, 0.5),
        inset 0 0 0 1px hsla(0, 0%, 100%, 0.15);
    background:
        repeating-radial-gradient(transparent, transparent 23px, #287A33 25px, #287A33 27px),
        linear-gradient(transparent 49.75%, #0E4C42 49.75%, #0E4C42 50.25%, transparent 50.25%) 50% no-repeat,
        linear-gradient(90deg, transparent 49.75%, #0E4C42 49.75%, #0E4C42 50.25%, transparent 50.25%) 50% no-repeat,
        linear-gradient(#333, #111);
    background-size: 100%, 218px 218px, 218px 218px, 100%;
}

.sweep {
    animation: sweep 15s infinite linear;
    background: linear-gradient(50deg, rgba(34, 34, 34, 0) 56%, hsla(145, 50%, 40%, 1));
    border-radius: 100% 0 0 0;
    border-right: solid 1px hsla(145, 50%, 40%, .3);
    box-sizing: border-box;
    height: 78px;
    left: 3px;
    top: 12px;
    transform-origin: 100% 100%;
    width: 88px;
}

@keyframes sweep {
    to {
        transform: rotate(360deg);
    }
}

/* Map object */

#vmap {
    height: 90vh;
}

/* ONLY NEED TO LIST PROPERTIES TO OVERRIDE: CHECK AT END: JQVMaps tooltip hover styling */

.jqvmap-label {
    background: #292929;
    color: #6FD25A;
    font-family: "Libre Franklin", sans-serif;
}

/* HUD - main control panels, buttons & passage of time */

.game-hud,
#nation-select,
.options-container div,
.status-overlay,
.status-overlay-content,
footer div {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Game over img (non-existent by default) */

.game-over-img {
    height: 80vh;
}

.flex-column,
.status-overlay {
    flex-direction: column;
}

.title-overlay-text {
    color: #FFDB19;
}

#day,
#week,
#month,
#year {
    padding: 0.5rem;
    letter-spacing: 1.3px;
}

.options-container div {
    padding-left: 2rem;
}

.research-span,
label {
    margin: 20px 20px 15px 0;
}

/* Overview: overlay allowing player to see the overall status of their nation */

#overview,
.options-container,
select,
input[type=number],
footer {
    font-size: 1rem;
}

#nation-name,
.sidebar-close-btn,
a {
    color: #FF3131;
}

#research-options {
    margin-left: 15px;
}

button,
.jqvmap-label,
input[type=number],
select,
footer {
    font-weight: 600;
}

#day,
#week,
#month,
#year,
.end-header,
.status-overlay-content,
.nation-select-title,
#start-game-btn,
.authour-credit,
.options-container,
input[type=number],
select,
footer,
button {
    color: #99CCFF;
}

a:hover,
a:focus {
    color: #00D7C3;
}

select {
    border-radius: 5px;
    padding: 10px;
    width: 360px;
}

.sidebar select {
    width: 170px;
}

input[type=number] {
    border: none;
    border-bottom: 2px solid #FF3131;
    line-height: 2;
}

.options-container .cp-image {
    height: 90px;
    width: 85px;
}

.cp-image-rifle {
    height: 90px;
    width: 170px;
}

.military-units .cp-image {
    height: 120px;
}

.options-container,
.title-overlay,
.hidden,
#game-over-titles,
.end-titles-usa,
.end-titles-russia,
.victory-img-section {
    display: none;
}

.sidebar .cp-image {
    height: 50px;
    width: 22%;
}

#story-scroll-text,
.end-titles-usa,
.end-titles-russia,
.victory-img-section,
.options-container div,
.nation-select-title,
.status-overlay-content {
    text-align: center;
}

/* Title overlay where game intro takes place: story scrolling text and animations */

.title-overlay {
    background-color: rgba(0, 0, 0, 0.1);
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
}

.title-overlay,
.status-overlay,
.sidebar {
    position: fixed;
}

.sidebar,
.title-overlay,
.status-overlay,
.slider__inner {
    height: 100%;
}

/* Darken the title overlay on load to show the story text in greater clarity. Adds mood also */

.darken-overlay {
    animation: darken-overlay 4s linear forwards;
}

/* Text and content inside / on top of the title overlay */

.title-overlay-text {
    left: 50%;
    top: 40%;
    transform: translate(-50%, -50%);
}

/* New class applied to the above to ensure victory screens have sufficient top margin */

.new-top-setting {
    top: 50%;
}

.radar,
.sweep,
.title-overlay-text,
.status-overlay .status-closebtn,
.sidebar-close-btn,
.slider__inner {
    position: absolute;
}

/* Title screen & story text with animations to run */

#story-scroll-text {
    animation: story-scroll-text 50s linear forwards 5s;
    height: calc(100vh + 550px);
}

.title-overlay h2,
.title-overlay h3,
.options-container .cp-image .cp-image-rifle {
    margin: 10px;
}

.intro-img {
    border-radius: 20px;
    height: 380px;
    filter: grayscale(1);
}

.bg-intro-img,
.game-over-img {
    width: 100vw;
}

.bg-intro-img {
    height: 100vh;
}

/* Nation flags for country select and top right corner */

.logo-usa,
.logo-russia {
    height: auto;
    margin: 8px 12px 0 0;
    width: 60px;
}

.status-overlay,
.sidebar {
    z-index: 1000;
}

.nation-img-usa,
.nation-img-russia {
    height: 320px;
    width: 500px;
}

button,
.status-closebtn,
.nation-img-usa,
.nation-img-russia,
.slider__nav {
    cursor: pointer;
}

.img-fade-out {
    transition: 3s;
}

@keyframes darken-overlay {
    100% {
        background-color: rgba(0, 0, 0, 0.88);
    }
}

@keyframes story-scroll-text {

    from {
        transform: translateY(100%);
    }

    to {
        transform: translateY(-100%);
    }
}

@keyframes fade-in {
    100% {
        opacity: 1;
    }
}

@keyframes fade-in-out {
    50% {
        opacity: 1;
    }
}

/* Fire animations applied to game title text (adapted from an idea by Antti Nyman) */

@keyframes flame {

    0% {
        text-shadow: 0 0 20px #FEFCC9,
            10px -10px 30px #FEEC85,
            -20px -20px 40px #FFAE34,
            20px -40px 50px #EC760C,
            -20px -60px 60px #CD4606,
            0 -80px 70px #973716,
            10px -90px 80px #451B0E;
    }

    100% {
        text-shadow: 0 0 20px #FEFCC9,
            10px -10px 30px #FEFCC9,
            -20px -20px 40px #FEEC85,
            22px -42px 60px #FFAE34,
            -22px -58px 50px #EC760C,
            0 -82px 80px #CD4606,
            10px -90px 80px #973716;
    }
}

/* Adapted from an idea by Ran Enoch - applied to the title branding above the map element */

.fire {
    text-shadow:
        0px -2px 4px #FFF,
        0px -2px 10px #FF3,
        0px -10px 20px #F90,
        0px -20px 40px #C33;
}

.radar,
.title-animation-1,
.title-animation-1-5,
.title-animation-2,
.title-animation-3,
.title-animation-4,
.end-text-1,
.end-text-2,
.end-text-3,
.authour-credit,
#start-game-btn,
#reload-btn,
.img-fade-out,
.victory-heading,
.victory-img {
    opacity: 0;
}

.slow-reveal {
    opacity: 0.8;
}

.game-hud .wargate {
    margin-right: 2%;
}

.title-animation-1,
.title-animation-1-5 {
    animation: fade-in-out 4s ease-in-out both;
}

.title-animation-1 {
    animation-delay: 54s;
}

.title-animation-1-5 {
    animation-delay: 58s;
}

.title-animation-2 {
    animation: fade-in 2s ease-in-out 62s both, flame 0.65s ease-in-out 68s infinite alternate;
}

.title-animation-3 {
    animation: fade-in 2s ease-in-out 64s both, flame 0.65s ease-in-out 69s infinite alternate;
}

.title-animation-4 {
    animation: fade-in 2s ease-in-out 66s both, flame 0.65s ease-in-out 70s infinite alternate;
}

#start-game-btn {
    animation: fade-in 4s ease-in-out both;
    animation-delay: 70s;
    font-size: 1.5rem;
    width: 230px;
}

/* Sliding overlay used for displaying status report */

.status-overlay {
    background-color: rgb(0, 0, 0);
    background-color: rgba(0, 0, 0, 0.9);
    left: 0;
    top: 0;
    transition: 0.5s;
    width: 0;
}

.status-overlay-content {
    margin-top: 20px;
}

.status-img {
    width: 75px;
}

.status-overlay .status-closebtn {
    font-size: 60px;
    right: 45px;
    top: 20px;
}

/* UI action sidebar menu where the player takes action towards nations */

.sidebar {
    left: 0;
    opacity: 0.9;
    margin-left: -300px;
    top: 0;
    transition: 1s;
    width: 300px;
}

body,
select,
.sidebar,
input[type=number] {
    background-color: #111;
}

.sidebar-close-btn {
    font-size: 48px;
    margin-left: 50px;
    right: 25px;
    top: 0;
}

/* Class applied with jQuery script to open and close the sidebar UI when 's' is pushed */

.open {
    margin-left: 0;
}

/* Button styling: neon technological theme */

#start-game-btn,
#skip-intro-btn,
#reload-btn,
.reload-btn,
.sidebar button,
.game-hud button,
.options-container button {
    background-color: transparent;
    border-radius: 10px;
    border: 3px solid #00D7C3;
    margin: 15px;
    padding: 8px;
    text-transform: uppercase;
    transition: all .15s ease-in-out;
    width: 170px;
}

#skip-intro-btn,
.game-hud button {
    width: 120px;
}

#skip-intro-btn {
    margin: 2rem;
}

.game-hud button {
    margin: 10px;
}

#start-game-btn,
#reload-btn,
.reload-btn,
.sidebar button,
.sidebar .cp-image {
    margin: 30px auto;
}

.agents-imprisoned,
.sidebar button {
    margin: 18px auto;
}

#skip-intro-btn:hover,
#start-game-btn:hover,
#reload-btn:hover,
.reload-btn:hover,
.sidebar button:hover,
.game-hud button:hover,
.options-container button:hover,
.swal-overlay--show-modal .swal-modal:hover {
    box-shadow: 0 0 10px 0 #00D7C3 inset, 0 0 20px 2px #00D7C3;
}

/* Additional sweetalert.js styling for in-game alerts - here I'm jazzing it up even more! */

.swal-overlay--show-modal .swal-modal {
    background: #000;
    border: 1px solid #00D7C3;
    border-radius: 15px;
}

.swal-button:not(.swal-button--cancel) {
    background: #005FC5;
}

.swal-button:not(.swal-button--cancel),
.swal-title, 
.swal-text {
    color: #FFF;
}

.swal-button:hover:not(.swal-button--cancel) {
    background: #1E90FF;
}

.swal-icon .swal-icon--success {
    background: #fff;
}

/* Ending titles: Not shown at start due to intro sequence running instead */

@keyframes end-scroll-text {
    
    from {
        transform: translateY(100%);
    }

    to {
        transform: translateY(-100%);
    }
}

.end-titles-usa,
.end-titles-russia {
    animation: end-scroll-text 50s linear forwards 5s;
}

.title-overlay-text,
.end-titles-usa,
.end-titles-russia,
.victory-heading,
.authour-credit {
    font-size: 1.3rem;
}

.reveal {
    animation: fade-in 4s ease-in-out both;
}

.reveal-flame {
    animation: flame 0.65s ease-in-out infinite alternate 10s, fade-in 4s ease-in-out both;
}

/* 
    Setting the victory image to have a width set in percentages prevents cut off of any text at the top of the screen, caused by other content pushing the fixed container upwards. Targeting the image size - the largest element - offsets that element's impact on pushing the content upward. It prevents the image from being so large that it breaks out of the fixed height of its container.
*/

.victory-img {
    transition: 3s;
    width: 50%;
}

/* Game Over (defeated) screen and main title styling */

.end-header {
    font-size: 2.5rem;
}

.victory-img-section .wargate {
    font-size: 3.5rem;
}

.main-titles .wargate:not(#start-game-btn),
.victory-img-section .wargate,
.end-header {
    text-shadow: 0px 0px 6px rgba(255, 255, 255, 0.7);
}

/* Option menu elements - runs as a slider / carousel to prevent UI cluttering */

.slider {
    position: relative;
}

.slider__nav {
    appearance: none;
    backface-visibility: hidden;
    border-radius: 50%;
    box-shadow: 0 0 0 0 #333, 0 0 0 0 rgba(51, 51, 51, 0);
    height: 12px;
    margin: 1rem 12px 10% 12px;
    outline-offset: -6px;
    outline: 6px solid #CCC;
    width: 12px;
}

.slider__nav:checked {
    animation: check 0.4s linear forwards;
}

.slider__nav:checked:nth-of-type(1) ~ .slider__inner {
    left: -2%;
}

.slider__nav:checked:nth-of-type(2) ~ .slider__inner {
    left: -102%;
}

.slider__nav:checked:nth-of-type(3) ~ .slider__inner {
    left: -203%;
}

.slider__nav:checked:nth-of-type(4) ~ .slider__inner {
    left: -303%;
}

.slider__nav:checked:nth-of-type(5) ~ .slider__inner {
    left: -402%;
}

.slider__nav:checked:nth-of-type(6) ~ .slider__inner {
    left: -502%;
}

.slider__inner {
    left: 0;
    top: 85%;
    transition: left 0.5s;
    width: 600%;
}

.slider__contents {
    flex-flow: column nowrap;
    flex: 1;
    padding: 3rem;
}

/* Animation that plays when radio slider is checked (clicked) */

@keyframes check {
    
    50% {
        box-shadow: 0 0 0 12px #333, 0 0 0 36px rgba(51, 51, 51, 0.2);
        outline-color: #333;
    }

    100% {
        box-shadow: 0 0 0 0 #333, 0 0 0 0 rgba(51, 51, 51, 0);
        outline-color: #333;
    }
}

/* Animations governing the end titles screen & headings */

.end-text-1 {
    animation-delay: 5s;
}

.end-text-2 {
    animation-delay: 7s;
}

.end-text-3 {
    animation-delay: 9s;
}

.authour-credit {
    animation-delay: 13s;
}

#reload-btn,
.victory-img {
    animation-delay: 16s;
}

/* Footer & copyright element */

footer {
    margin-top: 18.5%;
    padding-bottom: 15px;
}

footer img {
    height: 30px;
    padding: 0 5px;
    width: 30px;
}

/* 
    Status open and close functionality. 'displayBlock' and 'marginAuto' and 'game-over-transition' classes need to be at bottom of the cascade to prevent unwanted effects when JS is applied. Otherwise, the classes will activate where they are in the cascade, so any rules applied below them will override the class every time.
*/

#vmap,
.status-open,
.options-container,
intro-img,
.title-overlay,
.status-overlay-content {
    width: 100%;
}

input[type=number],
.sidebar .cp-image,
.displayBlock,
button,
footer {
    display: block;
}

input[type=number],
.marginAuto {
    margin: auto;
}

.game-over-transition {
    transition: 5s;
}