/* || GENERAL STYLES */

html {
    box-sizing: border-box;
    /* This means that any width and height values for box elements is exact! */

    /* || TYPOGRAPHY */
    background: #161020;
    font-family: 'Rosario', 'Verdana', sans-serif;
    font-size: 24px;
    color: white;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

a {
    color: white;
}

a:hover {
    color: #ede5fb;
}

figure {
    margin: 0px;
}

/* || MORE TYPOGRAPHY */

h1 {
    font-family: 'Alegreya', 'Georgia', serif;
    font-size: 2.5rem;
}

h2 {
    font-family: 'Alegreya', 'Georgia', serif;
    font-size: 2rem;
}

h3 {
    font-family: 'Alegreya', 'Georgia', serif;
    font-size: 1.5rem;
}

h4 {
    font-size: 1.25rem;
    text-decoration: underline;
    margin: 1rem 0 1rem 0;
}

h5 {
    font-size: 1rem;
    margin: 1rem 0 1rem 0;
}

ul {
    padding-left: 1rem;
}

/* || UTILITIES */

.tongues {
    background: linear-gradient(to left, orange 70%, green);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.no-sword {
    color: #a685de;
}

.myths {
    color: palevioletred;
}

.forest {
    color: lightgreen;
}

.SOP {
    color: lightsalmon;
}

.hasbro {
    color: lightskyblue;
}

.everything {
    background: linear-gradient(to right, orange, black 70%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.dead-heroes {
    background: linear-gradient(to right, grey, white 20%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.malignance {
    background: linear-gradient(to left, orange 90%, red);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.mother {
    background: linear-gradient(to left, green 90%, skyblue);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.king {
    background: linear-gradient(to right, gold, skyblue 40%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.rogue {
    background: linear-gradient(to left, black 50%, red);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.tower {
    background: linear-gradient(to left, black 80%, lightgray);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.try {
    color: #a685de;
}

/* || SITEWIDE */

/* || TYPOGRAPHY */

/* || HEADER AND MAIN NAVIGATION */

nav>ul {
    display: flex;
    justify-content: center;
    align-items: center;
    list-style: none;
}

nav>ul>li {
    margin: 0.25rem;
}

nav>ul>li>a {
    background-color: #0f0225;
    padding: 1rem 2rem;
    border-radius: 0.5rem;
}

nav>ul>li>a:hover {
    background-color: #161020;
}

/* || GRID LAYOUT */

/* Only use a grid layout if we are on a big screen */
@media screen and (width >=1280px) {
    .container-outer {
        display: grid;
        grid-template-columns: 1fr;
        row-gap: 0.5rem;
    }

    .container-inner {
        display: grid;
        grid-template-columns: 1fr 3fr 1fr;
        column-gap: 0.5rem;
    }
}

.container-inner>article,
aside {
    border-radius: 0.5rem;
    padding: 0.5rem;
    background-color: #201D26;
    border: 2px solid white;
}

.container-outer>header,
footer,
nav {
    border-radius: 0.5rem;
    padding: 0.5rem;
    background-color: #201D26;
    border: 2px solid white;
    text-align: center;
}

header {
    grid-column: 1 / 3;
    grid-row: 1;
}

nav {
    grid-column: 1 / 3;
    grid-row: 2;
}

main {
    grid-column: 2;
    grid-row: 3;
}

footer {
    grid-column: 1 / 3;
    grid-row: 4;
}