/* element styles */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Homestuck';
    font-weight: normal;
    margin: 0.5rem 0;
}

sub {
    opacity: 50%;
    font-weight: bold;
}

main { 
    a:not(.unstyled-link) {
        color: #89bcff;
        text-decoration-style: dotted;

        &:hover {
            filter: brightness(120%)
        }
    }
}


/* site blocks */

header {
    background-color: #000;
    background-image: url('/assets/media/theme/header_skaia.jpg');
    background-repeat: no-repeat;
    background-position-x: 100%;
    background-position-y: center;
    background-size: max(10rem, 30vw);

    height: 5rem;

    overflow: visible;

    .header-content {
        background-color: #000000bb;
        height: 5rem;

        .header-logo {
            background-color: #000000ff;
            width: 90px;
            padding: 0.5rem;
            overflow: visible;
            img {
                position: relative;
                z-index: 2;
                &:hover {
                    filter: brightness(150%);
                }
            }
        }

        .header-motd {
            font-family: monospace;
            font-size: 10pt;
            position: absolute;
            z-index: 5;
            top: 3.2rem;
            left: 13.75rem;
            text-wrap: nowrap;
        }

        --gradient-root: #31435788;
        .header-gradient {
            position: absolute;
            background-image: linear-gradient(color-mix(in srgb, var(--gradient-root) 50%, #00000022), var(--gradient-root));
            width: 100%;
            height: 113px;
            z-index: 1
        }

        .header-gradient-poke {
            position: absolute;
            background-color: var(--gradient-root);
            width: calc(90px + 1rem);
            height: 0.5rem;
            top: 113px;
            z-index: 4;
            border-bottom: 2px #ffffff11 solid;
            border-right: 2px #ffffff11 solid;
        }

        .header-nav {
            position: absolute;
            top: 5rem;
            left: calc(90px + 1rem);

            width: calc(100% - 90px - 1rem);
            height: 2rem;

            background-color: #202830;
            background-image: linear-gradient(90deg, #00000000, #ffffff18);
            border: inset 2px #ffffff22;
            
            z-index: 5;

            overflow-y: hidden;
            overflow-x: hidden;
            scrollbar-width: thin;

            @media (max-width: 1000px) {
                overflow-x: visible;
                padding-bottom: 7px;
            }

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

            border-bottom: 2px #ffffff22 solid;

            a, label {
                background-image: linear-gradient(#ffffff00, #ffffff22);
                box-shadow: 0px 1px #ffffff88;
                
                display: flex;
                justify-content: center;
                align-items: center;

                padding: 0 1.5rem;
                height: 100%;

                font-family: 'Homestuck';
                color: #eeeeee;
                text-wrap: nowrap;
                text-decoration: none;

                cursor: pointer;

                &:nth-child(1) { --pref-color: #22ff22; }
                &:nth-child(2) { --pref-color: #88ccff; }
                &:nth-child(3) { --pref-color: #deabff; }
                &:nth-child(4) { --pref-color: #ff7c7c; }
                &:nth-child(5) { --pref-color: #ff9022; }
                &:nth-child(6) { --pref-color: #b3b3b3; }

                &:hover {
                    background-image: linear-gradient(#ffffff11, color-mix(in srgb, var(--pref-color) 10%, #ffffff33 90%));
                    box-shadow: 0px 1px var(--pref-color);
                    color: color-mix(in srgb, var(--pref-color) 33%, white 66%);
                }
            }   
        }

        .scroll-hint {
            background-image: linear-gradient(-90deg, rgba(29, 37, 45, 255) 25%, rgba(29, 37, 45, 0));
            text-align: center;
            height: 2.5rem;
            display: none;
            position: absolute;
            right: 0rem;
            top: 5rem;
            z-index: 6;
            padding: 0rem 1.5rem;
            font-weight: bold;
        }
        @media (max-width: 900px) {
            .scroll-hint {
                display: flex;
                align-items: center;
                justify-content: center;
            }
        }
    }

    @media (max-width: 750px) {
        zoom: 90%;        
    }

    @media (max-width: 680px) {
        zoom: 80%;        
    }

    @media (max-width: 600px) {     
        .header-content {
            .header-motd {
                display: none;
            }
        } 
    }
}

main {
    display: flex;
    justify-content: center;
    padding: 2rem 0.5rem;
    margin: 2rem 0.5rem;

    min-height: 70svh;

    gap: 1rem;

    .main-content {
        flex: 1;
        max-width: 1000px;
        
        .main-intro {
            background-color: #40444a;
            
            padding: 0.5rem 1rem;
        }

        .main-highlights {
            display: flex;
            margin-top: 1rem;
            flex-wrap: wrap;
            gap: 0.5rem;

            &>a {
                background-color: #40444a;
                display: flex;
                flex-direction: column;
                text-decoration: none;
                color: #eee;

                width: calc(50% - 0.25rem - 4px);

                border: 2px solid #ffffff22;

                img {
                    object-fit: cover;
                    height: 16rem;
                }

                div {
                    padding: 1rem;
                    font-size: smaller;
                }

                &:hover {
                    border: 2px solid #ffffff44;
                }
            }

            @media (max-width: 480px) {
                flex-direction: column;

                &>a {
                    width: calc(100% - 0.25rem);
                }
            
            }
        }
    }

    .main-sidebar {
        flex: 0.333;
        width: 100%;
        max-width: 280px;

        display: flex;
        flex-direction: column;
        gap: 0.25rem;

        font-size: smaller;

        .main-sidebar-newsfeed {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
            padding: 0.5rem;
            border: dotted 2px #ffffff44;
            font-family: monospace;
        }

        
    }

    @media (max-width: 900px) {
        flex-direction: column;

        .main-sidebar {
            max-width: none;
        }
    }
}

footer {
    background-color: #00000040;
    color: #889;
    padding: 2rem 1rem;
    
    display: flex;
    justify-content: center;
    gap: 4rem;

    div {
        display: flex;
        gap: 0.25rem;
        flex-direction: column;
        font-size: smaller;

        img {
            filter: saturate(0%);
            width: max-content;
            opacity: 50%;
        }

        h3 {
            margin: 0;
        }

        a {
            color: #99a;
        }
    }

    @media (max-width: 900px) {
        flex-direction: column;
        gap: 2rem;
        padding: 2rem 2rem;
    }
}