:root {
    /* Size and position values */
    --puzzle-font-size: 60px;
    --button-rounding: 8px;
    --snackbar-bottom-offset: 60px;

    /*
        Theme variables (everything that can be impacted by a theme)

        Since these are all saved in themes.js, this section may become unused
        at some point in the future.
    */

    /* Colours */
    --colour-default: white;
    --colour-hover: lightseagreen;
    --colour-primary: lightseagreen;
    --colour-secondary: orange;
    --colour-icon: orange;

    --colour-background: rgb(50, 53, 58);
    --colour-background-lighter: rgb(95, 95, 95);
    --colour-background-darker: rgb(39, 39, 39); /* This isn't used anymore */
    --colour-header: rgb(75, 75, 75);
    --colour-footer: rgb(75, 75, 75);
    --colour-puzzle-background: rgb(0, 27, 58);
    --colour-snackbar-background: #41A7F0;

    --colour-shadow: rgb(20, 20, 20);
    --colour-timer: #4DEB58;
    --colour-timer-inspection: green;
    --colour-timer-warning: red;

    /* Font */
    --font-default: 'Nunito', sans-serif;
    --font-mono: 'Roboto Mono', monospace;
    --font-size-default: 20px;
    --font-size-title: 40px;
}

html {
    height: 100%;
}

body {
    background-color: var(--colour-background);
    color: var(--colour-default);
    font-size: var(--font-size-default);
    font-family: var(--font-default);

    margin: 0;
    text-align: center;
    touch-action: manipulation;
    height: 100%;

    /* Make everything transition smoothly!!! */
    transition: all 0.25s ease-in-out 0s, transform 0.05s ease-in-out 0s;
}

/* * {
    transition: all 0.25s ease-in-out 0s, transform 0.05s ease-in-out 0s;
} */

h1 {
    font-size: 30px;
    margin: 0 0 15px 0;
    padding: 0;
    user-select: none;
}

h2 {
    font-size: 30px;
    margin-top: 40px;
    margin-bottom: 20px;
    user-select: none;
}

strong {
    font-size: 24px;
}

button {
    background-color: var(--colour-background-lighter);
    color: var(--colour-default);
    font-family: var(--font-default);
    font-size: var(--font-size-default);
    border-radius: var(--button-rounding);

    max-height: 100px;
    user-select: none;
    padding: 8px;
    outline: none;

    /* Smooth! Since everything transitions, I don't think this is needed */
    /* transition: color 0.25s ease 0s; */
}

button:hover, button:active {
    color: var(--colour-hover);
}

select {
    background-color: var(--colour-primary);
    color: var(--colour-default);
    font-family: var(--font-default);
    font-size: calc(var(--font-size-default) + 2px);

    padding: 5px 0;
    max-width: 220px;
    user-select: none;
    border-radius: 8px;
    outline: none;
}

a {
    color: var(--colour-default);
    text-decoration: none;
    margin: 20px;
}

a:link, a:visited {
    color: var(--colour-default);
}

a:hover, a:active {
    color: var(--colour-hover);
}

label {
    padding-bottom: 5px;
    display: block;
    color: var(--colour-secondary);
}

table {
    display: inline;
}

td {
    user-select: none;
    font-size: var(--font-size-default);
    padding: 4px 16px;
}

header {
    display: flex;
    flex-shrink: 1;
    background-color: var(--colour-header);
    justify-content: center;
    align-items: center;
    height: 80px;
}

footer {
    display: flex;
    position: relative;
    background-color: var(--colour-footer);
    align-items: center;
    justify-content: space-evenly;
    margin-top: -45px; /* Negative footer height */
    height: 45px;
	clear: both;
}

#content-wrapper {
    min-height: 100%;
}

#content {
    overflow: auto;
    padding-bottom: calc(45px + 20px); /* Height of the footer plus 20px */
}

#title {
    color: var(--colour-primary);
    font-size: var(--font-size-title);

    font-weight: bold;
    padding-left: 15px;
    padding-right: 15px;
    margin: 5px;
    user-select: none;
}

#logo {
    border-radius: var(--button-rounding);

    background-image: url('img/logo.png');
    background-size: 45px;

    width: 45px;
    height: 45px;    

    margin-right: 5px;
    user-select: none;

    display: none;
}

/* Make the Number Orientation title invisible when on a small screen */
@media only screen and (max-width: 1026px) {
    #title {
        display: none;
    }
}

/* Make the Number Orientation logo visible when on a small screen */
@media only screen and (max-width: 1026px) {
    #logo {
        display: block;
    }
}

#start-btn {
    background-color: var(--colour-background-lighter);
    border-radius: var(--button-rounding);
    color: var(--colour-default);

    font-size: 48px;
    font-weight: bold;
    padding: 10px 20px;
    margin: 0 auto;
    max-width: 300px;
    user-select: none;

    /* The transition property allows border-radius to be animated without
       the use of CSS animations or keyframes */
    transition: border-radius 0.25s ease 0s, color 0.25s ease 0s;
}

#scramble-btn {
    background-color: var(--colour-background-lighter);
    border-radius: var(--button-rounding);
    color: var(--colour-default);

    padding: 15px 10px;
    margin: 0 auto;
    max-width: 500px;
    font-size: 22px;
    font-weight: bold;
    user-select: none;

    /* The transition property allows border-radius to be animated without
       the use of CSS animations or keyframes */
    transition: border-radius 0.25s ease 0s, color 0.25s ease 0s;
}

#start-btn:hover,    #start-btn:active,
#scramble-btn:hover, #scramble-btn:active {
    color: var(--colour-hover);
    border-radius: 20px;
}

#wrap {
    background-color: var(--colour-puzzle-background);
    padding: 20px;
    /* border-radius: 10px; */
    margin-bottom: 20px;
}

#numbers {
    /*  Yes, these are backwards deliberately.
        I don't like the way Courier looks.
    */
    font-family: var(--font-mono);
    font-size: var(--puzzle-font-size);
}

#timer {
    color: var(--colour-timer);
    font-size: 60px;
    user-select: none;

    transition: color 0.25s ease 0s;
}

#timer:hover {
    color: var(--colour-hover);
}

#current-record {
    color: var(--colour-secondary);
    margin: 15px;
    max-height: 200px;
}

#statistics-box {
    min-width: 300px;
    height: 100px;
    font-family: var(--font-mono);
    background-color: var(--colour-primary);
    border-radius: 10px;
    text-align: right;
    padding: 8px;
    padding-right: 16px;
    margin-left: 20px;
}

#move-history {
    display: flex;
    flex-wrap: wrap;
}

#options-flex {
    display: flex;
    justify-content: space-evenly;
    align-content: center;
    margin: 0 0 20px 0; /* Bottom padding */
}

/* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
    Combine #global-settings and #leaderboard into a single class for overlay content panels
*/

#global-settings-old {
    background-color: var(--colour-background);
    box-shadow: 0px 0px 40px var(--colour-shadow);

    padding: 20px 0;
    width: 70%;
    max-height: 70%;
    z-index: 2;
    border-radius: 6px;
}

#leaderboard-old {
    background-color: var(--colour-background);
    box-shadow: 0px 0px 40px var(--colour-shadow);

    padding: 20px 0;
    width: 70%;
    max-height: 70%;
    border-radius: 6px;
    overflow-y: scroll;
}

input {
    background-color: var(--colour-primary);
    color: var(--colour-default);
    font-family: var(--font-mono);
    font-size: calc(var(--font-size-default) + 2px);

    padding: 5px 8px;
    min-width: 100px;
    max-width: 300px;
    border-radius: 8px;
    text-align: center;
    border: none;
}

input#mobile-input {
    font-size: 50px;
}

ol.overview {
    display: inline-block;
}

div.center-box {
    width: 100%;
}

.overlay-wrapper {
    /* Stay covering the screen */
    position: fixed;

    /* Make sure everything is exactly in the center */
    display: flex;
    align-items: center;
    justify-content: center;

    /* Make sure it covers the WHOLE screen */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;

    /* Mostly seethrough background colour */
    background-color: rgba(0, 0, 0, 0.5);
}

.overlay-content {
    background-color: var(--colour-background);
    box-shadow: 0px 0px 40px var(--colour-shadow);

    padding: 20px;
    max-width: 70%;
    max-height: 70%;
    z-index: 2;
    border-radius: 6px;
    overflow-y: scroll;
}

.header-btn {
    background-color: var(--colour-icon);
    border-radius: var(--button-rounding);

    font-size: 25px;
    font-weight: bold;
    padding: 10px;
    margin: 0 5px;

    /* The transition property allows border-radius to be animated without
       the use of CSS animations or keyframes */
    transition: border-radius 0.25s ease 0s, color 0.25s ease 0s;
}

.header-btn:hover, .header-btn:active {
    color: var(--colour-hover);
    border-radius: 50%;
}

.footer-btn {
    user-select: none;
    padding: 0 2px;

    transition: color 0.25s ease 0s;
}

.footer-btn:hover, .footer-btn:active {
    color: var(--colour-hover);
}

.header-select {
    margin: 0 5px;
}

.mobile-btn {
    font-family: var(--font-mono);
    font-size: 80px;
    margin: 15px 5px;
    border-radius: 5px;
    min-width: 100px;
    max-height: 150px;
}

/* .mobile-textbox {
    font-family: var(--font-mono);
    font-size: 30px;
    margin: 15px 10px;
    border-radius: 5px;
    min-width: 100px;
    max-height: 150px;
} */

.info-flex {
    display: flex;
    justify-content: space-evenly;
    padding: 0 20px;
}

.separator {
    margin: 20px 0;
    border: var(--colour-default) solid;
}

.separator-noborder {
    margin: 30px 0;
}

.separator-big {
    margin: 200px 0 0 0;
    border: var(--colour-default) solid;
}

.separator-noborder-medium {
    margin: 100px 0 0 0;
}

.bubble-text {
    background-color: var(--colour-secondary);
    border-radius: 10px;
    padding: 2px 8px;
}

/* For fadeable elements */
.fadeable {
    /* This class is simply a tag for finding fadeable elements in JavaScript */
    animation: 0.5s ease forwards;
}

/* '> *' is to apply to the element's children */
.fadeable-fade-in > * {
    animation: fade-in-anim 0.75s ease forwards;
}

/* '> *' is to apply to the element's children */
.fadeable-fade-out > * {
    animation: fade-out-anim 0.5s ease forwards;
}

/* For blurred out elements (usually the puzzle before inspection) */
.blurred {
    filter: blur(1.2rem);
}

/* I'm sorry... */
.fall-down {
    animation: fall-down-anim 5s ease-in-out forwards;
}

@keyframes fall-down-anim {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(calc(-100vh - 100%));
        background-color: red;
    }
}

/* Fading animations for fadeable elements */
@keyframes fade-out-anim {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        /* height: 0px;
        position: absolute; */
        z-index: -1;
    }
}

@keyframes fade-in-anim {
    from {
        opacity: 0;
        /* height: 0px;
        position: absolute; */
        z-index: -1;
    }

    to {
        opacity: 1;
    }
}

@keyframes disappear-anim {
    to {
        display: none;
    }
}