/* Colors */

:root {
    --light: #F5F7F7;
    --dark-warm: #C82337;
    --medium-warm: #E06236;
    --light-warm: #D7AB61;
    --cold: #2F4C79;
    --dark: #0b1522;

    --controls-max-size: 12em;

    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

.colored_stripes {
    flex-shrink: 1;
    --number-of-stripes: 4;
    --stripe-height: 0.75em;
    height: calc(var(--stripe-height) * var(--number-of-stripes));
    min-height: 1.5em;
    background: linear-gradient(var(--dark-warm) 0%, var(--dark-warm) 25%, var(--medium-warm) 25%, var(--medium-warm) 50%, var(--light-warm) 50%, var(--light-warm) 75%, var(--cold) 75%, var(--cold) 100%);
}




/* General Layout */

html, body {
    padding: 0;
    margin: 0;
    background-color: var(--light);
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Headlines */
h1, h2 {
    margin-top: 0;
    margin-bottom: 0;
    color: var(--light);
}

h1 {
    font-weight: 900;
}

/* Header, Main, Footer */
header, footer {
    margin: 0;
    color: var(--light);
    background-color: var(--dark);
    flex-grow: 0;
}

footer {
    background-color: var(--cold);
}

main {
    flex-grow: 1;
}

/* Limiters */
.limiter {
    margin-left: auto;
    margin-right: auto;
    width: 80%;
}

.header, .main, .footer {
    padding: 0.625em;
}

/* Fieldsets */
fieldset {
    border-radius: 0.3125em;
    border-color: var(--cold);
    margin: 0;
}

.labyrinth, .controls {
    max-width: calc((100vh - 16em) / 2); /* Labyrinth and controls fit always on the screen */
}

.labyrinth {
    margin-bottom: 0.8em;
}

.communication {
    height: calc(100% - calc(var(--controls-max-size) + 1.5em));
    flex-grow: 1;
}





/* Playfield */
.field {
    width: 100%;
}

.row {
    float: left;
    width: 100%;
}

.row>div {
     width: calc(100% / 7.0);
     float: left;
}

.square_holder {
    margin: 0;
    position: relative;
}

.square_sizer {
    padding-top: 100%;
}

.square_content {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}







/* Cells */

.cell {
    background-color: var(--cold);
}

.viable {
    background-color: var(--light-warm);
}

.wall {
    background-color: var(--dark-warm);
}

.player, .target, .controls_symbol{
    background-size: 600% 100%;
    background-image: url(./images/symbols.svg);
}

.player {
    background-position: 0%;
}

.target {
    background-position: 20%;
}








/* Size Buttons */

.size_bar {
    clear: both;
    text-align: right;
    padding-top: 0.6em;
}
.size_bar>button {
    width: 5em;
    margin-left: 0.5em;
}

button:hover {
    background-color: var(--dark);
    color: var(--light);
    cursor: pointer;
}






/* Controls */

.control_holder {
    margin: auto;
    width: 90%;
    max-width: var(--controls-max-size);
}

.control_content {
    border: 1px solid var(--dark);
    background-color: var(--cold);
    border-radius: 0.3125em;
}

.direction_up {
    background-position: 40%;
}

.direction_right {
    background-position: 60%;
}

.direction_down {
    background-position: 80%;
}

.direction_left {
    background-position: 100%;
}

.controls_symbol:hover {
    cursor: pointer;
    background-color: var(--dark);
}

.controls_button {
    width: calc((100% / 3.0) - 2px);
    height: calc((100% / 3.0) - 2px);
    float: left;
    border: 1px solid var(--dark);
    border-radius: 0.3125em;
}






/* Pop-Up */

.popup {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: rgba(11, 21, 34, 0.8)    /* rgba(from var(--dark) r g b / 0.8) <-- works on Chrome and Firefox but validator doesnt like it.*/
}

.popup>div {
    margin: auto;
    text-align: center;
    width: 10em;
    padding: 4em;

    background-color: var(--light);
    border: 0.1em solid var(--dark);
    border-radius: 0.5em;
}

.popup>div>div {
    margin: 1em;
}







/* Landscape Orientation Phones */

@media (orientation: landscape) {
    .limiter {
        width: 80%;
        max-width: 130em;
    }

    .main {
        display: flex;
        justify-content: space-between;
    }

    .main>fieldset {
        width: 45%;
    }

    .controls {
        max-width: none;
    }

    .labyrinth {
        margin-bottom: 0;
        margin-right: 1em;
        max-width: calc(100vh - 16em);
    }
}


/* Ultra Wide Screens */

@media (orientation: landscape) and (min-width:1281px) {
    .main {
        justify-content: left;
    }

    .colored_stripes {
        flex-shrink: 0.5;
        min-height: 1.5em;
    }

    .control_holder {
        margin: 0;
    }

    .labyrinth {
        margin-bottom: 0;
        margin-right: 1em;
        max-width: calc(100vh - 20em);
        
    }
}