body {
    font-family: "Sour Gummy", sans-serif;
    background-image: linear-gradient(to bottom, #0006, #0006), url(./assets/pusheen_pip_stormy.jpg);
    background-size: cover;
    background-color: var(--scrim);
    color: var(--on_primary_container);
    padding: 2rem;
    margin: 0;
}

#splash {
    position: fixed;
    top: 0;
    left: 0;
    width: 100dvw;
    height: 100dvh;
    background-color: var(--surface_container_lowest);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: var(--on_primary_container);
    animation: fadeOut 0.5s ease-in-out forwards;
    animation-delay: 1s;
}

#calculator {
    margin: 0 auto;
    max-width: 23rem;
    background: var(--surface);
    padding: 1rem;
    border-radius: 1rem;
    border: 2px solid var(--outline_variant);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-height: 100dvh;

    .screen {
        border: 2px solid var(--outline_variant);
        background-color: var(--surface_container);
        color: var(--on_surface);
        border-radius: 0.5rem;
        padding: 2rem 1rem;
        min-height: 5rem;
        max-height: 5rem;

        position: relative;
        display: flex;
        align-items: end;
        justify-content: end;
        transition: all 0.2s cubic-bezier(0.075, 0.82, 0.165, 1);

        #pusheen {
            position: absolute;
            bottom: -10px;
            left: 15px;
            width: 20%;
            overflow: hidden;
            z-index: 0;
            opacity: 0;
            transition: all 0.3s ease-in-out;
        }

        span {
            z-index: 10;
            font-size: 4rem;
            text-align: right;
            padding-right: 0.2rem;
            animation: blink-border 1s infinite ease-out;
            overflow-x: auto;
            /*no break*/
            white-space: nowrap;
            transition: all 0.2s cubic-bezier(0.075, 0.82, 0.165, 1);
            min-height: 4rem;
            
            &.not-started {
                color: var(--outline);
            }

            &.error {
                color: var(--error);
            }
        }
    }

    .pad {
        /* background: var(--surface_container); */
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 0.5rem;

        button {
            user-select: none;
            -webkit-touch-callout: none; /* iOS Safari */
            -webkit-user-select: none;   /* Safari, Chrome */
            -khtml-user-select: none;    /* Konqueror HTML */
            -moz-user-select: none;      /* Firefox */
            -ms-user-select: none;       /* Internet Explorer/Edge */

            font-family: "Sour Gummy", sans-serif;
            border: none;
            outline: none;
            background-color: var(--surface_dim);
            padding: 0rem;
            border-radius: 50px;
            cursor: pointer;
            transition: all 0.2s ease-out;
            font-size: 2rem;
            border: 2px solid var(--outline_variant);
            aspect-ratio: 1 / 1;

            &:hover {
                background-color: color-mix(in srgb, var(--surface_dim) 80%, var(--primary) 20%);
            }

            &.operator, &.clear {
                background-color: var(--primary_container);
                color: var(--on_primary_container);

                &:hover {
                    background-color: color-mix(in srgb, var(--primary_container) 80%, var(--primary) 20%);
                }
            }

            &.equal {
                background-color: var(--primary);
                color: var(--on_primary);
                font-size: 2rem;

                &:hover {
                    background-color: color-mix(in srgb, var(--primary) 80%, var(--primary_container) 20%);
                }
            }

            &:active,
            &.active {
                border-radius: 20px;
            }

            &.rgb {
                animation: rgb 3s linear infinite;
            }
        }
    }
}

input,
textarea,
button,
select,
a {
    -webkit-tap-highlight-color: transparent;
    color: var(--on_surface);
}

@media (max-width: 400px) {
    body {
        padding: 0;
    }

    #calculator {
        max-width: 100%;
        border: none;
        border-radius: 0;
        padding: 0;

        display: grid;
        grid-template-rows: 1fr 1fr;
        
        .screen {
            border: none;
            border-radius: 0;
            font-size: 2rem;
            min-height: 8rem;
            max-height: unset;
            background: linear-gradient(to bottom, #000d, #000d), url(./assets/pusheen_pip_stormy.jpg);
            background-size: cover;
            background-position: center;
            
            span {
                font-size: 4rem;
                max-width: 90dvw;
            }
        }

        .pad {
            padding: 0.5rem;

            button {
                &:hover {
                    background-color: var(--surface_dim);
                }

                &:active {
                    background-color: color-mix(in srgb, var(--surface_dim) 80%, var(--primary) 20%)
                }

                &.operator, &.clear {
                    &:hover {
                        background-color: var(--primary_container);
                    }

                    &:active {
                        background-color: color-mix(in srgb, var(--primary_container) 80%, var(--primary) 20%);
                    }
                }
            }
        }
    }
}

@keyframes blink-border {
    0%, 100% {
        border-right: 2px solid var(--surface_tint);
    }
    50% {
        border-right: 2px solid transparent;
    }
}

@keyframes fadeOut {
    to {
        opacity: 0;
        visibility: hidden;
    }
}

@keyframes rgb {
    0% {
        filter: hue-rotate(0deg);
    }
    100% {
        filter: hue-rotate(360deg);
    }
}