body
{
   padding: 0;
   margin: 0;
   display: flex;
   justify-content: center;
   align-items: center;
   min-height: 100vh;
   background: #ecf0f3;
}

.dark
{
   background: #282c2f;
}
.container
{
   width: 45%;
   height: 53vh;
   padding: 10px;
   border-radius: 8px;
   box-shadow: 12px 12px 20px #cbced1,
              -12px -12px 20px #ffffff;

}

.dark .container
{
   background:#33393e;
   box-shadow: 15px 15px 20px rgba(0,0,0,0.25),
               -15px -15px 20px rgba(255,255,255,0.1);
}

.display #screen
{
   width: 97%;
   height: 70px;
   font-size: 35px;
   outline: none;
   border: none;
   text-align: right;
   padding-right: .5em;
   background: #ecf0f3;
   border-radius: 6px;
   box-shadow: inset 8px 8px 8px #cbced1,
               inset -8px -8px 8px #ffffff;

} 

.dark .display #screen
{
   background:#33393e;
   color : #eee;
   box-shadow: inset 15px 15px 20px rgba(0,0,0,0.5),
               inset -15px -15px 20px rgba(255,255,255,0.1);
}

.btns
{ 
   width: 100%;
   margin-top: 1.7em;
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;

}

.btns .row button
{
   width: 80px;
   height: 30px;
   font-size: 16px;
   border: none;
   outline: none;
   margin: 5px;
   border-radius: 4px;
   box-shadow: 5px 5px 8px #00000020,
              -5px -5px 8px #ffffff;
              transition: .1s;
}

.dark .btns .row button
{
   background:#33393e;
   color: #eee;
   border: 1px solid #333;
   box-shadow: 5px 5px 10px rgba(0,0,0,0.1),
               -5px -5px 10px rgba(255,255,255,0.1);

}

.btns .row button:hover
{
   box-shadow: inset 5px 5px 8px rgba(16,16,16,.1),
               inset -5px -5px 8px #fff;
               background: #fff;
}

.dark .btns .row button:hover
{
   background:#2c3237;
   border-radius: 2px solid #333;
   box-shadow: inset 5px 5px 10px rgba(0,0,0,0.1),
               inset -5px -5px 10px rgba(255,255,255,0.1);;
}
#eval
{
   background: #33ccff;
   color: #fff;
   box-shadow: inset 5px 5px 8px #66d9ff,
               inset -5px -5px 8px #00ace6;
}
#eval:hover
{
   box-shadow: inset 5px 5px 8px #00ace6,
               inset -5px -5px 8px #00ace6;
}

#ac
{
   background: #33cc33;
   color: #fff;
}

#ac:hover
{
   box-shadow: inset 5px 5px 8px #2eb82e,
               inset -5px -5px 8px #33cc33;
}

#ce
{
   background: #ff3399;
   color: #fff;
}

#ce:hover
{
   box-shadow: inset 5px 5px 8px #e60073,
               inset -5px -5px 8px #ff3399;
}

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

} 

.dark .toggleBtn
{
   border: 2px solid #d0d0d3;
   box-shadow: 5px 5px 10px rgba(0,0,0,0.1),
   -5px -5px 10px #a8a4a4;

}
.creator
{
   font-size: small;
   color:#a8a4a4 ;
}

/* Media Queries  */
@media only screen and (max-width: 768px) {
   .container {
       width: 80%;
       height: auto;
       margin-top: 20px;
}
.btns .row button {
   width: 50px; 
   height: 20px; 
   font-size: 14px; 
}
}