@import url("https://fonts.googleapis.com/css2?family=Orbitron:wght@400..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap");

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;

    font-family: "Orbitron";

    /* ELEMENT SIZING */

    --left-page-width: 40%;
    --max-left-page-width: 440px;
    --min-left-page-width: 400px;
    --middle-page-width: 100%;
    --right-sidebar-width: 15%;

    --gap-between-homepage-elements: 2.5rem;
    --margin-value: 5vh;

    /* COLORS */

    --background: #ebebeb;
    --dark-text: #403E3E;
    --primary-accent: #545ca3;
    --secondary-accent: #a4c76e;
    --accessible-underline: #f15656;
    
    --space-between-header-and-content: 2rem;
    
    --fade-time-site-load: 1.5s;
    --fade-time: 0.5s;

    /* TEXT SIZING */

    --h1-size: 3rem;
    --h2-text-size: 1.75rem;
    --h3-text-size: 1.50rem;
    --button-text-size: 1.25rem;
    --p-text-size: 1.25rem;
    --article-title-tab-size: 2.5rem;
    --article-date-size: 1.25rem;
    --line-height: 2.25rem;

    scrollbar-color: var(--primary-accent) var(--dark-text);
}

    @media screen and (max-width: 900px) {
        * {
            --h1-size: 2rem;
            --h2-text-size: 1.5rem;
            --h3-text-size: 1rem;
            --button-text-size: 1rem;
            --button-text-size: 0.75rem;
            --p-text-size: 1rem;
            --article-title-tab-size: 2rem;
            --line-height: 2rem;
        }
    }

    @media screen and (max-width: 550px) {
        * {
            --p-text-size: 1rem;
            --article-title-tab-size: 1.5rem;
        }
    }

.accessible {
    --background: #f8f8f8;
    --dark-text: #1f1f1f;
}

@keyframes fadeIn {
    0% {
    opacity: 0;
    }

    100% {
    opacity: 1;
    }
}

@keyframes fadeOut {
    0% {
    opacity: 1;
    }

    100% {
    opacity: 0;
    }
}

/* OVERALL TEXT STYLING =========================================================================================================================================== */

.button-text {
    text-align: center;
    align-items: center;
    justify-content: center;
    font-size: var(--button-text-size);
    font-weight: 400;
}

    .button-text p {
        color: var(--background);
        font-size: var(--button-text-size);
        font-weight: 400;
        font-family: "Orbitron";
    } 

.toggle-button .button-text {
    color: var(--dark-text);
}

    .toggle-button .selected-toggle .button-text {
        color: var(--background);
    }

h1 {
    text-transform: uppercase;
    font-size: var(--h1-size);
    font-weight: 400;
    color: var(--dark-text);
}

h2 {
    font-family: "Roboto";
    font-size: var(--h2-text-size);
    font-weight: 500;
    text-transform: uppercase;
    color: var(--dark-text);
}

h3 {
    font-family: "Roboto";
    font-size: var(--h3-text-size);
    font-weight: 500;
    color: var(--dark-text);
}

p, span, i, li {
    line-height: var(--line-height);
    font-size: var(--p-text-size);
    font-family: "Roboto";
    color: var(--dark-text);
}

a {
    font-size: var(--p-text-size);
    font-family: "Roboto";
    text-decoration: underline 0.20rem var(--primary-accent);
    color: var(--dark-text);
}

    a:hover {
        text-decoration-color: var(--secondary-accent);
    }
    
    .accessible  a:hover {
        text-decoration-color: var(--accessible-underline);
    }

ul {
    margin-top: 1rem;
    gap: 1rem;
}

li {
    display: flex;
    align-items: baseline;
    list-style: none;
}

    li a {
        display: block;
    }

    li::before {
        content: "↳";
        font-size: 2rem;
        color: var(--primary-accent);
        margin: 0 2rem;
    }

.text-section {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.hover-note {
    font-size: 1rem;
    text-decoration: underline 0.10rem var(--primary-accent);
}

/* PAGE SET UP ====================================================================================================================================================== */

body {
    background-color: var(--background);
}

.page-elements {
    display: flex;
    justify-content: space-between;
    gap: var(--gap-between-homepage-elements);
    animation: var(--fade-time-site-load) fadeIn;
    margin: var(--margin-value);
}

    @media screen and (max-width: 1000px) {
        .page-elements {
            flex-direction: column;
            gap: unset;
            margin: 0;
        }
    }

#home-page-elements {
    align-items: center;
    height: 90vh;
}

    @media screen and (max-width: 1000px) {
        #home-page-elements {
            height: unset;
            overflow-y: auto;
        }
    }

    @media screen and (max-width: 550px) {
        #home-page-elements #home-content #article-list .article-preview {
            height: 4rem;
        }
    }

.page-container {
    height: 90vh;
}

/* LEFT SIDEBAR =================================================================================================================================================== */

left-sidebar {
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    background-repeat: no-repeat;
    background-size: contain;
    background-position: right;

    background-image: url(../assets/sidebar-background.png);

    width: var(--left-page-width);
    max-width: var(--max-left-page-width);
    min-width: var(--min-left-page-width);
}

    left-sidebar .left-top-elements {
        display: flex;
        flex-direction: column;
        gap: 2.5rem;
    }

        left-sidebar .left-top-elements .left-sidebar-upper-buttons {
            display: flex;
            flex-direction: column;
            gap: 1.25rem;
        }

    left-sidebar .left-bottom-elements {
        max-height: 100%;
        display: flex;
        gap: 2rem;
        align-items: end;
    }

        left-sidebar .left-bottom-elements .left-sidebar-lower-buttons {
            justify-content: end;
            display: flex;
            flex-direction: column;
            gap: 1.5rem;

            width: 35%;
            margin-right: 2rem;
        } 

    @media screen and (max-width: 1000px) {
        .page-container {
            height: unset;
        }

        left-sidebar {
            background-image: none;
            background-color: var(--dark-text);
            position: sticky;
            top: 0;
            height: 1.5rem;
            width: 100%;
            --max-left-page-width: 100%;

            padding: 1rem 2rem;

            flex-direction: row;
            justify-content: unset;
            gap: 2rem;
        }

            left-sidebar .left-top-elements .left-sidebar-upper-buttons, left-sidebar .left-bottom-elements .left-sidebar-lower-buttons {
                flex-direction: row; 
                width: 100%;
                margin: 0;
            }

            left-sidebar .left-bottom-elements {
                width: 100%;
            }

                left-sidebar .left-bottom-elements .left-sidebar-lower-buttons {
                    justify-content: space-between;
                }
    }

    @media screen and (max-width: 800px) {
        left-sidebar {
            padding: 0rem 1rem;
            gap: 0;
        }

            left-sidebar .left-top-elements, left-sidebar .left-top-elements .button-group {
                gap: 0;
            }
    }

    @media screen and (max-width: 450px) {
        left-sidebar {
            padding: 0 2rem;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 1rem;
            width: 100%;
        }

            left-sidebar .left-bottom-elements {
                width: unset;
            }
            
                left-sidebar .left-bottom-elements .single-button {
                    display: none;
                }
    }
        
/* RIGHT SIDEBAR =========================================================================================================================================== */

#right-sidebar {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-content: center;

    width: var(--right-sidebar-width);
}

    @media screen and (max-width: 1600px) {
        #right-sidebar {
            display: none;
        }
    }

    #right-sidebar #right-top-elements {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 3.5rem;
    }

        #right-sidebar #right-top-elements .toggle-button {
            width: 100%
        }

        #right-sidebar #right-top-elements .single-button {
            width: 100%
        }

        #right-sidebar #right-bottom-elements {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 1.563rem;
        }

            #right-sidebar #right-bottom-elements img {
                max-width: 100%;
                object-fit: contain;
            }

                #right-sidebar #right-bottom-elements img:hover {
                    rotate: 5deg;
                }

/* DIRECTORY STYLING ======================================================================================================================================== */

sidebar-directory {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1rem;
    height: 100%;
}

    sidebar-directory .directory-links {
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        border-top: 0.25rem solid var(--primary-accent);
        height: 100%;
    }

        sidebar-directory .directory-links a {
            display: flex;
            align-items: center;
            gap: 2rem;
            height: 100%;
            padding-right: 1rem;

            text-decoration: none;
            border-bottom: 0.25rem solid var(--primary-accent);
            height: 100%;
        }

        sidebar-directory .directory-links a:hover {
            background-color: var(--secondary-accent);
        }

            sidebar-directory .directory-links a span {
                margin: 0.25rem 0;
            }

/* TOGGLE BUTTON STYLING ==================================================================================================================================== */

.toggle-button {
    width: 100%;
}

    .toggle-button button {
        border: solid var(--dark-text) 1px;
        background-color: var(--background);
        
        width: 100%;
    }

        .toggle-button button:hover {
            color: var(--dark-text);
            background-color: var(--secondary-accent);
        }

            .toggle-button button:hover .button-text {
                color: var(--dark-text);
                background-color: var(--secondary-accent);
            }

    .toggle-button .selected-toggle {
        background-color: var(--primary-accent);
    }

.toggle-horizontal {
    display: flex;
    height: 4rem;
    width: 50%;
}

    .toggle-horizontal button {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 4rem;
        width: 50%;
    }

.toggle-vertical {
    display: flex;
    flex-direction: column;
}

    .toggle-vertical button {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 5rem;
    }

    @media screen and (max-width: 1000px) {
        left-sidebar .toggle-button {
            flex-direction: row;
            box-shadow: none;
            width: unset;
            gap: 1rem;
        }

            left-sidebar .toggle-button button {
                height: unset;
                width: 100%;
                background-color: transparent;
                color: var(--background);
            }

                left-sidebar .toggle-button .selected-toggle {
                    background-color: transparent;
                    text-decoration: underline 0.15rem var(--secondary-accent);
                }
                
                left-sidebar .toggle-button button:hover, left-sidebar .single-button:hover {
                    color: var(--dark-text);
                    background-color: var(--secondary-accent);
                }

                    left-sidebar .single-button:hover .button-text p {
                        color: var(--dark-text);
                    }
                
                left-sidebar .toggle-button button .button-text {
                    color: var(--background);
                    text-transform: uppercase;
                }
    }

/* LINK BUTTONS ================================================================================================================================  */

.single-button {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;

    border: solid var(--dark-text) 1px;
    background-color: var(--dark-text);

    text-decoration: none;
}

    @media screen and (max-width: 1000px) {
        left-sidebar .single-button {
            height: unset;
            width: unset;
            padding: 0.5rem;
            box-shadow: none;

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

            text-transform: uppercase;
        }

            left-sidebar .single-button .color-strip {
                display: none;
            }

            left-sidebar .single-button .button-text {
                display: flex;
            }
    }

.single-button-tall {
    width: 2.5rem;
    padding-bottom: 1rem;
}

.single-button-wide {
    height: 4rem;
}

    .single-button-wide a {
        text-decoration: none;
    }

.single-button .color-strip {
    background-color: var(--primary-accent);
    height: 1.25rem;
    margin-bottom: 0.25rem;
}

    .single-button:hover .color-strip {
        background-color: var(--secondary-accent);
    }

.box-shadow {
    box-shadow: 0 0.25rem 0.25rem rgba(0, 0, 0, 0.25);
}

.text-shadow {
    text-shadow: 0 0.25rem 0.25rem rgba(0, 0, 0, 0.25);
}