*{
    margin:0;
    padding:0;
    box-sizing: border-box;
    font-family: Consolas;
}

body{
    display:flex;
    justify-content: center;
    align-items: center;
    min-height:100vh;
    background: #ffffff;
}
h2{
    font-size: 15px;
    color: navy;
    text-align: center;
}

.calculator{
    position:relative;
    width:700px;
    height: 100vh;
    padding:20px;
    border-radius: 20px;
    box-shadow: 15px 15px 20px rgba(0, 0, 0, 0.1), -15px -15px 20px #f8f5f5;
}

.calculator .buttons{
    position:relative;
    display:grid;

}

.calculator .buttons  #value{
    position:relative;
    grid-column: span 4;
    user-select:none;
    overflow: hidden;
    width:100%;
    text-align:end;
    color: #5166d6;
    height: 100px;
    /*box-shadow: inset 5px 5px 10px rgba(0,0,0,0.1),*/
    /*inset -5px -5px 20px white;*/
    border-radius:10px;
    margin-bottom:12px;
    padding: 0 20px;
    font-size: 50px;
    font-weight: 500;
    border: 1px solid lightblue;
}
.calculator .buttons span{
    position: relative;
    padding:25px 40px;
    box-shadow:  5px 5px 10px rgba(0,0,0,0.1),
   -5px -5px 20px white;
    margin:10px;
    cursor: pointer;
    user-select:none;
    min-width: 40px;
    display: flex;
    justify-content: center;
    top:10px;
    bottom:10px;
    align-items:center;
    text-align: center;
    font-size: 2rem;
    color: rgba(51, 91, 141, 0.57);
    border:2px solid #edf1f4;
    box-shadow:  5px 5px 10px rgba(0,0,0,0.1),
    -5px -5px -5px 20px white;
    border-radius:10px;
}
.calculator .buttons span:active{
    box-shadow: inset 5px 5px 10px rgba(0,0,0,0.1),
    inset -5px -5px 10px #ffffff;
    color : #de1e1e;
}

.calculator .buttons span#clear{
   grid-column :span 2;
    /*background: #de1e1e;*/
    color:red;

    border:2px solid #edf1f4;
}

.calculator .buttons span#plus{
    grid-row :span 2;
    background: #2dce28;
    color:white;
    border:2px solid #edf1f4;
}

.calculator .buttons span#equal{
    grid-row :span 2;
    background: #0b68e1;
    color:white;
    border:2px solid #edf1f4;
}
.calculator .buttons span#clear:active,
.calculator .buttons span#plus:active,
.calculator .buttons span#equal:active{
    box-shadow:  5px 5px 10px rgba(0,0,0,0.1),
    -5px -5px 10px white,
    inset 5px 5px 10px rgba(0,0,0,0.1);
}

.toggleBtn{
    position:fixed;
    top:20px;
    right:20px;
    width:20px;
    height:20px;
    border-radius: 50%;
    background: #555;
    cursor:pointer;
    box-shadow: 5px 5px 10px rgba(0,0,0,0.1),-5px -5px 10px #fff;
}

.dark{
    background: #262424;
}
.dark .calculator{
    background: #333030;
    box-shadow: 15px 15px 20px rgba(0,0,0,0.25),-15px -15px 20px rgba(255,255,255,0.1);
}

.dark .calculator .buttons #value{
    background: #4d4d4f;
    color: white;
    box-shadow: inset 15px 15px 20px rgba(0,0,0,0.25),inset -15px -15px 20px rgba(255,255,255,0.1);

}

.dark .calculator .buttons span{
    color: white;
    border: 2px solid #333;
    box-shadow: 5px 5px 10px rgba(0,0,0,0.25),
-5px -5px 10px  rgba(255,255,255,0.1);

}

.dark .calculator .buttons span:active{
    box-shadow:inset 5px 5px 10px rgba(0,0,0,0.25),
   inset -5px -5px 10px  rgba(255,255,255,0.1);

}
.dark .calculator .buttons span#clear,
.dark .calculator .buttons span#plus,
.dark .calculator .buttons span#equal{
    border: 2px solid #333;
}
.dark .calculator .buttons span#clear:active,
.dark .calculator .buttons span#plus:active,
.dark .calculator .buttons span#equal:active{
    box-shadow: inset 5px 5px 10px  rgba(0,0,0,0.1);
}

.dark .toggleBtn{
   background: #fcfafa;
    border: 2px solid #333;
    box-shadow: 5px 5px 10px rgba(0,0,0,0.25),-5px -5px 10px rgba(31, 29, 29, 0.25);

}