/* --------------------------------------------------
   Base
-------------------------------------------------- */

body {
    margin: 0;
    padding: 20px;
    font-family: Georgia, "Times New Roman", serif;
    text-align: center;
    color: white;

    background-image: url("https://theutilityroom.neocities.org/images/pegboard3.jpg");
    background-repeat: repeat;
    background-position: top left;
}


/* --------------------------------------------------
   Page layout
-------------------------------------------------- */

.page {
    min-height: 100vh;
    max-width: 900px;
    margin: 40px auto;
    padding: 30px;

    background: transparent;
    border: none;
    box-shadow: none;
}


/* --------------------------------------------------
   Header sign
-------------------------------------------------- */

.header {
    text-align: center;
    margin-bottom: 50px;
}

.header h1 {
    display: inline-block;

    margin: 0;
    padding: 18px 45px;

    background: #f6e7a8;
    border: 2px solid #b9a66b;
    border-radius: 4px;

    box-shadow: 5px 7px 14px rgba(0,0,0,.35);

    font-family: "Pixelify Sans", monospace;
    font-size: 76px;
    font-weight: 700;
    letter-spacing: 1px;

    color: #173A36;

    transform: rotate(-2deg);
}
.tagline {
    margin: 18px auto 0;

    font-family: "Courier New", monospace;
    font-size: 16px;
    letter-spacing: 1px;

    color: #173A36;

    background: #efe4c8;
    border: 1px solid #d1c19c;

    display: inline-block;
    padding: 5px 18px;

    box-shadow: 2px 3px 6px rgba(0,0,0,.2);

    transform: rotate(1deg);
}

/* --------------------------------------------------
   Card grid
-------------------------------------------------- */

.grid {
    display: grid;
    grid-template-columns: repeat(3, 140px);
    justify-content: center;

    gap: 35px;

    margin: 40px auto;
    padding: 0;
}


/* --------------------------------------------------
   Cards
-------------------------------------------------- */

.card {
    width: 140px;
    height: 140px;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    background: #173A36;

    border: 1px solid #102825;
    border-radius: 4px;

    text-decoration: none;
    color: white;

    box-shadow: 4px 5px 10px rgba(0,0,0,.35);

    overflow: hidden;

    transition: transform .2s ease, box-shadow .2s ease;
}


/* handmade wonky placement */

.card:nth-child(1) {
    transform: rotate(-2deg);
}

.card:nth-child(2) {
    transform: rotate(2deg) translateY(8px);
}

.card:nth-child(3) {
    transform: rotate(-1deg) translateY(-5px);
}

.card:nth-child(4) {
    transform: rotate(3deg) translateY(5px);
}

.card:nth-child(5) {
    transform: rotate(-2deg) translateY(10px);
}

.card:nth-child(6) {
    transform: rotate(1deg) translateY(-4px);
}


.card:hover {
    box-shadow: 5px 7px 12px rgba(0,0,0,.4);
}


/* --------------------------------------------------
   Card images
-------------------------------------------------- */

.card img {
    width: 65px;
    height: 65px;

    object-fit: contain;

    margin: 5px auto 10px;
}


/* --------------------------------------------------
   Card labels
-------------------------------------------------- */
.card p {
    width: auto;

    padding: 8px 0 0;
    margin: 0;

    background: transparent;
    border: none;

    font-family: "Courier New", monospace;
    font-size: 16px;
    font-weight: bold;
    line-height: 1.2;

    text-align: center;

    color: #f6e7a8;
}


/* --------------------------------------------------
   Footer
-------------------------------------------------- */

.footer {
    margin-top: 60px;

    font-family: "Courier New", monospace;
    font-size: .75em;
    font-style: italic;

    color: #173A36;
}


/* --------------------------------------------------
   Other site pages
-------------------------------------------------- */

.refreshments-box,
.home-box {
    max-width: 650px;
    margin: 60px auto;
    padding: 40px;

    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,.3);
}


a {
    color: #b7d8ff;
    text-decoration: none;
}


a:hover {
    text-decoration: underline;
}


.cat-pics {
    text-align: center;
    margin: 25px 0;
}


.cat-pics img {
    display: inline-block;
    width: 220px;
    margin: 0 6px;
    vertical-align: middle;
}


.mirror {
    transform: scaleX(-1);
}


.banner {
    width: 400px;
    margin: 0 auto;
}


/* --------------------------------------------------
   Mobile
-------------------------------------------------- */

@media (max-width: 700px) {

    .grid {
        grid-template-columns: repeat(2, 140px);
        gap: 25px;
    }


    .header h1 {
        font-size: 48px;
        padding: 14px 25px;
    }

}
.card:nth-child(1):hover {
    transform: rotate(-2deg) translateY(-2px);
}

.card:nth-child(2):hover {
    transform: rotate(2deg) translateY(6px);
}

.card:nth-child(3):hover {
    transform: rotate(-1deg) translateY(-7px);
}

.card:nth-child(4):hover {
    transform: rotate(3deg) translateY(3px);
}

.card:nth-child(5):hover {
    transform: rotate(-2deg) translateY(8px);
}

.card:nth-child(6):hover {
    transform: rotate(1deg) translateY(-6px);
}
.visitor-box {
    display: inline-block;

    margin-top: 35px;
    padding: 10px 20px;

    background: #173A36;
    border: 1px solid #102825;

    color: #f6e7a8;

    font-family: "Pixelify Sans", monospace;
    font-size: 18px;
    letter-spacing: 1px;

    box-shadow: 3px 4px 8px rgba(0,0,0,.3);

    transform: rotate(1deg);
}