/* Template */
@font-face {
    font-family:'OPTI Calculator';
    src:url('../CalculatorApp/resources/OPTICalculator.otf') format('opentype');
}
.calculator {
    border:5px solid black;
    width:500px;
    height:800px;
    border-radius: 5%;
    overflow:hidden;
    background-color: gray;
}
.wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
}
.headerStyle {
    text-decoration: underline;
    text-decoration-thickness: 15%;
}
#total {
    width:490px;
    height:100px;
    border: 5px solid black;
    border-radius: 5%;
    text-align: center;
    font-size:70px;
    font-family: 'OPTI Calculator', sans-serif; 
    box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
    
}

.row1, .row2, .row3, .row4, .row5 {
    display:flex;
    padding:8px;
}

.row1 button {
    width:100px;
    height:100px;
    margin:11px;
    border-radius: 15%;
    border: 2px solid black;
    background-color: darkgray;
    font-size:30px;
    text-shadow:2px 2px white;
    box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;

}
.row2 button {
    width:100px;
    height:100px;
    margin:11px;
    border-radius: 15%;
    border: 2px solid black;
    background-color: darkgray;
    font-size:30px;
    text-shadow:2px 2px white;
    box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
}
.row3 button {
    width:100px;
    height:100px;
    margin:11px;
    border-radius: 15%;
    border: 2px solid black;
    background-color: darkgray;
    font-size:30px;
    text-shadow:2px 2px white;
    box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
}
.row4 button {
    width:100px;
    height:100px;
    margin:11px;
    border-radius: 15%;
    border: 2px solid black;
    background-color: darkgray;
    font-size:30px;
    text-shadow:2px 2px white;
    box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
}
.row5 button {
    width:100px;
    height:100px;
    margin:11px;
    border-radius: 15%;
    border: 2px solid black;
    background-color: darkgray;
    font-size:30px;
    text-shadow:2px 2px white;
    box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;

}
.row5 button:last-child {
    width:200px;
    border-radius: 20%;

}
button:hover{
    background-color:#bdbdbd;
}
button:active {
    background-color: #d6d6d6;
}
#credit {
    text-align: center;
    background-color: #bdbdbd;
}
#credit:hover {
    color:blue;
}
body{
    background-image:url(/CalculatorApp/resources/shutterstock_666030916-scaled.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    text-align: center;
}