.dis-n{
	display: none;
}
.dis-b{
	display: block;
}
body{
	background-size: cover;
	text-align: center;
  font-family: 'Calibri', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;

}

::-webkit-scrollbar {
  display: none;
}

         button {background-image: linear-gradient(to right, #00d2ff 0%, #3a7bd5  51%, #00d2ff  100%)}
         button {
            margin: 10px;
            padding: 0.7rem;
            text-align: center;
            color: white;
            transition: 0.5s;
            background-size: 200% auto;
                    	font-weight: bold;
            box-shadow: 0 0 20px #eee;
            border-radius: 10px;
            
          }

          button:hover {
            background-position: right center; /* change the direction of the change here */
            
            text-decoration: none;
          }
h1{
  font-size: 4.5rem;
  text-shadow: 3px 3px 2px orange;
}
button{
	margin: auto;
}
#num{
    position: absolute;
    margin-top: -15%;
    border-style: dashed;
    left: 62%;
    background-color: rgb(225 225 113 / 60%);
    width: fit-content;
    font-size: 3rem;

}
#botones-agregar,#botones-quitar{
  width: auto;
}
#botones-agregar button,#botones-quitar button{
	background-color: transparent !important;
	border-color: transparent !important;
	font-weight: bold;
	background-image: none;
	color: black;


}
#botones-agregar button img,#botones-quitar button img{
	width: 100%;
}
h1{margin: auto;
	border-radius: 1rem;
	padding: 0.3rem;
	background-color: rgba(190 229 187 /60%);;
	width: fit-content;
}
div{
	margin: auto;
	background-color: rgba(245, 245, 220, 0.6);
	border-radius: 1rem;
	width: 50%;
	padding: 0.2rem;
}
#inicio2{
  width: fit-content;
}
#abaco{
	width: 100%;
}
p{
	font-size: 1.3rem;
}
@media only screen and (orientation:portrait) {
       #ejercicio1,#ejercicio2,#ejercicio3,#ejercicio4,#inicio1,#comienzo,#inicio2,h1 { display:none; }
        #aviso-movil-horizontal { 
          margin-top: 20%;
		width:fit-content;
          z-index=0;
          display:block;
      font-size: 1rem;
                text-align: center;
                font-weight: bolder;
                
                	background-color: rgba(245, 245, 220, 0.6);}
                img{

margin:auto;

                }
      
    }
    @media only screen and (orientation:landscape) {
        #aviso-movil-horizontal{
display: none;
        }}
            @keyframes square-in-center {
  from {
    clip-path: inset(100% 100% 100% 100%);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}

[transition-style="in:square:center"] {
  animation: 2.5s cubic-bezier(.25, 1, .30, 1) square-in-center both;
}
#_1,#_2,#_3,#_4,#_5,#_6,#_7,#_8,#_9{

          animation-name: _1;
          animation-duration: 2s;
}
#_10,#_20,#_30,#_40,#_50,#_60,#_70,#_80,#_90{

          animation-name: _10;
          animation-duration: 2s;
}
#_100,#_200,#_300,#_400,#_500,#_600,#_700,#_800,#_900{

          animation-name: _100;
          animation-duration: 2s;
}
#_1000,#_2000,#_3000,#_4000,#_5000,#_6000,#_7000,#_8000,#_9000{

          animation-name: _1000;
          animation-duration: 2s;
}

/*  Primer grupo de animaciones */
@keyframes _1 {
  from {
    transform: matrix(1, 0, 0, 1, 1075, 339);
  }

  to {
    transform: matrix(1, 0, 0, 1, 1075, 539);
  }
}
@keyframes _10 {
  from {
    transform: matrix(1, 0, 0, 1, 994, 339);
  }

  to {
    transform: matrix(1, 0, 0, 1, 994, 539);
  }
}
@keyframes _100 {
  from {
    transform: matrix(1, 0, 0, 1, 921, 339);
  }

  to {
    transform: matrix(1, 0, 0, 1, 921, 539);
  }
}
@keyframes _1000 {
  from {
    transform: matrix(1, 0, 0, 1, 849, 339);
  }

  to {
    transform: matrix(1, 0, 0, 1, 849, 539);
  }
}