@import url('/css/common/nav.css');
@import url('/css/common/colours.css');

:root {
    font-size: 16px;
}

* {
    margin: 0;
    padding: 0;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}

body {
    background-image: url('/images/backgrounds/wp6251507-starry-sky-anime-wallpapers.jpg');
    background-size: cover;
}

.pageLayout {
    display: flex;
    flex-direction: row;
    width: 100%;
    /* background-color: #ffffff9a; */

    & > * {
        min-height: 100vh;
    }

    & > aside {
        flex-shrink: 0;
        /* box-shadow: 1px 0px 8px black; */
        background-color: var(--light-violet);
    }

    & > main {
        flex-grow: 1;

        & > h1 {
            text-align: center;
            background-color: var(--light-violet);
            width: 100%;
            padding: 1rem;
        }

        & > * {
            padding: 0.5rem;
            
            
        }

        /* Couldn't figure out how to do this nested, but this works well enough */
        article {
            margin: auto;
            max-width: 800px;
            background-color: #ffffffba;
        }
    }
}