/* Color Variables */
:root {
    color-scheme: light dark;

    --lightMode-Text: black;
    --lightMode-BackgroundColor: white;
    --lightMode-PanelBackgroundColor: beige;
    --lightMode-Outline: black;

    --darkMode-Text: white;
    --darkMode-BackgroundColor: #2f2f2f;
    --darkMode-PanelBackgroundColor: #4b4b4b;
    --darkMode-Outline: white;
}

/*noinspection CssInvalidFunction*/
html{
    overflow: hidden;
    
    width: 100%;
    height: 100%;

    color: light-dark(var(--lightMode-Text), var(--darkMode-Text));
    background-color: light-dark(var(--lightMode-BackgroundColor), var(--darkMode-BackgroundColor));
}


body{
    height: inherit;
    width: inherit;
}

h2{
    animation: spinText 2s infinite linear;
    text-align: center;
    font-size: 5em;
}

hr{
    width: 100%;
    border-color: light-dark( var(--lightMode-BackgroundColor), var(--darkMode-BackgroundColor));
}

@keyframes pigSpin {
    0%{
        transform: rotateY(360deg);
    }
    100%{
        transform: rotateY(0deg);
    }
}

#pig{
    animation: pigSpin 1s infinite linear;
    width: 300px;
    height: 300px;
    image-rendering:pixelated;
}

.pig-container {
    position: absolute;
    transform-origin: center;
    left: 50vw;
    top: 50vh;
    transform: translate(-50%, -50%);
}

@keyframes spinText {
    0% {
        transform: rotateY(0deg);
    }
    100% {
        transform: rotateY(360deg);
    }
}

.panel{
    height: fit-content;
    width: fit-content;

    outline: light-dark(var(--lightMode-Outline), var(--darkMode-Outline)) 1px solid;
}

#upgrades{
    text-align: center;
    display: flex;
    flex-direction: column;
    width: fit-content;
}