:root {
    --main: #3c3c3c;
    --secondary: #808080;
    --background: #b2b2b2;
    --transparent: #80808080;
    --dark: #000;
    --text: #fff;
}

* {
    font-family: sans-serif;
}

body {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background: var(--background);
}

@keyframes autoscroll {
    0% {
        background-position: 0 0;
    }

    69.1% {
        background-position: 69.072% 0;
    }

    70.1% {
        background-position: 69.072% 0;
    }

    95% {
        background-position: 100% 0;
    }

    100% {
        background-position: 100% 0;
    }
}

img {
    user-select: none;
    -webkit-user-drag: none;
}

.main-game-contents {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.main-game-contents>div {
    display: flex;
    align-items: center;
    justify-content: center;
}

.main-game-contents>div>button {
    margin: 5px;
}

.main-game-contents>div>button {
    width: 0;
    overflow: hidden;
    transition: all 0.2s ease, opacity 1s ease, width 1s ease, margin 1s ease, padding 1s ease, transform 0.2s ease;
    padding: 0;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}

.main-game-contents>div>button.show {
    width: fit-content;
    padding: 4px 6px;
    margin: 5px;
    opacity: 1;
    pointer-events: all;
}

#osag {
    transition: transform 0.2s ease, filter 0.6s ease;
    width: 20vw;
    min-width: 150px;
}

#osag:hover {
    cursor: pointer;
    transform: scale(1.05);
}

#osag:active {
    transform: scaleX(1.1) scaleY(0.9);
}

.score-display {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 2rem;
}

#smol {
    width: 50px;
    height: 50px;
}

nav {
    width: 100%;
    height: fit-content;
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
}

nav .nav-buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

button {
    font-size: 1.5rem;
    padding: 4px 7px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal .content {
    max-width: 35%;
    min-width: 300px;
}

.settings.modal .content {
    gap: 5px;
}

.alert-modal .content {
    max-width: 230px;
}

.shop-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 20px;
    margin: 5px;
    padding: 3px;
    background: var(--transparent);
    border-radius: 5px;
}

.shop-item>div {
    text-align: left;
    height: 100%;
}

.shop-item>img {
    width: 100px;
}

div.smol,
i.smol {
    width: 1.5rem;
    height: 1.5rem;
    background-image: url('../osagery/smol.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    text-shadow: none;
}

i.smol {
    color: #00000000;
}

button:hover i.smol {
    color: #00000000;
}

*[data-shows-at] {
    opacity: 0;
    pointer-events: none;
    transition: opacity 1s ease;
}

*[data-shows-at].show {
    opacity: 1;
    pointer-events: all;
}

.widget {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    pointer-events: none;
}

.widget.active {
    opacity: 1;
}

.widget.active * {
    pointer-events: all;
}

.incremental-display.widget b {
    position: absolute;
    top: 50%;
    left: 50%;
    pointer-events: none;
    transform: translateY(-200%);
    animation: float 1s ease-out 1;
    transition: opacity 0.5s ease;
    font-size: 1.5rem;
    color: var(--text);
    text-shadow: -3px 0 black, 0 3px black, 3px 0 black, 0 -3px black;
    z-index: 2;
}

.incremental-display.widget b i.smol {
    pointer-events: none;
}

@keyframes float {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(-200%);
    }
}

.shovel.widget>img {
    position: absolute;
    bottom: 0;
    left: 0;
}

.shovel.widget>img#shovel {
    animation: dig 2s ease infinite;
}

.shovel.widget>img#snow {
    left: 100px;
    opacity: 0;
    pointer-events: none;
}


@keyframes dig {
    0% {
        transform: translate(0, -10%);
    }

    30% {
        transform: translate(0, 10%);
    }

    70% {
        transform: translate(5%, 10%) rotate(10deg);
    }

    90% {
        transform: translate(5%, -10%) rotate(100deg);
    }

    100% {
        transform: translate(0, -10%);
    }
}

.silly-thing-that-walks-around.widget img {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 120px;
    animation: walk 10s linear infinite;
    pointer-events: none;
}

@keyframes walk {
    0% {
        bottom: 0;
        right: 0;
        transform: translate(0, 0) rotate(0deg);
    }

    25% {
        bottom: 0;
        right: 100%;
        transform: translate(100%, 0) rotate(0deg);
    }

    26% {
        bottom: 0;
        right: 100%;
        transform: translate(100%, 0) rotate(90deg);
    }

    50% {
        bottom: 100%;
        right: 100%;
        transform: translate(100%, 100%) rotate(90deg);
    }

    51% {
        bottom: 100%;
        right: 100%;
        transform: translate(100%, 100%) rotate(180deg);
    }

    75% {
        bottom: 100%;
        right: 0;
        transform: translate(0, 100%) rotate(180deg);
    }

    76% {
        bottom: 100%;
        right: 0;
        transform: translate(0, 100%) rotate(270deg);
    }

    99% {
        bottom: 0;
        right: 0;
        transform: translate(0, 0) rotate(270deg);
    }

    100% {
        bottom: 0;
        right: 0;
        transform: translate(0, 0) rotate(360deg);
    }
}

@keyframes item {
    0% {
        bottom: 0;
        right: 0;
        transform: translate(0, 0) rotate(0deg) scale(0.4);
    }

    25% {
        bottom: 0;
        right: 100%;
        transform: translate(100%, 0) rotate(0deg) scale(0.4);
    }

    26% {
        bottom: 0;
        right: 100%;
        transform: translate(100%, 0) rotate(90deg) scale(0.4);
    }

    50% {
        bottom: 100%;
        right: 100%;
        transform: translate(100%, 80%) rotate(90deg) scale(0.4);
    }

    51% {
        bottom: 100%;
        right: 100%;
        transform: translate(100%, 80%) rotate(180deg) scale(0.4);
    }

    75% {
        bottom: 100%;
        right: 0;
        transform: translate(0, 80%) rotate(180deg) scale(0.4);
    }

    76% {
        bottom: 100%;
        right: 0;
        transform: translate(0, 80%) rotate(270deg) scale(0.4);
    }

    99% {
        bottom: 0;
        right: 0;
        transform: translate(0, 0) rotate(270deg) scale(0.4);
    }

    100% {
        bottom: 0;
        right: 0;
        transform: translate(0, 0) rotate(360deg) scale(0.4);
    }
}

.silly-thing-that-walks-around img.item {
    height: 100px;
    animation: item 10s linear infinite;
}

.scary-ahh-jumpscare.widget img {
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.fan.widget img {
    position: absolute;
    bottom: 10px;
    left: 0;
    pointer-events: none;
    height: calc(100% - 20px);
    width: 20%;
}

.hat {
    position: relative;
    pointer-events: none;
}

.hat img {
    position: absolute;
    /* i dont know why these two are required to center the image */
    top: 0;
    left: 0;
    width: 22vw;
    min-width: 150px;
    transform: translate(-50%, -60%);
    z-index: 1;
    pointer-events: none;
}

.cosmetic-selection {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: space-evenly;
    width: 100%;
}

.umbrella.widget img,
.panties.widget img,
.flying-objects img {
    position: absolute;
    right: 0;
    transform: translate(100%);
    pointer-events: all;
    cursor: pointer;
    animation: fly 10s linear;
    z-index: 2;
}

@keyframes fly {
    from {
        right: 0;
        transform: translate(100%);
    }

    to {
        right: 100%;
        transform: translate(0);
    }
}

@keyframes flySpin {
    from {
        right: 0;
        transform: translate(100%) rotate(0deg);
    }

    to {
        right: 100%;
        transform: translate(0) rotate(3600deg);
    }
}

@keyframes floatUp {

    0%,
    100% {
        opacity: 0;
        scale: 0.1;
        transform: translate(0);
    }

    20%,
    80% {
        opacity: 1;
        scale: 1;
        transform: translate(0);
    }

    30%,
    50%,
    70% {
        transform: translate(0, -10px);
    }

    40%,
    60% {
        transform: translate(0, 10px);
    }
}

.timer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    pointer-events: none;
}

.timer>div {
    background: var(--main);
    color: var(--text);
    margin: 5px;
    padding: 5px 10px;
    border-radius: 4px;
}

.music-road.widget .progress-container {
    max-width: 450px;
    width: calc(100% - 60px);
    height: 150px;
    padding: 20px;
    position: absolute;
    bottom: 30px;
    right: 30px;
    background: var(--main);
    color: var(--text);
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    pointer-events: all;
}

.progress-container img {
    height: 100px;
}

.progress-container>div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
}

.progress-container audio {
    width: 100%;
}

@media screen and (max-width: 430px) {
    .progress-container img {
        display: none;
    }
}

.music-road-unlocks .content {
    min-width: 450px;
}

.music-road-unlocks .content p {
    text-align: left;
}

.term-explain {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin: 5px;
}

.music-select {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--text);
    padding: 10px;
    border-radius: 10px;
}

.music-select img {
    height: 100px;
}

.music-select>div>button {
    width: 100%;
}

.music-select>div>div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
}

.music-select>div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: var(--transparent);
    padding: 10px;
    border-radius: 10px;
}

.music-select>div>div:nth-child(1) {
    width: 100%;
}

.rainy-boots {
    position: relative;
    pointer-events: none;
}

.rainy-boots img {
    position: absolute;
    top: 0;
    left: 0;
    width: 22vw;
    transform: translate(-50%, -90%);
    z-index: 1;
    pointer-events: none;
    opacity: 0;
}

@keyframes shake {
    0% {
        transform: translate(-50%, -90%);
    }

    33% {
        transform: translate(-40%, -90%);
    }

    66% {
        transform: translate(-60%, -90%);
    }

    100% {
        transform: translate(-50%, -90%);
    }
}

.tank.widget img {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 200px;
}

.trail-effect {
    position: absolute;
}

.trail-effect img {
    position: absolute;
    top: 0;
    left: 0;
    width: 20vw;
    min-width: 150px;
    transform: translate(-50%, calc(-50% - 21px));
    z-index: -1;
    pointer-events: none;
    filter: brightness(100000);
    opacity: 0;
}

#evil {
    position: absolute;
    top: 0;
    left: 0;
}

#evil:hover {
    cursor: pointer;
    animation: antiEvil 0.1s ease-in-out infinite alternate;
}

#evil:active {
    transition: transform 0.2s ease;
    animation: antiEvil 0.1s ease-in-out infinite alternate, antiEvilClick 0.1s ease-in-out infinite alternate;
}

@keyframes antiEvil {
    from {
        transform: translate(3px);
    }

    to {
        transform: translate(-3px);
    }
}

@keyframes antiEvilClick {
    from {
        transform: translate(3px) scaleX(1.1) scaleY(0.9) rotate(-5deg);
    }
    to {
        transform: translate(-3px) scaleX(1.1) scaleY(0.9) rotate(5deg);
    }
}