/* hello! welcome to the first child template! */
/* i'm elly, and i'll explain what most of this stuff does */
/* this is my first attempt at making a template and i'm hoping beginners can understand it well! */
/* please email me if you have any issues! */
/* - elly @ https://catboo.neocities.org */

/* set a custom font */
@font-face{
    /* by setting font-family, you set it's name */
    font-family: garamond;
    src: url(fonts/EBGaramond08-Regular.otf);
}

html {
    color: white;
    /* you can layer semi transparent backgrounds with colors! that's what i did here */
    background-color: rgb(12, 16, 43);
    background-image: url(images/inflicted.png);
    /* rem is a good unit for fonts. it's responsive! 1rem (usually) = 16px */
    font-size: 1rem;
    /* please note that ms pgothic is only natively supported on windows and macos. linux users can install the font but mobile users cannot */
    font-family: ms pgothic;
}

body {
    display: grid;
    /* limits the width of the body. it can be smaller than 700px, but not bigger */
    max-width: 800px;
    /* auto is centering the container, '2vh' is the margins of the top and bottom */
    margin: 2vh auto;
    /* this tells the html how to arrange the containers in the grid */
    grid-template-areas: 
        "header nav"
        "header main"
        "header footer";
    /* this tells the html how wide to make the columns. here i used a unit called fraction (fr). it's useful since it plays well with different resolutions! */
    grid-template-columns: 1.3fr 3fr;
    /* sets the row sizes */
    grid-template-rows: max-content 585px 40px;
    /* the gap between the grid containers */
    grid-gap: 10px;
}

a {
    color: rgb(255, 246, 224);
}

a:hover {
    color: rgb(255, 242, 122);
}

a:visited {
    color: rgb(239, 255, 166);
}

h2 {
    text-align: center;
    margin: 10px;
}

header {
    /* grid-area tells the html what everything in the grid actually is. this has to be set for everything mentioned in the grid-template-areas */
    grid-area: header;
    background-image: url(images/header.jpg);
    /* makes the background scale as much down as possible without losing coverage */
    background-size: cover;
    background-position: center;
    padding: 5px;
    border: 2px solid white;
    /* inside gradient. gives a nice subtle touch! */
    box-shadow: 0 0 10px inset rgba(0, 0, 255, 0.281);
    /* set a custom font for the header */
    font-family: garamond;
    /* these add a neat text border! */
    -webkit-text-stroke: white 7px;
    /* note that just using webkit text stroke wont work in the intended way! use paint-order to tell it to draw the text on top */
    paint-order: stroke fill;
    /* makes the text vertical */
    text-orientation: upright;
    writing-mode: vertical-lr;
    /* we need this to align the h1 properly (so that it is at the bottom right) */
    display: flex;
    /* css can be nested now! this is the same as 'header h1' */
    h1 {
        color: rgb(0, 0, 145);
        /* puts the text in the bottom */
        margin: auto 0 0 auto;
    }
}

nav {
    grid-area: nav;
    text-align: center;
    /* required to not have whitespace and easier spacing controls */
    display: flex;
    /* this makes the buttons overflow to the next line when there isn't enough space */
    flex-wrap: wrap;
    a {
        background-color: #c22809;
        /* makes the "3d effect" */
        box-shadow: 2px 2px 2px inset #d66c54,-1px -1px 1px inset #790514;
        /* makes these button styled links easier to work with */
        display: inline-block;
        /* please adjust the padding so all the link buttons fit in your container. the first padding is up-top, the second is left-right */
        padding: 14px 17px;
        /* divider border */
        border: 2px solid white;
        /* makes the buttons grow! */
        flex-grow: 1;
    }
    /* what happens when the link is clicked */
    a:active {
        box-shadow: -1px -1px 1px inset #d66c54,2px 2px 2px inset #790514;
    }
}   

main {
    grid-area: main;
    background-color: #0f0b1b;
    border: 4px double #fff;
    padding: 10px;
}

.float {
    max-width: 150px;
    /* each value modifies up, left, down and right respectively */
    margin: 0 0 10px 10px;
    float: right;
}

hr {
    border-color: white;
    border-width: 1px;
}

.quote {
    text-align: right;
    q {
        font-size: 1.1rem;
    }
}

footer {
    grid-area: footer;
    background-color: #0f0b1b;
    border: 2px solid white;
    padding: 10px;
    text-align: center;
    p {
        margin: 0;
    }
}

/* this makes the layout responsive on mobile devices */
@media only screen and (max-width: 800px) {
    body {
        margin: 2vh 20px;
        /* mobile layout takes advantage of the horizontal real estate */
        grid-template-areas: 
            "header"
            "nav"
            "main"
            "footer";
        /* max width, since we don't have a lot to work with anyways (usually 300-500px) */
        grid-template-columns: 100%;
        /* making most of the height adaptable */
        grid-template-rows: 100px max-content max-content max-content;
        grid-gap: 10px;
    }

    header {
        /* modified the background-position so rei's face is always visible (it gets covered by the h1 but you get the point) */
        background-position: center 60%;
        /* make text go back to normal */
        text-orientation:upright;
        writing-mode: horizontal-tb;
    }
}