/* Sizes from https://www.metaltoad.com/blog/simple-device-diagram-responsive-design-planning */

/* Mobile Styles */
@media only screen and (max-width: 519px) {
    :root {
        --main-padding: 0.5rem;
        --desktop: none;
    }
}

/* Tablet Styles */
@media only screen and (min-width: 520px) and (max-width: 959px) {
    :root {
        --main-padding: 1rem;
        --desktop: none;
    }
}

/* Desktop Styles */
@media only screen and (min-width: 960px) {
    :root {
        --main-padding: 2rem;
        --desktop: display;
    }
}

/* Global variables */
:root {
    --main-color: #ffffff;
    --main-second-color: #e5e5e5;
    --button-color: #ffffff;
    --text-color: #000000;
    --heading-text-color: #5f6368;
    --global-animation: 0.2s ease-in-out;
}

/* Dark Mode enabled */
@media (prefers-color-scheme: dark) {
    :root {
        --main-color: #000000;
        --main-second-color: #1a1a1a;
        --button-color: #363636;
        --text-color: #ffffff;
        --heading-text-color: #e5e5e5;
    }
}

* {
    margin: 0;
}

body {
    font-family: Roboto, sans-serif;
    background-color: var(--main-second-color);
    color: var(--text-color);
    margin: 0;
    padding: 0;
    min-height: 100%;
}

header {
    padding: 1rem var(--main-padding);
    /* Animations */
    transition: padding var(--global-animation);
}

header>h1 {
    color: var(--text-color);
    font-size: 2rem;
    line-height: 1.5;
    /* Animations */
    transition: color var(--global-animation);
 }

main {
    margin: 0;
    padding: var(--main-padding);
    background-color: var(--main-color);
    min-height: 70vh;
    display: block;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 1px -2px, rgba(0, 0, 0, 0.14) 0px 2px 2px 0px, rgba(0, 0, 0, 0.12) 0px 1px 5px 0px;
    /* Animations */
    transition: padding var(--global-animation), background-color var(--global-animation);
}

main>section {
    margin: var(--main-padding) auto;
    max-width: 800px;
    /* Animations */
    transition: margin var(--global-animation);
}

main>section>h2 {
   color: var(--heading-text-color);
   font-size: 1rem;
   line-height: 1.5;
   margin-top: 1rem;
   margin-bottom: 1.5rem;
   /* Animations */
   transition: color var(--global-animation);
}

footer {
    display: block;
    width: 100%;
}

footer>p {
    padding: 2rem;
}

footer>p.beta_desktop {
    display: var(--desktop);
}

footer>p.beta_desktop>kbd {
    margin-left: 0.1rem;
}