@font-face {
    font-family: "Kingthings Extortion";
    src: url("fonts/Kingthings Extortion.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}

body {
    min-height:100vh;
    margin:0;
    position: relative;
}
    /*Animated, color-shifted image*/
    body::before {
        content:"";
        position:fixed;
        inset:0;
        z-index:-2;
        pointer-events:none;

        --background-width: 100vw;
        --background-height:49.98vw;
        background-image:url("images/website_back.png");
        background-size:
            var(--background-width) 
            var(--background-height);
        background-repeat:repeat;

        animation: 
            shift-colors 8s linear infinite alternate,
            slide-background 90s linear infinite;
    }
    /*Stationary gradient*/
    body::after {
        content:"";
        position:fixed;
        inset:0;
        z-index:-1;
        pointer-events:none;

        background:linear-gradient(
            to bottom,
            rgba(40, 40, 40, 0.85),
            rgba(40, 40, 40, .15)
        );
    }
@keyframes shift-colors{
    from {
        filter: hue-rotate(150deg);
    }
    to {
        filter: hue-rotate(190deg);
    }
}
@keyframes slide-background {
    from {
        background-position:0 0;
    }
    to {
        background-position:
            calc(-1 * var(--background-width))
            calc(-1 * var(--background-height));
    }
}
#main-menu {
    padding:150px;
}

.wiggle-button {
    transform-origin: left center;
    transform:scale(1) rotate(-5deg);
    background:transparent;
    border:none;
    padding:0;
    color:beige;
}

.wiggle-button span {
    font-family:"Kingthings Extortion", fantasy;
    font-size:40px;
    display:inline-block;
    margin-inline: 2px;
    will-change: transform;
}

.wiggle-button:hover {
    transform: scale(1.15) rotate(-5deg) translateY(4px);
}

.about-gif {
    width:40px;
    height:auto;
    transform:translateY(25px) translateX(-2px) scale(1.8);
    transition: transform 0.1s ease-out;
}

#about:has(.wiggle-button:hover) .about-gif {
    transform:translateY(18px) translateX(-5px) scale(1.25) rotate(-3deg);
}

.gallery-gif {
    width:40px;
    height:auto;
    transform:translateY(18px);
    transition: transform 0.1s ease-out;
}

#gallery:has(.wiggle-button:hover) .gallery-gif {
    transform:translateY(18px) translateX(-5px) scale(1.25) rotate(-3deg);
}

.contact-gif{
    width:48px;
    height:auto;
    transform:translateY(18px);
    transition: transform 0.1s ease-out;
}

#contact:has(.wiggle-button:hover) .contact-gif{
    transform:translateY(18px) translateX(-5px) scale(1.25) rotate(-3deg);
}

#main {
background-color:whitesmoke;
border: 1px solid;
border-color:darkgrey;
color:#A23AF3;
padding: 0px 20px 20px 20px;
width: 60%;
height:auto;
margin-left: 20%;
margin-right: 20%;

}

body,
button,
a {
    cursor: none;
}

#custom-cursor {
    position: fixed;
    top: 0;
    left: 0;

    width: 48px;
    height: 48px;

    pointer-events: none;
    z-index: 9999;
    filter: brightness(0) invert(1);
    mix-blend-mode: difference;

    transform: translate(-50%, -50%);
}

#page-transition {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;

    pointer-events: none;
    z-index: 100000;

    image-rendering: pixelated;
    visibility: hidden;
}