style.css

  @import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@500&display=swap');


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-size: 27px;
}

body {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url(img/제목을\ 입력해주세요_-003.png);
    background-size: cover;
    background-repeat: no-repeat;
}


.calculator {
    width: 390px;
    height: 600px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: gray;  
    border-radius: 5px;
}

input[type="text"] {
    width: 340px;
    height: 90px;
    margin-bottom: 12px;
    outline-style: none;
    border-radius: px;
    padding: 16px;
    background-color: whitesmoke;
    box-shadow: 0px 1px 8px 1px inset,
    -1px 0px 1px 0px inset;
}

.container {
    display: flex;
    width: 352px;
}

.clear {
    flex-grow: 2;
}

.merge {
    flex-grow: 2;
}

/* 버튼의 크기를 이렇게 정한이유는 .container 한줄의 너비 = 버튼4개의 너비를 같게 하여 grow속성을 간단하게 쓸수있게함. 
또한 margin을 줌으로써 한줄당 32px가 추가되므로 .container 의 넓이를 320px에서 32px를 더함*/

button {
    width: 80px;
    height: 80px;
    border-radius: 10px;
    margin: 4px;
    box-shadow: 0px 6px 4px 3px;
    border: none;
    font-family: 'Roboto Mono', monospace;
}

button:active {
    box-shadow : 0px 2px 2px 2px rgba(0, 0, 0, 0.797), 
    2px 3px 3px 3px rgba(0, 0, 0, 0.888) inset ,
    -2px 0px 3px 3px rgba(0, 0, 0, 0.474)  inset;
    color:#fff;
    text-shadow: 0 0 7px #fff, 0 0 10px #fff, 0 0 21px #fff, 0 0 42px;
}

.clear {
        background-color: #c74050;
}
.num , .dot {
    background-color: rgb(225, 225, 225);
}

.operator , .merge {
    background-color: #f37041;
}