*{margin: 0 auto; box-sizing: border-box;}
html{scroll-behavior: smooth;}

button{
  color: #000;
  background-color: #fff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.5em;
  padding: 5px 10px;
  text-align: left;
}


.activo{
background-color: rgb(191, 191, 191);
}

img{
  margin-top: 10px;
}

.demasiadogrande{
  max-width: 50%;
}

.contenedor-imagen {
  position: relative;
  display: inline-block;
}

body{
  background-image: url(fons/torre.gif); 
  background-size: 100%;
  overflow-y: hidden;
  overflow-x: hidden;}


.contenedor{
  display: flex;
  align-items: flex-start;
  gap: 0;
}

.selectorestilo{
  font-size: 0.6em;
  margin-top: 15px;
  margin-left: 0;
  color: #ffffff;
  font-family: 'Times New Roman', Times, serif;
}

.contador{
  color: #000;
}

main{
  font-family: 'Arial', Helvetica, sans-serif;
  font-weight: 500;
  font-size: 1.5em; 
  line-height: 150%;
  margin: 15px;
  box-shadow:  1px 1px 5px #0000003f;
  height: 96vh;
  width: 50vw; 
  text-align: left; 
  padding: 10px; 
  position: relative; 
  background-color: #fff;
  overflow-x: hidden;
  transition: ease; transition-duration: 1s;
}

.portada{width: 50%;}
main img{width: 100%;}
main video{width: 100%;}

strong{
  font-style: normal; 
  font-weight: 400; 
  color: rgb(47, 0, 255); 
  font-family: 'Times New Roman', Times, serif;
  text-decoration: none; 
  text-underline-offset: 2px; 
  text-transform: capitalize;
}

h2{
  font-size:  inherit;
}

footer{
  display: none;
}

@media (max-width: 600px) {
  body{background-image: none; overflow-y: auto;} 
  main{width: 100vw; margin: 0 auto; height: 100%; text-shadow: none; box-shadow: none; font-size: 1.7em;}
	
	ol{margin: 0}  
	
  #boton-estilo1, #boton-estilo2{display: none;}
  
  footer{
  display: flex;
  justify-content: flex-start;
  position: fixed;
  bottom: 0;
  left: 0;
  background: transparent;
  color: white;
  text-align: left;
  padding-bottom: 15px;
  margin: 0 auto;
}

#botones.visible{
  display: flex;
}

nav div{
  margin: 0 auto;
  flex-direction: column;
  gap: 20px;
  width: 100vw;
}

nav{
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100vw;
}

nav button, nav div button, .boton-menu{
  margin: 0 auto;
  background-color: #d5d5d5;
  box-shadow: 0.5px 0.5px 3px #000000a5;
  border: none;
  width: 94%;
}

nav a:link, nav a:visited{
  color: #000;
  text-decoration: none;
}

nav a:active{
  color: #000;
  text-decoration: none;
}

  .contenedor{
  display: flex;
  flex-direction: column;}
  .amagat{
    display: none;
    }
 
  .contador, .clickvideo{
  font-size: 1em;
  }

  #botones.oculto {
  display: none !important;
  flex-direction: column;
}

#botones.visible {
  display: flex !important;
}

}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


@keyframes fadeDown {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(20px);
  }
}


a:link, a:visited{
  color: rgb(255, 0, 72);
}
a:hover{
  color: rgb(147, 224, 32);
}