/* FONTS */
@import url('https://fonts.googleapis.com/css2?family=Berkshire+Swash&family=Caveat:wght@400..700&family=Cookie&family=Cormorant+Garamond:ital,wght@0,300..700;1,300..700&family=Instrument+Serif:ital@0;1&family=Modern+Antiqua&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Playwrite+NZ+Guides&family=STIX+Two+Math&family=Satisfy&family=Tinos:ital,wght@0,400;0,700;1,400;1,700&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');




/* Tree */
:root{
    /* Global variables */
    --FONT-header-family: Instrument Serif;

    --FONT-default: Instrument Serif;

    margin: 0;
    padding: 0;
    body{
        margin: 0;
        padding: 0;
        width: 100vw;
        min-height: 100vh;

        display: grid;
        grid-template-columns: auto;
        grid-template-rows: auto;
        header{
            grid-column: 1 / span 3;
        }
        aside{
            grid-row: 2 / span 1;
        }
        article{
            grid-column: span 2 / span 2;
            grid-column-start: 2;
            grid-row-start: 2;
        }
        footer{
            grid-column: span 3 / span 3;
            grid-row-start: 3;
            background-color: black;
        }
    }
}




/* Style for all */
*{
    font-family: var(--FONT-default);
}




/* page sections */
header{
    box-shadow: 0px 0px 5px black;
    height: fit-content;
}
aside{
    width: 1vw;
    border-right: 2px solid black;
    transition: width;
    transition-duration: 250ms;
    transition-timing-function: ease-out;
}
aside:hover{
    width: 15vw;
}
article{
    min-height: 100vh;
    height: fit-content;
    padding: 2vw;
}
footer{
    height: 2vh;
}




/* Class Selectors */
.entry-container{
    margin-bottom: 15vh;
}
.entry-container h3{
    position: sticky;
    top: 0;
    background-color: white;
}
.story-description{
    border-bottom: 2px solid black;
    padding-bottom: 1vh;
    margin-left: 2vw;
    margin-right: 2vw;
}
.story-box{
    border-bottom: 4px dotted black;
}
.story-box p{
    height: fit-content;
    max-height: 15vh;
    overflow-y: hidden;
    text-justify: inter-word;

    transition: max-height; /* This is for the button */
    transition-duration: 500ms;
    transition-timing-function: ease-out;
}
.story-box svg{
    height: 15px;
    cursor: pointer;
}




/* ID Selectors */
#header-bg-image{
    background-image: url("../media/flower-bg2.jpg");
    background-size: cover;
    background-position-y: 80%;

    --header-section-selector-padding: 3vh;
    padding-top: var(--header-section-selector-padding);
    padding-bottom: var(--header-section-selector-padding);
}
#header-section-selector{
    /* color */
    background-color: #00000090;
    backdrop-filter: blur(3px);
    box-shadow: 0px 0px 3px black;

    position: sticky;

    /* positioning */
    display: flex;
    flex-direction: row;
    justify-content: space-around;

    list-style-type: none;

    --header-section-selector-padding: 3vh;
    padding-top: var(--header-section-selector-padding);
    padding-bottom: var(--header-section-selector-padding);
    li{
        /* font */
        font-family: var(--FONT-header-family);/* stix two math */
        font-weight: 400;
        font-size: 2em;
        letter-spacing: 2px;
        text-wrap: nowrap;
        text-align: center;
        text-shadow: 0px 0px 0px black;
        color: white;
        border-bottom: 0px solid white;

        /* placement */
        width: 10vw;
        min-width: fit-content;
        height: 100%;

        /* hover utils */
        cursor: pointer;
        transition: border-bottom text-shadow;
        transition-duration: 250ms;
    }
    li:hover{
        text-shadow: 2px 1px 5px black;
    }
}