html {
    background-color: black; 
    display: inline;
}

#myHeader {
    background-color: lightblue;
    color: black;
    padding: 15px;
    text-align: center;
    font-family: var(--bs-body-font-family);
}

#box {
    top:2px;
    width: 400px;
    height: 300px;
    resize: none;
    font-size: 19px;
    font-family: Arial, Helvetica, sans-serif;
}

#button {
    margin: 0;
    position: absolute;
    left: 49.4%; 
    transform: translate(-50%, -50%);
    margin-top: 23.5px;
    width: 45;
    height: 45;
}

.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
}

@media (min-device-width: 375px) and (max-device-width: 812px) {
    
    #myHeader {
        padding: 10px;
    }

    #box {
        top:2px;
        width: 330px;
        height: 260px;
        resize: none;
        font-size: 17px;
    }

    #button {
        left: 48.2%;
        margin-top: 26px;
        width: 70;
        height: 73;
    }
}