.bbs{ 
    width: 5.94rem;
}
button{

    width: 2.6rem;
    height: 1.6rem;
    border-radius: .3rem;
    border: 0;
    margin: .25rem;
    font-weight: bold;

    cursor: pointer;
}

button:active {
    filter: brightness(150%);
}


body{
    
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
.numpad{
    
    width: 13.15rem;
    margin: auto;
    padding: 1rem;
    border-radius: .3rem;
}


/*Themes*/

.numpad-theme-1{
    background-color: hsl(223, 31%, 20%);
}
.numpad-theme-2{
    background-color: hsl(0, 5%, 81%);
}
.numpad-theme-3{
    background-color: hsl(268, 71%, 12%);
}   

.numbtn-theme-1{
    background-color: hsl(30, 25%, 89%);
    color: hsl(221, 14%, 31%);
    box-shadow: 0 .1rem 0 0 hsl(28, 16%, 65%);
}
.numbtn-theme-2{
    background-color: hsl(45, 7%, 89%);
    color: hsl(60, 10%, 19%);
    box-shadow: 0 .1rem 0 0 hsl(35, 11%, 61%);
}
.numbtn-theme-3{
    background-color: hsl(268, 47%, 21%);
    color: hsl(52, 100%, 62%);
    box-shadow: 0 .1rem 0 0 hsl(290, 70%, 36%);
}

.specialbtn-theme-1{
    background-color: hsl(225, 21%, 49%);
    color: hsl(0, 0%, 100%);
    box-shadow: 0 .1rem 0 0 hsl(224, 28%, 35%);
}
.specialbtn-theme-2{
    background-color: hsl(185, 42%, 37%);
    color: hsl(0, 0%, 100%);
    box-shadow: 0 .1rem 0 0 hsl(185, 58%, 25%);
}
.specialbtn-theme-3{
    background-color: hsl(281, 89%, 26%);
    color: hsl(0, 0%, 100%);
    box-shadow: 0 .1rem 0 0 hsl(285, 91%, 52%);
}

.equals-theme-1{
    background-color: hsl(6, 63%, 50%);
    color: hsl(0, 0%, 100%); 
    box-shadow: 0 .1rem 0 0 hsl(6, 70%, 34%);
}
.equals-theme-2{
    background-color: hsl(25, 98%, 40%);
    color: hsl(0, 0%, 100%); 
    box-shadow: 0 .1rem 0 0 hsl(25, 99%, 27%);
}
.equals-theme-3{
    background-color: hsl(176, 100%, 44%);
    color: hsl(198, 20%, 13%); 
    box-shadow: 0 .1rem 0 0 hsl(177, 92%, 70%);
}

.background-theme-1{
    background-color: hsl(222, 26%, 31%);
}
.background-theme-2{
    background-color: hsl(0, 0%, 90%);
}
.background-theme-3{
    background-color: hsl(268, 75%, 9%);
}

.screen-theme-1{
    background-color: hsl(224, 36%, 15%);
    color: hsl(0, 0%, 100%);
}
.screen-theme-2{
    background-color: hsl(0, 0%, 93%);
    color: hsl(60, 10%, 19%);
}
.screen-theme-3{
    background-color: hsl(268, 71%, 12%);
    color: hsl(52, 100%, 62%);
}

.theme-theme-1{
    color: hsl(0, 0%, 100%);
}
.theme-theme-2{
    color: hsl(60, 10%, 19%);
}
.theme-theme-3{
    color: hsl(52, 100%, 62%);
}

.slider-theme-1{
 background: hsl(223, 31%, 20%);
}
.slider-theme-2{
background: hsl(0, 5%, 81%);
}
.slider-theme-3{
background: hsl(268, 71%, 12%);
}

.slider-theme-1::-webkit-slider-thumb{
    background: hsl(6, 63%, 50%);
}
.slider-theme-2::-webkit-slider-thumb{
    background: hsl(25, 98%, 40%);
}
.slider-theme-3::-webkit-slider-thumb{
    background: hsl(176, 100%, 44%);
}


/*no themes*/

.screen{

    width: 13.15rem;
    height: 1.8rem;
    margin: auto;
    margin-bottom: .8rem;
    padding: 1rem;
    border-radius: .3rem;
    
}
.theme{
    
    width: 15.15rem;
    margin: auto;   
    padding: 1rem;
    text-align: right;
}

.slider {
    appearance: none;
    width: 15%;
    height: 1rem;
    border-radius: 1rem;

    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
}
.slider::-webkit-slider-thumb{
    -webkit-appearance: none;
    appearance: none;
    width: .65rem;
    height: .65rem;
    border-radius: 1rem;
    
    cursor: pointer;
}
#Answer{
    text-align: right;
    
    font-size: 2rem;
}