@keyframes circle-in-center {
  from {
    clip-path: circle(0%);
  }
  to {
    clip-path: circle(125%);
  }
}

[transition-style="in:circle:center"] {
  animation: 2.5s cubic-bezier(.25, 1, .30, 1) circle-in-center both;
}
	
	img{
		border-radius: 100%;
		border-style: solid;
		border-color: orange;
		border-width: 0.5rem;
		animation-name: circle-in-center;
		animation-duration: 2s;
	}
	svg{
		float: left;
	}
body{
		text-align: center;
		background-color: #eedecc;
    font-family: 'Calibri', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='105' viewBox='0 0 80 105'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='death-star' fill='%23ac9292' fill-opacity='0.4'%3E%3Cpath d='M20 10a5 5 0 0 1 10 0v50a5 5 0 0 1-10 0V10zm15 35a5 5 0 0 1 10 0v50a5 5 0 0 1-10 0V45zM20 75a5 5 0 0 1 10 0v20a5 5 0 0 1-10 0V75zm30-65a5 5 0 0 1 10 0v50a5 5 0 0 1-10 0V10zm0 65a5 5 0 0 1 10 0v20a5 5 0 0 1-10 0V75zM35 10a5 5 0 0 1 10 0v20a5 5 0 0 1-10 0V10zM5 45a5 5 0 0 1 10 0v50a5 5 0 0 1-10 0V45zm0-35a5 5 0 0 1 10 0v20a5 5 0 0 1-10 0V10zm60 35a5 5 0 0 1 10 0v50a5 5 0 0 1-10 0V45zm0-35a5 5 0 0 1 10 0v20a5 5 0 0 1-10 0V10z' /%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
	}
	div{
		background-color: rgba(255,255,255,.5);
		border-radius: 1rem;
		background-size:cover ;
	}
	p{
		font-size: 1.3rem;
	}

         button {background-image: linear-gradient(to right, #FF512F 0%, #F09819  51%, #FF512F  100%)}
         button {
            margin: 10px;
            padding: 0.5rem;
            text-align: center;
          	
          	font-size: 1.5rem;
            transition: 0.5s;
            background-size: 200% auto;
            color: white;            
            box-shadow: 0 0 20px #eee;
            border-radius: 10px;
            
          }
          button:hover {
            background-position: right center; /* change the direction of the change here */
            color: #fff;
            text-decoration: none;
          }
         h1{
         	font-size: 2.5rem;
         }
	b{font-size: 1.5rem;}
	@media only screen and (orientation:portrait) {
        #contenido,#Capa_1,#c { display:none; }
        #aviso-movil-horizontal { 
          display:block;
      font-size: 1rem;
                text-align: center;
                font-weight: bolder;}
		    
      
    }

    @media only screen and (orientation:landscape) {
        #aviso-movil-horizontal { display:none; }
    }