@import "/css/fonts.css";

:root {
    --font-size: 1.2rem; 
    
    --header-title-font-size: 2rem;
    --header-subtitle-font-size: 2rem;
    --header-gap: 0.6rem;
    
    --primary-text-color: rgb(38, 15, 8);
    --secondary-text-color: rgb(255, 245, 239);
    
    --primary-border-color: rgb(38, 15, 8);
    
    --gradient-color-light: 255, 236, 212; 
    --gradient-color-dark: 214, 168, 135;
    
    --font-main: Handserif;
    
    --body-bg: url("/img/home/shrine_bg.jpg");
    
    --article-bg: url("/img/home/shrine_over_bg.jpg");
    --aside-bg: url("/img/home/shrine_over_bg_1.jpg");
}

body {
    background-image: var(--body-bg);
    background-size: cover;
    
    font-size: var(--font-size);
    
    display: none;
    
    scrollbar-color: var(--primary-text-color) transparent;
    scrollbar-arrow-color: var(--primary-text-color);
}

code {
    font-size: 1rem;
}

hr {
    border: 2px 0;
    border-style: solid;
    border-color: var(--primary-border-color);
}

main {
    width: 95%;
    margin: auto;
    
    align-content: center;
    
    color: var(--primary-text-color);
    
    display: grid;
    
    grid-template-columns: 0.8fr repeat(3, 1fr) 0.8fr;
    
    grid-template-areas: 
        'header header header header header'
        'nav nav nav nav nav'
        'aside-left article article article aside-right'
        'footer footer footer footer footer'
    ;
    
    font-family: var(--font-main), serif; 
}

.main--aside-left {
    grid-template-areas:
        'header header header header header'
        'nav nav nav nav nav'
        'aside-left article article article article'
        'footer footer footer footer footer'
    ;
}

header-main {
    display: flex;
    justify-content: center;
    align-items: end;
    
    color: var(--secondary-text-color);
    text-align: center;
    
    grid-area: header;
    
    text-shadow: 2px 2px 3px black;
    
    img {
        height: 6rem;
    }
    
    h1 {
        font-size: var(--header-title-font-size);
    }
    
    h2 {
        font-size: var(--header-subtitle-font-size);
    }
}

.header__title {
    display: flex;
    align-items: center;
    gap: var(--header-gap);
}

nav-main {
    grid-area: nav;    
    display: flex;
    
    align-content: center;
    justify-content: space-evenly;
    
    border: 3px solid var(--primary-border-color);
    
    a {        
        display: flex;
        width: 100%;
        gap: 1rem;
        
        align-items: center;
        justify-content: center;
        
        text-align: center;
        
        background-image: radial-gradient(rgb(var(--gradient-color-light)), rgb(var(--gradient-color-dark)));
        
        transition: transform 0.1s ease-out, box-shadow 0.1s ease-out;
        
        p {
            text-decoration: underline;
        }
        
        img {
            height: 1.5rem;
            image-rendering: pixelated;
        }
    }
    
    a:link {
        color: var(--primary-text-color);
    }

    a:hover {
        color: var(--primary-text-color);
        
        transition: transform 0.1s ease-out;
        transform: scale(110%) rotate(1deg);
        
        box-shadow: 2px 2px 10px black;
    }

    a:visited {
        color: var(--primary-text-color);
    }

    a:active {
        color: var(--primary-text-color);
    }
}

article {
    grid-area: article;
    background-image: var(--article-bg);
    padding: 1rem;
    
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.article--block {
    display: block;
    padding: 0rem;
}

.article--scroll {
    max-height: 65vh;
    overflow-y: scroll;
}

.article--hidden {
    max-height: 65vh;
    overflow-y: hidden;
}

aside {
    background-image: var(--aside-bg);
    overflow-x: hidden;
    
    height: 100%;
    
    border-width: 0 3px;
    border-style: solid;
    border-color: var(--primary-border-color);
}

#aside-left {
    grid-area: aside-left;    
}

#aside-right {
    grid-area: aside-right;    
}

.aside__header {
    display: flex;
    align-items: center;
    
    padding-left: 0.5rem;    
    height: auto;
    
    background-image: linear-gradient(to right, var(--primary-border-color), rgba(0, 0, 0, 0));
    color: var(--secondary-text-color);
}

.aside__header--main {
    font-size: 1rem;
}

.aside__header__icon {
    height: 1.3rem;
    margin-right: 0.5rem;
}

.aside__info {
    padding: 0.5rem;
}

footer-main {
    grid-area: footer;    

    background-image: radial-gradient(rgb(var(--gradient-color-light)), rgb(var(--gradient-color-dark)));
    border: 3px solid var(--primary-border-color);
}

.footer__notice {    
    display: flex;
    
    justify-content: center;
    align-items: flex-end;
    
    gap: 0.5rem;
    
    img {
        image-rendering: pixelated;
        width: 3rem;
    }
}

.footer__blinkies {    
    display: flex;
    
    justify-content: center;
    align-items: flex-end;
    
    flex-wrap: wrap;
    
    img {
        image-rendering: pixelated;
        height: 1.2rem;
    }
}

.footer__change-theme {
    margin: 0.5rem auto;
    width: 20%;
    text-align: center;
}

.row-container {
    display: flex;
    align-items: center;
    justify-content: center;
}