/* 
    Style sheet for Galla's page.
*/

/* Load Font */
@font-face
{
    font-family: theBoldFont;
    src: url("/assets/theboldfont.ttf");
}

/* Page's Document */
html {
    scroll-behavior: smooth;
}

/* Page's body */
body
{
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: black;
    --background-star-scroll: 0px;
    --background-pattern-scroll: 0px;
    font-family: Arial, sans-serif;
    color: white;
    font-size: 0.875rem;
}

    /* (contains multiple backgrounds for parallax effect blended together) */
    body::after
    {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-image: url("/assets/pattern.jpg"), url("/assets/stars.jpg");
        background-attachment: fixed;
        background-position: left var(--background-pattern-scroll), center var(--background-star-scroll);
        background-size: 70% auto, auto;
        background-repeat: repeat, repeat-x;
        background-color: #0065de;
        background-blend-mode: overlay, normal;
        z-index: -1;
    }

    /* Hide background while page is not loaded. */
    /*body.hidden::after
    {
        opacity: 0;
    }*/
    body.hidden
    {
        opacity: 0;
    }

    /* Show background when page is loaded. */
    /*body:not(.hidden)::after
    {
        opacity: 1;
        transition: opacity 0.5s ease;
    }*/
    body:not(.hidden)
    {
        opacity: 1;
        transition: opacity 0.5s ease;
    }

    /* Default font for titles */
    body .title
    {
        font-family: theBoldFont;
        font-size: 2rem;
    }

/* Page's links */
a:link,
a:visited
{
    color: #ffed00;
}

/* Page's buttons */
button {
    outline: none;
}

/* Page's Header */
header
{
    position: relative;
    top: 0;
    display: block;
    width: 100%;
    margin-top: 0;
    margin-bottom: 2.5rem;
}

    /* Bar at the top of page */
    header .topbar
    {
        position: absolute;
        top: 0;
        margin-top: 5px;
        padding-top: 15px;
        display: block;
        width: 100%;
        height: auto;
        overflow: visible;
        transition: background-color 0.25s ease;
        z-index: 2;
    }

        /* Bar when attached at the top of viewport */
        header .topbar.fixed
        {
            position: fixed;
            margin-top: 0px;
        }

        /* Bar made opaque to differiantiate from background */
        header .topbar.opaque
        {
            background-color: rgba( 0, 0, 0, 0.8 );
            transition: background-color 0.25s ease;
        }

        /* Content inside top bar */
        header .topbar .content
        {
            position: relative;
            display: block;
            width: 100%;
            max-width: 64rem;
            margin-left: auto;
            margin-right: auto;
            overflow: visible;
        }

            /* Navigation menu */
            header .topbar .content .nav
            {
                position: relative;
                top: 0;
                right: 0;
                display: block;
                padding-right: 0.9375rem;
                padding-bottom: 0.3125rem;
                text-align: right;
                background-size: 100vw;
            }

                /* Navigation menu for in-page links */
                header .topbar .content .nav .navPage
                {
                    display: flex;
                    flex-wrap: nowrap;
                    flex-direction: row;
                    justify-content: flex-end;
                }

                    /* Navigation menu for in-page links' buttons */
                    header .topbar .content .nav .navPage button
                    {
                        padding: 0;
                        margin-left: 0.6818rem;
                        margin-right: 0;
                        margin-bottom: 0.37rem;
                        background-color: inherit;
                        border: none;
                        cursor: pointer;
                        font-family: theBoldFont;
                        color: white;
                        font-size: 1.4rem;
                        transition: color 0.2s ease;
                    }


                        /* Change button's color to yellow when hovered (or selected). */
                        header .topbar .content .nav .navPage button:hover,
                        header .topbar .content .nav .navPage button.selected
                        {
                            color: #ffed00;
                            transition: color 0.2s ease;
                        }

                /* Navigation menu for external links */
                header .topbar .content .nav .navExternal
                {
                    display: flex;
                    flex-wrap: nowrap;
                    flex-direction: row;
                    justify-content: flex-end;
                }

                    /* Navigation menu for external links' buttons */
                    header .topbar .content .nav .navExternal button
                    {
                        position: relative;
                        padding: 0;
                        margin-right: 1px;
                        background-color: inherit;
                        border: none;
                        cursor: pointer;
                    }

                        /* Superpose and hide image that is meant to be the highlighted button icon. */
                        header .topbar .content .nav .navExternal button img.overlay
                        {
                            display: block;
                            position: absolute;
                            top: 0;
                            left: 0;
                            opacity: 0;
                            transition: opacity 0.2s ease;
                        }

                        /* Show hidden image when the button is hovered. */
                        header .topbar .content .nav .navExternal button:hover img.overlay
                        {
                            opacity: 1;
                            transition: opacity 0.2s ease;
                        }

    /* Logo in Header*/
    header .logo
    {
        top: 0;
        display: block;
        height: 21.25rem;
        padding-top: 0.9375rem;
        margin-left: auto;
        margin-right: auto;
    }

/* Page's main content */
main.hidden
{
    opacity: 0;
    transition: height 0.25s ease, opacity 0.25s ease-in;
}

main:not(.hidden)
{
    opacity: 1;
    transition: height 0.25s ease, opacity 0.25s ease-in;
}

/* Page's footer */
footer
{
    width: 100%;
    margin-top: 0;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 0;
    text-align: center;
}

    /* Navigation menu for external links' buttons */
    footer button.top
    {
        position: relative;
        padding: 0;
        margin-top: 1.25rem;
        margin-bottom: 7.8125rem;
        background-color: transparent;
        border: none;
        cursor: pointer;
    }

        /* Superpose and hide image that is meant to be the highlighted button icon. */
        footer button.top img.overlay
        {
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0;
            transition: opacity 0.2s ease;
        }

        /* Show hidden image when the button is hovered. */
        footer button.top:hover img.overlay
        {
            opacity: 1;
            transition: opacity 0.2s ease;
        }

    /* Footer's banner */
    footer .banner
    {
        display: block;
        padding-top: 0.9375rem;
        padding-bottom: 0.9375rem;
        background-color: black;
        text-align: center;
    }

        /* Logo in footer */
        footer .banner .logo
        {
            display: block;
            margin-left: auto;
            margin-right: auto;
            margin-bottom: 0.625rem;
        }

        /* Legal text in footer */
        footer .banner .legal
        {
            color: white;
            font-size: 0.875rem;
            font-family: Arial, sans-serif;
        }


/* Microsoft Edge override */
@supports not ( background-blend-mode: overlay, normal )
{
    /* Remove double parallax background. */
    body::after
    {
        background-image: url("/assets/stars.jpg"), none;
        background-attachment: scroll;
        background-position: center top;
        background-size: auto;
        background-repeat: repeat-x;
        background-color: #0065de;
    }
    /* Remove "Top" button since it doesn't work. */
    footer button.top
    {
        display: none;
    }
}

/* Mobile override */
@media only screen and (max-width: 1280px)
{
    /* Remove double parallax background. */
    body::after
    {
        background-image: url("/assets/stars.jpg"), none;
        background-attachment: scroll;
        background-position: center top;
        background-size: auto;
        background-repeat: repeat-x;
        background-color: #0065de;
        background-blend-mode: normal;
    }
}

/* Mobile portrait override */
@media only screen and (max-width: 1280px) and (orientation: portrait)
{
    /* Top bar should be fixed and opaque at all times. */
    header .topbar
    {
        position: fixed;
        top: 0;
        z-index: 2;
        display: block;
        width: 100%;
        height: auto;
        margin-top: 0px;
        padding-top: 15px;
        overflow: visible;
        background-color: rgba( 0, 0, 0, 0.8 );
        transition: background-color 0.25s ease;
    }

        /* Content should reach the edge of the screen */
        header .topbar .content
        {
            max-width: 100%;
        }

    /* Push logo lower */
    header .logo
    {
        margin-top: 4.9375rem;
    }
}

/* Mobile landscape override */
@media only screen and (max-width: 1280px) and (orientation: landscape)
{
}