/* default sizes */
body {
    /* fonts */
    --font-size-title: 72pt;
    --font-size-subtitle: 60pt;
    --font-size-item: 32pt;
    --title-shadow-offset: 5px;

    --ball-size: 35px;
    --color-ball-size: 45px;
    
    --screen-width: 800px;
    
    --input-height: 50px;
    
    --shadow-dimensions: 5px 5px 0px;
    --shadow-color: rgba(0, 0, 0, 0.1);

    --text-shadow: 2px 2px rgba(0, 0, 0, 0.171);

    /* transition: box-shadow 0.3s ease-in-out; */

    /* animation: 0s ease-in 1s 2 reverse both paused someAnimation; */
    /* animation: someAnimation 3s ease-in-out 0s infinite forwards; */
}

@keyframes someAnimation {
    0% {
        transform: translate(0px, 0px);
        --shadow-dimensions: 5px 5px 0px;
        animation-timing-function: ease-in;
    }

    25% {
        transform: translate(15px, 15px);
        --shadow-dimensions: 15px 15px 0px;
        animation-timing-function: ease-out;
    }

    50% {
        transform: translate(0px, 0px);
        --shadow-dimensions: 5px 5px 0px;
        animation-timing-function: ease-in;
    }

    75% {
        transform: translate(-15px, -15px);
        --shadow-dimensions: 0px 0px 0px;
        animation-timing-function: ease-out;
    }
}

@media only screen and (max-width: 800px) {
    body {
        --font-size-title: 36pt;
        --font-size-subtitle: 28pt;
        --font-size-item: 18pt;
        --title-shadow-offset: 3px;

        --ball-size: 25px;
        --color-ball-size: 30px;

        --screen-width: 300px;
    }
}