/* =========================
   POSSUM'S BANANAGRAMS
   ========================= */


/* =========================
   GENERAL
   ========================= */

body {
    background-color: #041017;
    color: #d8d2b5;

    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;

    margin: 0;
    padding: 0;

    text-align: center;
}


/* =========================
   HEADER
   ========================= */

header {
    text-align: center;

    padding: 45px 20px 30px;

    background-color: #071a22;

    border-bottom: 3px double #a88b3d;

    box-shadow:
        0 4px 25px rgba(0, 0, 0, 0.8);
}


/* =========================
   WOODEN TITLE
   ========================= */

.tile-title {
    display: flex;

    justify-content: center;
    align-items: center;

    flex-wrap: wrap;

    gap: 5px;

    margin-bottom: 8px;
}


.tile-title span {
    display: inline-flex;

    width: 42px;
    height: 42px;

    align-items: center;
    justify-content: center;

    /* SPRUCE WOOD */

    background:
        repeating-linear-gradient(
            88deg,
            rgba(255, 220, 170, 0.06) 0px,
            rgba(255, 220, 170, 0.06) 2px,
            rgba(45, 25, 14, 0.12) 3px,
            rgba(45, 25, 14, 0.12) 7px,
            rgba(255, 220, 170, 0.025) 9px
        ),
        linear-gradient(
            135deg,
            #76543a 0%,
            #65452f 35%,
            #513522 70%,
            #422b1c 100%
        );

    border: 2px solid #2b1c13;

    border-radius: 3px;

    color: #e5d9b1;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 25px;

    font-weight: bold;

    box-shadow:
        inset 1px 1px 1px rgba(255, 255, 255, 0.10),
        inset -2px -2px 2px rgba(0, 0, 0, 0.35),
        3px 3px 0px #02080c;

    text-shadow:
        1px 1px 2px rgba(0, 0, 0, 0.9);

    transform: rotate(-2deg);
}


/* Wonky tiles */

.tile-title span:nth-child(2) {
    transform: rotate(2deg);
}

.tile-title span:nth-child(3) {
    transform: rotate(-1deg);
}

.tile-title span:nth-child(4) {
    transform: rotate(3deg);
}

.tile-title span:nth-child(5) {
    transform: rotate(-2deg);
}

.tile-title span:nth-child(6) {
    transform: rotate(-3deg);
}

.tile-title span:nth-child(7) {
    transform: rotate(1deg);
}

.tile-title span:nth-child(8) {
    transform: rotate(2deg);
}


/* Second line slightly darker */

.tile-title.second span {
    background:
        repeating-linear-gradient(
            88deg,
            rgba(255, 220, 170, 0.04) 0px,
            rgba(255, 220, 170, 0.04) 2px,
            rgba(40, 22, 12, 0.12) 3px,
            rgba(40, 22, 12, 0.12) 7px,
            rgba(255, 220, 170, 0.02) 9px
        ),
        linear-gradient(
            135deg,
            #69492f 0%,
            #573922 45%,
            #40291a 100%
        );
}


/* =========================
   NAVIGATION
   ========================= */

nav {
    display: flex;

    justify-content: center;

    gap: 8px;

    margin-top: 27px;
}


nav a {
    display: block;

    color: #ddd5b7;

    text-decoration: none;

    background-color: #17152c;

    border: 1px solid #665487;

    border-bottom: 3px solid #3a2e58;

    padding: 8px 18px;

    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;

    font-size: 15px;

    transition: 0.2s;
}


/* Individual tab colors */

nav a:nth-child(1) {
    border-top: 3px solid #a94a42;
}

nav a:nth-child(2) {
    border-top: 3px solid #4e8069;
}

nav a:nth-child(3) {
    border-top: 3px solid #a88b3d;
}

nav a:nth-child(4) {
    border-top: 3px solid #68558c;
}


nav a:hover {
    background-color: #3e1f39;

    color: #f0e5bd;

    border-color: #c09f47;

    transform: translateY(-3px);
}


/* =========================
   SUBTITLE
   ========================= */

.subtitle {
    color: #91a69b;

    font-family: "Courier New", monospace;

    font-size: 14px;

    margin-top: 20px;

    margin-bottom: 0;
}


/* =========================
   MAIN CONTENT
   ========================= */

main {
    max-width: 750px;

    margin: 40px auto;

    padding: 0 20px;
}


/* =========================
   CONTENT BOXES
   ========================= */

section {
    background-color: #081d25;

    border: 1px solid #397066;

    padding: 25px;

    margin-bottom: 25px;

    box-shadow:
        5px 5px 0px #02080c,
        0 0 18px rgba(0, 0, 0, 0.5);

    text-align: center;
}


/* First box gets a ruby accent */

.welcome {
    border-top: 4px solid #9f403c;
}


/* History gets gold */

.history {
    border-top: 4px solid #b89a43;
}


/* =========================
   HEADINGS
   ========================= */

h1,
h2 {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;

    font-weight: bold;

    letter-spacing: 1px;
}


h1 {
    color: #c5a84c;

    font-size: 27px;
}


h2 {
    color: #b94a43;

    font-size: 21px;

    border-bottom: 1px dotted #526c64;

    padding-bottom: 8px;
}


/* =========================
   LITTLE STAR DECORATIONS
   ========================= */

h1::before {
    content: "✦ ";

    color: #b89a43;
}

h1::after {
    content: " ✦";

    color: #b89a43;
}

h2::before {
    content: "✧ ";

    color: #557f6b;
}


/* =========================
   BODY TEXT
   ========================= */

p {
    line-height: 1.7;

    text-align: center;
}


/* =========================
   LINKS
   ========================= */

a {
    color: #72a487;

    text-decoration-thickness: 1px;

    text-underline-offset: 3px;
}


a:hover {
    color: #d0b052;
}


/* =========================
   SITE HISTORY
   ========================= */

.history strong {
    color: #c6a94e;
}


/* Add a little color to history paragraphs */

.history p:first-of-type {
    color: #9ab3a1;
}

.history p:last-of-type {
    color: #b86a61;
}


/* =========================
   FOOTER
   ========================= */

footer {
    text-align: center;

    padding: 20px;

    border-top: 2px dashed #397066;

    font-family: "Courier New", monospace;

    font-size: 13px;

    color: #718b84;
}


/* =========================
   MOBILE
   ========================= */

@media (max-width: 600px) {

    .tile-title span {
        width: 34px;
        height: 34px;

        font-size: 20px;
    }

    nav {
        flex-wrap: wrap;
    }

    nav a {
        padding: 7px 12px;
    }

}