@charset "UTF-8";

/*    Colours
    Orange    :     #e33c2c
     lighter:     #e66d3d
                #ec887d
                #e67026
    Green    :     #677c3b
    Blue    :     #87a6d4
*/

a {
    text-decoration-skip-ink: auto;
}

body {
    background-color: #e33c2c;
    font-family: "Monospace";
    margin: 0;
    padding: 0;
}

div.long {
    max-height: 22em;
    overflow-y: auto;
    padding-right: 1em;
}

h1 {
    font-size: 2em;
}

h2 {
    font-size: 1.6em;
}

h3 {
    font-size: 1.3em;
}

li,
a,
p {
    font-size: 1em;
}

h1,
h2,
h3 {
    font-weight: normal;
    text-transform: lowercase;
}

h1,
h2 {
    margin-top: 0;
}

h1,
h2,
h3 {
    background-color: #677c3b;
    color: #ffff55;
    display: inline-block
}

header,
footer,
section {
    box-shadow: 0.5em 0.5em 0px #711e16;
    box-sizing: border-box;
        -webkit-box-sizing: border-box;
    margin: 0.5em;
    padding: 1em;
}

header,
footer {
    background-color: #87a6d4;
}

hr {
    border: none;
    border-bottom: dashed 1px black;
}

section {
    background-color: #e66d3d;
}


/*    Bullets    */
ul,
ol {
    list-style-type: none;
    padding-left: 0;
    margin-left: 0;
}

li::before {
    content: "~> ";
}

footer ul li,
nav ul li {
    display: inline-block;
}

footer ul li: not(:first-child)::before,
nav ul li: not(:first-child)::before {
    content: ":: ";
}


/*    Grid stuffs    */
main {
    display: grid;
    grid-template-areas: 
        "header    header    header"
        "about  about      members"
        "footer    footer    footer";
    grid-template-columns: 2fr 2fr 1fr;
}

footer {
    grid-area: footer;
}

header {
    grid-area: header;
}

section#about {
    grid-area: about;
}

section#members {
    grid-area: members;
}


::selection {
    background-color: #711e16;
    color: white;
}
    ::-moz-selection {
        background-color: #711e16;
        color: white;
    }