/*! modern-normalize v3.0.1 | MIT License | https://github.com/sindresorhus/modern-normalize */

/*
Document
========
*/

/**
Use a better box model (opinionated).
*/

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

html {
    /* Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3) */
    font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
    line-height: 1.15; /* 1. Correct the line height in all browsers. */
    -webkit-text-size-adjust: 100%; /* 2. Prevent adjustments of font size after orientation changes in iOS. */
    tab-size: 4; /* 3. Use a more readable tab size (opinionated). */
}

/*
Sections
========
*/

body {
    margin: 0; /* Remove the margin in all browsers. */
}

/*
Text-level semantics
====================
*/

/**
Add the correct font weight in Chrome and Safari.
*/

b,
strong {
    font-weight: bolder;
}

/**
1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
2. Correct the odd 'em' font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
    font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace; /* 1 */
    font-size: 1em; /* 2 */
}

/**
Add the correct font size in all browsers.
*/

small {
    font-size: 80%;
}

/**
Prevent 'sub' and 'sup' elements from affecting the line height in all browsers.
*/

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sub {
    bottom: -0.25em;
}

sup {
    top: -0.5em;
}

/*
Tabular data
============
*/

/**
Correct table border color inheritance in Chrome and Safari. (https://issues.chromium.org/issues/40615503, https://bugs.webkit.org/show_bug.cgi?id=195016)
*/

table {
    border-color: currentcolor;
}

/*
Forms
=====
*/

/**
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
*/

button,
input,
optgroup,
select,
textarea {
    font-family: inherit; /* 1 */
    font-size: 100%; /* 1 */
    line-height: 1.15; /* 1 */
    margin: 0; /* 2 */
}

/**
Correct the inability to style clickable types in iOS and Safari.
*/

button,
[type="button"],
[type="reset"],
[type="submit"] {
    -webkit-appearance: button;
}

/**
Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers.
*/

legend {
    padding: 0;
}

/**
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
    vertical-align: baseline;
}

/**
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
    height: auto;
}

/**
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type="search"] {
    -webkit-appearance: textfield; /* 1 */
    outline-offset: -2px; /* 2 */
}

/**
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
    -webkit-appearance: none;
}

/**
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to 'inherit' in Safari.
*/

::-webkit-file-upload-button {
    -webkit-appearance: button; /* 1 */
    font: inherit; /* 2 */
}

/*
Interactive
===========
*/

/*
Add the correct display in Chrome and Safari.
*/

summary {
    display: list-item;
}
:root {
    --padding: 10px;

    --user-deco: url(/img/goatface.gif);
    --user-color: #aa0a26;
    --active-goat: url(/img/gray.gif);

    --content-bg: #ffffcd;
    --main-bg: #fff;
    --main-bg-outline: #ae8960;

    --background-image: url(/img/green_bg.png);
    --header-img: url(/img/GoatlingsHeader.gif);
    --goat-side: url();

    --text: #604325;
    --bold: #e72083;
    --italics: #52252d;

    --header: #604325;
    --header-underline: #ccc5bd;

    --link: #0d85c1;
    --link-hover: #a6d8f1;

    /* one off/specific colours here */
    --nav-bg: #956e44;
    --nav-bg-hover: #3a2316;
    --nav-outline: #af8a61;
    --nav-outline-hover: #9a6741;
    --nav-text: #f8f8c4;
    --nav-text-outline: #d5b46b;

    --home-h1-bg: #ff9f80;
    --home-h1-border: #d1f2a5;
    --home-h1-text: white;
    --home-h2-bg: #eda45f;
    --home-h2-text: white;
    --home-icon-border: black;

    --goat-outline: #eee;

    @media (prefers-color-scheme: dark) {
        --content-bg: #1a181e;
        --main-bg: #121212;
        --main-bg-outline: #424754;

        --background-image: url(/img/blue_bg.png);
        --header-img: url(/img/GoatlingsHeader.gif);

        --text: #ffffff;
        --bold: #dd3c60;
        --italics: pink;

        --header: #c548ab;
        --header-underline: #312d30;

        --link: #e2708a;
        --link-hover: #bc1e42;

        --nav-bg: #8484aa;
        --nav-bg-hover: #3d3d6b;
        --nav-outline: #d4d2ec;
        --nav-outline-hover: #8888e4;
        --nav-text: #dddbfa;
        --nav-text-outline: #635f8f;

        --home-h1-bg: #8484aa;
        --home-h1-border: #d4d2ec;
        --home-h1-text: white;
        --home-h2-bg: #4d566d;
        --home-h2-text: white;
        --home-icon-border: white;

        --goat-outline: #212121;
    }
}

@font-face {
    font-family: "Comic Relief";
    font-display: swap;
    src: url(/font/ComicRelief-Regular.ttf);
}

/* -------------------------------------------------------- */
/* SCROLLBAR STYLING */
/* -------------------------------------------------------- */
/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--bold) transparent;
}

/* Chrome, Edge, and Safari */
*::-webkit-scrollbar {
    width: 5px;
}

*::-webkit-scrollbar-track {
    background: transparent;
}

*::-webkit-scrollbar-thumb {
    background-color: transparent;
    border-radius: 10px;
    border: 3px double var(--bold);
}

::selection {
    color: var(--home-h1-text);
    background: var(--home-h1-bg);
}

/* -------------------------------------------------------- */
/* BASICS */
/* -------------------------------------------------------- */
body {
    font-family: Arial, sans-serif;
    color: var(--text);
    font-size: 0.8em;
    background-image: var(--background-image);
}

* {
    box-sizing: border-box;
    margin: 0;

    &:focus-visible {
        outline-color: red !important;
        outline-offset: -1px !important;
        outline-style: dotted !important;
        outline-width: 2px !important;
        border-color: transparent;
    }
}

html {
    position: relative;
}

html,
body {
    padding: 0;
    margin: 0;
}

a {
    color: var(--link);
    text-decoration: none;
    transition: 0.25s;
    line-height: 1rem;
    font-weight: bold;

    &:hover {
        color: var(--link-hover);
        text-decoration: none;
    }
}

/* only add external links to paragraphs, blockquotes, and lists */
main p a[href^="http"]:after,
main blockquote a[href^="http"]:after,
main li a[href^="http"]:after {
    display: inline-block;
    content: "↗";
    margin-left: 1px;
    background-size: 1rem 1rem;
}

/* -------------------------------------------------------- */
/* CONTENT STYLING */
/* -------------------------------------------------------- */
#contentwrapper {
    width: 70%;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
    background-color: var(--content-bg);
}

#bodycontainer {
    display: grid;
    grid-template-areas: "menu content";
    grid-template-columns: 130px 3fr;
    gap: 10px;
    padding: var(--padding);
}

main {
    background-color: var(--main-bg);
    padding: var(--padding);
    border-radius: 5px;
    grid-area: content;
    line-height: 1.35em;
    position: relative;
}

/* -------------------------------------------------------- */
/* FORMATTING */
/* -------------------------------------------------------- */
main p {
    padding: 5px 0;
}

main p:first-child {
    padding-top: 0;
}

main p:last-child {
    padding-bottom: 0;
}

/* -------------------------------------------------------- */
/* HEADER + PET ICON */
/* -------------------------------------------------------- */
header {
    width: 100%;
    height: 125px;
    background-image: var(--header-img);
    background-position: center;
}

header::after {
    content: "";
    background-image: var(--active-goat);
    width: 110px;
    height: 110px;
    margin-top: 10px;
    background-repeat: no-repeat;
    background-position: center;
    float: right;
    background-size: contain;
}

#user-info {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 50px;
    padding: var(--padding);
}

#user-info #left-user {
    flex: 1;
    justify-content: left;
    align-self: center;
    flex-direction: column;
}

#user-info #right-user {
    flex: 1;
    justify-content: right;
    align-self: center;
    display: flex;
    flex-direction: row;
    gap: 10px;
}

.user-icon::before {
    content: " ";
    background: var(--user-deco);
    background-repeat: no-repeat;
    width: 20px;
    height: 20px;
    display: inline-block;
    margin-right: 3px;
}

#timer {
    font-size: 0.8em;
}

/* -------------------------------------------------------- */
/* MAIN CONTENT + NAV */
/* -------------------------------------------------------- */
#bodycontainer nav {
    grid-area: menu;
    font-family: "Comic Relief", system-ui;
    font-style: normal;
    position: sticky;
    top: 10px;
    height: fit-content;
}

/* BUTTON VERSION */
.nav-button {
    font-variant-caps: small-caps;
    font-weight: bold;
    font-size: 1rem;
    cursor: pointer;
    display: block;
    width: 100%;
    background-color: var(--nav-bg);
    color: var(--nav-text);
    text-align: center;
    margin: 5px 0;
    padding: 5px 0;
    border-radius: 5px;
    border: 5px solid var(--nav-outline);
    transition: 0.5s;
    text-shadow:
        -2px -2px 2px var(--nav-text-outline),
        2px -2px 2px var(--nav-text-outline),
        -2px 2px 2px var(--nav-text-outline),
        2px 2px 2px var(--nav-text-outline);
}

.nav-button:hover {
    background-color: var(--nav-bg-hover);
    border: 5px solid var(--nav-outline-hover);
    transform: scale(1.1);
}

/* UL VERSION */
#bodycontainer nav ul {
    width: 100%;
    padding-left: 0;
}

#bodycontainer nav li {
    font-size: 1rem;
    display: block;
    width: 100%;
    background-color: var(--nav-bg);
    color: var(--nav-text);
    text-align: center;
    margin: 5px 0;
    padding: 5px 0;
    border-radius: 5px;
    border: 5px solid var(--nav-outline);
    transition: 0.5s;
}

#bodycontainer nav li:hover {
    background-color: var(--nav-bg-hover);
    border: 5px solid var(--nav-outline-hover);
    transform: scale(1.1);
}

#bodycontainer nav li:first-child {
    margin-top: 0;
}

#bodycontainer nav li:last-child {
    margin-bottom: 0;
}

#bodycontainer nav li a {
    font-variant-caps: small-caps;
    line-height: 0;
    color: var(--nav-text);
    text-shadow:
        -2px -2px 2px var(--nav-text-outline),
        2px -2px 2px var(--nav-text-outline),
        -2px 2px 2px var(--nav-text-outline),
        2px 2px 2px var(--nav-text-outline);
}

/* -------------------------------------------------------- */
/* DECORATIVE */
/* -------------------------------------------------------- */
#news section,
#goats section {
    border: 1px solid var(--main-bg-outline);
    border-radius: 4px;
    padding: var(--padding);
    margin: 10px 0;
}

h2 {
    color: var(--header);
    font-size: 1.4em;
    margin: 10px 0;
}

bold,
b,
strong {
    color: var(--bold);
}

i,
em {
    color: var(--italics);
}

u {
    text-decoration-color: var(--bold);
}

hr {
    border: none;
    border-bottom: 1px solid var(--header-underline);
}

blockquote {
    padding-left: 20px;
}

.user-color {
    color: var(--user-color) !important;
}

abbr,
.tippy {
    text-decoration: underline;
    text-decoration-style: dotted;
    text-decoration-color: var(--bold);
}

/* misc/single-use stuff */
.page-title {
    border-bottom: 1px solid var(--header-underline);
}

#goats section.custom-code {
    border: none;
    margin: 0;
}

#search {
    font-family: arial;
    margin-top: 10px;
    width: 100%;
    background-color: var(--nav-bg);
    color: var(--nav-text);
    text-align: center;
    margin: 5px 0;
    padding: 10px;
    border-radius: 5px;
    border: 5px solid var(--nav-outline);
    transition: 0.5s;
}

#search input,
#search select {
    width: 100%;
    margin-bottom: 5px;
}

.goat-img {
    max-width: 200px;
}

/* helper classes */
.hide-desktop {
    display: none;
}

.flexbox-lazy {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    align-content: center;
    align-items: center;
    padding: 5px;
    gap: 5px;
}

.flexbox-lazy a {
    text-decoration: none;
    line-height: 0;
}

/* center any item */
.center-item {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* align horizontal */
    align-items: center; /* align vertical */
    gap: 2px;
}

/* image floats */
.float-img-right {
    max-width: 100px;
    float: right;
    margin: 5px 0 5px 10px;
}

.pet-image-active {
    position: absolute;
    right: 10px;
    top: 0;
    max-width: 100px;
    pointer-events: none;
}
/* -------------------------------------------------------- */
/* HOME-PAGE SPECIFIC CSS */
/* -------------------------------------------------------- */
.home {
    display: grid;
    grid-template-areas: "intro aside";
    grid-template-columns: auto 150px;
}

#home article {
    grid-area: intro;
    border: 6px solid var(--home-h1-bg);
    padding: 10px;
}

#home aside {
    grid-area: aside;
    text-align: center;
    justify-content: center;
    margin-left: 10px;
}

#home #cool-stuff {
    border: 3px solid var(--home-h2-bg);
    background-color: var(--main-bg);
    margin-top: 10px;
    text-align: left;
}

#home #cool-stuff ul {
    font-size: 0.7rem;
    margin: 10px 0;
    padding-left: 20px;
    padding-right: 5px;
}

#home #cool-stuff li::marker {
    color: var(--bold);
    content: "❤ ";
}

#home .image-border {
    border: 2px solid var(--home-icon-border);
    margin-top: 10px;
}

#home h1 {
    font: 2.5em georgia;
    background: var(--home-h1-bg);
    color: var(--home-h1-text);
    text-align: center;
    border-bottom: 10px solid var(--home-h1-border);
    text-transform: uppercase;
    margin: 0 0 10px 0;
}

#home h2 {
    background: var(--home-h2-bg);
    color: var(--home-h2-text);
    font: 1.1em georgia;
    text-align: center;
    margin: 5px 0;
    font-weight: bold;
    text-transform: uppercase;
    padding: 3px 0;
}

/* -------------------------------------------------------- */
/* NEWS POSTS */
/* -------------------------------------------------------- */
#news .news-header {
    width: 100%;
    height: fit-content;
    display: flex;
    gap: 5px;
    line-height: 1rem;
    margin-bottom: 10px;
}

#news .news-header .icon {
    max-width: 50px;
    max-height: 50px;
}

#news h3 {
    font-size: unset;
    font-weight: bold;
    color: var(--link);
    margin-bottom: -8px;
}

/* -------------------------------------------------------- */
/* PROFILE LAYOUT */
/* -------------------------------------------------------- */
.profile-user {
    display: grid;
    grid-template-areas: "profile-content profile-icon";
    grid-template-columns: 1fr 150px;
    gap: 10px;
}

.profile-user .left-side {
    line-height: 1.3rem;
    grid-area: profile-content;
    display: flex;
    gap: 10px;
}

.profile-user .right-side {
    grid-area: profile-icon;
    align-content: center;
    text-align: center;
}

.profile-user hr {
    border-color: var(--home-icon-border);
    margin: 5px;
}

.goat-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.goat-container > div {
    padding: 10px;
    border-radius: 4px;
    border: 1px solid var(--goat-outline);
    max-width: calc(25% - 10px);
    text-align: center;
}

.goat-container > div img {
    max-width: 160px;
}

.fave-items,
.collection {
    gap: 20px;
    align-items: baseline;
    flex-wrap: wrap;
}

.fave-items > div {
    max-width: calc(20% - 20px);
    min-width: 90px;
    text-align: center;
}

.collection > div {
    max-width: calc(100% / 7 - 20px);
    min-width: 90px;
    text-align: center;
}

/* -------------------------------------------------------- */
/* FOOTER */
/* -------------------------------------------------------- */

footer {
    text-align: center;
    padding: 20px;
    font-size: 0.7em;
}

/* Inline Lists */
footer nav ul {
    font-size: 1.3em;
    padding: 0;
    list-style: none;
    margin-bottom: 10px;
}

footer nav li a {
    font-weight: bold;
}

footer nav li {
    display: inline;
    line-height: 1.2em;
}

footer nav li:after {
    content: " |";
}

footer nav li:first-child {
    padding-left: 0;
}

footer nav li:last-child {
    padding-right: 0;
}

footer nav li:last-child:after {
    content: "";
    margin-left: 0;
}

/* -------------------------------------------------------- */
/* ACCESSIBILITY, DO NOT REMOVE */
/* -------------------------------------------------------- */
#skip a {
    position: absolute;
    display: inline-block;
    left: 0;
    top: -1000px;
    overflow: hidden;
    transition: top 0.5s ease;
    background: var(--content-bg);
    color: var(--link);
    z-index: 1000;
    padding: 10px;
}

#skip a:focus {
    top: 0;
    transition: top 0.5s ease;
}

/* -------------------------------------------------------- */
/* MOBILE RESPONSIVENESS */
/* -------------------------------------------------------- */
@media screen and (max-width: 900px) {
    #contentwrapper {
        width: 95%;
    }

    #bodycontainer {
        display: flex;
        flex-direction: column;
    }

    .home {
        display: block;
    }

    #bodycontainer nav {
        display: flex;
        gap: 10px;
    }

    #bodycontainer nav button,
    #bodycontainer nav li,
    #bodycontainer nav ul {
        margin: 0;
    }

    .hide-mobile {
        display: none;
    }

    #bodycontainer nav {
        position: static;
    }
}
// define your images here
var images = [
    "https://i.ibb.co/5X2QTXRw/6.png",
    "https://i.ibb.co/j9vg3X88/5.png",
    "https://i.ibb.co/pBF36JpF/3.png",
    "https://i.ibb.co/Rk1Z0nxM/1.png",
    "https://i.ibb.co/qFcVFBJB/2.png",
    "https://i.ibb.co/DDfRL1WN/4.png"
];

// this chooses a random number from all available image indices
var randomImage = images[Math.floor(Math.random() * images.length)];
console.log(randomImage);
// make the URL into a proper image tag
var image = "<img src='" + randomImage + "' class='image-border'>";
// append to the div
document.getElementById("ha-shuffle").innerHTML = image;
function openGoatTab(tabName) {
    var i;
    var x = document.getElementsByClassName("tabbed");
    for (i = 0; i < x.length; i++) {
        x[i].style.display = "none";
    }
    document.getElementById(tabName).style.display = "block";
}
let now = new Date();
let currentTime = now.toLocaleTimeString("en-US", {
    hour: "2-digit",
    minute: "2-digit",
    second: "2-digit"
});

document.getElementById("timer").innerHTML = `Current Time: ${currentTime}`;
console.log(`Current Time: ${currentTime}`);
<!doctype html>
<html lang="en">
    <head>
        <!-- Setting character encoding and viewport size. Do not remove. -->
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />

        <!-- Site Title -->
        <title>Goatlings</title>

        <!-- Author -->
        <meta name="author" content="Author" />

        <!-- Site Description -->
        <meta content="A shrine around the pet game Goatlings." name="description" />

        <!-- FavIcon Gif -->
        <link rel="icon" type="image/png" href="img/favicon.png" />

        <!-- CSS: -->
        <link rel="stylesheet" href="css/style.css" />
        <link rel="stylesheet" href="css/normalize.css" />

        <!-- JavaScript: -->
        <!--<script src="js/header.js" defer></script>-->
    </head>
    <body>
        <!-- =============================================== -->
        <!-- Accessibility links. -->
        <!-- =============================================== -->
        <div id="skip"><a href="#content">Skip to content</a></div>

        <!-- =============================================== -->
        <!-- Container. -->
        <!-- =============================================== -->
        <div id="contentwrapper">
            <header></header>

            <!-- =============================================== -->
            <!-- User Info + Currency. -->
            <!-- =============================================== -->
            <div id="user-info" aria-hidden="true">
                <div id="left-user">
                    <p>
                        Welcome <a href="#" class="user-icon user-color">Username</a> - Your active goat is
                        <a href="#">Goat</a><br />
                    </p>
                    <div id="timer"></div>
                </div>
                <div id="right-user">
                    <div>
                        <p><img src="img/mail3.gif" loading="lazy" alt="mail icon" /></p>
                    </div>
                    <div>
                        <p><img src="img/dd_gem.gif" loading="lazy" alt="diamond dust" /> 1</p>
                    </div>
                    <div>
                        <p><img src="img/SS2.gif" loading="lazy" alt="diamond dust" /> 100</p>
                    </div>
                </div>
            </div>

            <!-- =============================================== -->
            <!-- Body Container. -->
            <!-- =============================================== -->
            <div id="bodycontainer">
                <!-- =============================================== -->
                <!-- Tab Links. -->
                <!-- =============================================== -->
                <nav>
                    <div class="center-item hide-mobile">
                        <img src="img/blank.png" alt="" loading="lazy" aria-hidden="true" />
                    </div>
                    <button class="nav-button" onclick="openGoatTab('home')">Home</button>
                    <button class="nav-button" onclick="openGoatTab('news')">News</button>
                    <button class="nav-button" onclick="openGoatTab('goats')">Profile</button>
                    <button class="nav-button" onclick="openGoatTab('gallery')">Collection</button>
                    <button class="nav-button" onclick="openGoatTab('credits')">Credits</button>
                    <ul>
                        <li><a href="/index.html">Back to Site</a></li>
                    </ul>

                    <!-- =============================================== -->
                    <!-- Fake Search. -->
                    <!-- =============================================== -->
                    <div id="search" class="hide-mobile" aria-hidden="true">
                        <p>Search Keyword</p>
                        <input tabindex="-1" />
                        <p>Specifics</p>
                        <select name="Specifics" id="specifics" tabindex="-1">
                            <option value="0">-Containing-</option>
                            <option value="1">-Identical-</option>
                        </select>
                        <p>Category</p>
                        <select name="Category" id="category" tabindex="-1">
                            <option value="0">-Item Name-</option>
                            <option value="1">-Member-</option>
                            <option value="2">-Pets-</option>
                        </select>
                        <button tabindex="-1">Search</button>
                    </div>
                </nav>

                <!-- =============================================== -->
                <!-- Main Content. -->
                <!-- =============================================== -->
                <main id="content">
                    <!-- =============================================== -->
                    <!-- Home Tab. -->
                    <!-- =============================================== -->
                    <div id="home" class="tabbed">
                        <div class="home">
                            <!-- =============================================== -->
                            <!-- Home Intro. -->
                            <!-- =============================================== -->
                            <article>
                                <section>
                                    <h1>Welcome</h1>
                                </section>
                                <img
                                    src="img/goat_cake.png"
                                    alt=""
                                    aria-hidden="true"
                                    style="float: left; margin-right: 10px" />
                                <p><b>Come one, come all! Welcome to the Kingdom of Goatlings!</b></p>
                                <p>
                                    This is a simple (well, simple to me, I do think the code is more towards
                                    intermediate) one-page shrine I made in memorial to Goatlings shutting down, and in
                                    the process of making it, I thought I'd make it a template as well for others to
                                    use; many people have been wanting to save their goats and all their collections in
                                    some form or another, so hopefully this helps people who are a little more
                                    savvy/want to learn HTML and CSS in the process.
                                </p>
                                <p>
                                    I will say, this template <b>does not</b> take into account custom goat profiles and
                                    treasures, it is more catered to showing your goats off in a list, and your gallery
                                    collections.
                                </p>
                                <p>
                                    Those who are brave can try their hand at making profiles, but this template is
                                    currently not catered towards that. Those interested may want to check out
                                    <a href="https://werewolf-girlfriend.itch.io/website-gallery-template"
                                        >werewolf-girlfriend's gallery</a
                                    >
                                    template and how image popups work, or perhaps try their hand at making a tab
                                    <u>just</u> for goat profiles, and have a little dropdown to swap which goat is
                                    showing. If I end up doing that at any point for my own, I will return to update
                                    this code <u>OR</u> offer an alternative that has it as it will be more complicated.
                                </p>
                                <p>For what features this template has, check out the <i>news</i> tab above.</p>
                                <div class="flexbox-lazy">
                                    <img src="img/home3.gif" alt="welcome to goatlings. register now" loading="lazy" />
                                    <img
                                        src="img/home2.gif"
                                        alt="use appearance dolls to change your pet!"
                                        loading="lazy" />
                                    <img
                                        src="img/home5.gif"
                                        alt="best viewed with firefox. not 100% compatible on mobile."
                                        loading="lazy" />
                                </div>
                                <section>
                                    <h2>my beloved goat</h2>
                                    <div class="flexbox-lazy" style="align-items: baseline">
                                        <img src="img/party_pooper.png" alt="" loading="lazy" />
                                        <img src="img/gray.gif" class="goat-img" alt="Gray Goat" loading="lazy" />
                                        <img src="img/party_pooper_flip.png" alt="" loading="lazy" />
                                    </div>
                                </section>
                                <section>
                                    <h2>favourite items</h2>
                                    <div class="flexbox-lazy fave-items">
                                        <div>
                                            <img src="img/gray_ad.gif" /><br />
                                            <p>Basic Gray AD</p>
                                        </div>
                                        <div>
                                            <img src="img/gray_ad.gif" /><br />
                                            <p>Basic Gray AD</p>
                                        </div>
                                        <div>
                                            <img src="img/gray_ad.gif" /><br />
                                            <p>Basic Gray AD</p>
                                        </div>
                                        <div>
                                            <img src="img/gray_ad.gif" /><br />
                                            <p>Basic Gray AD</p>
                                        </div>
                                        <div>
                                            <img src="img/gray_ad.gif" /><br />
                                            <p>Basic Gray AD</p>
                                        </div>
                                    </div>
                                </section>
                            </article>
                            <!-- =============================================== -->
                            <!-- HA Buddy Aside. -->
                            <!-- =============================================== -->
                            <aside class="hide-mobile" aria-hidden="true">
                                <div id="ha-shuffle"></div>
                                <p><b>Featured HA Buddy </b><br />You</p>
                                <div id="cool-stuff">
                                    <h2 style="margin: 0">Fun Features!</h2>
                                    <ul>
                                        <li>Free To Play</li>
                                        <li>Adopt Goatlings</li>
                                        <li>Change Their Look</li>
                                        <li>Battle Center</li>
                                        <li>Training Center</li>
                                        <li>Explore Area</li>
                                        <li>Dress Up Avatar</li>
                                        <li>User Shops</li>
                                        <li>User Galleries</li>
                                        <li>Club Houses</li>
                                        <li>Bank With Interest</li>
                                        <li>Restocking</li>
                                        <li>Trades</li>
                                        <li>Auctions</li>
                                        <li>Quests</li>
                                        <li>Forums</li>
                                        <li>Live Chat</li>
                                        <li>Display Name Icons</li>
                                        <li>Crafting</li>
                                        <li>Events</li>
                                        <li>Wishing Well</li>
                                        <li>Contests</li>
                                        <li>Limited Editions</li>
                                        <li>Lucky Boxes</li>
                                        <li>Arcade</li>
                                        <li>Shopping District</li>
                                        <li>VIP Shop</li>
                                        <li>Cash Shop</li>
                                        <li>Gift Shop</li>
                                        <li>Creative Park</li>
                                        <li>Contribute Designs</li>
                                        <li>Friendly Community</li>
                                        <li>Super Cute</li>
                                        <li>Ad Free</li>
                                    </ul>
                                </div>
                            </aside>
                        </div>
                    </div>

                    <!-- =============================================== -->
                    <!-- History Tab. -->
                    <!-- =============================================== -->
                    <div id="news" class="tabbed" style="display: none">
                        <article>
                            <h2 class="page-title">Information About the Template</h2>
                            <section>
                                <div class="news-header">
                                    <img src="img/blank.png" class="icon" loading="lazy" alt="" aria-hidden="true" />
                                    <div>
                                        <h3>Template Features</h3>
                                        <p>
                                            Posted by <a href="#" class="user-icon user-color">Username</a><br />on
                                            <time>2025-12-24 12:00:00</time>
                                        </p>
                                    </div>
                                </div>
                                <p>Some of the features of this template include:</p>
                                <ul>
                                    <li>Outgoing links having an arrow attached to them</li>
                                    <li>
                                        Colour variables + system-respecting dark mode colours, plus variables to easily
                                        change your user icon, user colour, site background, active goat, and even the
                                        site header
                                    </li>
                                    <li>Focus elements + skip to content</li>
                                    <li>A mobile friendly layout</li>
                                    <li>
                                        Helper classes like <code>.hide-mobile</code> and <code>.hide-desktop</code> to
                                        easily enable/disable mobile-specific and desktop-only things
                                    </li>
                                    <li>
                                        Random HA buddies on the home page which change on refresh, you can add your own
                                        HA buddy outfits to swap around (the current ones are the ones I used for an MM
                                        submission), you can find them in <b>ha-image-swap.js</b>
                                    </li>
                                </ul>
                            </section>
                            <section>
                                <div class="news-header">
                                    <img src="img/blank.png" class="icon" loading="lazy" alt="" aria-hidden="true" />
                                    <div>
                                        <h3 id="whatilike">Tag and HTML Showcase</h3>
                                        <p>
                                            Posted by <a href="#" class="user-icon user-color">Username</a><br />on
                                            <time>2025-12-24 12:00:00</time>
                                        </p>
                                    </div>
                                </div>
                                <p>
                                    I will now show you how to use the most common HTML text elements:
                                    <b>This is bold text.</b>
                                    <strong>This is also bold text.</strong>
                                    <i>This is italic text.</i>
                                    <em>This is also italic text.</em>
                                    <s>This is strikethrough text.</s>
                                    <u>This is underlined text.</u>
                                    <a href="../index.html">This is an internal link.</a>
                                    <a href="https://petrapixel.neocities.org/" target="_blank"
                                        >This is a link that will open in a new tab.</a
                                    >
                                    <code>This is code (displayed in a monospace font).</code>
                                    <abbr title="Example.">This is an abbreviation (Try hovering over it).</abbr>
                                    <mark>This is highlighted text.</mark>
                                    This is a line break (The br stands for break.): <br />It's different from a
                                    paragraph because it does not add space inbetween the lines of text.
                                </p>
                                <p>
                                    This is a paragraph. As you can see, there's a bit of space between it and the
                                    previous paragraph.
                                </p>
                                <hr />
                                <p>And this is a divider!</p>

                                <blockquote>
                                    This is a blockquote. Blockquotes are indented text that usually quotes something,
                                    or someone.
                                </blockquote>
                            </section>
                        </article>
                    </div>

                    <!-- =============================================== -->
                    <!-- Goat Tabs. -->
                    <!-- =============================================== -->
                    <div id="goats" class="tabbed" style="display: none">
                        <article>
                            <img src="img/OrangeTree.gif" class="pet-image-active" alt="" />
                            <h2 class="page-title">Profile Your Name</h2>
                            <section class="custom-code">
                                <p>
                                    You could put in custom code here, or remove. This layout isn't catered to have
                                    custom goat profiles, or tabs, sorry. If you're curious in making tabs for your
                                    goats, you could do what I did for the tabs here (I used
                                    <a href="https://www.w3schools.com/w3css/w3css_tabulators.asp"
                                        >W3 School's CSS tab guide</a
                                    >).
                                </p>
                            </section>
                            <section>
                                <!-- =============================================== -->
                                <!-- Custom Code. -->
                                <!-- =============================================== -->

                                <!-- ========/*! modern-normalize v3.0.1 | MIT License | https://github.com/sindresorhus/modern-normalize */

/*
Document
========
*/

/**
Use a better box model (opinionated).
*/

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

html {
    /* Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3) */
    font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
    line-height: 1.15; /* 1. Correct the line height in all browsers. */
    -webkit-text-size-adjust: 100%; /* 2. Prevent adjustments of font size after orientation changes in iOS. */
    tab-size: 4; /* 3. Use a more readable tab size (opinionated). */
}

/*
Sections
========
*/

body {
    margin: 0; /* Remove the margin in all browsers. */
}

/*
Text-level semantics
====================
*/

/**
Add the correct font weight in Chrome and Safari.
*/

b,
strong {
    font-weight: bolder;
}

/**
1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
2. Correct the odd 'em' font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
    font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace; /* 1 */
    font-size: 1em; /* 2 */
}

/**
Add the correct font size in all browsers.
*/

small {
    font-size: 80%;
}

/**
Prevent 'sub' and 'sup' elements from affecting the line height in all browsers.
*/

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sub {
    bottom: -0.25em;
}

sup {
    top: -0.5em;
}

/*
Tabular data
============
*/

/**
Correct table border color inheritance in Chrome and Safari. (https://issues.chromium.org/issues/40615503, https://bugs.webkit.org/show_bug.cgi?id=195016)
*/

table {
    border-color: currentcolor;
}

/*
Forms
=====
*/

/**
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
*/

button,
input,
optgroup,
select,
textarea {
    font-family: inherit; /* 1 */
    font-size: 100%; /* 1 */
    line-height: 1.15; /* 1 */
    margin: 0; /* 2 */
}

/**
Correct the inability to style clickable types in iOS and Safari.
*/

button,
[type="button"],
[type="reset"],
[type="submit"] {
    -webkit-appearance: button;
}

/**
Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers.
*/

legend {
    padding: 0;
}

/**
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
    vertical-align: baseline;
}

/**
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
    height: auto;
}

/**
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type="search"] {
    -webkit-appearance: textfield; /* 1 */
    outline-offset: -2px; /* 2 */
}

/**
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
    -webkit-appearance: none;
}

/**
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to 'inherit' in Safari.
*/

::-webkit-file-upload-button {
    -webkit-appearance: button; /* 1 */
    font: inherit; /* 2 */
}

/*
Interactive
===========
*/

/*
Add the correct display in Chrome and Safari.
*/

summary {
    display: list-item;
}
:root {
    --padding: 10px;

    --user-deco: url(/img/goatface.gif);
    --user-color: #aa0a26;
    --active-goat: url(/img/gray.gif);

    --content-bg: #ffffcd;
    --main-bg: #fff;
    --main-bg-outline: #ae8960;

    --background-image: url(/img/green_bg.png);
    --header-img: url(/img/GoatlingsHeader.gif);
    --goat-side: url();

    --text: #604325;
    --bold: #e72083;
    --italics: #52252d;

    --header: #604325;
    --header-underline: #ccc5bd;

    --link: #0d85c1;
    --link-hover: #a6d8f1;

    /* one off/specific colours here */
    --nav-bg: #956e44;
    --nav-bg-hover: #3a2316;
    --nav-outline: #af8a61;
    --nav-outline-hover: #9a6741;
    --nav-text: #f8f8c4;
    --nav-text-outline: #d5b46b;

    --home-h1-bg: #ff9f80;
    --home-h1-border: #d1f2a5;
    --home-h1-text: white;
    --home-h2-bg: #eda45f;
    --home-h2-text: white;
    --home-icon-border: black;

    --goat-outline: #eee;

    @media (prefers-color-scheme: dark) {
        --content-bg: #1a181e;
        --main-bg: #121212;
        --main-bg-outline: #424754;

        --background-image: url(/img/blue_bg.png);
        --header-img: url(/img/GoatlingsHeader.gif);

        --text: #ffffff;
        --bold: #dd3c60;
        --italics: pink;

        --header: #c548ab;
        --header-underline: #312d30;

        --link: #e2708a;
        --link-hover: #bc1e42;

        --nav-bg: #8484aa;
        --nav-bg-hover: #3d3d6b;
        --nav-outline: #d4d2ec;
        --nav-outline-hover: #8888e4;
        --nav-text: #dddbfa;
        --nav-text-outline: #635f8f;

        --home-h1-bg: #8484aa;
        --home-h1-border: #d4d2ec;
        --home-h1-text: white;
        --home-h2-bg: #4d566d;
        --home-h2-text: white;
        --home-icon-border: white;

        --goat-outline: #212121;
    }
}

@font-face {
    font-family: "Comic Relief";
    font-display: swap;
    src: url(/font/ComicRelief-Regular.ttf);
}

/* -------------------------------------------------------- */
/* SCROLLBAR STYLING */
/* -------------------------------------------------------- */
/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--bold) transparent;
}

/* Chrome, Edge, and Safari */
*::-webkit-scrollbar {
    width: 5px;
}

*::-webkit-scrollbar-track {
    background: transparent;
}

*::-webkit-scrollbar-thumb {
    background-color: transparent;
    border-radius: 10px;
    border: 3px double var(--bold);
}

::selection {
    color: var(--home-h1-text);
    background: var(--home-h1-bg);
}

/* -------------------------------------------------------- */
/* BASICS */
/* -------------------------------------------------------- */
body {
    font-family: Arial, sans-serif;
    color: var(--text);
    font-size: 0.8em;
    background-image: var(--background-image);
}

* {
    box-sizing: border-box;
    margin: 0;

    &:focus-visible {
        outline-color: red !important;
        outline-offset: -1px !important;
        outline-style: dotted !important;
        outline-width: 2px !important;
        border-color: transparent;
    }
}

html {
    position: relative;
}

html,
body {
    padding: 0;
    margin: 0;
}

a {
    color: var(--link);
    text-decoration: none;
    transition: 0.25s;
    line-height: 1rem;
    font-weight: bold;

    &:hover {
        color: var(--link-hover);
        text-decoration: none;
    }
}

/* only add external links to paragraphs, blockquotes, and lists */
main p a[href^="http"]:after,
main blockquote a[href^="http"]:after,
main li a[href^="http"]:after {
    display: inline-block;
    content: "↗";
    margin-left: 1px;
    background-size: 1rem 1rem;
}

/* -------------------------------------------------------- */
/* CONTENT STYLING */
/* -------------------------------------------------------- */
#contentwrapper {
    width: 70%;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
    background-color: var(--content-bg);
}

#bodycontainer {
    display: grid;
    grid-template-areas: "menu content";
    grid-template-columns: 130px 3fr;
    gap: 10px;
    padding: var(--padding);
}

main {
    background-color: var(--main-bg);
    padding: var(--padding);
    border-radius: 5px;
    grid-area: content;
    line-height: 1.35em;
    position: relative;
}

/* -------------------------------------------------------- */
/* FORMATTING */
/* -------------------------------------------------------- */
main p {
    padding: 5px 0;
}

main p:first-child {
    padding-top: 0;
}

main p:last-child {
    padding-bottom: 0;
}

/* -------------------------------------------------------- */
/* HEADER + PET ICON */
/* -------------------------------------------------------- */
header {
    width: 100%;
    height: 125px;
    background-image: var(--header-img);
    background-position: center;
}

header::after {
    content: "";
    background-image: var(--active-goat);
    width: 110px;
    height: 110px;
    margin-top: 10px;
    background-repeat: no-repeat;
    background-position: center;
    float: right;
    background-size: contain;
}

#user-info {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 50px;
    padding: var(--padding);
}

#user-info #left-user {
    flex: 1;
    justify-content: left;
    align-self: center;
    flex-direction: column;
}

#user-info #right-user {
    flex: 1;
    justify-content: right;
    align-self: center;
    display: flex;
    flex-direction: row;
    gap: 10px;
}

.user-icon::before {
    content: " ";
    background: var(--user-deco);
    background-repeat: no-repeat;
    width: 20px;
    height: 20px;
    display: inline-block;
    margin-right: 3px;
}

#timer {
    font-size: 0.8em;
}

/* -------------------------------------------------------- */
/* MAIN CONTENT + NAV */
/* -------------------------------------------------------- */
#bodycontainer nav {
    grid-area: menu;
    font-family: "Comic Relief", system-ui;
    font-style: normal;
    position: sticky;
    top: 10px;
    height: fit-content;
}

/* BUTTON VERSION */
.nav-button {
    font-variant-caps: small-caps;
    font-weight: bold;
    font-size: 1rem;
    cursor: pointer;
    display: block;
    width: 100%;
    background-color: var(--nav-bg);
    color: var(--nav-text);
    text-align: center;
    margin: 5px 0;
    padding: 5px 0;
    border-radius: 5px;
    border: 5px solid var(--nav-outline);
    transition: 0.5s;
    text-shadow:
        -2px -2px 2px var(--nav-text-outline),
        2px -2px 2px var(--nav-text-outline),
        -2px 2px 2px var(--nav-text-outline),
        2px 2px 2px var(--nav-text-outline);
}

.nav-button:hover {
    background-color: var(--nav-bg-hover);
    border: 5px solid var(--nav-outline-hover);
    transform: scale(1.1);
}

/* UL VERSION */
#bodycontainer nav ul {
    width: 100%;
    padding-left: 0;
}

#bodycontainer nav li {
    font-size: 1rem;
    display: block;
    width: 100%;
    background-color: var(--nav-bg);
    color: var(--nav-text);
    text-align: center;
    margin: 5px 0;
    padding: 5px 0;
    border-radius: 5px;
    border: 5px solid var(--nav-outline);
    transition: 0.5s;
}

#bodycontainer nav li:hover {
    background-color: var(--nav-bg-hover);
    border: 5px solid var(--nav-outline-hover);
    transform: scale(1.1);
}

#bodycontainer nav li:first-child {
    margin-top: 0;
}

#bodycontainer nav li:last-child {
    margin-bottom: 0;
}

#bodycontainer nav li a {
    font-variant-caps: small-caps;
    line-height: 0;
    color: var(--nav-text);
    text-shadow:
        -2px -2px 2px var(--nav-text-outline),
        2px -2px 2px var(--nav-text-outline),
        -2px 2px 2px var(--nav-text-outline),
        2px 2px 2px var(--nav-text-outline);
}

/* -------------------------------------------------------- */
/* DECORATIVE */
/* -------------------------------------------------------- */
#news section,
#goats section {
    border: 1px solid var(--main-bg-outline);
    border-radius: 4px;
    padding: var(--padding);
    margin: 10px 0;
}

h2 {
    color: var(--header);
    font-size: 1.4em;
    margin: 10px 0;
}

bold,
b,
strong {
    color: var(--bold);
}

i,
em {
    color: var(--italics);
}

u {
    text-decoration-color: var(--bold);
}

hr {
    border: none;
    border-bottom: 1px solid var(--header-underline);
}

blockquote {
    padding-left: 20px;
}

.user-color {
    color: var(--user-color) !important;
}

abbr,
.tippy {
    text-decoration: underline;
    text-decoration-style: dotted;
    text-decoration-color: var(--bold);
}

/* misc/single-use stuff */
.page-title {
    border-bottom: 1px solid var(--header-underline);
}

#goats section.custom-code {
    border: none;
    margin: 0;
}

#search {
    font-family: arial;
    margin-top: 10px;
    width: 100%;
    background-color: var(--nav-bg);
    color: var(--nav-text);
    text-align: center;
    margin: 5px 0;
    padding: 10px;
    border-radius: 5px;
    border: 5px solid var(--nav-outline);
    transition: 0.5s;
}

#search input,
#search select {
    width: 100%;
    margin-bottom: 5px;
}

.goat-img {
    max-width: 200px;
}

/* helper classes */
.hide-desktop {
    display: none;
}

.flexbox-lazy {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    align-content: center;
    align-items: center;
    padding: 5px;
    gap: 5px;
}

.flexbox-lazy a {
    text-decoration: none;
    line-height: 0;
}

/* center any item */
.center-item {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* align horizontal */
    align-items: center; /* align vertical */
    gap: 2px;
}

/* image floats */
.float-img-right {
    max-width: 100px;
    float: right;
    margin: 5px 0 5px 10px;
}

.pet-image-active {
    position: absolute;
    right: 10px;
    top: 0;
    max-width: 100px;
    pointer-events: none;
}
/* -------------------------------------------------------- */
/* HOME-PAGE SPECIFIC CSS */
/* -------------------------------------------------------- */
.home {
    display: grid;
    grid-template-areas: "intro aside";
    grid-template-columns: auto 150px;
}

#home article {
    grid-area: intro;
    border: 6px solid var(--home-h1-bg);
    padding: 10px;
}

#home aside {
    grid-area: aside;
    text-align: center;
    justify-content: center;
    margin-left: 10px;
}

#home #cool-stuff {
    border: 3px solid var(--home-h2-bg);
    background-color: var(--main-bg);
    margin-top: 10px;
    text-align: left;
}

#home #cool-stuff ul {
    font-size: 0.7rem;
    margin: 10px 0;
    padding-left: 20px;
    padding-right: 5px;
}

#home #cool-stuff li::marker {
    color: var(--bold);
    content: "❤ ";
}

#home .image-border {
    border: 2px solid var(--home-icon-border);
    margin-top: 10px;
}

#home h1 {
    font: 2.5em georgia;
    background: var(--home-h1-bg);
    color: var(--home-h1-text);
    text-align: center;
    border-bottom: 10px solid var(--home-h1-border);
    text-transform: uppercase;
    margin: 0 0 10px 0;
}

#home h2 {
    background: var(--home-h2-bg);
    color: var(--home-h2-text);
    font: 1.1em georgia;
    text-align: center;
    margin: 5px 0;
    font-weight: bold;
    text-transform: uppercase;
    padding: 3px 0;
}

/* -------------------------------------------------------- */
/* NEWS POSTS */
/* -------------------------------------------------------- */
#news .news-header {
    width: 100%;
    height: fit-content;
    display: flex;
    gap: 5px;
    line-height: 1rem;
    margin-bottom: 10px;
}

#news .news-header .icon {
    max-width: 50px;
    max-height: 50px;
}

#news h3 {
    font-size: unset;
    font-weight: bold;
    color: var(--link);
    margin-bottom: -8px;
}

/* -------------------------------------------------------- */
/* PROFILE LAYOUT */
/* -------------------------------------------------------- */
.profile-user {
    display: grid;
    grid-template-areas: "profile-content profile-icon";
    grid-template-columns: 1fr 150px;
    gap: 10px;
}

.profile-user .left-side {
    line-height: 1.3rem;
    grid-area: profile-content;
    display: flex;
    gap: 10px;
}

.profile-user .right-side {
    grid-area: profile-icon;
    align-content: center;
    text-align: center;
}

.profile-user hr {
    border-color: var(--home-icon-border);
    margin: 5px;
}

.goat-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.goat-container > div {
    padding: 10px;
    border-radius: 4px;
    border: 1px solid var(--goat-outline);
    max-width: calc(25% - 10px);
    text-align: center;
}

.goat-container > div img {
    max-width: 160px;
}

.fave-items,
.collection {
    gap: 20px;
    align-items: baseline;
    flex-wrap: wrap;
}

.fave-items > div {
    max-width: calc(20% - 20px);
    min-width: 90px;
    text-align: center;
}

.collection > div {
    max-width: calc(100% / 7 - 20px);
    min-width: 90px;
    text-align: center;
}

/* -------------------------------------------------------- */
/* FOOTER */
/* -------------------------------------------------------- */

footer {
    text-align: center;
    padding: 20px;
    font-size: 0.7em;
}

/* Inline Lists */
footer nav ul {
    font-size: 1.3em;
    padding: 0;
    list-style: none;
    margin-bottom: 10px;
}

footer nav li a {
    font-weight: bold;
}

footer nav li {
    display: inline;
    line-height: 1.2em;
}

footer nav li:after {
    content: " |";
}

footer nav li:first-child {
    padding-left: 0;
}

footer nav li:last-child {
    padding-right: 0;
}

footer nav li:last-child:after {
    content: "";
    margin-left: 0;
}

/* -------------------------------------------------------- */
/* ACCESSIBILITY, DO NOT REMOVE */
/* -------------------------------------------------------- */
#skip a {
    position: absolute;
    display: inline-block;
    left: 0;
    top: -1000px;
    overflow: hidden;
    transition: top 0.5s ease;
    background: var(--content-bg);
    color: var(--link);
    z-index: 1000;
    padding: 10px;
}

#skip a:focus {
    top: 0;
    transition: top 0.5s ease;
}

/* -------------------------------------------------------- */
/* MOBILE RESPONSIVENESS */
/* -------------------------------------------------------- */
@media screen and (max-width: 900px) {
    #contentwrapper {
        width: 95%;
    }

    #bodycontainer {
        display: flex;
        flex-direction: column;
    }

    .home {
        display: block;
    }

    #bodycontainer nav {
        display: flex;
        gap: 10px;
    }

    #bodycontainer nav button,
    #bodycontainer nav li,
    #bodycontainer nav ul {
        margin: 0;
    }

    .hide-mobile {
        display: none;
    }

    #bodycontainer nav {
        position: static;
    }
}
// define your images here
var images = [
    "https://i.ibb.co/5X2QTXRw/6.png",
    "https://i.ibb.co/j9vg3X88/5.png",
    "https://i.ibb.co/pBF36JpF/3.png",
    "https://i.ibb.co/Rk1Z0nxM/1.png",
    "https://i.ibb.co/qFcVFBJB/2.png",
    "https://i.ibb.co/DDfRL1WN/4.png"
];

// this chooses a random number from all available image indices
var randomImage = images[Math.floor(Math.random() * images.length)];
console.log(randomImage);
// make the URL into a proper image tag
var image = "<img src='" + randomImage + "' class='image-border'>";
// append to the div
document.getElementById("ha-shuffle").innerHTML = image;
function openGoatTab(tabName) {
    var i;
    var x = document.getElementsByClassName("tabbed");
    for (i = 0; i < x.length; i++) {
        x[i].style.display = "none";
    }
    document.getElementById(tabName).style.display = "block";
}
let now = new Date();
let currentTime = now.toLocaleTimeString("en-US", {
    hour: "2-digit",
    minute: "2-digit",
    second: "2-digit"
});

document.getElementById("timer").innerHTML = `Current Time: ${currentTime}`;
console.log(`Current Time: ${currentTime}`);
<!doctype html>
<html lang="en">
    <head>
        <!-- Setting character encoding and viewport size. Do not remove. -->
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />

        <!-- Site Title -->
        <title>Goatlings</title>

        <!-- Author -->
        <meta name="author" content="Author" />

        <!-- Site Description -->
        <meta content="A shrine around the pet game Goatlings." name="description" />

        <!-- FavIcon Gif -->
        <link rel="icon" type="image/png" href="img/favicon.png" />

        <!-- CSS: -->
        <link rel="stylesheet" href="css/style.css" />
        <link rel="stylesheet" href="css/normalize.css" />

        <!-- JavaScript: -->
        <!--<script src="js/header.js" defer></script>-->
    </head>
    <body>
        <!-- =============================================== -->
        <!-- Accessibility links. -->
        <!-- =============================================== -->
        <div id="skip"><a href="#content">Skip to content</a></div>

        <!-- =============================================== -->
        <!-- Container. -->
        <!-- =============================================== -->
        <div id="contentwrapper">
            <header></header>

            <!-- =============================================== -->
            <!-- User Info + Currency. -->
            <!-- =============================================== -->
            <div id="user-info" aria-hidden="true">
                <div id="left-user">
                    <p>
                        Welcome <a href="#" class="user-icon user-color">Username</a> - Your active goat is
                        <a href="#">Goat</a><br />
                    </p>
                    <div id="timer"></div>
                </div>
                <div id="right-user">
                    <div>
                        <p><img src="img/mail3.gif" loading="lazy" alt="mail icon" /></p>
                    </div>
                    <div>
                        <p><img src="img/dd_gem.gif" loading="lazy" alt="diamond dust" /> 1</p>
                    </div>
                    <div>
                        <p><img src="img/SS2.gif" loading="lazy" alt="diamond dust" /> 100</p>
                    </div>
                </div>
            </div>

            <!-- =============================================== -->
            <!-- Body Container. -->
            <!-- =============================================== -->
            <div id="bodycontainer">
                <!-- =============================================== -->
                <!-- Tab Links. -->
                <!-- =============================================== -->
                <nav>
                    <div class="center-item hide-mobile">
                        <img src="img/blank.png" alt="" loading="lazy" aria-hidden="true" />
                    </div>
                    <button class="nav-button" onclick="openGoatTab('home')">Home</button>
                    <button class="nav-button" onclick="openGoatTab('news')">News</button>
                    <button class="nav-button" onclick="openGoatTab('goats')">Profile</button>
                    <button class="nav-button" onclick="openGoatTab('gallery')">Collection</button>
                    <button class="nav-button" onclick="openGoatTab('credits')">Credits</button>
                    <ul>
                        <li><a href="/index.html">Back to Site</a></li>
                    </ul>

                    <!-- =============================================== -->
                    <!-- Fake Search. -->
                    <!-- =============================================== -->
                    <div id="search" class="hide-mobile" aria-hidden="true">
                        <p>Search Keyword</p>
                        <input tabindex="-1" />
                        <p>Specifics</p>
                        <select name="Specifics" id="specifics" tabindex="-1">
                            <option value="0">-Containing-</option>
                            <option value="1">-Identical-</option>
                        </select>
                        <p>Category</p>
                        <select name="Category" id="category" tabindex="-1">
                            <option value="0">-Item Name-</option>
                            <option value="1">-Member-</option>
                            <option value="2">-Pets-</option>
                        </select>
                        <button tabindex="-1">Search</button>
                    </div>
                </nav>

                <!-- =============================================== -->
                <!-- Main Content. -->
                <!-- =============================================== -->
                <main id="content">
                    <!-- =============================================== -->
                    <!-- Home Tab. -->
                    <!-- =============================================== -->
                    <div id="home" class="tabbed">
                        <div class="home">
                            <!-- =============================================== -->
                            <!-- Home Intro. -->
                            <!-- =============================================== -->
                            <article>
                                <section>
                                    <h1>Welcome</h1>
                                </section>
                                <img
                                    src="img/goat_cake.png"
                                    alt=""
                                    aria-hidden="true"
                                    style="float: left; margin-right: 10px" />
                                <p><b>Come one, come all! Welcome to the Kingdom of Goatlings!</b></p>
                                <p>
                                    This is a simple (well, simple to me, I do think the code is more towards
                                    intermediate) one-page shrine I made in memorial to Goatlings shutting down, and in
                                    the process of making it, I thought I'd make it a template as well for others to
                                    use; many people have been wanting to save their goats and all their collections in
                                    some form or another, so hopefully this helps people who are a little more
                                    savvy/want to learn HTML and CSS in the process.
                                </p>
                                <p>
                                    I will say, this template <b>does not</b> take into account custom goat profiles and
                                    treasures, it is more catered to showing your goats off in a list, and your gallery
                                    collections.
                                </p>
                                <p>
                                    Those who are brave can try their hand at making profiles, but this template is
                                    currently not catered towards that. Those interested may want to check out
                                    <a href="https://werewolf-girlfriend.itch.io/website-gallery-template"
                                        >werewolf-girlfriend's gallery</a
                                    >
                                    template and how image popups work, or perhaps try their hand at making a tab
                                    <u>just</u> for goat profiles, and have a little dropdown to swap which goat is
                                    showing. If I end up doing that at any point for my own, I will return to update
                                    this code <u>OR</u> offer an alternative that has it as it will be more complicated.
                                </p>
                                <p>For what features this template has, check out the <i>news</i> tab above.</p>
                                <div class="flexbox-lazy">
                                    <img src="img/home3.gif" alt="welcome to goatlings. register now" loading="lazy" />
                                    <img
                                        src="img/home2.gif"
                                        alt="use appearance dolls to change your pet!"
                                        loading="lazy" />
                                    <img
                                        src="img/home5.gif"
                                        alt="best viewed with firefox. not 100% compatible on mobile."
                                        loading="lazy" />
                                </div>
                                <section>
                                    <h2>my beloved goat</h2>
                                    <div class="flexbox-lazy" style="align-items: baseline">
                                        <img src="img/party_pooper.png" alt="" loading="lazy" />
                                        <img src="img/gray.gif" class="goat-img" alt="Gray Goat" loading="lazy" />
                                        <img src="img/party_pooper_flip.png" alt="" loading="lazy" />
                                    </div>
                                </section>
                                <section>
                                    <h2>favourite items</h2>
                                    <div class="flexbox-lazy fave-items">
                                        <div>
                                            <img src="img/gray_ad.gif" /><br />
                                            <p>Basic Gray AD</p>
                                        </div>
                                        <div>
                                            <img src="img/gray_ad.gif" /><br />
                                            <p>Basic Gray AD</p>
                                        </div>
                                        <div>
                                            <img src="img/gray_ad.gif" /><br />
                                            <p>Basic Gray AD</p>
                                        </div>
                                        <div>
                                            <img src="img/gray_ad.gif" /><br />
                                            <p>Basic Gray AD</p>
                                        </div>
                                        <div>
                                            <img src="img/gray_ad.gif" /><br />
                                            <p>Basic Gray AD</p>
                                        </div>
                                    </div>
                                </section>
                            </article>
                            <!-- =============================================== -->
                            <!-- HA Buddy Aside. -->
                            <!-- =============================================== -->
                            <aside class="hide-mobile" aria-hidden="true">
                                <div id="ha-shuffle"></div>
                                <p><b>Featured HA Buddy </b><br />You</p>
                                <div id="cool-stuff">
                                    <h2 style="margin: 0">Fun Features!</h2>
                                    <ul>
                                        <li>Free To Play</li>
                                        <li>Adopt Goatlings</li>
                                        <li>Change Their Look</li>
                                        <li>Battle Center</li>
                                        <li>Training Center</li>
                                        <li>Explore Area</li>
                                        <li>Dress Up Avatar</li>
                                        <li>User Shops</li>
                                        <li>User Galleries</li>
                                        <li>Club Houses</li>
                                        <li>Bank With Interest</li>
                                        <li>Restocking</li>
                                        <li>Trades</li>
                                        <li>Auctions</li>
                                        <li>Quests</li>
                                        <li>Forums</li>
                                        <li>Live Chat</li>
                                        <li>Display Name Icons</li>
                                        <li>Crafting</li>
                                        <li>Events</li>
                                        <li>Wishing Well</li>
                                        <li>Contests</li>
                                        <li>Limited Editions</li>
                                        <li>Lucky Boxes</li>
                                        <li>Arcade</li>
                                        <li>Shopping District</li>
                                        <li>VIP Shop</li>
                                        <li>Cash Shop</li>
                                        <li>Gift Shop</li>
                                        <li>Creative Park</li>
                                        <li>Contribute Designs</li>
                                        <li>Friendly Community</li>
                                        <li>Super Cute</li>
                                        <li>Ad Free</li>
                                    </ul>
                                </div>
                            </aside>
                        </div>
                    </div>

                    <!-- =============================================== -->
                    <!-- History Tab. -->
                    <!-- =============================================== -->
                    <div id="news" class="tabbed" style="display: none">
                        <article>
                            <h2 class="page-title">Information About the Template</h2>
                            <section>
                                <div class="news-header">
                                    <img src="img/blank.png" class="icon" loading="lazy" alt="" aria-hidden="true" />
                                    <div>
                                        <h3>Template Features</h3>
                                        <p>
                                            Posted by <a href="#" class="user-icon user-color">Username</a><br />on
                                            <time>2025-12-24 12:00:00</time>
                                        </p>
                                    </div>
                                </div>
                                <p>Some of the features of this template include:</p>
                                <ul>
                                    <li>Outgoing links having an arrow attached to them</li>
                                    <li>
                                        Colour variables + system-respecting dark mode colours, plus variables to easily
                                        change your user icon, user colour, site background, active goat, and even the
                                        site header
                                    </li>
                                    <li>Focus elements + skip to content</li>
                                    <li>A mobile friendly layout</li>
                                    <li>
                                        Helper classes like <code>.hide-mobile</code> and <code>.hide-desktop</code> to
                                        easily enable/disable mobile-specific and desktop-only things
                                    </li>
                                    <li>
                                        Random HA buddies on the home page which change on refresh, you can add your own
                                        HA buddy outfits to swap around (the current ones are the ones I used for an MM
                                        submission), you can find them in <b>ha-image-swap.js</b>
                                    </li>
                                </ul>
                            </section>
                            <section>
                                <div class="news-header">
                                    <img src="img/blank.png" class="icon" loading="lazy" alt="" aria-hidden="true" />
                                    <div>
                                        <h3 id="whatilike">Tag and HTML Showcase</h3>
                                        <p>
                                            Posted by <a href="#" class="user-icon user-color">Username</a><br />on
                                            <time>2025-12-24 12:00:00</time>
                                        </p>
                                    </div>
                                </div>
                                <p>
                                    I will now show you how to use the most common HTML text elements:
                                    <b>This is bold text.</b>
                                    <strong>This is also bold text.</strong>
                                    <i>This is italic text.</i>
                                    <em>This is also italic text.</em>
                                    <s>This is strikethrough text.</s>
                                    <u>This is underlined text.</u>
                                    <a href="../index.html">This is an internal link.</a>
                                    <a href="https://petrapixel.neocities.org/" target="_blank"
                                        >This is a link that will open in a new tab.</a
                                    >
                                    <code>This is code (displayed in a monospace font).</code>
                                    <abbr title="Example.">This is an abbreviation (Try hovering over it).</abbr>
                                    <mark>This is highlighted text.</mark>
                                    This is a line break (The br stands for break.): <br />It's different from a
                                    paragraph because it does not add space inbetween the lines of text.
                                </p>
                                <p>
                                    This is a paragraph. As you can see, there's a bit of space between it and the
                                    previous paragraph.
                                </p>
                                <hr />
                                <p>And this is a divider!</p>

                                <blockquote>
                                    This is a blockquote. Blockquotes are indented text that usually quotes something,
                                    or someone.
                                </blockquote>
                            </section>
                        </article>
                    </div>

                    <!-- =============================================== -->
                    <!-- Goat Tabs. -->
                    <!-- =============================================== -->
                    <div id="goats" class="tabbed" style="display: none">
                        <article>
                            <img src="img/OrangeTree.gif" class="pet-image-active" alt="" />
                            <h2 class="page-title">Profile Your Name</h2>
                            <section class="custom-cod/*! modern-normalize v3.0.1 | MIT License | https://github.com/sindresorhus/modern-normalize */

/*
Document
========
*/

/**
Use a better box model (opinionated).
*/

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

html {
    /* Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3) */
    font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
    line-height: 1.15; /* 1. Correct the line height in all browsers. */
    -webkit-text-size-adjust: 100%; /* 2. Prevent adjustments of font size after orientation changes in iOS. */
    tab-size: 4; /* 3. Use a more readable tab size (opinionated). */
}

/*
Sections
========
*/

body {
    margin: 0; /* Remove the margin in all browsers. */
}

/*
Text-level semantics
====================
*/

/**
Add the correct font weight in Chrome and Safari.
*/

b,
strong {
    font-weight: bolder;
}

/**
1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
2. Correct the odd 'em' font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
    font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace; /* 1 */
    font-size: 1em; /* 2 */
}

/**
Add the correct font size in all browsers.
*/

small {
    font-size: 80%;
}

/**
Prevent 'sub' and 'sup' elements from affecting the line height in all browsers.
*/

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sub {
    bottom: -0.25em;
}

sup {
    top: -0.5em;
}

/*
Tabular data
============
*/

/**
Correct table border color inheritance in Chrome and Safari. (https://issues.chromium.org/issues/40615503, https://bugs.webkit.org/show_bug.cgi?id=195016)
*/

table {
    border-color: currentcolor;
}

/*
Forms
=====
*/

/**
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
*/

button,
input,
optgroup,
select,
textarea {
    font-family: inherit; /* 1 */
    font-size: 100%; /* 1 */
    line-height: 1.15; /* 1 */
    margin: 0; /* 2 */
}

/**
Correct the inability to style clickable types in iOS and Safari.
*/

button,
[type="button"],
[type="reset"],
[type="submit"] {
    -webkit-appearance: button;
}

/**
Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers.
*/

legend {
    padding: 0;
}

/**
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
    vertical-align: baseline;
}

/**
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
    height: auto;
}

/**
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type="search"] {
    -webkit-appearance: textfield; /* 1 */
    outline-offset: -2px; /* 2 */
}

/**
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
    -webkit-appearance: none;
}

/**
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to 'inherit' in Safari.
*/

::-webkit-file-upload-button {
    -webkit-appearance: button; /* 1 */
    font: inherit; /* 2 */
}

/*
Interactive
===========
*/

/*
Add the correct display in Chrome and Safari.
*/

summary {
    display: list-item;
}
:root {
    --padding: 10px;

    --user-deco: url(/img/goatface.gif);
    --user-color: #aa0a26;
    --active-goat: url(/img/gray.gif);

    --content-bg: #ffffcd;
    --main-bg: #fff;
    --main-bg-outline: #ae8960;

    --background-image: url(/img/green_bg.png);
    --header-img: url(/img/GoatlingsHeader.gif);
    --goat-side: url();

    --text: #604325;
    --bold: #e72083;
    --italics: #52252d;

    --header: #604325;
    --header-underline: #ccc5bd;

    --link: #0d85c1;
    --link-hover: #a6d8f1;

    /* one off/specific colours here */
    --nav-bg: #956e44;
    --nav-bg-hover: #3a2316;
    --nav-outline: #af8a61;
    --nav-outline-hover: #9a6741;
    --nav-text: #f8f8c4;
    --nav-text-outline: #d5b46b;

    --home-h1-bg: #ff9f80;
    --home-h1-border: #d1f2a5;
    --home-h1-text: white;
    --home-h2-bg: #eda45f;
    --home-h2-text: white;
    --home-icon-border: black;

    --goat-outline: #eee;

    @media (prefers-color-scheme: dark) {
        --content-bg: #1a181e;
        --main-bg: #121212;
        --main-bg-outline: #424754;

        --background-image: url(/img/blue_bg.png);
        --header-img: url(/img/GoatlingsHeader.gif);

        --text: #ffffff;
        --bold: #dd3c60;
        --italics: pink;

        --header: #c548ab;
        --header-underline: #312d30;

        --link: #e2708a;
        --link-hover: #bc1e42;

        --nav-bg: #8484aa;
        --nav-bg-hover: #3d3d6b;
        --nav-outline: #d4d2ec;
        --nav-outline-hover: #8888e4;
        --nav-text: #dddbfa;
        --nav-text-outline: #635f8f;

        --home-h1-bg: #8484aa;
        --home-h1-border: #d4d2ec;
        --home-h1-text: white;
        --home-h2-bg: #4d566d;
        --home-h2-text: white;
        --home-icon-border: white;

        --goat-outline: #212121;
    }
}

@font-face {
    font-family: "Comic Relief";
    font-display: swap;
    src: url(/font/ComicRelief-Regular.ttf);
}

/* -------------------------------------------------------- */
/* SCROLLBAR STYLING */
/* -------------------------------------------------------- */
/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--bold) transparent;
}

/* Chrome, Edge, and Safari */
*::-webkit-scrollbar {
    width: 5px;
}

*::-webkit-scrollbar-track {
    background: transparent;
}

*::-webkit-scrollbar-thumb {
    background-color: transparent;
    border-radius: 10px;
    border: 3px double var(--bold);
}

::selection {
    color: var(--home-h1-text);
    background: var(--home-h1-bg);
}

/* -------------------------------------------------------- */
/* BASICS */
/* -------------------------------------------------------- */
body {
    font-family: Arial, sans-serif;
    color: var(--text);
    font-size: 0.8em;
    background-image: var(--background-image);
}

* {
    box-sizing: border-box;
    margin: 0;

    &:focus-visible {
        outline-color: red !important;
        outline-offset: -1px !important;
        outline-style: dotted !important;
        outline-width: 2px !important;
        border-color: transparent;
    }
}

html {
    position: relative;
}

html,
body {
    padding: 0;
    margin: 0;
}

a {
    color: var(--link);
    text-decoration: none;
    transition: 0.25s;
    line-height: 1rem;
    font-weight: bold;

    &:hover {
        color: var(--link-hover);
        text-decoration: none;
    }
}

/* only add external links to paragraphs, blockquotes, and lists */
main p a[href^="http"]:after,
main blockquote a[href^="http"]:after,
main li a[href^="http"]:after {
    display: inline-block;
    content: "↗";
    margin-left: 1px;
    background-size: 1rem 1rem;
}

/* -------------------------------------------------------- */
/* CONTENT STYLING */
/* -------------------------------------------------------- */
#contentwrapper {
    width: 70%;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
    background-color: var(--content-bg);
}

#bodycontainer {
    display: grid;
    grid-template-areas: "menu content";
    grid-template-columns: 130px 3fr;
    gap: 10px;
    padding: var(--padding);
}

main {
    background-color: var(--main-bg);
    padding: var(--padding);
    border-radius: 5px;
    grid-area: content;
    line-height: 1.35em;
    position: relative;
}

/* -------------------------------------------------------- */
/* FORMATTING */
/* -------------------------------------------------------- */
main p {
    padding: 5px 0;
}

main p:first-child {
    padding-top: 0;
}

main p:last-child {
    padding-bottom: 0;
}

/* -------------------------------------------------------- */
/* HEADER + PET ICON */
/* -------------------------------------------------------- */
header {
    width: 100%;
    height: 125px;
    background-image: var(--header-img);
    background-position: center;
}

header::after {
    content: "";
    background-image: var(--active-goat);
    width: 110px;
    height: 110px;
    margin-top: 10px;
    background-repeat: no-repeat;
    background-position: center;
    float: right;
    background-size: contain;
}

#user-info {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 50px;
    padding: var(--padding);
}

#user-info #left-user {
    flex: 1;
    justify-content: left;
    align-self: center;
    flex-direction: column;
}

#user-info #right-user {
    flex: 1;
    justify-content: right;
    align-self: center;
    display: flex;
    flex-direction: row;
    gap: 10px;
}

.user-icon::before {
    content: " ";
    background: var(--user-deco);
    background-repeat: no-repeat;
    width: 20px;
    height: 20px;
    display: inline-block;
    margin-right: 3px;
}

#timer {
    font-size: 0.8em;
}

/* -------------------------------------------------------- */
/* MAIN CONTENT + NAV */
/* -------------------------------------------------------- */
#bodycontainer nav {
    grid-area: menu;
    font-family: "Comic Relief", system-ui;
    font-style: normal;
    position: sticky;
    top: 10px;
    height: fit-content;
}

/* BUTTON VERSION */
.nav-button {
    font-variant-caps: small-caps;
    font-weight: bold;
    font-size: 1rem;
    cursor: pointer;
    display: block;
    width: 100%;
    background-color: var(--nav-bg);
    color: var(--nav-text);
    text-align: center;
    margin: 5px 0;
    padding: 5px 0;
    border-radius: 5px;
    border: 5px solid var(--nav-outline);
    transition: 0.5s;
    text-shadow:
        -2px -2px 2px var(--nav-text-outline),
        2px -2px 2px var(--nav-text-outline),
        -2px 2px 2px var(--nav-text-outline),
        2px 2px 2px var(--nav-text-outline);
}

.nav-button:hover {
    background-color: var(--nav-bg-hover);
    border: 5px solid var(--nav-outline-hover);
    transform: scale(1.1);
}

/* UL VERSION */
#bodycontainer nav ul {
    width: 100%;
    padding-left: 0;
}

#bodycontainer nav li {
    font-size: 1rem;
    display: block;
    width: 100%;
    background-color: var(--nav-bg);
    color: var(--nav-text);
    text-align: center;
    margin: 5px 0;
    padding: 5px 0;
    border-radius: 5px;
    border: 5px solid var(--nav-outline);
    transition: 0.5s;
}

#bodycontainer nav li:hover {
    background-color: var(--nav-bg-hover);
    border: 5px solid var(--nav-outline-hover);
    transform: scale(1.1);
}

#bodycontainer nav li:first-child {
    margin-top: 0;
}

#bodycontainer nav li:last-child {
    margin-bottom: 0;
}

#bodycontainer nav li a {
    font-variant-caps: small-caps;
    line-height: 0;
    color: var(--nav-text);
    text-shadow:
        -2px -2px 2px var(--nav-text-outline),
        2px -2px 2px var(--nav-text-outline),
        -2px 2px 2px var(--nav-text-outline),
        2px 2px 2px var(--nav-text-outline);
}

/* -------------------------------------------------------- */
/* DECORATIVE */
/* -------------------------------------------------------- */
#news section,
#goats section {
    border: 1px solid var(--main-bg-outline);
    border-radius: 4px;
    padding: var(--padding);
    margin: 10px 0;
}

h2 {
    color: var(--header);
    font-size: 1.4em;
    margin: 10px 0;
}

bold,
b,
strong {
    color: var(--bold);
}

i,
em {
    color: var(--italics);
}

u {
    text-decoration-color: var(--bold);
}

hr {
    border: none;
    border-bottom: 1px solid var(--header-underline);
}

blockquote {
    padding-left: 20px;
}

.user-color {
    color: var(--user-color) !important;
}

abbr,
.tippy {
    text-decoration: underline;
    text-decoration-style: dotted;
    text-decoration-color: var(--bold);
}

/* misc/single-use stuff */
.page-title {
    border-bottom: 1px solid var(--header-underline);
}

#goats section.custom-code {
    border: none;
    margin: 0;
}

#search {
    font-family: arial;
    margin-top: 10px;
    width: 100%;
    background-color: var(--nav-bg);
    color: var(--nav-text);
    text-align: center;
    margin: 5px 0;
    padding: 10px;
    border-radius: 5px;
    border: 5px solid var(--nav-outline);
    transition: 0.5s;
}

#search input,
#search select {
    width: 100%;
    margin-bottom: 5px;
}

.goat-img {
    max-width: 200px;
}

/* helper classes */
.hide-desktop {
    display: none;
}

.flexbox-lazy {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    align-content: center;
    align-items: center;
    padding: 5px;
    gap: 5px;
}

.flexbox-lazy a {
    text-decoration: none;
    line-height: 0;
}

/* center any item */
.center-item {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* align horizontal */
    align-items: center; /* align vertical */
    gap: 2px;
}

/* image floats */
.float-img-right {
    max-width: 100px;
    float: right;
    margin: 5px 0 5px 10px;
}

.pet-image-active {
    position: absolute;
    right: 10px;
    top: 0;
    max-width: 100px;
    pointer-events: none;
}
/* -------------------------------------------------------- */
/* HOME-PAGE SPECIFIC CSS */
/* -------------------------------------------------------- */
.home {
    display: grid;
    grid-template-areas: "intro aside";
    grid-template-columns: auto 150px;
}

#home article {
    grid-area: intro;
    border: 6px solid var(--home-h1-bg);
    padding: 10px;
}

#home aside {
    grid-area: aside;
    text-align: center;
    justify-content: center;
    margin-left: 10px;
}

#home #cool-stuff {
    border: 3px solid var(--home-h2-bg);
    background-color: var(--main-bg);
    margin-top: 10px;
    text-align: left;
}

#home #cool-stuff ul {
    font-size: 0.7rem;
    margin: 10px 0;
    padding-left: 20px;
    padding-right: 5px;
}

#home #cool-stuff li::marker {
    color: var(--bold);
    content: "❤ ";
}

#home .image-border {
    border: 2px solid var(--home-icon-border);
    margin-top: 10px;
}

#home h1 {
    font: 2.5em georgia;
    background: var(--home-h1-bg);
    color: var(--home-h1-text);
    text-align: center;
    border-bottom: 10px solid var(--home-h1-border);
    text-transform: uppercase;
    margin: 0 0 10px 0;
}

#home h2 {
    background: var(--home-h2-bg);
    color: var(--home-h2-text);
    font: 1.1em georgia;
    text-align: center;
    margin: 5px 0;
    font-weight: bold;
    text-transform: uppercase;
    padding: 3px 0;
}

/* -------------------------------------------------------- */
/* NEWS POSTS */
/* -------------------------------------------------------- */
#news .news-header {
    width: 100%;
    height: fit-content;
    display: flex;
    gap: 5px;
    line-height: 1rem;
    margin-bottom: 10px;
}

#news .news-header .icon {
    max-width: 50px;
    max-height: 50px;
}

#news h3 {
    font-size: unset;
    font-weight: bold;
    color: var(--link);
    margin-bottom: -8px;
}

/* -------------------------------------------------------- */
/* PROFILE LAYOUT */
/* -------------------------------------------------------- */
.profile-user {
    display: grid;
    grid-template-areas: "profile-content profile-icon";
    grid-template-columns: 1fr 150px;
    gap: 10px;
}

.profile-user .left-side {
    line-height: 1.3rem;
    grid-area: profile-content;
    display: flex;
    gap: 10px;
}

.profile-user .right-side {
    grid-area: profile-icon;
    align-content: center;
    text-align: center;
}

.profile-user hr {
    border-color: var(--home-icon-border);
    margin: 5px;
}

.goat-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.goat-container > div {
    padding: 10px;
    border-radius: 4px;
    border: 1px solid var(--goat-outline);
    max-width: calc(25% - 10px);
    text-align: center;
}

.goat-container > div img {
    max-width: 160px;
}

.fave-items,
.collection {
    gap: 20px;
    align-items: baseline;
    flex-wrap: wrap;
}

.fave-items > div {
    max-width: calc(20% - 20px);
    min-width: 90px;
    text-align: center;
}

.collection > div {
    max-width: calc(100% / 7 - 20px);
    min-width: 90px;
    text-align: center;
}

/* -------------------------------------------------------- */
/* FOOTER */
/* -------------------------------------------------------- */

footer {
    text-align: center;
    padding: 20px;
    font-size: 0.7em;
}

/* Inline Lists */
footer nav ul {
    font-size: 1.3em;
    padding: 0;
    list-style: none;
    margin-bottom: 10px;
}

footer nav li a {
    font-weight: bold;
}

footer nav li {
    display: inline;
    line-height: 1.2em;
}

footer nav li:after {
    content: " |";
}

footer nav li:first-child {
    padding-left: 0;
}

footer nav li:last-child {
    padding-right: 0;
}

footer nav li:last-child:after {
    content: "";
    margin-left: 0;
}

/* -------------------------------------------------------- */
/* ACCESSIBILITY, DO NOT REMOVE */
/* -------------------------------------------------------- */
#skip a {
    position: absolute;
    display: inline-block;
    left: 0;
    top: -1000px;
    overflow: hidden;
    transition: top 0.5s ease;
    background: var(--content-bg);
    color: var(--link);
    z-index: 1000;
    padding: 10px;
}

#skip a:focus {
    top: 0;
    transition: top 0.5s ease;
}

/* -------------------------------------------------------- */
/* MOBILE RESPONSIVENESS */
/* -------------------------------------------------------- */
@media screen and (max-width: 900px) {
    #contentwrapper {
        width: 95%;
    }

    #bodycontainer {
        display: flex;
        flex-direction: column;
    }

    .home {
        display: block;
    }

    #bodycontainer nav {
        display: flex;
        gap: 10px;
    }

    #bodycontainer nav button,
    #bodycontainer nav li,
    #bodycontainer nav ul {
        margin: 0;
    }

    .hide-mobile {
        display: none;
    }

    #bodycontainer nav {
        position: static;
    }
}
// define your images here
var images = [
    "https://i.ibb.co/5X2QTXRw/6.png",
    "https://i.ibb.co/j9vg3X88/5.png",
    "https://i.ibb.co/pBF36JpF/3.png",
    "https://i.ibb.co/Rk1Z0nxM/1.png",
    "https://i.ibb.co/qFcVFBJB/2.png",
    "https://i.ibb.co/DDfRL1WN/4.png"
];

// this chooses a random number from all available image indices
var randomImage = images[Math.floor(Math.random() * images.length)];
console.log(randomImage);
// make the URL into a proper image tag
var image = "<img src='" + randomImage + "' class='image-border'>";
// append to the div
document.getElementById("ha-shuffle").innerHTML = image;
function openGoatTab(tabName) {
    var i;
    var x = document.getElementsByClassName("tabbed");
    for (i = 0; i < x.length; i++) {
        x[i].style.display = "none";
    }
    document.getElementById(tabName).style.display = "block";
}
let now = new Date();
let currentTime = now.toLocaleTimeString("en-US", {
    hour: "2-digit",
    minute: "2-digit",
    second: "2-digit"
});

document.getElementById("timer").innerHTML = `Current Time: ${currentTime}`;
console.log(`Current Time: ${currentTime}`);
<!doctype html>
<html lang="en">
    <head>
        <!-- Setting character encoding and viewport size. Do not remove. -->
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />

        <!-- Site Title -->
        <title>Goatlings</title>

        <!-- Author -->
        <meta name="author" content="Author" />

        <!-- Site Description -->
        <meta content="A shrine around the pet game Goatlings." name="description" />

        <!-- FavIcon Gif -->
        <link rel="icon" type="image/png" href="img/favicon.png" />

        <!-- CSS: -->
        <link rel="stylesheet" href="css/style.css" />
        <link rel="stylesheet" href="css/normalize.css" />

        <!-- JavaScript: -->
        <!--<script src="js/header.js" defer></script>-->
    </head>
    <body>
        <!-- =============================================== -->
        <!-- Accessibility links. -->
        <!-- =============================================== -->
        <div id="skip"><a href="#content">Skip to content</a></div>

        <!-- =============================================== -->
        <!-- Container. -->
        <!-- =============================================== -->
        <div id="contentwrapper">
            <header></header>

            <!-- =============================================== -->
            <!-- User Info + Currency. -->
            <!-- =============================================== -->
            <div id="user-info" aria-hidden="true">
                <div id="left-user">
                    <p>
                        Welcome <a href="#" class="user-icon user-color">Username</a> - Your active goat is
                        <a href="#">Goat</a><br />
                    </p>
                    <div id="timer"></div>
                </div>
                <div id="right-user">
                    <div>
                        <p><img src="img/mail3.gif" loading="lazy" alt="mail icon" /></p>
                    </div>
                    <div>
                        <p><img src="img/dd_gem.gif" loading="lazy" alt="diamond dust" /> 1</p>
                    </div>
                    <div>
                        <p><img src="img/SS2.gif" loading="lazy" alt="diamond dust" /> 100</p>
                    </div>
                </div>
            </div>

            <!-- =============================================== -->
            <!-- Body Container. -->
            <!-- =============================================== -->
            <div id="bodycontainer">
                <!-- =============================================== -->
                <!-- Tab Links. -->
                <!-- =============================================== -->
                <nav>
                    <div class="center-item hide-mobile">
                        <img src="img/blank.png" alt="" loading="lazy" aria-hidden="true" />
                    </div>
                    <button class="nav-button" onclick="openGoatTab('home')">Home</button>
                    <button class="nav-button" onclick="openGoatTab('news')">News</button>
                    <button class="nav-button" onclick="openGoatTab('goats')">Profile</button>
                    <button class="nav-button" onclick="openGoatTab('gallery')">Collection</button>
                    <button class="nav-button" onclick="openGoatTab('credits')">Credits</button>
                    <ul>
                        <li><a href="/index.html">Back to Site</a></li>
                    </ul>

                    <!-- =============================================== -->
                    <!-- Fake Search. -->
                    <!-- =============================================== -->
                    <div id="search" class="hide-mobile" aria-hidden="true">
                        <p>Search Keyword</p>
                        <input tabindex="-1" />
                        <p>Specifics</p>
                        <select name="Specifics" id="specifics" tabindex="-1">
                            <option value="0">-Containing-</option>
                            <option value="1">-Identical-</option>
                        </select>
                        <p>Category</p>
                        <select name="Category" id="category" tabindex="-1">
                            <option value="0">-Item Name-</option>
                            <option value="1">-Member-</option>
                            <option value="2">-Pets-</option>
                        </select>
                        <button tabindex="-1">Search</button>
                    </div>
                </nav>

                <!-- =============================================== -->
                <!-- Main Content. -->
                <!-- =============================================== -->
                <main id="content">
                    <!-- =============================================== -->
                    <!-- Home Tab. -->
                    <!-- =============================================== -->
                    <div id="home" class="tabbed">
                        <div class="home">
                            <!-- =============================================== -->
                            <!-- Home Intro. -->
                            <!-- =============================================== -->
                            <article>
                                <section>
                                    <h1>Welcome</h1>
                                </section>
                                <img
                                    src="img/goat_cake.png"
                                    alt=""
                                    aria-hidden="true"
                                    style="float: left; margin-right: 10px" />
                                <p><b>Come one, come all! Welcome to the Kingdom of Goatlings!</b></p>
                                <p>
                                    This is a simple (well, simple to me, I do think the code is more towards
                                    intermediate) one-page shrine I made in memorial to Goatlings shutting down, and in
                                    the process of making it, I thought I'd make it a template as well for others to
                                    use; many people have been wanting to save their goats and all their collections in
                                    some form or another, so hopefully this helps people who are a little more
                                    savvy/want to learn HTML and CSS in the process.
                                </p>
                                <p>
                                    I will say, this template <b>does not</b> take into account custom goat profiles and
                                    treasures, it is more catered to showing your goats off in a list, and your gallery
                                    collections.
                                </p>
                                <p>
                                    Those who are brave can try their hand at making profiles, but this template is
                                    currently not catered towards that. Those interested may want to check out
                                    <a href="https://werewolf-girlfriend.itch.io/website-gallery-template"
                                        >werewolf-girlfriend's gallery</a
                                    >
                                    template and how image popups work, or perhaps try their hand at making a tab
                                    <u>just</u> for goat profiles, and have a little dropdown to swap which goat is
                                    showing. If I end up doing that at any point for my own, I will return to update
                                    this code <u>OR</u> offer an alternative that has it as it will be more complicated.
                                </p>
                                <p>For what features this template has, check out the <i>news</i> tab above.</p>
                                <div class="flexbox-lazy">
                                    <img src="img/home3.gif" alt="welcome to goatlings. register now" loading="lazy" />
                                    <img
                                        src="img/home2.gif"
                                        alt="use appearance dolls to change your pet!"
                                        loading="lazy" />
                                    <img
                                        src="img/home5.gif"
                                        alt="best viewed with firefox. not 100% compatible on mobile."
                                        loading="lazy" />
                                </div>
                                <section>
                                    <h2>my beloved goat</h2>
                                    <div class="flexbox-lazy" style="align-items: baseline">
                                        <img src="img/party_pooper.png" alt="" loading="lazy" />
                                        <img src="img/gray.gif" class="goat-img" alt="Gray Goat" loading="lazy" />
                                        <img src="img/party_pooper_flip.png" alt="" loading="lazy" />
                                    </div>
                                </section>
                                <section>
                                    <h2>favourite items</h2>
                                    <div class="flexbox-lazy fave-items">
                                        <div>
                                            <img src="img/gray_ad.gif" /><br />
                                            <p>Basic Gray AD</p>
                                        </div>
                                        <div>
                                            <img src="img/gray_ad.gif" /><br />
                                            <p>Basic Gray AD</p>
                                        </div>
                                        <div>
                                            <img src="img/gray_ad.gif" /><br />
                                            <p>Basic Gray AD</p>
                                        </div>
                                        <div>
                                            <img src="img/gray_ad.gif" /><br />
                                            <p>Basic Gray AD</p>
                                        </div>
                                        <div>
                                            <img src="img/gray_ad.gif" /><br />
                                            <p>Basic Gray AD</p>
                                        </div>
                                    </div>
                                </section>
                            </article>
                            <!-- =============================================== -->
                            <!-- HA Buddy Aside. -->
                            <!-- =============================================== -->
                            <aside class="hide-mobile" aria-hidden="true">
                                <div id="ha-shuffle"></div>
                                <p><b>Featured HA Buddy </b><br />You</p>
                                <div id="cool-stuff">
                                    <h2 style="margin: 0">Fun Features!</h2>
                                    <ul>
                                        <li>Free To Play</li>
                                        <li>Adopt Goatlings</li>
                                        <li>Change Their Look</li>
                                        <li>Battle Center</li>
                                        <li>Training Center</li>
                                        <li>Explore Area</li>
                                        <li>Dress Up Avatar</li>
                                        <li>User Shops</li>
                                        <li>User Galleries</li>
                                        <li>Club Houses</li>
                                        <li>Bank With Interest</li>
                                        <li>Restocking</li>
                                        <li>Trades</li>
                                        <li>Auctions</li>
                                        <li>Quests</li>
                                        <li>Forums</li>
                                        <li>Live Chat</li>
                                        <li>Display Name Icons</li>
                                        <li>Crafting</li>
                                        <li>Events</li>
                                        <li>Wishing Well</li>
                                        <li>Contests</li>
                                        <li>Limited Editions</li>
                                        <li>Lucky Boxes</li>
                                        <li>Arcade</li>
                                        <li>Shopping District</li>
                                        <li>VIP Shop</li>
                                        <li>Cash Shop</li>
                                        <li>Gift Shop</li>
                                        <li>Creative Park</li>
                                        <li>Contribute Designs</li>
                                        <li>Friendly Community</li>
                                        <li>Super Cute</li>
                                        <li>Ad Free</li>
                                    </ul>
                                </div>
                            </aside>
                        </div>
                    </div>

                    <!-- =============================================== -->
                    <!-- History Tab. -->
                    <!-- =============================================== -->
                    <div id="news" class="tabbed" style="display: none">
                        <article>
                            <h2 class="page-title">Information About the Template</h2>
                            <section>
                                <div class="news-header">
                                    <img src="img/blank.png" class="icon" loading="lazy" alt="" aria-hidden="true" />
                                    <div>
                                        <h3>Template Features</h3>
                                        <p>
                                            Posted by <a href="#" class="user-icon user-color">Username</a><br />on
                                            <time>2025-12-24 12:00:00</time>
                                        </p>
                                    </div>
                                </div>
                                <p>Some of the features of this template include:</p>
                                <ul>
                                    <li>Outgoing links having an arrow attached to them</li>
                                    <li>
                                        Colour variables + system-respecting dark mode colours, plus variables to easily
                                        change your user icon, user colour, site background, active goat, and even the
                                        site header
                                    </li>
                                    <li>Focus elements + skip to content</li>
                                    <li>A mobile friendly layout</li>
                                    <li>
                                        Helper classes like <code>.hide-mobile</code> and <code>.hide-desktop</code> to
                                        easily enable/disable mobile-specific and desktop-only things
                                    </li>
                                    <li>
                                        Random HA buddies on the home page which change on refresh, you can add your own
                                        HA buddy outfits to swap around (the current ones are the ones I used for an MM
                                        submission), you can find them in <b>ha-image-swap.js</b>
                                    </li>
                                </ul>
                            </section>
                            <section>
                                <div class="news-header">
                                    <img src="img/blank.png" class="icon" loading="lazy" alt="" aria-hidden="true" />
                                    <div>
                                        <h3 id="whatilike">Tag and HTML Showcase</h3>
                                        <p>
                                            Posted by <a href="#" class="user-icon user-color">Username</a><br />on
                                            <time>2025-12-24 12:00:00</time>
                                        </p>
                                    </div>
                                </div>
                                <p>
                                    I will now show you how to use the most common HTML text elements:
                                    <b>This is bold text.</b>
                                    <strong>This is also bold text.</strong>
                                    <i>This is italic text.</i>
                                    <em>This is also italic text.</em>
                                    <s>This is strikethrough text.</s>
                                    <u>This is underlined text.</u>
                                    <a href="../index.html">This is an internal link.</a>
                                    <a href="https://petrapixel.neocities.org/" target="_blank"
                                        >This is a link that will open in a new tab.</a
                                    >
                                    <code>This is code (displayed in a monospace font).</code>
                                    <abbr title="Example.">This is an abbreviation (Try hovering over it).</abbr>
                                    <mark>This is highlighted text.</mark>
                                    This is a line break (The br stands for break.): <br />It's different from a
                                    paragraph because it does not add space inbetween the lines of text.
                                </p>
                                <p>
                                    This is a paragraph. As you can see, there's a bit of space between it and the
                                    previous paragraph.
                                </p>
                                <hr />
                                <p>And this is a divider!</p>

                                <blockquote>
                                    This is a blockquote. Blockquotes are indented text that usually quotes something,
                                    or someone.
                                </blockquote>
                            </section>
                        </article>
                    </div>

                    <!-- =============================================== -->
                    <!-- Goat Tabs. -->
                    <!-- =============================================== -->
                    <div id="goats" class="tabbed" style="display: none">
                        <article>
                            <img src="img/OrangeTree.gif" class="pet-image-active" alt="" />
                            <h2 class="page-title">Profile Your Name</h2>
                            <section class="custom-code">
                                <p>
                                    You could put in custom code here, or remove. This layout isn't catered to have
                                    custom goat profiles, or tabs, sorry. If you're curious in making tabs for your
                                    goats, you could do what I did for the tabs here (I used
                                    <a href="https://www.w3schools.com/w3css/w3css_tabulators.asp"
                                        >W3 School's CSS tab guide</a
                                    >).
                                </p>
                            </section>
                            <section>
                                <!-- =============================================== -->
                                <!-- Custom Code. -->
                                <!-- =============================================== -->

                                <!-- ========e">
                                <p>
                                    You could put in custom code here, or remove. This layout isn't catered to have
                                    custom goat profiles, or tabs, sorry. If you're curious in making tabs for your
                                    goats, you could do what I did for the tabs here (I used
                                    <a href="https://www.w3schools.com/w3css/w3css_tabulators.asp"
                                        >W3 School's CSS tab guide</a
                                    >).
                                </p>
                            </section>
                            <section>
                                <!-- =============================================== -->
                                <!-- Custom Code. -->
                                <!-- =============================================== -->

                                <!-- ========