body{
    font-family: 'Spartan', sans-serif;
}
h1{
    margin: 0px;
    margin-top: 4px;
}
h3{
   margin: 0px; 
   margin-top: 20px;
}

input[type=button]{
    font-family: 'Spartan', sans-serif;
    font-size: 16px;
    border-color: transparent;
    height:40px;
    width:74px;
    border-radius:8px;
}
input[type=button]:active{
    transform: translateY(4px);
}
input[type=range]{
    appearance: none;
    border-radius: 10px;
}
.calculator{
    display:grid;
    justify-content:center;
    row-gap:20px;
    margin-top:50px;
}
.calculator-screen{
    display: grid;
    justify-content:end;
    height:80px;
    width:400px;
    border-radius:10px;
    text-overflow: ellipsis;
    overflow: hidden;
}
.calculator-heading{
    display:grid;
    grid-template-columns: 5fr 1.8fr;

}
.calculator-body{
    display:grid;
    grid-template-rows:1fr 1fr 1fr 1fr 1fr;
    justify-content:center;
    /*background-color:hsl(268, 75%, 9%);*/
    border-radius:10px;
    height:300px;
    width:400px;
    padding-top:20px;
}
.button-row{
    display:grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    column-gap:20px;
}
.button-row.five{
    display:grid;
    grid-template-columns: 1fr 1fr 0.6fr;
}
.reset,
.equal{
    grid-column: 1 / span 1.5 ;
    width:120px !important;
} 
.theme-setter{
    display:grid;
    grid-template-rows:1fr 1fr;
    font-size:10px;
}
.label-level{
    display:grid;
    grid-template-columns:0.2fr 0.2fr 0.2fr;
    justify-content:end;
    margin-left:18px;
    margin-top: 4;
}
.slider-level{
    display:grid;
    grid-template-columns:0.8fr 1fr;
}
.slider{
    width:50px;
}
.theme-label{
    margin-top:4px;
}
.result{
    font-size: 34px;
    padding:20px;
    margin:0px;
}
input[type=range]::-webkit-slider-thumb{
     height: 10px;
     width: 10px;
     border-radius: 50%;
     background-color: hsl(6, 63%, 50%);
    -webkit-appearance: none;
}
.calculator-keyboard-rules{
    display:grid;
    justify-content:center;
    text-align:center;
    margin-top:20px;
    border-radius:8px;
}
.attribution { 
    font-size: 12px; 
    text-align: center; 
    margin-top: 50px;

}
.attribution a { 
    color: hsl(6, 63%, 50%); 
}