@font-face{
    font-family:'digital-clock';
    src: url('./fonts/digital-7.monoitalic.ttf');
}

@font-face{
    font-family:'made-gentle';
    src: url('./fonts/MADE\ Gentle\ PERSONAL\ USE.otf');
}

body{
    background-color: black;
    box-sizing: border-box;
    display:flex;
    align-items: center;
    justify-content: center;
}

.case{
    border-radius: 20px;
    box-sizing: border-box;
    padding: 20px;
    width: 750px;
    background-color:navajowhite;
}

.calculator {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: auto;
    width: 600px;
}

.row{
    display: flex;
    gap: 10px;
    justify-content: center;
}

.row.double{
    justify-content: flex-start;
}

.col{
    box-sizing: border-box;
    width:25%
}

.col.double{
    flex-grow: 2;
}

.col#display{
    display:flex;
    align-items: center;
    background-color: white;
    border: 2px black solid;
    box-sizing: border-box;
    height: 50px;
    justify-content: flex-end;
    width: 100%;
}

.col span#result{
    height: 100%;
    font-family: 'digital-clock', Courier, monospace;
    font-size: 50px;
}

.col input[type="button"], .col.double button{
    width: 100%;
    height: 66px;
    font-family:'made-gentle', Courier, monospace;
    font-weight: bold;
    font-size: 35px;
    border-radius: 10px;
}

.col input[value="+"]{
    background-color: greenyellow;
}

.col input[value="-"]{
    background-color: #FFCCCB;
}

.col input[value="x"]{
    background-color: lightsteelblue;
}

.col input[value="÷"]{
    background-color: crimson;
}

.col input[value="="]{
    background-color: gainsboro;
}

.col input[value="."]{
    background-color: cornsilk;
}