* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   font-family: "SUSE Mono", sans-serif;
}

:root {
   --body-color: rgb(184, 249, 56);
   --container-color: rgb(88, 130, 5);
}

body {
   background-color: var(--body-color);
   display: flex;
   justify-content: center;
   min-height: 100vh;
}

.container {
   align-self: center;
   background-color: var(--container-color);
   width: 400px;
   height: 500px;
   padding: 20px;
   border-radius: 20px;
   display: flex;
   flex-direction: column;
   box-shadow: 5px 5px 10px 2px rgba(0, 0, 0, 0.5);
}

.input-container {
   padding: 10px;
   width: 100%;
   height: 120px;
   border-radius: 10px;
   background-color: var(--body-color);
}

.input-container > input {
   width: 100%;
   text-align: end;
   border: 0;
   padding-right: 5px;
   background-color: var(--body-color);
}

input:nth-last-of-type(1) {
   margin-top: 10px;
   height: 50px;
   font-size: 30px;
}

input:first-of-type {
   margin-top: 10px;
   height: 30px;
   font-size: 18px;
}

.button-container {
   margin-top: 15px;
   width: 100%;
   height: 75%;
   border-radius: 10px;
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 1px;
}

button {
   background-color: var(--body-color);
   font-size: 20px;
   font-weight: bold;
   border-radius: 5px;
   border-color: var(--container-color);
}

button:hover {
   background-color: var(--container-color);
}

.all-clear {
   grid-column: 1/3;
}

.equals {
   grid-column: 3/5;
}