* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html::-webkit-scrollbar {
    display: none;
}
a {
    text-decoration: none;
}
.tago {
    display: none;
}
.container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100vw;
}
.case {
    width: 500px;
    height: 500px;
    background-color: pink;
    margin: auto 2rem;
    border: 3px solid palevioletred;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}
.tophalf {
    width: 100%;
    height: 50%;
    padding: 2rem;
}
.screenholder {
    height: 100%;
    width: 100%;
    background-color: white;
    border: 3px solid palevioletred;
    border-radius: 10px;
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}
.screen::placeholder {
    color: salmon;
    font-size: 5rem;
    text-align: center;
}
.screen {
    height: 70%;
    width: 90%;
    color: salmon;
    font-size: 2rem;
    transition: all 0.2s ease;
    outline: none;
    border: none;
    margin-top: 1.5rem;
}
.bottomhalf {
    width: 100%;
    height: 50%;
    padding: 0px 2rem 2rem 2rem;
}
.grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    justify-items: auto;
    align-items: normal;
    height: 100%;
}

.button {
    background-color: rgb(250, 250, 250);
    border: 2px solid palevioletred;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2rem;
}
.button:hover {
    background-color: rgb(255, 213, 233);
}
.button:active {
    background-color:  rgb(255, 190, 222);
}
.equals {
   grid-column: 4;
   background-color: rgb(255, 130, 151);
   color: white;
}
.equals:hover {
    background-color: rgb(255, 97, 123);
}
.equals:active {
    background-color: rgb(255, 77, 107);
}
.operator {
    background-color: rgb(228, 129, 228);
    color: white;
    font-family: sans-serif;
}
.operator:hover {
    background-color: rgb(230, 102, 230);
}
.operator:active {
    background-color: rgb(231, 77, 231);
}
.clear {
    background-color: rgb(59, 59, 59);
    color: white;
}
.clear:hover {
    background-color: rgb(80, 80, 80);
}
.clear:active{
    background-color: rgb(95, 95, 95);
}
.back {
    background-color: rgb(102, 102, 102);
    color: white;
}
.back:hover {
    background-color: rgb(126, 126, 126);
}
.back:active {
    background-color: rgb(146, 146, 146);
}
.button, .screen {
    user-select: none;
}