* {
    user-select: none;
}

html {
    background-color: #edba97;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

#button {
    top: 35%;
    position: absolute;
    border-radius: 100%;
    background-color: #df314b;
    height: 15%;
    width: 25vw;
}


#button-shadow {
    background-color: #bd2138;
    height: 15%;
    width: 25vw;
    border-radius: 0 0 100% 100%;
}


#button-ring {
    position: absolute;
    border-radius: 100%;
    background-color: #474747;
    box-shadow: 0px 4px 0px 0px #1b1b1beb;
    z-index: -1;
    height: 20%;
    width: 30vw;
}

.pressed {
    animation: press-button 0.5s linear;
}

.pressed-shadow {
    animation: press-shadow 0.5s linear;
}

@keyframes press-button {
    0% {
        top: 35%;
    }

    50% {
        top: 42%;
    }

    100% {
        top: 35%;
    }
}


@keyframes press-shadow {
    0% {
        border-radius: 0 0 100% 100%;
    }

    50% {
        border-radius: 100%;
    }

    100% {
        border-radius: 0 0 100% 100%;
    }
}

@media (max-width: 425px) {
    #button {
        width: 40vw;
    }

    #button-shadow {
        width: 40vw;
    }

    #button-ring {
        width: 50vw;
    }
}

@media (max-height: 425px) {
    #button {
        height: 20%;
        top: 30%;
    }

    #button-shadow {
        height: 20%;
        top: 30%;
    }

    #button-ring {
        height: 30%;
    }

    @keyframes press-button {
        0% {
            top: 30%;
        }
    
        50% {
            top: 40%;
        }
    
        100% {
            top: 30%;
        }
    }
}