* {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }

    body {
        font-size: 10px;
        height: 90vh;
        padding: 2rem;
        background: #ecf0f3;
        display: grid;
        place-items: center;
        background-size: 100%;
        background-repeat: no-repeat;
    }

    .container {
        width: 100%;
        padding: 1rem;
        box-shadow: -10px -10px 10px #f8f9fa, 10px 10px 10px #ced1d5;
        border-radius: 2rem;
        display: flex;
        flex-direction: column;
        gap: 4rem;
    }

    #userInput {
        width: 100%;
        background-color: transparent;
        border: 0;
        box-shadow: -10px -10px 10px #f8f9fa, 10px 10px 10px #ced1d5;
        outline: none;
        padding: 3rem;
        border-radius: 2rem 2rem 0 0;
    }

    .btn-box {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }
#redo{
border-radius: 0 0 2rem 2rem;
}
    #undo,
    #redo {
        border: none;
        width: 100%;
        height: 3rem;
        box-shadow: -10px -10px 10px #f8f9fa, 10px 10px 10px #ced1d5;
    }

    #undo:hover,
    #redo:hover {
        box-shadow: rgb(204, 219, 232) 3px 3px 6px 0 inset,
            rgba(207, 203, 203, 0.5) -3px -3px 6px 1px inset;
    }

    @media (min-width: 800px) {
        .container {
            width: 60%;
        }
    }