body{
   background: linear-gradient(135deg, rgba(255,255,255,1) 0%, rgba(62,62,62,1) 100%);
   min-height: 100vh;
}

#calculadora{
 width:500px;
  height:auto;
  padding:10px 0;
  margin: 10px auto ;
   /*background:#52567c;
   border-color:#626587;*/
  background:#DBA901;
  border-color:#B45F04;
  border-width: 4px 11px 11px 4px;
  border-style: outset;
  overflow: hidden;
  
 }
.trabajo{
  margin: 2em;
}
.clear{ 
  clear: both;
  }

.hueco2{ 
  width:425px;
  float: left;
  background-color: black;
  border:#000 2px inset;
     border-radius:7px;
     text-align: center;
 }
 .hueco{ 
  width:220px;
  float: left;
  background-color: black;
  border:#000 2px inset;
     border-radius:7px;
     text-align: center;
 }
 .pantalla{ 
      width:410px;
     margin: 2px auto 2px;
     padding:5px 2px;
     color:#202020;
     text-align: right;
     font-size: 2em;
     letter-spacing: 3px;
     overflow:hidden;
     border:#000 2px inset;
     border-radius:7px;
     background: linear-gradient(to bottom, rgba(211,211,211,1) 0%,rgba(180,180,180,1) 47%,rgba(160,160,160,1) 100%);
     box-sizing:border-box;
 }
 .memoria{
  font-size: 0.8em;
  width: 195px;
 }
 #muestra{
  width: 170px;
  color: #aaa;
  font-size: 0.8em;
  border: 0px;
  border-radius:7px;
  background-color: rgba(20,20,84,0.2);
  text-align: right;
 }
 .pant{
  width: 200px;
  background-color: #303030;
  border:#000 2px outset;
  border-radius:7px;
  text-align: center;
  float: right;
 
 }
 #operaciones button{
     padding:0px;
     margin: 5px;
     width:50px;
     height:20px;
     padding:8px 0 8px;
     color:#c0c0c0 !important;
     font-family: Arial, sans-serif;
     font-size:18px;     
     letter-spacing: -2px;
     background-color:#2f2f2f;
     border: #626587 4px outset;
     border-radius:9px;
     text-align: center;
     box-sizing:content-box;
   text-decoration: none;
     
 }
 #teclado button{
     padding:0px;
     margin-right:7px;
     margin-left:3px;
     margin-bottom:3px;
     width:130px;
     height:60px;
     padding:8px 0 8px;
     color:#000000 !important;
    font-weight: bold;
     font-family: Arial, sans-serif;
     font-size:28px;     
     text-decoration: none;
     background-color:dimgray;;
     border: #626587 4px outset;
     border-radius:9px;
     text-align: center;
     box-sizing:border-box;     
 }

 #operaciones button:active{
  border:  #626587 4px inset;
   text-decoration: none;
  
 }
 #teclado button:active{
  border:  #626587 4px inset;
  font-size:26px;  
  padding-top: 10px;
   text-decoration: none;

 }
 .esp{
  background-color: darkred !important;
  width:120px !important;
 }
 
@media screen and (max-width: 500px) {
   #calculadora{
  width:100%;
  height:100vh;
  padding:0;
  margin: 0 auto ;  
 }
.trabajo{
  margin: 0;
}
.clear{ 
  clear: both;
  }

.hueco2{ 
  width:100%;
  
 }
 .hueco{ 
  width:30%;
 }
 .pantalla{ 
     width:95%;
 }
 .memoria{
  width: 90%;
 }
 #muestra{
  width: 90%;
 }
 .pant{
  width: 60%;
 }
 #operaciones button{
     margin: 1%;
     width:10%;
     padding:8px 1px 8px;
     font-size:0.9em;     
 }
 #teclado button{
     margin-right:1%;
     margin-left:1%;
     margin-bottom:1%;
     width:30%;
     height:50px;
 }
 .esp{
  width:25% !important;
 }
}


.contenedor {
     
    display: flex;
    width: 800px;
    height: 80px;
    color: #fff;
    font-size: 40px;
    line-height: 40px;
     
    position: absolute;
    top: 0;
    right: 0;
    bottom: 10;
    left: 0;
    margin: auto;
    overflow: hidden;
     
}
 
ul {
    list-style: none;
    padding-left: 10px;
    animation: cambiar 7s infinite;
}
 
ul, p {
    margin: 0;
	
}
 
@keyframes cambiar {
     
    0%{ margin-top: 0;}
    20%{ margin-top: 0;}
     
    25% {margin-top: -40px;}
    50% {margin-top: -40px;}
     
    55% {margin-top: -80px;}
    80% {margin-top: -80px;}
     
    85% {margin-top: -40px;}
    90% {margin-top: -40px;}
     
    100% {margin-top: 0;}
}