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

p {
    line-height: 1.5;
}

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

li {
    line-height: 1.5;
}

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

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

        /* &[href*="http"] {
            background: url('/assets/media/theme/px_external_link.svg') center right no-repeat;
            background-size: 0.75em;
            padding-right: 0.85em;
        }

        &[href*="beyondcanon.com"], &[href*="homestuck.com"] {
            background: url('/assets/media/theme/sburb_link.svg') right no-repeat;
            background-size: 1em;
            padding-right: 1.1em;
        }

        &[href*="beyondcanon.com"] {
            filter: hue-rotate(160deg);
        }
        &[href*="homestuck.com"] {
            filter: hue-rotate(260deg);
        } */
    }
}


/* 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: 6rem;

    overflow: visible;

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

        .header-logo {
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #000000ff;
            height: 9rem;
            width: 8rem;
            overflow: visible;
            img {
                position: relative;
                left: 3.9rem;
                top: 0.4rem;
                z-index: 2;
                &:hover {
                    filter: brightness(150%);
                };
                height: 7.5rem;
                z-index: 5
            }
            
        }

        .header-motd {
            font-family: monospace;
            font-size: 0.75rem;
            position: absolute;
            z-index: 5;
            top: 4.1rem;
            left: 16.5rem;
            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: 7rem;
            z-index: 1
        }

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

        .header-nav {
            position: absolute;
            top: 6rem;
            left: 8rem;

            width: calc(100% - 8.25rem);
            height: 2rem;

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

            scrollbar-width: thin;

            @media (max-width: 1000px) {
                overflow-x: scroll;
                padding-bottom: 0.33rem;
            }

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

            border-bottom: 2px #ffffff22 solid;

            box-shadow: 4px 4px 8px #00001166;

            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: 6rem;
            z-index: 6;
            padding: 0rem 1.5rem;
            font-weight: bold;
            pointer-events: none;
        }
        @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: 2rem;

    .main-go-back {
        color: #808080 !important;
        line-height: 2.5rem;
        font-family: monospace;
    }

    .main-content {
        flex: 1;
        max-width: 1000px;
        
        .main-intro {
            padding: 0.5rem 1rem;
        }

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

            h2 {
                margin-top: 0;
            }

            font-size: 110%;    

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

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

                border: 2px solid #ffffff22;

                transition: border 0.1s, background-color 0.1s;

                img {
                    object-fit: cover;
                    width: 100%;
                    aspect-ratio: 16/8;   
                }

                div {
                    padding: 1rem 1rem;
                    font-size: smaller;
                    
                    span {
                        line-height: 1.5;
                    }

                    @media (max-width: 720px) {
                        font-size: 75%;
                    }
                }

                &:hover {
                    border: 2px solid #ffffff44;
                    background-color: #44484d;
                    transition: border 0.1s, background-color 0.1s;
                }
            }

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

                &>a {
                    width: calc(100% - 0.25rem);
                }
            
            }
        }
        
        @media (max-width: 480px) {
            font-size: smaller
        }
    }

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

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

        font-size: smaller;

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

            ul {
                margin: 0;
                padding-left: 1rem;
            }
        }

        
    }

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

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

    @media (max-width: 600px) {
        padding-left: 0.25rem;
        padding-right: 0.25rem;
    }
}

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;
    }
}