:root {
    --blue-0: #c2e2ff;
    --blue-1: #6fbaff;
    --blue-2: #3588d3;
    --blue-3: #003464;
    --green: #76d695;
    --beige: #f9f3e8;
    --yellow: #ffe7b0;
    --orange-0: #ffa046;
    --orange-1: #ff835e;
    --maroon: #671700;
    --brown-0: #aa8a81;
    --brown-1: #614f4a;
    --brown-2: #2c211e;
    --dark: var(--brown-2);
    --bg-color: var(--beige);
}

global-header {
    position: relative;
    width: 100%;
    display: block;
}
global-header #logo {
    position: relative;
    left: calc(50vw - 20vmin);
    width: 40vmin;
    height: 20vmin;
    object-fit: contain;
    margin-top: 0.5em;
    display: none;
}
global-header #banner {
    position: relative;
    display: flex;
    width: 100%;
    align-items: flex-start;
    justify-content: center;
    background-image: url(/image-resize/1024/pattern2.png);
    background-size: max(50vmin, 500px);
}
global-header #banner img {
    position: relative;
    object-fit: contain;
    object-position: 50% 25%;
    max-width: 1600px;
    width: 100%;
    height: 100%;
    aspect-ratio: 5 / 2;
}
global-header #logo:hover {
    animation: wiggle;
    animation-duration: 1s;
    animation-timing-function: ease;
    animation-iteration-count: 1;
}
global-header nav {
    width: 55%;
    box-sizing: border-box;
    padding: 0.25em 1.5em;
    margin: auto;
    border-radius: 2.5em;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    /* width: 100%; */
    left: 22.5%;
    bottom: 1em;
    filter: drop-shadow(2px 4px 6px black);
}

global-header nav .nav-inner {
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5em;
}

global-header nav a {
    text-transform: uppercase;
    color: black;
    height: 5vmin;
}
global-header nav a img {
    position: relative;
    height: 100%;
    transition: 0.25s transform ease;
}
global-header nav a:hover img {
    transform: translateY(-10%) ;
}

global-header h1 {
    text-align: center;
    padding: 1vmin;
    background-color: white;

    font-size: 3vmin;
    margin: 3vmin 0;
    margin-top: 1vmin;

    text-transform: uppercase;
    text-justify: distribute;
}

html {
    overflow-x: hidden;
    overflow-y: auto;
    font-size: max(2vmin, 1.2em);

    scrollbar-color: var(--dark) transparent;
}

body {
    position: relative;
    margin: 0;

    background-color: var(--bg-color);
    background-image: url(/image-resize/1024/pattern2.png);
    background-repeat: repeat;
    background-size: max(50vmin, 500px);

    font-family: "Quicksand", sans-serif;
    font-optical-sizing: auto;
	font-weight: normal;
    font-style: normal;
}

body {

}

h1, h2 {
	margin: 0.5em 1em;
    text-align: center;
}
h1, h2, h3, h4, h5, h6 {
    font-family: "Sour Gummy", sans-serif;
    font-optical-sizing: auto;
    font-weight: bold;
    font-style: normal;
    font-variation-settings:"wdth" 100;
}

a { color: var(--blue-2); }
a:visited { color: var(--blue-3); }

#hamburger-button {
    position: fixed;
    width: 8vmin;
    height: 8vmin;
    top: 1vmin;
    left: 1vmin;
    z-index: 999;

    appearance: none;
    border: 0;
    padding: 0;
    background: transparent;
    cursor: pointer;
    filter: drop-shadow(1px 1px 1px #000000aa);
}

#hamburger-button img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#hamburger-menu {
    position: fixed;
    top: 0;
    left: 0;

    width: 40vmin;
    height: 100vh;
    height: 100dvh;
    
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;

    transition: 0.5s transform ease;
    transform: translateX(-100%);


    background-color: white;

    padding: 1em;

    z-index: 1000;

    gap: 0.5em;
}

#hamburger-menu.open {
    transform: none;
}

#hamburger-menu button.close {
    position: relative;
    width: 5vmin;
    height: 5vmin;

    appearance: none;
    border: 0;
    padding: 0;
    background: transparent;
    cursor: pointer;
    filter: drop-shadow(1px 1px 1px #000000aa);
}

#hamburger-menu button.close img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

#hamburger-menu a {
    display: flex;
    flex-shrink: 0;
    width: 100%;
    height: 2.5em;
}
#hamburger-menu a img {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: 0.25s transform ease;
}
#hamburger-menu a:hover img {
    transform: translateY(-10%) ;
}

global-footer {
    width: 100%;
    text-align: center;
    display: block;
    margin: 1em 0;
}

global-footer img { 
    width: 150px;
    height: 120px;
}
global-footer a { font-size: 16px; text-decoration: none; }
global-footer a::before { content: "⚡"; margin-right: 0.5em; }
global-footer a::after { content: "💌"; margin-left: 0.5em; }

global-footer footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}


.scroll-vis > * {
    transition: 0.75s opacity ease-out, 0.75s transform ease-out;
    transform: translateY(-25%);
    opacity: 0;
}

.scroll-vis.visible > *,
.scroll-vis .visible {
    transform: none;
    opacity: 1;
}

.petzone { cursor: grab; }
.petzone:active { cursor: grabbing; }

@keyframes wiggle {
    0% { transform: rotate(0deg); }
    25% { transform: rotate(-5deg); }
    50% { transform: rotate(0deg); }
    75% { transform: rotate(5deg); }
    100% { transform: rotate(0deg); }
}

@media only screen and (max-width: 800px) {
    global-header nav { display: none !important; }
    #hamburger-menu {
        width: 80vmin;
    }
    #hamburger-menu a {
        height: 3.5em;
    }
    #hamburger-button,
    #hamburger-menu button.close {
        width: 5em;
        height: 5em;
    }
}

/* SPINNER ANIM */
.lds-dual-ring {
    color: var(--beige);
}
.lds-dual-ring,
.lds-dual-ring:after {
    box-sizing: border-box;
}
.lds-dual-ring {
    display: inline-block;
    width: 80px;
    height: 80px;
}
.lds-dual-ring:after {
    content: " ";
    display: block;
    width: 64px;
    height: 64px;
    margin: 8px;
    border-radius: 50%;
    border: 6.4px solid currentColor;
    border-color: currentColor transparent currentColor transparent;
    animation: lds-dual-ring 1.2s linear infinite;
}
@keyframes lds-dual-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}