* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
@font-face {
    font-family: "Display";
    src: url(fonts/technology/Technology-Bold.ttf);
}
@font-face {
    font-family: "Numbers";
    src: url(fonts/carre-font/Carre-JWja.ttf);
}
@font-face {
    font-family: "Symbols";
    src: url(fonts/Noto_Sans_Math/NotoSansMath-Regular.ttf);
}
body {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #156064;
}
html {font-size: 10px;}
.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 5px solid;
    border-radius: 15px;
    width: 450px;
    height: 700px;
    background-color: #000000;
}
.display {
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 3px solid;
    border-radius: 15px;
    width: 90%;
    height: 25%;
    background-color: #8C5E58;
    font-family: "Display";
    font-size: 9rem;
    padding-left: 5px;
}
.buttons {
    padding: 6px;
    margin-top: 5%;
    width: 90%;
    height: 65%;
}
.row {
    display: flex;
    justify-content: center;
    height: 20%;
}
.button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 25%;
    height: 90%;
    background-color: #4e4d4d;
    color: white;
    border-radius: 10px;
    margin: 0 5px;
}
.button:hover,.button.Delete:hover{
    background-color: yellow;
    color: black;
}
.button.Delete {
    width: 50%;
    font-size: 2.6rem;
    font-weight: bold white;
}
.operator,.result{
    font-family: "Symbols";
    font-size: 2.6rem;
    font-weight: bolder;
    background-color: #FDA00D;
    color: black;
}
.number,.Zero,.doubleZero,.dot {
    font-family: "Numbers";
    font-size: 2.6rem;
}
.button.Delete,.Clear {
    font-size: 2.6rem;
    background-color: #A1B0AB;
    color: black;
    font-weight: bold;
}
.display > .pastResult {
    width: 100%;
    height: 30%;
    font-size: 5rem;
    padding: 10px;
}
.display > .current {
    width: 100%;
    height: 60%;
    font-size: 7rem;
}
@media (max-width:450px){
    .display > .current {font-size: 5.5rem;}
    .display > .pastResult {font-size: 4.5rem;}
}
@media (max-width:320px){
    .display > .current {font-size: 4.5rem;}
    .display > .pastResult {font-size: 3.5rem;}
    .Clear {font-size: 2rem;}
}