@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@500&display=swap');

html {
    box-sizing: border-box;
}

*, *::before, *::after {
    box-sizing: inherit;
    font-family: 'M PLUS Rounded 1c', sans-serif;    
    font-weight: 500;
}

:root {
    --bg-color: #1b1b1e;
    --calc-bg: #6A6B6B;
    --opp-btn: #F2A33C;
    --opp-hover: #9a6826;
    --display: #3B3C3C;
    --white: #fff;
    --button-hover: #a8a8a8;
    --top-btn: #4C4D4D;
    --top-hover: #8d8c8c;
}

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

.container {
    width: 90%;
    max-width: 400px;
    background-color: var(--calc-bg);
    border-radius: 8px;
    overflow: hidden;
}

.display {
    background-color: var(--display);
    color: var(--white);
    height: 100px;
    width: 100%;
    text-align: right;
    padding: 20px;
    font-size: 30px;
    position: relative;
}

.display-1 {
    opacity: 0.4;
    font-size: 20px;
    height: 20px;
    overflow: hidden;
}

.temp-result {
    position: absolute;
    bottom: 10;
    left: 10;
    font-size: 20px;
    opacity: 0.3;
}

.calc-buttons {
    color: var(--display);
    display: grid;
    grid-template: repeat(4, 1fr) / repeat(4, 1fr);
}

.button {
    border: 0.5px solid var(--display);
    display: inline-block;
    height: 100px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    cursor: pointer;
    color: var(--white);
}

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

.operation, .calculate {
    background-color: var(--opp-btn);
}

.operation:hover, .calculate:hover {
    background-color: var(--opp-hover);
}

.top-row {
    background-color: var(--top-btn);
}

.top-row:hover {
    background-color: var(--top-hover);
}

.btn-0 {
    grid-column: 1/3;
}

.opp {
    color: var(--opp-btn);
}