/* Define variables */
:root {
    --purple-dark: #26021f;
    --purple: #9019a5;
    --purple-light: #f4d4fc;
    --green-darkest: #1a1e00;
    --green-darker: #013a01;
    --green-dark: #026355;
    --green: #18b718;
    --green-bright: #00ff06;
    --green-light: #d7f531;
    --blue-dark: #023547;
    --blue: #c5ffff;
    --blue-light: #d4fff5;
    --orange-dark: #ff5000;
    --orange: #ffce00;
    --red-dark: #660404;
    --red: #e81a05;
    --red-light: #ff8f8f;
    --yellow-dark: #604900;
    --yellow: #ffe600;
    --gray: #888;
    --gray-60: rgba(0, 2, 15, 0.6);
    --white: #fff;
    --black: #000;
    --black-90: rgba(0, 0, 0, 0.9);
    --black-50: rgba(0, 0, 0, 0.5);

    --radius-main: 20px;
    --radius-large: 100px;
    --thumbSize: 40px;
}

/****************************
*   General element styles
****************************/

body {
    color: var(--white);
    background: var(--black);
    user-select: none;
}

main {
    width: 1920px;
    height: 1080px;
    margin: auto;
    background: url('../images/bg-main.jpg') no-repeat;
    background-size: cover;
    position: relative;
}

h1,
h2 {
    margin: 0px;
}

button {
    background-color: var(--orange-dark);
    font-weight: bold;
    color: var(--white);
    font-size: 30px;
    padding: 5px 15px;
    border: 5px solid var(--red);
    border-radius: var(--radius-large);
    cursor: pointer;
}

.button_disabled {
    opacity: 0.5;
}

.button_disabled:hover {
    cursor: auto;
    background-color: var(--buttonBackground);
}

.hint_button {
    background: var(--green-light);
    color: var(--green-darkest);
    border: none;
    border-radius: 10px;
}

/**************************************************
*   Shared styles (used by elemements across areas)
***************************************************/

/* Class for anything that's hidden by default unless it's triggered */
.default_hidden {
    display: none;
}

/* class for area titles */
.area_label,
.white_label {
    font-size: 22pt;
    color: var(--green-bright);
    padding: 10px;
}

.white_label {
    color: var(--blue-light);
}

.green_frame,
.white_frame {
    border-radius: var(--radius-main);
    border: 3px solid var(--green-bright);
    overflow: hidden;
}

.white_frame {
    border-color: var(--blue-light);
}

.glow_frame {
    animation: pulse 1s ease-in-out 2 reverse;
}

@keyframes pulse {
    from {
        box-shadow: none;
    }

    to {
        box-shadow: 0 0 30px var(--green-bright);
    }
}

.canvas_overlay {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
}

.turned_off {
    filter: brightness(0);
}

.green-bright {
    color: var(--green-bright);
}

.blue-light {
    color: var(--blue-light);
}

/****************************
*   Background styles
****************************/

.positioning_area {
    position: relative;
    /* make pointermove on touch devices */
    touch-action: none;
}

#spacewatch_title {
    position: absolute;
    left: 0px;
    top: 60px;
    padding: 0 40px;
    height: 80px;
    line-height: 80px;
    font-size: 40pt;
    border-radius: 0px var(--radius-large) var(--radius-large) 0px;
    color: var(--blue-light);
    background-color: var(--green-dark);
    box-shadow: var(--black-50) 10px 10px 5px;
}

#level_indicator {
    position: absolute;
    top: 65px;
    right: 40px;
    height: 80px;
    width: 600px;
    font-size: 19pt;
    background-color: var(--gray-60);
    color: var(--blue-light);
    border-radius: var(--radius-large);
    text-align: center;
}

#levels {
    padding: 25px 0;
    margin-left: 10px;
}

.level_label {
    color: var(--gray);
    padding: 0 5px;
}

#EASY.active {
    color: var(--green-bright);
}

#MEDIUM.active {
    color: var(--orange);
}

#HARD.active {
    color: var(--red);
}

#levelButton {
    float: right;
    margin: 6px;
    padding: 5px 30px;
    line-height: 1;
    font-size: 24px;
    border-radius: var(--radius-large);
    background: var(--purple);
    border-color: var(--purple-dark);
    color: var(--purple-light);
}

.title_plate {
    position: absolute;
    top: 5%;
    left: 10%;
    width: 20%;
}

#interaction_container {
    position: absolute;
    top: 180px;
    left: 670px;
    width: 1200px;
    height: 850px;
    border-radius: var(--radius-main);
    background: var(--blue-dark);
    box-shadow: var(--black-50) 10px 10px 5px;
    overflow: hidden;
}

.overlay_container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 6;
}

.overlay {
    background: var(--black-90);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    text-align: center;
    font-size: 18pt;
}

.overlay p {
    margin: 0 auto 1em;
}

.overlay > * {
    font-size: 150%;
}

#observationEndMessage {
    color: var(--blue-light);
}

/************************************************
*   Solar system map & interaction element styles
*************************************************/

.map_container {
    position: absolute;
    top: 10px;
    left: 33px;
    background-size: contain;
}

/* background to map area */
#mapBackground {
    position: relative;
}

.map_background_observation {
    width: 550px;
    height: 460px;
}

.map_background_orbit_determination {
    width: 685px;
    height: 750px;
}

.map_background_simulation {
    width: 1125px;
    height: 735px;
}

.map_interaction_area {
    position: relative;
    width: 100%;
    height: 100%;
    background-image: url('../images/bg-orbit.png');
    background-size: cover;
}

.map_background_observation .map_interaction_area {
    background-image: url('../images/bg-observation.png');
}

.map_background_observation .map_interaction_area.logged {
    background-image: url('../images/bg-observation_logged.png');
}

.map_background_orbit_determination .map_interaction_area {
    background-image: url('../images/bg-orbit.png');
}

.map_background_simulation .map_interaction_area {
    background-image: url('../images/bg-simulation.png');
}

.map_interaction_area_small {
    width: 420px;
    height: 420px;
}

.interaction_element {
    position: absolute;
    top: 0%;
    left: 0%;
}

.observation_angle_arrow {
    transform-origin: center;
    border-radius: 100%;
    z-index: 4;
}

.observation_angle_arrow:hover {
    cursor: pointer;
}

.focus_circle {
    /* background-color: white; */
    /* border-radius: 100% 100%; */
    width: 10px;
    height: 10px;
    opacity: 0.7;
    display: none;
    transform: translate(-50%, -50%);
}

.focus_circle:hover {
    /* background-color: white; */
    /* border-radius: 100% 100%; */
    opacity: 1;
}

/*****************************
*   Sky view and star map area
******************************/

#skyMapArea {
    position: absolute;
    top: 425px;
    left: 617px;
}

#skyScannerDiv {
    font-size: 10px;
}

#telescopeArea {
    position: absolute;
    top: 10px;
    left: 617px;
}

.sky_scanner_interaction_area {
    position: relative;
    overflow: hidden;
}

.sky_scanner_frame {
    position: relative;
    height: 340px;
    width: 545px;
}

.sky_scanner_frame .stars_bg {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    z-index: 1;
    background: var(--black) url('../images/bg-telescope@2x-50.jpg') repeat-x;
    background-size: auto 100%;
}

#scannerCanvas {
    z-index: 3;
}

#scannerCanvas:hover {
    cursor: crosshair;
}

.scanner_asteroid {
    background-color: white;
    border-radius: 100% 100%;
    width: 17px;
    height: 17px;
    z-index: 5;
}

.scanner_asteroid.highlight {
    box-shadow: 0 0 10px 50px var(--green-bright);
    background: var(--green-bright);
    animation: pulsate 1s ease-out infinite;
}

@keyframes pulsate {
    0% {
        box-shadow: 0 0 0 0 var(--green-bright);
    }
    50% {
        box-shadow: 0 0 10px 2px var(--green-bright);
    }
    100% {
        box-shadow: 0 0 0 0 var(--green-bright);
    }
}

.scanner_asteroid:hover,
.scanner_asteroid.highlight:hover {
    cursor: pointer;
    box-shadow: 0 0 20px 4px var(--green-bright);
    animation: none;
}

#stateDisplay {
    position: absolute;
    top: 0%;
    left: 100%;
    transform: translate(calc(-100% - 15px), 0%);
    margin-top: 15px;
    text-align: right;
    font-size: 12pt;
}

#stateDisplayContent {
    white-space: nowrap;
}

#dateContainer {
    display: inline-flex;
    justify-content: space-between;
    width: 120px;
}

#dateContainer.big {
    width: 240px;
    font-size: 200%;
}

/****************************
*   Orbital slider area
****************************/

.orbital_element_sliders {
    position: absolute;
    top: 10px;
    left: 755px;
    width: 410px;
}

#orbital_slider_background {
    width: 100%;
    height: 755px;
    background-color: var(--gray-60);
    font-size: 18pt;
    text-align: center;
    color: white;

    border-radius: var(--radius-main);
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}

.orbital_element_slider_container {
    position: relative;
    width: 80%;
    background: transparent;
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
}

.orbital_element_slider_value {
    position: absolute;
    top: 200%;
    left: 0%;
    transform: translate(-50%, -50%);
    white-space: nowrap;
    display: none;
}

input[type='range'] {
    width: 100%;
    height: 8px;
    -webkit-appearance: none;
    appearance: none;
    background: none;
    cursor: pointer;
    background: var(--white);
    border-radius: 4px;
}

/* Thumb: webkit */
input[type='range']::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    height: var(--thumbSize);
    width: var(--thumbSize);
    background-color: var(--green-bright);
    border-radius: 50%;
    border: none;
}

/* Thumb: Firefox */
input[type='range']::-moz-range-thumb {
    height: var(--thumbSize);
    width: var(--thumbSize);
    background-color: var(--green-bright);
    border-radius: 50%;
    border: none;
}

.slider_disabled {
    opacity: 0;
}

.slider_solution_correct input[type='range'] {
    background: var(--blue-dark);
}

/* Thumb: webkit */
.slider_solution_correct input[type='range']::-webkit-slider-thumb {
    background: var(--blue-dark) url('../images/checkmark.svg') no-repeat;
    background-size: cover;
}

/* Thumb: Firefox */
.slider_solution_correct input[type='range']::-moz-range-thumb {
    background: var(--blue-dark) url('../images/checkmark.svg') no-repeat;
    background-size: cover;
}

.slider_area_button {
    margin-top: 75px;
    width: 100%;
}

/****************************
*   Asteroid log styles
****************************/

#asteroidLog {
    position: absolute;
    top: 540px;
    left: 33px;
}

#asteroidLogContent {
    width: 550px;
    height: 230px;
    position: relative;
    border-radius: var(--radius-main);
    background-color: var(--blue);
    color: var(--green-darker);
    font-size: 14pt;
}

#asteroidLogTitle {
    display: block;
}

/***************************************
Table styles for the asteroid log 
***************************************/
.asteroid_log_table {
    position: absolute;
    table-layout: fixed;
    width: calc(100% - 30px);
    top: 10px;
    left: 15px;
    border-collapse: collapse;
}

/* Header styles and column spacing */
.asteroid_log_table th {
    text-align: left;
}

.asteroid_log_table th:nth-child(1) {
    width: 5%;
}

.asteroid_log_table th:nth-child(2) {
    width: 45%;
}

.asteroid_log_table th:nth-child(3) {
    width: 25%;
}

.asteroid_log_table th:nth-child(4) {
    width: 25%;
}

/* Row styles */
.asteroid_log_table tr {
    border-top: 2px solid var(--green);
    border-bottom: 2px solid var(--green);
}

.asteroid_log_table tr:first-child {
    border-top: none;
}

.asteroid_log_table tr:last-child {
    border-bottom: none;
}

/* cel styles */
.asteroid_log_table th,
.asteroid_log_table td {
    text-align: center;
    padding: 6px 0;
}

/***************************************
Styles for the introduction/start screen
***************************************/

#introductionScreen {
    background: url('../images/bg-intro.gif') no-repeat;
    background-size: contain;
    position: absolute;
    height: 1080px;
    width: 1920px;
    left: 0;
    top: 0;
    z-index: 10;
}

#introductionScreen .stars_overlay {
    background: url('../images/bg-intro-stars.png') no-repeat;
    background-size: contain;
    position: absolute;
    height: 1080px;
    width: 1920px;
    left: 0;
    top: 0;
    z-index: 1;
    opacity: 0.7;
}

.introduction_screen_content {
    padding: 150px 0 0;
    text-align: center;
    font-size: 40pt;
    color: var(--orange);
    position: relative;
    z-index: 2;
}

.introduction_screen_content p {
    line-height: 1.4;
    text-shadow: 0 0 10px var(--purple), 0 0 40px var(--purple), 0 0 80px var(--purple);
}

.start_button {
    margin-top: 60px;
    margin-left: 5%;
    margin-right: 5%;
    font-size: 35pt;
    padding: 10px 40px 10px 40px;
}

#introductionScreen #EASY {
    color: var(--green-bright);
    border-color: var(--green-bright);
    background: var(--green-dark);
    box-shadow: 0 0 40px var(--green-bright);
}

#introductionScreen #MEDIUM {
    color: var(--yellow);
    border-color: var(--yellow);
    background: var(--yellow-dark);
    box-shadow: 0 0 40px var(--yellow);
}

#introductionScreen #HARD {
    color: var(--red-light);
    border-color: var(--red);
    background: var(--red-dark);
    box-shadow: 0 0 40px var(--red);
}

.title_image {
    max-width: 50%;
}

/***************************************
Styles for the message center
***************************************/

#messageCenter {
    position: absolute;
    top: 180px;
    left: 40px;
    width: 520px;
    height: 800px;
    padding: 25px 40px;
    font-size: 24pt;
    background-color: var(--gray-60);
    color: var(--blue-light);
    border-radius: var(--radius-main);
    box-shadow: var(--black-50) 10px 10px 5px;
}

#messageCenter .area_label {
    padding: 0 0 25px;
}

#messageCenter p {
    margin-top: 0;
}

#observationInstructions span {
    font-size: 80%;
}

#observationInstructions li {
    padding: 7px 0;
}

/***************************************
Styles for the simulation phase
***************************************/

#resultMessage {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    color: var(--green-bright);
}

#resultMessage .endContent,
#resultMessage .endContent img {
    width: 100%;
    height: 100%;
}

#resultMessage .endContent img {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
}

#resultMessage h3 {
    margin: 40px 0 450px;
    font-size: 40pt;
}

#resultMessage p {
    max-width: 48%;
    font-size: 17pt;
    margin: auto;
}

#collisionEndContent h3 {
    color: var(--red);
}

#collisionEndContent p {
    color: var(--red-light);
}

#intersectionEndContent h3,
#intersectionEndContent p {
    color: var(--orange);
}

#nonintersectionEndContent h3,
#nonintersectionEndContent p {
    color: var(--green-bright);
}

#endMessage .instructions {
    font-size: 28pt;
    color: var(--green-bright);
}

#endMessage img {
    width: 100%;
    height: auto;
}