@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@200&family=VT323&display=swap');

body{
    background-color: #202020;
    color: white;
    margin: auto;
}

header{
    font-family: 'Source Code Pro', monospace;
    text-align: center;
}

#calculator{
    margin: auto;
    width: 30%;
    margin-top: 5%;
}

#number-display{
    display: block;
    margin: auto;
    background-color: #2f3332; 
    border: 0;
    border-radius: 6px;
    width: 23.8vw;
    height: 6vh;
    text-align: end;
    color: white;
    font-size: 30px;
    padding-right: 20px;
}

#number-display::placeholder{
    color: white;
    font-size: 30px;
}

#buttons {
    margin: auto;
}

.number-buttons{
    width: 6vw;
    height: 8vh;
    background-color: #141313;
    color: white;
    border: 0;
    border-radius: 5px;
    font-size: 25px;
}

.operator-buttons{
    width: 6vw;
    height: 8vh;
    background-color: #2f3332;
    color: white;
    border: 0;
    border-radius: 5px;
    font-size: 25px;
}

#backspace{
    width:6vw;
    height: 3vh;
    background-color: #ff2a2a;
    color: white;
    border: 0;
    border-radius: 5px;
    font-size: 30px;
}

#clear{
    width: 18.25vw;
    height: 3vh;
    background-color: #ff2a2a;
    color: white;
    border: 0;
    border-radius: 5px;
    font-size: 15px;
}

#light-switch{
    width: 24.5vw;
    height: 3vh;
    background-color: #141313;
    color: yellow;
    border: 0;
    border-radius: 5px;
}