body {
    text-align: center;
    background-color: rgb(170, 222, 244)
}

h1 {
    font-family: arial;
    color: rgb(1, 1, 157)
}

#x2,
#x1,
#y2,
#y1 {
    background-color: white;
    border-style: solid;
    border-width: 2px;
    border-color: rgb(0, 128, 255);
    border-radius: 5px;
    width: 195px;
    height: 25px;
    font-size: 20px;
    padding-left: 5px;
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 7px;
}


input:focus,
textarea:focus {
    outline: none
}

#calc {
    cursor: pointer;
    color: rgb(99, 82, 198);
    margin-top: 7px;
    width: 150px;
    height: 23px;
    background-color: rgb(124, 252, 89);
    border-style: solid;
    border-width: 1px;
    border-color: white;
    border-radius: 5px;
}

#calc:hover {
    background-color: rgba(124, 252, 89, 0.808);
}

#calc:active {
    background-color: rgba(124, 252, 89, 0.603);
}

#display {
    resize: none;
    background-color: rgb(109, 175, 251);
    border-style: solid;
    border-width: 2px;
    border-color: white;
    border-radius: 5px;
    width: 419px;
    height: 50px;
    font-size: 40px;
    margin-top: 7px;
}