@layer default {
    #container {
        display: flex;
        flex-direction: column;
        align-content: stretch;
        gap: 0;
        overflow: scroll;
        overflow-x: clip;

        height: 100vh;
    }

    #scroll-to-top {
        order: 1;

        display: block;

        background: #5dccfc;
        margin-top: -500px;
        min-height: 500px;
        width: 100%;
        visibility: visible;
    }

    #sticky-buttons-container {


        /*Debug*/
        background: #ce0404;
    }

    #sticky-buttons-always-visible {
        order: 7;

        position: sticky;
        bottom: 0;

        display: flex;
        justify-content: space-between;
        align-items: center;

        width: 100%;
        visibility: hidden;

        /*Debug*/
        background: #329b4c;
    }

    .sticky-btn-always-visible-flex-container {
        width: 33%;

        display: flex;
        flex-direction: row;
        gap: 10px;

        & > *  {
            margin: var(--sticky-buttons-padding-bottom) var(--sticky-buttons-padding-left-right);
        }
    }

    #sticky-buttons-always-visible-left {
        justify-content: flex-start;
    }

    #sticky-buttons-always-visible-center {
        justify-content: center;
    }

    #sticky-buttons-always-visible-right {
        justify-content: flex-start;
        flex-direction: row-reverse;
    }

    #sticky-buttons-always-visible-right > *, #sticky-buttons-always-visible-left > *, #sticky-buttons-always-visible-center > * {
        visibility: visible;
    }

    #after-scroll-visible-parent {
        position: absolute;
        bottom: -70px;
        top: 115vh;

        width: 100%;
        visibility: hidden;
    }

    #sticky-buttons-after-scroll-visible {
        position: sticky;
        top: calc(100vh - var(--sticky-button-height) - var(--sticky-buttons-padding-bottom));

        display: flex;
        justify-content: space-between;
        align-items: flex-end;

        padding-left: var(--sticky-buttons-padding-left-right);
        padding-right: var(--sticky-buttons-padding-left-right);
        z-index: 2;
        visibility: hidden;
    }

    .sticky-buttons-after-scroll-visible-flex-container {
        display: flex;
        flex-direction: row;
        gap: 10px;

        width: 33%;
        visibility: hidden;
    }

    #sticky-buttons-after-scroll-visible-left {
        order: 0;
        justify-content: flex-start;
    }

    #sticky-buttons-after-scroll-visible-center {
        order: 1;
        justify-content: center;
    }


    #sticky-buttons-after-scroll-visible-right {
        order: 2;
        justify-content: flex-end;
    }

    .sticky-buttons-after-scroll-visible-flex-container > * {
        visibility: visible;
    }

    /*This is the header*/
    #top {
        flex-shrink: 1;
        order: 3;

        position: sticky;
        z-index: 3;
        top: 0;
        background-color: var(--header-color);
        box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
        min-height: var(--header-height);
        max-height: var(--header-height);

        display: flex;
        flex-direction: row;
        align-content: stretch;
        gap: 0;
    }

    #top-heading-container {
        flex-shrink: 1;

        background-color: inherit;
        padding: 10px 20px 10px 20px;
    }

    #top-buttons-container {
        flex-grow: 2;
        background-color: inherit;

        display: flex;
        flex-direction: row-reverse;
        justify-content: flex-start;
        align-items: stretch;
        gap: 0;
        align-content: center;

    }

    @keyframes projects-dropdown-fade-in {
        0% {
            opacity:0;
            max-height: 0;
        }
        100% {
            opacity:1;
            max-height: 400%;
        }
    }

    .projects-dropdown-btn {
        position: relative;
        display: flex;
        justify-content: stretch;
        align-items: stretch;
        overflow: visible;

        &:hover .projects-dropdown {
            display: block;
            visibility: visible;
            animation: 0.2s ease-in 0s projects-dropdown-fade-in;
        }
    }

    .projects-dropdown {
        position: absolute;
        top: 100%;
        right: -0%;

        display: block;
        visibility: hidden;

        padding-bottom: 20px;
        width: max-content;
        z-index: 10;
        overflow: hidden;

    }

    .projects-list {
        display: flex;
        flex-direction: column;
        overflow: hidden;
        border-radius: 0 0 var(--border-radius-small)  var(--border-radius-small);
        box-shadow: var(--box-shadow-medium);
    }

    #window {
        flex-grow: 2;
        order: 5;

        transform: scale(100%); /*make it the parent element for children with position:fixed*/
        background-color: inherit;
    }

    #bottom {
        flex-shrink: 1;
        order: 10;

        position: static;

        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;

        background-color: var(--footer-background-color);
        padding: 25px 30px 20px 30px;
        box-shadow: var(--box-shadow-all-around-medium);

        & > * {
            text-decoration: none;
        }

        & a:hover {
            text-decoration: underline;
        }
    }
}