/* This file contains CSS rules that define the overall layout such as styles for the positioning of elements on the page
especially elements from the layout.html.php */
:root {
    --layout-main-color: #2e3e50;
    --layout-light-color: #b6e9ff;
    --layout-lighter-text-color: #65818d; /* When text should not be full black but a little lighter, perfect for hovers as well */
    --layout-darker-main-color: #3f87a6; /* When text should not be full black but a little lighter, perfect for hovers as well */
    /*    button hover color, text color */
    --layout-main-button-color: whitesmoke;
    --layout-main-button-hover-color: #e7e7e7;
}

/* mobile first min-width sets base and content is adapted to computers. */
@media (min-width: 100px) {
    #wrapper {
        display: flex;
        flex-direction: column;
        /* No top/bottom margin on wrapper it makes body not touch the top */
        /* --vh set by javascript file default.js
        https://css-tricks.com/the-trick-to-viewport-units-on-mobile
        if not found 1vh is fallback value, phpStorm warning can be ignored */
        height: calc(var(--vh, 1vh) * 100);
    }

    header {
        margin: 1em 0 1em 0;
        flex: none;
    }

    main {
        /*width: 100%;*/
        padding: 1em 0.5em 1em 0.5em; /* Not margin, it creates a scrollbar because of wrapper 100vh*/
        /* Prevent Browser from letting these items shrink to smaller than their content's default minimum size. */
        flex: 1 0 auto;
        border-radius: 20px;
    }

    /*The specificity is way too high*/
    main *:where(:not(h1):not(h2):not(h3):not(a:not(.no-style-a)):not(strong)) {
        color: #2e3e50;
    }

    .no-style-a, .no-style-a:hover {
        font-weight: normal;
        text-decoration: none !important;
    }

    /* Headers have have a margin too big on mobile */
    main h1 {
        margin-top: 0;
    }

    /* Remove bottom margin as well when header is in vertical-center div to align all elements in the middle */
    .vertical-center h1 {
        margin-bottom: 0;
    }

    .vertical-center {
        /*Approximately same as normal h1 bottom margin*/
        margin-bottom: 25px;
    }

    footer {
        flex: none;
        /* Prevent Browser from letting these items shrink to smaller than their content's default minimum size. */
        flex-shrink: 0;
        background: #f6f6f6;
        padding: 10px;
        text-align: center;
        color: #9b9b9b;
        font-size: 0.9em;
        margin-top: 1em; /* Same as margin-bottom on header */
        border-radius: 999px 999px 0 0;
    }

    footer a {
        color: #9B9B9B;
    }

    footer a:hover {
        color: black;
    }

    .footer-icon {
        width: 1em;
        vertical-align: middle;
    }

    #github-icon {
        width: 1.3em;
    }

    address {
        font-style: normal;
    }

    .error-div-below-form {
        margin-top: 20px;
    }
}

@media (min-width: 340px) {
    /* 340px enough wide to add letter-spacing*/
}

@media (min-width: 400px) {
    main {
        padding: 1em 1em 1em 1em; /* Not margin, it creates a scrollbar because of wrapper 100vh*/
    }
}

@media (min-width: 641px) {
    /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */
    header{
        margin-top: 2em;
    }
    #wrapper{
        margin: 0 2em;
    }
}

@media (min-width: 961px) {
    /* tablet, landscape iPad, lo-res laptops ands desktops */
    #wrapper {
        width: 80%;
        margin: auto;
    }
    header{
        margin: 2em 0 1em 0;
    }
}

@media (min-width: 1025px) {
    /* big landscape tablets, laptops, and desktops */

}

@media (min-width: 1281px) {
    /* hi-res laptops and desktops */
}