:root {
  --hue: 205;
  --saturation: 100%;
  --lightness: 50%;
  --primary-color: hsl(var(--hue), var(--saturation), var(--lightness)); /*azul claro*/
  --secondary-color: hsl(calc(var(--hue) + 180), var(--saturation), var( --lightness)); /*rojo-anaranjado*/
  --terciary-color: hsl(calc(var(--hue) - 120), var(--saturation), var(--lightness)); /*verde claro*/
  --body-bg: hsl(var(--hue), calc(var(--saturation) * 0.05), calc(var(--lightness) + 40%));
  --body-bg-pink: hsl(calc(var(--hue) * 0), calc(var(--saturation) * 0.67), calc(var(--lightness) + 30%));
  --font-family-alt: "Quattrocento";
  --font-family-second: "IBM Plex Serif", serif;
  --font-size-sm: clamp(0.8rem, 0.17vw + 0.76rem, 0.89rem);
  --font-size-base: clamp(1rem, 0.34vw + 0.91rem, 1.19rem);
  --font-size-md: clamp(1.25rem, 0.61vw + 1.1rem, 1.58rem);
  --line-height-base: 1.65;
  --offset-height: 100px;
}

/* ESTILO PAGINA CONTENT ACORDEÓN */

#mi-menu {
  position: relative;
  top: 50px;
  padding-bottom: 60vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.menu-toggle {
  width: 5rem;
  height: 5rem;
  border: 0.275rem solid #000;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: 0.125s ease;
}

.menu-toggle.clicked {outline: 0; background-color: #000;}
.menu-toggle.clicked span {background-color: #fff; transform: rotate(45deg);}
.menu-toggle.clicked span::before {background-color: #fff; transform: rotate(90deg) translate(-1rem);}
.menu-toggle.clicked span::after {
  background-color: #fff;
  transform: rotate(90deg) translate(1rem);
  opacity: 0;
}
.menu-toggle span {
  display: block;
  width: 4rem;
  height: 0.375rem;
  border-radius: 99em;
  background-color: #000;
  transition: 0.5s ease;
  position: relative;
}
.menu-toggle span::before, .menu-toggle span::after {
  content: "";
  display: block;
  position: absolute;
  height: 100%;
  width: 100%;
  background-color: #000;
  border-radius: 99em;
  transition: 0.5s ease;
}
.menu-toggle span::before {top: 1rem;}
.menu-toggle span::after {bottom: 1rem;}
:focus {outline: 0;}

#mi-acordeon {
  max-width: 500px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}

#mi-acordeon.active {
  transition: max-height 0.3s ease-in;
  max-height: calc(100vh - 5rem);
  box-shadow: 3px 3px 5px var(--primary-color);
}

.mi-menu-acordeon {border: 1px solid #008080; border-bottom: none;}

.mi-menu-acordeon:last-child {border-bottom: 1px solid #808080;}

.mi-menu-acordeon .header {
  background: var(--body-bg-pink);
  display: flex;
  padding: 10px;
  cursor: pointer;
  transition: .3s linear;
}
.mi-menu-acordeon .header:hover, .mi-menu-acordeon .header:focus {
  background: rgba(0, 0, 0, .8);
  color: rgba(255, 255, 255, .8);
  text-align: center;
  font-weight: bold;
  text-shadow: 2px 2px 2px rgb(255,255,255);
}

.header .title {
  flex: 1;
  font-family: var(--font-family-alt);
  font-size: var(--font-size-md);
}

.header .title .icon {
  width: 20px;
  font-size: var(--font-size-md);
  font-weight: bold;
}

.mi-menu-acordeon .content {
  background: var(--body-bg);
  max-height: 0;
  padding: 0;
  overflow: hidden; 
  transition: max-height 0.5s ease-out;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}
.mi-menu-acordeon .content:hover {
  transition: .5s linear;
  box-shadow: 3px 3px 5px var(--primary-color), inset 3px 3px 5px var(--primary-color);
}
.mi-menu-acordeon .content-transition {
  max-height: 80vh;
  overflow-y: auto;
  transition: max-height 0.5s ease-in;
}
.mi-menu-acordeon .content p {
  margin: 10px;
  transition: .3s linear;
}
.mi-menu-acordeon .content p:hover, .mi-menu-acordeon .content p:focus {
  padding: 3px 3px 3px 10px;
  border-bottom: 1px solid currentColor;
  font-weight: bold;
  font-style: italic;
  text-indent: -7px;
  box-shadow: 3px 3px 5px var(--primary-color);
  transform: translate(-5px, 5px);
}
.mi-menu-acordeon .content p a {
  font-family: var(--font-family-second);
  text-decoration: none;
  font-size: var(--font-size-base);
  color: var(--primary-color); 
}

/* Estilos para página metodos_width_detail */

.flex-details {
    width: 100%;
    max-width: 50vw;
    margin: 100px auto;
    display: flex;
    flex-direction: column;
}
  
.flex-details .info {
    overflow:hidden;
    position:relative;
}

.flex-details details {
    background: #eeebdc;
    border-radius: 5px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
.flex-details details[open] + .info::after {line-height:18px !important;}
.flex-details details[open] > summary {border-bottom: 2px solid #fff9f1;}
.flex-details details[open] > summary::after {transform: rotate(-180deg);}
.flex-details details summary::-webkit-details-marker {display: none;}
.flex-details details summary {
    cursor: pointer;
    font: 600 20px/24px 'Roboto', arial, sans-serif;
    -webkit-tap-highlight-color: rgba(0,0,0,0); /* for iOS Safari */
    font-weight: bold;
    padding: 10px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.flex-details summary::after {
    content: "\25BC";
    transition: 0.2s;
}
.flex-details summary:focus {outline:none !important;}
.flex-details .content {
    background: rgba(255, 153, 102, .2);
    display: flex;
    justify-content: center;
    width: 100%;
    position: absolute;
    bottom: 0;
    z-index: 1;
}
/* .content.primero {transform: translateY(-100px); z-index: -1;} */
.flex-details .content p {
    /* font:300 16px/18px 'Roboto', arial, sans-serif !important; */
    font-family: "Roboto", arial , sans-serif !important;
    font-size: 16px;
    line-height: 18px;
    font-weight: 300;
}
.flex-details pre {font-size: var(--font-size-sm);} 
.flex-details .info::after {
    width: 100%;
    transition: 0.5s linear;
    font: 300 16px/0px 'Roboto', arial, sans-serif;
    color: #0000;
    white-space: pre-wrap;
    position: relative;
    display: block;
    z-index: 0;
    content: "Cascading Style Sheet (CSS) is a style sheet language used for describing the presentation of a document written in a markup language such as HTML. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.\a\aCascading Style Sheet (CSS) is a style sheet language used for describing the presentation of a document written in a markup language such as HTML. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.\a\aCascading Style Sheet (CSS) is a style sheet language used for describing the presentation of a document written in a markup language such as HTML. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.\a\aCascading Style Sheet (CSS) is a style sheet language used for describing the presentation of a document written in a markup language such as HTML. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.\a\aCascading Style Sheet (CSS) is a style sheet language used for describing the presentation of a document written in a markup language such as HTML. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.\a\a"
}
.flex-details .info.infohtml::after {
    content: "Cascading Style Sheet (CSS) is a style sheet language used for describing the presentation of a document written in a markup language such as HTML. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.\a\atechnology of the World Wide Web, alongside HTML and JavaScript.\a\a";
}

/* Estilos para el menu de navegación con input */

#menu_paginas {
  display: flex; /*100vw; medida que da el ancho del viewport de la pantalla*/
  height: calc(100vh - 100px); /*Todo el alto de la pantalla menos 100px*/
  max-width: 300px; 
  opacity: 0; 
  position: fixed; 
  right: -100vw; 
  top: 100px; 
  transition: 0.5s 0.75s; 
  z-index: 100000; 
  overflow: hidden; 
  overflow-y: auto; 
  /*-webkit-overflow-scrolling: touch;*/
  background: #000e; 
  box-shadow: -3px 3px 6px #888;
}

#menu_paginas #menu_input {
  width: 90%;
  max-width: 400px;
  margin: auto;
  padding: 60px 0;
}

#menu_paginas #menu_input div {
  padding-left: 15px;
  background-image: linear-gradient(90deg, transparent 5px, #a07f52 5px, 6px, transparent 6px);
}

#menu_paginas #menu_input p {
  position: relative;
  padding: 0; 
  margin: 0; 
  font: 16px/22px arial; 
  color: #fff;
  text-indent: 15px;
}

#menu_paginas #menu_input p label {
  display: block; 
  text-transform: uppercase; 
  margin-left: -15px;
  color: #fff;
  cursor: pointer;
}

#menu_paginas #menu_input p label:hover {color:#fff;}

#menu_paginas #menu_input div p {
  padding: 0;
  margin: 0;
  height: 0;
  overflow: hidden;
}

#menu_paginas #menu_input p label:last-child {
  display: none;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #0000;
}

#menu_paginas #menu_input p label span {
  display: inline-block;
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-top-color: #aaa;
  margin: 0 5px 0 0;
}

#menu_paginas #menu_input p a {
  color: #aaa;
  text-decoration: none;
  font: 16px/22px arial, sans-serif;
}

#menu_paginas #menu_input p a:hover {color: #fff;}
#menu_paginas #menu_input div p {height: 20px;}

input.abrir,
input.cerrar {display:none;}
#menu_paginas #menu_input div p {height: 0px; transition: 0.75s;}

/* Icono */

#menu_toggle {padding:0; margin:0; position:fixed; right:40px; top:20px; height:32px; width:36px; text-align:center; z-index:100020;}
#menu_toggle span {display:block; width:100%; height:100%; box-sizing:border-box; border:2px solid #000; border-width:4px 0 4px 0; transition:0.5s 0.5s;}
#menu_toggle span::before {display:block; content:""; width:36px; height:4px; background:#000; position:absolute; top:14px; left:0; z-index:1; transition:transform 0.5s;}
#menu_toggle span::after {display:block; content:""; width:36px; height:4px; background:#000; position:absolute; top:14px; left:0; z-index:1; transition:transform 0.5s;}
#menu_toggle label {display:block; width:100%; height:100%; position:absolute; left:0; top:0; cursor:pointer; z-index:2;}
#menu_toggle label:nth-of-type(2) {display:none;}

.abrir:checked ~ #menu_toggle {background:transparent; transition: 0.5s;}
.abrir:checked ~ #menu_toggle label {display:none;}
.abrir:checked ~ #menu_toggle label:last-child {display:block;}
.abrir:checked ~ #menu_toggle span {border-color:transparent; transition:0s;}
.abrir:checked ~ #menu_toggle span::before {transform:rotate(405deg); transform-origin:center center;}
.abrir:checked ~ #menu_toggle span::after {transform:rotate(495deg); transform-origin:center center;}

.abrir:checked ~ #menu_paginas {right:0; opacity:1; transition: 0.5s 0.5s;}

.menu1:checked ~ #menu_paginas #menu_input .pmenu1 + div > p,
.menu2:checked ~ #menu_paginas #menu_input .pmenu2 + div > p,
.menu3:checked ~ #menu_paginas #menu_input .pmenu3 + div > p,
.menu4:checked ~ #menu_paginas #menu_input .pmenu4 + div > p,
.menu5:checked ~ #menu_paginas #menu_input .pmenu5 + div > p,
.menu6:checked ~ #menu_paginas #menu_input .pmenu6 + div > p,
.menu7:checked ~ #menu_paginas #menu_input .pmenu7 + div > p,
.menu8:checked ~ #menu_paginas #menu_input .pmenu8 + div > p,
.menu9:checked ~ #menu_paginas #menu_input .pmenu9 + div > p,
.menu10:checked ~ #menu_paginas #menu_input .pmenu10 + div > p,
.menu11:checked ~ #menu_paginas #menu_input .pmenu11 + div > p {height:22px; color:#fff;}

.menu1:checked ~ #menu_paginas #menu_input .pmenu1 > label:last-child,
.menu2:checked ~ #menu_paginas #menu_input .pmenu2 > label:last-child,
.menu3:checked ~ #menu_paginas #menu_input .pmenu3 > label:last-child,
.menu4:checked ~ #menu_paginas #menu_input .pmenu4 > label:last-child,
.menu5:checked ~ #menu_paginas #menu_input .pmenu5 > label:last-child,
.menu6:checked ~ #menu_paginas #menu_input .pmenu6 > label:last-child,
.menu7:checked ~ #menu_paginas #menu_input .pmenu7 > label:last-child,
.menu8:checked ~ #menu_paginas #menu_input .pmenu8 > label:last-child,
.menu9:checked ~ #menu_paginas #menu_input .pmenu9 > label:last-child,
.menu10:checked ~ #menu_paginas #menu_input .pmenu10 > label:last-child,
.menu11:checked ~ #menu_paginas #menu_input .pmenu11 > label:last-child {display:block;}

.menu1:checked ~ #menu_paginas #menu_input .pmenu1 > label,
.menu2:checked ~ #menu_paginas #menu_input .pmenu2 > label,
.menu3:checked ~ #menu_paginas #menu_input .pmenu3 > label,
.menu4:checked ~ #menu_paginas #menu_input .pmenu4 > label,
.menu5:checked ~ #menu_paginas #menu_input .pmenu5 > label,
.menu6:checked ~ #menu_paginas #menu_input .pmenu6 > label,
.menu7:checked ~ #menu_paginas #menu_input .pmenu7 > label,
.menu8:checked ~ #menu_paginas #menu_input .pmenu8 > label,
.menu9:checked ~ #menu_paginas #menu_input .pmenu9 > label,
.menu10:checked ~ #menu_paginas #menu_input .pmenu10 > label,
.menu11:checked ~ #menu_paginas #menu_input .pmenu11 > label {color:#fff; cursor:pointer;}

.menu1:checked ~ #menu_paginas #menu_input .pmenu1 > label span,
.menu2:checked ~ #menu_paginas #menu_input .pmenu2 > label span,
.menu3:checked ~ #menu_paginas #menu_input .pmenu3 > label span,
.menu4:checked ~ #menu_paginas #menu_input .pmenu4 > label span,
.menu5:checked ~ #menu_paginas #menu_input .pmenu5 > label span,
.menu6:checked ~ #menu_paginas #menu_input .pmenu6 > label span,
.menu7:checked ~ #menu_paginas #menu_input .pmenu7 > label span,
.menu8:checked ~ #menu_paginas #menu_input .pmenu8 > label span,
.menu9:checked ~ #menu_paginas #menu_input .pmenu9 > label span,
.menu10:checked ~ #menu_paginas #menu_input .pmenu10 > label span,
.menu11:checked ~ #menu_paginas #menu_input .pmenu11 > label span {border-top-color:#a07f52; transition: 0.5s; transform-origin: 50% 30%; transform: scale(1.5) rotate(180deg);}
/* ESTILO PARA PAGINA METODO TOGGLE */

/* clases que se añaden a body con javascript */
 
.black {background: black;}
.lightgreen {background: lightgreen;}
.lightblue {background: lightblue;}
.white {background: white;}

#contenido {transition: margin-left 0.5s linear; max-width: 92%; padding-left: 80px;}
#contenido.margen {transition: all 0.5s; margin-left: 350px; max-width: 90%;}
#contenido-toggle, #contenido-stroke, #contenido-parallax,
#contenido-boton-color, #contenido-width {transition: all 0.5s; font-family: var(--font-family-second);}

#contenido-toggle p, #contenido-stroke p, #contenido-parallax p,
#contenido-boton-color p, #contenido-width p:not(.flex p) {
  font-size: calc(var(--font-size-base) * 1.1);
  line-height: var(--line-height-base);
  width: 100%;
  max-width: 95%;
  margin-left: 30px;
  transition: margin-left 0.2s;
}

#contenido-toggle h1, #contenido-toggle h2, #contenido-toggle h3,
#contenido-stroke h1, #contenido-stroke h2, #contenido-stroke h3,
#contenido-parallax h1, #contenido-parallax h2, #contenido-parallax h3,
#contenido-boton-color h1, #contenido-boton-color h2, #contenido-boton-color h3,
#contenido-width h1, #contenido-width h2, #contenido-width h3  {display: inline-block; transition: 0.5s;}

#contenido-toggle h1:hover, #contenido-toggle h2:hover, 
#contenido-toggle h3:hover, #contenido-stroke h1:hover,
#contenido-stroke h2:hover, #contenido-stroke h3:hover,
#contenido-parallax h1:hover, #contenido-parallax h2:hover, 
#contenido-parallax h3:hover, #contenido-boton-color h1:hover, 
#contenido-boton-color h2:hover, #contenido-boton-color h3:hover,
#contenido-width h1:hover, #contenido-width h2:hover, 
#contenido-width h3:hover {
 transition: .5s linear;
 padding: 5px;
 color: hsl(calc(var(--hue) / 2), calc(var(--saturation) * 0.7), calc(var(--lightness) * 1.2));
 box-shadow: 2px 2px 8px var(--card-shadow);  
}

#contenido-toggle code.enlace, 
#contenido-stroke code.enlace,
#contenido-width code.enlace {
  display: inline-block; 
  font-size: var(--font-size-base); 
  color: var(--color-code);
  font-weight: 500;
  transition: .5s;
  white-space: nowrap;
}

#contenido-toggle code.enlace:hover, 
#contenido-stroke code.enlace:hover,
#contenido-width code.enlace:hover {box-shadow: 2px 2px 8px var(--card-shadow);}

#contenido-toggle b, #contenido-stroke b,
#contenido-width b {
  display: inline-block; 
  font-size: var(--font-size-sm);
  transition: .5s;
  white-space: wrap;
}

#contenido-toggle b:hover,
#contenido-stroke b:hover,
#contenido-width b:hover {
  transition: .5s;
  letter-spacing: 1.3px;
  word-spacing: -6px;
  box-shadow: 2px 2px 8px var(--card-shadow);
}

#contenido-toggle .explicacion .resumen {display: inline-block; margin: 0 0 30px 30px; font-weight: bold;}

#contenido-toggle .ejemplo {
  margin: 0 auto;
  padding: 10px 0;
  width: 100%;
  max-width: 900px;
  box-shadow: 2px 1px 10px var(--card-shadow); 
  position: relative;
  transition: .5s;
}
#contenido-toggle .ejemplo .info {overflow: hidden; position: relative;}
#contenido-toggle .ejemplo summary {
  cursor: pointer;
  font: 600 20px/24px "Roboto", arial, sans-serif;
}
#contenido-toggle .ejemplo summary:focus {outline: none !important;}

#contenido-toggle .ejemplo #primerejem {
  display: block;
  width: 100%;
  position: absolute;
  z-index: 1;
  background: var(--body-bg); /*linear-gradient(90deg, #CCFFCC, #CCFFFF)*/
}

#contenido-toggle #primerejem p {
  font: 300 20px/24px 'Roboto', arial, sans-serif !important;
}

#contenido-toggle .ejemplo .info::after {
  width: 100%; 
  height: auto;
  transition: 1s linear; 
  font: 300 16px/0px 'Roboto', arial, sans-serif; 
  color: #0000; 
  white-space: pre-wrap; 
  position: relative; 
  display: block; 
  z-index: 0; 
  content: "texto para rellenar mas contenido\a\atexto para rellenar mas contenido\a\atexto para rellenar mas contenido\a\atexto para rellenar mas contenido\a\atexto para rellenar mas contenido\a\atexto para rellenar mas contenido\a\atexto para rellenar mas contenido\a\atexto para rellenar mas contenido\a\atexto para rellenar mas contenido\a\atexto para rellenar mas contenido\a\atexto para rellenar mas contenido\a\atexto para rellenar mas contenido\a\atexto para rellenar mas contenido\a\atexto para rellenar mas contenido\a\atexto para rellenar mas contenido\a\atexto para rellenar mas contenido\a\atexto para rellenar mas contenido\a\atexto para rellenar mas contenido\a\atexto para rellenar mas contenido\a\atexto para rellenar mas contenido\a\atexto para rellenar mas contenido\a\atexto para rellenar mas contenido\a\atexto para rellenar mas contenido\a\atexto para rellenar mas contenido\a\atexto para rellenar mas contenido\a\atexto para rellenar mas contenido\a\atexto para rellenar mas contenido\a\atexto para rellenar mas contenido\a\atexto para rellenar mas contenido\a\atexto para rellenar mas contenido\a\atexto para rellenar mas contenido\a\atexto para rellenar mas contenido\a\atexto para rellenar mas contenido\a\atexto para rellenar mas contenido\a\atexto para rellenar mas contenido\a\atexto para rellenar mas contenido\a\atexto para rellenar mas contenido\a\atexto para rellenar mas contenido\a\atexto para rellenar mas contenido\a\atexto para rellenar mas contenido\a\atexto para rellenar mas contenido\a\atexto para rellenar mas contenido\a\atexto para rellenar mas contenido\a\atexto para rellenar mas contenido\a\atexto para rellenar mas contenido\a\atexto para rellenar mas contenido\a\atexto para rellenar mas contenido\a\atexto para rellenar mas contenido\a\atexto para rellenar mas contenido\a\atexto para rellenar mas contenido\a\atexto para rellenar mas contenido\a\atexto para rellenar mas contenido\a\atexto para rellenar mas contenido\a\atexto para rellenar mas contenido\a\atexto para rellenar mas contenido\a\atexto para rellenar mas contenido\a\atexto para rellenar mas contenido\a\atexto para rellenar mas contenido\a\atexto para rellenar mas contenido\a\atexto para rellenar mas contenido\a\atexto para rellenar mas contenido\a\atexto para rellenar mas contenido\a\atexto para rellenar mas contenido\a\atexto para rellenar mas contenido\a\atexto para rellenar mas contenido\a\atexto para rellenar mas contenido\a\atexto para rellenar mas contenido\a\atexto para rellenar mas contenido\a\atexto para rellenar mas contenido\a\atexto para rellenar mas contenido\a\atexto para rellenar mas contenido\a\atexto para rellenar mas contenido\a\atexto para rellenar mas contenido\a\atexto para rellenar mas contenido\a\atexto para rellenar mas contenido\a\atexto para rellenar mas contenido\a\atexto para rellenar mas contenido\a\atexto para rellenar mas contenido\a\atexto para rellenar mas contenido\a\atexto para rellenar mas contenido\a\atexto para rellenar mas contenido\a\atexto para rellenar mas contenido\a\atexto para rellenar mas contenido\a\atexto para rellenar mas contenido\a\atexto para rellenar mas contenido\a\atexto para rellenar mas contenido\a\a"
}

#contenido-toggle .ejemplo details[open] + .info::after {line-height: 20px;}
#contenido-toggle details summary span:nth-child(2) {display: none;}
#contenido-toggle details[open] summary span:nth-child(1) {display: none;}
#contenido-toggle details[open] summary span:nth-child(2) {display: inline-block;}

/* Estilos para el div de los botones de cambiar background, 
color y caja azul */

#contenido-toggle #botones-toggle {
  transition: 0.3s linear;
  height: 300px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 50px;
}
#contenido-toggle #btn-color {
  position: absolute;  
  display: block;
  transition: all 0.3s linear;
  width: auto;
  height: auto;
  background: black;
  color: white;
  padding: 10px;
  border: 2px solid white;
  border-radius: 10%;
  opacity: 0;
  cursor: pointer;
  z-index:-1;
}
#contenido-toggle #btn-color.active {
  position: relative; 
  transition: 0.3s linear;
  opacity: 1;
  z-index: 100;
  transform: translate(-215px, -150px);
}
#contenido-toggle #bg_boton {
  height: 10em; 
  margin: 10px;
  background: black;
  color: rgb(247, 217, 217);
  border-radius: 100%;
  cursor: pointer;
  transition: all 0.5s ease-in-out 0.1s;
}
#contenido-toggle #bg_boton:hover {
  transition: all 0.5s ease-in-out 0.1s;
  background-color: rgb(255, 224, 224);
  color: rgb(44, 2, 2);
  border-radius: 0%;
}
#contenido-toggle #bg_boton:hover p {
  transition: all 0.5s linear 0.1s;
  letter-spacing: 2px;
  font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  text-align: center;
}
#contenido-toggle #bg_boton p {width: 50%;margin-left: 25%;}
#contenido-toggle #menu_bg { 
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  margin-left: 20px;
  width: 0;
  height: 0;
  opacity: 0;
  overflow: hidden;
  transform-origin: left top;
  transition: all .5s ease 0.2s;
}
#contenido-toggle #menu_bg.active {
  transition: all .5s ease 0.2s;
  position: relative;
  width: 260px;
  height: 260px;
  margin-top: 5px;
  color: white;
  background: royalblue;
  box-shadow: 2px 2px 10px rgba(65, 105, 225, 0.8);
  border: 2px solid white;
  border-radius: 5px;
  opacity: 1;
  overflow: visible;
}
#contenido-toggle #menu_bg .botones1 {margin: 10px; margin-left: 20px; overflow: visible;}
#contenido-toggle .etiqueta {
   margin-left: 20px;
   font-size: var(--font-size-sm);
   font-weight: 800;
   color: var(--secondary-color);
   text-decoration: underline;
   padding: 5px;
}
#contenido-toggle #menu_bg:hover {
   transition: all 0.5s linear 0s;
   border: 2px solid black;
   border-radius: 30%;
}
#contenido-toggle #menu_bg:hover .botones1 {transition: 0.3s linear; transform: translateY(-20px);}
#contenido-toggle #menu_bg:hover .etiqueta {
   transition: all 0.3s linear;
   color: white;
   text-align: center;
   margin-right: 20px;
   padding-top: 10px;
   padding-bottom: 20px;
}
#contenido-toggle #menu_bg:hover .negro {
   transition: all 0.3s linear;
   background-color: black;
   color: white;
   font-size: var(--font-size-sm);
   padding-left: 10px;
}
#contenido-toggle #menu_bg:hover .verde {
   transition: all 0.3s linear;
   background-color: rgb(129, 228, 129);
   color: green;
   font-size: var(--font-size-sm);
   font-weight: bold;
   padding-left: 10px;
}
#contenido-toggle #menu_bg:hover .azul {
   transition: all 0.3s linear;
   background-color: rgb(191, 238, 238);
   color: blue;
   font-size: var(--font-size-sm);
   font-weight: bold;
   padding-left: 10px;
}
#contenido-toggle #menu_bg:hover .blanco {
   transition: all 0.3s linear;
   background-color: white;
   color: black;
   font-size: var(--font-size-sm);
   font-weight: 600;
   padding-left: 10px;
   opacity: 0.2;
}

/* CSS para hacer aparecer y desaparecer los div controlados por los botones */

#contenido-toggle #div1, #contenido-toggle #div2,
#contenido-toggle #div3, #contenido-toggle #div4 {
   position: absolute;
   width: 130px;
   height: 130px;
   top: 10%;
   left: 110%;
   cursor: pointer;
   overflow: hidden;
   visibility: hidden;
   opacity: 0;
   border: 2px solid black;
   border-radius: 20%;
   text-align: center;
   color: black;
   font-weight: bold;
   transition: all 0.3s ease 0s;
}
#contenido-toggle .botones1 input, #contenido-toggle .botones1 label {cursor: pointer;}
#contenido-toggle .comentario {display: inline-block; font-size: var(--font-size-sm); max-width: 90%;margin: 30px 10px;}
#div1 {background-color: black; color: white;}
#div1:hover {transition: all 0.3s linear 0s;border: 2px solid white;border-radius: 0%;}
#div1:hover span {transition: all 0.3s linear 0s;opacity: 0.4;}
#control1:checked ~ #div1 {display: block; transition: .3s linear; opacity: 1; visibility: visible; color: white;}
#div2 {background: lightgreen;}
#control2:checked ~ #div2 {display: block; transition: .3s linear; opacity: 1; visibility: visible;}
#div2:hover {transition: all 0.3s linear 0s;border: 2px solid green;border-radius: 0%;}
#div3 {background: lightblue;}
#control3:checked ~ #div3 {display: block; transition: .3s linear; opacity: 1; visibility: visible;}
#div3:hover {transition: all 0.3s linear 0s;border: 2px solid blue;border-radius: 0%;}
#div4 {left: 90%; background: transparent;}
#control4:checked ~ #div4 {display: block; transition: .3s linear; opacity: 1; visibility: visible;}
#div4:hover {transition: all 0.3s linear 0s;background: grey;opacity: 0.4;border: 2px solid white;border-radius: 0%;}

/* ESTILO PARA PAGINA ANIMATION-STROKE animaciones scroll */

/* Estilo para aplicación scrolloffset */

#main {
  position: relative; 
  margin: 100px 50px;
  width: 100%; 
  max-width: 60%; 
  height: 50vh;
}

#instructions {
  position: absolute;
  left: 25%;
  top: -5%;
  width: 50%;
  max-width: 300px;
  height: fit-content;
  margin: auto;
  text-align: center;
  font-weight: bold;
  font-family: "Lato", sans-serif;
  transition: opacity 500ms;
}

#instructions.hidden {transition: .5s; opacity: 0;}
.vh-container {position: absolute; left: -10%;}
.vh-line {position: absolute; height: 400px; top: 0; left: 0; width: 2px; margin-left: 5px; background-color: black;}
.vh-line::before {
  position: absolute;
  content: "";
  top: -6px;
  left: -4px;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 15px solid black;
}
.vh-line::after {
  position: absolute;
  content: "";
  top: 400px;
  left: -4px;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 15px solid black;
}
.vh-display {
  position: absolute;
  height: max-content;
  top: 200px;
  text-align: center;
  transform-origin: left;
  left: 25px;
  margin: auto;
  transform: rotateZ(-90deg) translateX(-50%);
}
#window-height, #offset-top {color: red;}
.scroll-offset {text-align: right; position: fixed; top: 390px; width: 100%; max-width: 49%; height: var(--offset-height); border-top: 2px dashed red;}
.element-container {position: relative; top: 140px; height: 250px;display: flex;flex-direction: column;align-items: center; transition: all 500ms;}
.element-container b {font-size: 18px; padding: 5px;}
.js-scroll {width: 50%; height: 300px; min-width: 300px; background-color: var(--body-bg); transition: all 500ms;}
.js-scroll.scrolled {transition: all 500ms; background-color: rgba(0, 20, 255, .7); border-radius: 10%; height: 50%; box-shadow: 2px 2px 5px var(--card-shadow);}

/* Estilo para el contenedor de imágenes animadas */
  
#cont-img {
  position: relative;
  width: 100%;
  max-width: 800px;
  height: 150vh;
  margin: 20vh auto;
  border: calc(var(--border-width) * 2) solid var(--card-border-color);
  display: flex; 
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}

#cont-img #cont-img1, #cont-img #cont-img2, #cont-img #cont-img3 {
  width: 100%;
  max-width: 700px;
  opacity: 0;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  transition: all .8s linear;
}

#cont-img #cont-img1.active,
#cont-img #cont-img3.active {
  transition: all 0.8s;
  opacity: 1;
  transform: translate(0, 0) rotate(360deg) scale(1); 
  background-position: 0% 0%;
}

#cont-img #cont-img1.active1 {
  transition: all 0.8s; 
  transform: translate(30px, 0) rotate(-360deg) scale(1.2); 
  background-position: 10% 0%; 
  opacity: 0.5;
}

#cont-img #cont-img2.active1 {
  transition: all 0.8s;
  transform: translate(60px, 0) rotate(-360deg) scale(1.2); 
  background-position: 90% 0%; 
  opacity: 0.5;
}

#cont-img #cont-img3.active1 {
  transition: all 0.8s;
  transform: translate(60px, 0) rotate(-360deg) scale(1.2); 
  background-position: 90% 0%; 
  opacity: 0.5;
}
  
#cont-img #cont-img2.active {
  transition: all 0.8s;
  opacity: 1; 
  transform: translate(0, 0) rotate(360deg) scale(1); 
  background-position: 100% 0%;
}

#cont-img #cont-img1 span, 
#cont-img #cont-img2 span, 
#cont-img #cont-img3 span {
  display: block;
  max-width: 40%;
  font-size: calc(var(--font-size-base) * 1.2);
  text-align: center;
  background: var(--body-bg);
  padding: 5px;
  margin-top: 30px;
  opacity: 0;
  transition: all .8s linear;
}

#cont-img #cont-img1 span.active, 
#cont-img #cont-img2 span.active,
#cont-img #cont-img3 span.active {
  transition: all 0.8s; 
  background: var(--bg-color-pre); 
  color: var(--color-pre); 
  opacity: 1;
}

#cont-img #cont-img1 span.active1,
#cont-img #cont-img2 span.active1,
#cont-img #cont-img3 span.active1 {
  transition: all 0.8s; 
  background: var(--body-bg); 
  color: var(--secondary-color); 
  border: var(--border-width) solid var(--card-border-color);
  opacity: 1;
}

/* Estilo del contenedor de la flecha y la cabecera animada */

.flecha-menu {position: relative; margin-bottom: 100px;}

/* CSS para el SVG, el menu que abre y cierra */

.anim-svg {
  position: absolute;
  top: 50px;
  width: 100%;
  height: 100px;
  background: #B5446E;
  font-family: "Roboto", sans-serif;
}
.anim-svg .logo {
  display: inline-block;
  width: 100%;
  max-width: 700px;
  height: 100px;
  z-index: 2;
}
.anim-svg .logo-svg {
  width: 100%;
  display: block;
  max-width: 700px;
  margin: 0px;
  position: relative;
  left: 10%;
  top: 10%;
  height: 100px;
}
.logo-item {transition: all 0.3s ease-in-out 0s;}
.logo-item--out {transition: all 0.2s ease-in-out 0.2s;opacity: 1;visibility: visible;}
.is-small .logo-item--out {opacity: 0;visibility: hidden;transition-delay: 0s;}
.logo-item--move {transition: all 0.36s ease-in-out 0s;}
.is-small .logo-item--move {transform: translateX(-95px);transition-delay: 0s;}
.logo .texto {
  position: relative;
  display: inline-block;
  width: 100%;
  max-width: 700px;
  word-break: break-word;
  margin: 0px;
  -webkit-text-stroke: 1px #000000;
  -webkit-font-smoothing: subpixel-antialiased;
}
.logo .texto::after {
  color: #ffffff;
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 99;
  display: inline-block;
  overflow: hidden;
  width: 0%;
  white-space: pre;
  word-break: normal;
  content: attr(data-text);
  transition-timing-function: cubic-bezier(0.39, 0.13, 0.55, 0.88);
  transition-duration: 0.7s;
  transition-property: width;
  will-change: width;
 /* -webkit-text-fill-color: #000000; */
  -webkit-text-stroke: unset; 
}
.logo:hover .texto::after {
  transition: all 0.5s linear;
  width: 100%;
  transform: translate(120px, 70px);
  font-size: 2em;
}

/* Estilo del menu-flecha */

#menu-scroll {
  display: inline-block;
  position: relative;
  top: 220px;
  left: 5px;
  transition: .6s linear; 
  transform: none;
}
#menu-scroll #principal {
  display: flex; 
  flex-direction: column; 
  height: 0;
  width: 0; 
  opacity: 0;
  overflow: hidden;
}    
#cont-html, #cont-css, #cont-js, #cont-mascotas, #cont-cocina, #cont-deportes {
  display: flex;
  flex-direction: column;
  position: relative; 
  top: -100%;
  height: 0;
  opacity: 0;
  max-width: 250px;
  margin: 0;
  overflow: hidden;
  z-index: -1; 
  transition: 0.3s ease-in-out;
}
#menu-scroll #principal input {display: none;}
#principal #control-html:checked ~ #cont-html {display: block; transition: 0.3s ease-in-out; top: 0; margin: 0; height: auto; opacity: 1; z-index: 100;}
#principal #control-css:checked ~ #cont-css {display: block; transition: 0.3s ease-in-out; top: 0; height: auto; opacity: 1; z-index: 100;}
#principal #control-js:checked ~ #cont-js {display: block; transition: 0.3s ease-in-out; top: 0; height: auto; opacity: 1; z-index: 100;}
#principal #control-mascotas:checked ~ #cont-mascotas {display: block; transition: 0.3s ease-in-out; top: 0; height: auto; opacity: 1; z-index: 100;}
#principal #control-cocina:checked ~ #cont-cocina {display: block; transition: 0.3s ease-in-out; top: 0; height: auto; opacity: 1; z-index: 100;}
#principal #control-deportes:checked ~ #cont-deportes {display: block; transition: 0.3s ease-in-out; top: 0; height: auto; opacity: 1; z-index: 100;}

#principal #control-html:checked + label i, #principal #control-css:checked + label i, 
#principal #control-js:checked + label i, #principal #control-mascotas:checked + label i, 
#principal #control-cocina:checked + label i, #principal #control-deportes:checked + label i {transition: 0.5s; color: black; transform: rotate(-180deg); z-index: 150;}

#menu-scroll #principal label {position: relative; display: inline-block; width: 150px; height: auto; cursor: pointer; z-index: 150;}
#menu-scroll #principal label i {position: absolute; left: 100%; display: inline-block; font-size: 1.5em; color: white; transition: 0.5s; z-index: 150;}
.menu-link {
  display: inline-block;
  text-decoration: none;
  color: white;
  padding: 2px;
  margin: 2px; 
  font-size: 1.2em;
  font-weight: 500;
  transition: 0.3s linear;
  z-index: 150;
}
.menu-link:hover {transition: 0.3s; box-shadow: 2px 2px 5px rgba(0,0,0,.5);}
.alink {
  display: inline-block;
  width: auto;
  text-decoration: none;
  color: lightblue;
  padding: 2px;
  font-size: 16px;
  margin-left: 20px;
  transition: 0.3s linear;
  z-index: 150;
}
.alink:hover {transition: 0.3s; color: white;}

#menu-scroll svg {
  position: absolute;
  fill: gold;
  stroke: rgba(0, 0, 0, .5);
  stroke-width: 2; 
  display: block;
  z-index: 100;
  overflow: visible !important;
  cursor: pointer;
}

#menu-scroll.derecha {
  transition: 0.5s linear;
  background: rgba(255, 50, 50, 0.7); 
  transform: translate(-70px, 20px) rotateZ(90deg);
  max-height: 400px;
  width: 500px;
  z-index: 150;
}

#menu-scroll.derecha svg {transition: 0.3s linear; fill: green; stroke: gold;}

#principal.abajo {animation: abajo 0.5s ease-in-out 0s 1 forwards; transition: .4s ease-in;}
@keyframes abajo {
 from {height: 0; width: 0; opacity: 0; z-index: -1; overflow: hidden; transform: none;}
   to {height: 350px; width: auto;  opacity: 1; z-index: 100; overflow: visible; transform-origin: 60% -5%; transform: rotate(-90deg) translate(30px, -300px) scale(1.2);}
}

/* Estilo de la página menu_cambio_position  */

#contenido-menu {
  width: 100%;
  max-width: 90vw;
  background: var(--body-bg-pink);
  padding-bottom: 300px; /* padding para colocar el pie */
  padding-top: 60px;
}

#contenido-menu #text-formularios {
  width: 100%;
  max-width: 400px;
  height: 80vh;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  position: absolute;
  left: 50px;
  top: 80px;
  z-index: 100;
  transform: none;
  transition: .3s;
}

#contenido-menu #text-formularios.active {
  position: absolute;
  transition: all 0.5s linear 0s;
  animation: izquierda 0.5s linear 0.2s 1 forwards;
}
@keyframes izquierda {
  0% {transform: translate(0px, 80px) scale(1);}
  100% {transform: translate(650px, 0px) scale(0.8);}
}

#contenido-menu #text-formularios.active1 {
  position: sticky;
  transition: all 0.5s linear 0.2s;
  transform: translate(700px, -50px) scale(0.7);
}

/* estilo de los botones control(minimiza cabecera) y
   trigger(desplazamiento resolución pequeña) */

#contenido-menu #control {
  display: block;
  width: 40px;
  height: 40px;
  position: absolute;
  left: 15px;
  top: 10px;
  cursor: pointer;
  z-index: 100;
}
#contenido-menu #control i {display: block; font-size: calc(var(--font-size-base) * 1.5); color: green;}
#contenido-menu #control:hover {box-shadow:2px 10px 10px var(--card-shadow);}
#contenido-menu #control:focus {outline: 5px red solid;}
#contenido-menu #control.active {transition: all 0.2s ease 0s; outline: none;animation: crecer 1s ease 0s infinite alternate;}
@keyframes crecer {
  from {transform: scale(1); opacity: 1;}
   to {transform: scale(1.5); opacity: 0;}
}
#contenido-menu #control.active i {transition: .3s; color: red;}
#contenido-menu #trigger{
  display: none;
  width: 50px;
  height: 50px;
  background: var(--body-bg);
  color : var(--card-text-color);
  font-size: 30px;
  position: relative;
  cursor: pointer;
  opacity: 0; 
  transition: .3s;
}
#contenido-menu #trigger:hover{transition: all 0.5s ease; transform: scale(1.2); color: var(--terciary-color); box-shadow:2px 10px 10px var(--card-shadow);}
#contenido-menu #trigger:focus{outline:5px #0ff solid;box-shadow:2px 10px 10px var(--card-shadow);}
#contenido-menu #trigger i {padding-top: 8px;}
#contenido-menu #trigger.active {
  transition: all 0.3s linear 0s;
  animation: der 0.3s linear 0s forwards,
             centella 1s ease 0s infinite alternate;
}
@keyframes der {
  0% {left: -300px;}
 100% {left: -70px; top: 40px;}
}
@keyframes centella {
  from {transform: scale(1); opacity: 1;}
   to {transform: scale(1.5); opacity: 0;}
}
#contenido-menu #cabecera1 {
  background: var(--body-bg);
  color: var(--secondary-color);
  width: 100%;
  max-width: 400px;
  border: calc(var(--border-width) * 2) solid var(--card-border-color);
  height: 3em;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}
#contenido-menu #cabecera1.active {transition: transform 0.3s ease 0s; transform-origin: left;transform: scaleX(0);}
@keyframes width {
  0% {width: 100%;}
 100% {width: 0%; overflow: hidden; opacity: 0;}
}
#contenido-menu #titulo1 {font-size: 2em;padding: 5px 50px;}
#contenido-menu #minimizar {display: block; cursor: pointer; margin-left: 5px; font-size: 30px; color: green; transition: .3s;} 
#contenido-menu #minimizar.active {transition: all 0.3s ease; opacity: 1; transform: rotate(-180deg); background: white;} 
#contenido-menu #minimizar.active i {transition: .3s; color: red;}
#contenido-menu #minimizar:hover {transition: all .2s; padding: 5px; border: 2px solid black; border-radius: 50%; transform: scale(1.3);}
#contenido-menu #contenedor1 {position: relative;padding: 5px 0px;} 
#contenido-menu #contenido_lista {width: 100%; max-width: 400px;height: 80vh;overflow-y: auto;}
#contenido-menu #contenido_lista::-webkit-scrollbar {display: none;}
#contenido-menu #lista {
  display: block;
  width: 100%;
  background: var(--body-bg);
  color: var(--card-text-color);
  padding-left: 30px;
  margin-top: 5px;
  list-style-type: decimal;
  overflow: hidden;
  transition: .5s linear;
}
#contenido-menu #lista.active {animation: 0.5s ease replegar 1 forwards; position: relative; z-index: -1; pointer-events: none;}
@keyframes replegar {
  from {height: 100%; overflow: visible;}
    to {height: 0; overflow: hidden;}
}
#contenido-menu #lista.active1 {display: none; /*animation: 0.5s ease desaparecer 1 forwards; position: relative; z-index: -1; pointer-events: none;*/}
@keyframes desaparecer {
  from {transform-origin: 0% 0%; transform: scale(1);}
    to {transform-origin: 0% 0%; transform: scale(0);}
}
#contenido-menu #lista .sub {list-style-type: decimal;}
.sub1, .sub2, .sub3, .sub4 {height: 100%;}

.sub1.active {transition: all 0.3s linear; height: 0; transform: scaleY(0); overflow: hidden;}
.sub2.active {transition: all 0.3s linear; height: 0; transform: scaleY(0); overflow: hidden;}
.sub3.active {transition: all 0.3s linear; height: 0; transform: scaleY(0); overflow: hidden;}
.sub4.active {transition: all 0.3s linear; height: 0; transform: scaleY(0); overflow: hidden;}

#contenido-menu #lista .ancla {
  position: relative;
  padding: 5px 10px;
  text-decoration: none;
  color: var(--card-text-color);
  display: inline-block;
  font-family: arial, sans-serif;
  font-size: 1em;
  font-weight: 400;
  z-index: 10;
  transition: all .3s linear;
}
#contenido-menu #lista .ancla.active{color: lightblue; background: #000; animation: parpadeo 1s ease 0s 3 forwards;}
@keyframes parpadeo {
  0%{color: lightblue; background: #000;}
 100%{color: #000; background: lightblue;}
}
#contenido-menu #lista .ancla:hover{color: #00a368; background: yellow; border: 1px solid black; border-radius: 3px; font-family: Impact; left: 10px;}
#contenido-menu #lista .ancla:focus{color: #fff; transition: background-color .2s ease 0s; background-color: transparent;}
#contenido-menu #contenedor1 button.icon {
  position: relative;
  display: inline-block;
  height: 2em;
  cursor: pointer;
}
#contenido-menu .icon1 {top: 5px;right: -50px;}
#contenido-menu .icon2 {top: 5px;right: -168px;}
#contenido-menu .icon3 {top: 5px;right: -188px;}
#contenido-menu .icon4 {top: 5px;right: -30px;}

#contenido-menu .icon1:hover, #contenido-menu .icon2:hover,
#contenido-menu .icon3:hover, #contenido-menu .icon4:hover
{transition: all .2s; padding: 5px; border: 2px solid black; border-radius: 50%; transform: scale(1.3);}

#contenido-menu .icon1.active, #contenido-menu .icon2.active, 
#contenido-menu .icon3.active, #contenido-menu .icon4.active 
{transition: all 0.3s ease; opacity: 1; transform: rotate(-180deg); background: white;}

#contenido-menu #contenedor1 .icon.active i {color: red;}
#contenido-menu .itemsub .ancla-sub .text {height: auto;font-weight: bold;}
#contenido-menu .text1 {font-weight: 300;}

#contenido-menu .itemsub1, #contenido-menu .itemsub2, 
#contenido-menu .itemsub3, #contenido-menu .itemsub4 {text-indent: 0.2em; margin-left: 20px;}

#contenido-menu #contenedor1 button i {
  position: relative;
  width: 100%;
  height: 100%;
  display: block;
  font-size: 30px;
  color: green;
  z-index: 10;
}
#contenido-menu #contenedor1 span {display: inline-block;width: auto;height: auto;}

/* CSS para el texto explicativo, al lado de la lista de contenido */

#contenido-menu #pretext {
  position: absolute;
  width: 100%;
  max-width: 600px;
  left: 500px;
  top: 80px;
  background: var(--card-bg);
  box-shadow: 2px 1px 10px var(--card-shadow);
  visibility: visible;
  opacity: 1;
  transition: .3s linear; 
}
#contenido-menu #pretext p {
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  width: 100%; 
  max-width: 95%;  
  margin-left: 30px;
}
#contenido-menu #pretext h2 {display: inline-block; margin: 0 100px;}

#contenido-menu #pretext.active {visibility: hidden; opacity: 0;}

/* CSS para el articulo de la página */

#contenido-menu #posttext {
  position: relative;
  left: 20px;
  top: 80vh;
  width: 100%;
  max-width: 800px;
  font-family: var(--font-family-second);
  background: var(--card-bg);
  color: var(--card-text-color);
  padding-top: 30px;
  box-shadow: 0 0 10px var(--card-shadow);
}
#contenido-menu #posttext.active {max-width: 90%; left: 0;}
#contenido-menu #posttext.active textarea {left: 0;} 
#contenido-menu #posttext p {
  font-size: calc(var(--font-size-base) * 1.1);
  line-height: var(--line-height-base);
  width: 100%; 
  max-width: 95%;
  margin-left: 30px;
  word-wrap: break-word;
}
#contenido-menu #posttext strong {
  display: inline-block;
  width: auto;
  height: auto; 
  padding: 3px;
  background: var(--body-bg);
  transform: skewX(-5deg);
}
#contenido-menu #posttext strong:hover {
  transition: all 0.2s linear;
  background: var(--bg-color-pre);
  color: white;
  border: var(--border-width) solid var(--card-border-color);
  transform: skewX(5deg);
}
#contenido-menu #posttext code.inline {
  display: inline-block;
  width: auto;
  height: auto;
  font-weight: bold;
  padding: 3px;
  background: var(--bg-color-pre);
  color: var(--terciary-color);
  transform: skewX(5deg);
}
#contenido-menu #posttext code.inline:hover {
  transition: all 0.3s linear;
  background: var(--body-bg);
  color: var(--secondary-color);
  border: var(--border-width) solid var(--card-border-color);
  transform: skewX(-5deg);
}

#contenido-menu #posttext .heading {
  display: inline-block;
  margin: 0 100px;
  color: var(--primary-color);
  text-align: center;
}

#contenido-menu .ejemplo {
  margin: 0 auto;
  padding: 30px;
}

/* Estilo para el formulario de contacto del final */

#contenido-menu .ejemplo textarea {resize: none;}
#contenido-menu #form0 textarea {resize: none;}
#contenido-menu #form {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: cursive;
}
#contenido-menu #form input, #contenido-menu #form textarea {
  width: 100%;
  padding: 5px;
  outline: none;
  resize: none;
}
#contenido-menu #form label {line-height: 1.9rem;} /* equivalen a 30.4px */
#contenido-menu #form input[type="submit"] {
  padding: 3px;
  margin-top: 0.6rem;
  font-family: cursive;
  font-weight: bold;
}
#contenido-menu #form fieldset {padding: 20px 40px;}

/* ESTILO PARA PAGINA EFECTO PARALLAX */

.cab-parallax-img {
  height: 100vh;
  width: 100%;
  background-image: url("/pagina_inicio/imagenes/resolucines_pantalla.jpg");
  background-position: center;
  background-size: cover;
  background-attachment: scroll;
  background-repeat: no-repeat;
}

.contenido-parallax {
  width: 100%;
  max-width: 50%;
  min-height: 50vh;
  background-color: palevioletred;
  background-image: url("/pagina_inicio/imagenes/escaleras1.jpg");
  background-position: center;
  background-size: cover;
  background-attachment: scroll;
  background-repeat: no-repeat;
}

.cab-parallax-img::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: MidnightBlue;
  opacity: 0.3;
}
.cab-parallax-sect {
  position: relative;
  padding: 15% 0 10%;
  max-width: 640px;
  height: auto;
  margin: auto;
  color: white;
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5);
  font-family: "Montserrat", sans-serif;
}
.cab-parallax-sect h1 {font-weight: 500;}
.cab-parallax-sect h2 {font-weight: 400;}
.menu-parallax {
  position: relative;
  top: 0;
  height: 80px;
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background: black;
}
.menu-parallax a {
  font-size: 1.2em;
  text-decoration: none;
  display: inline-block;
  color: white;
}

.menu-parallax.fixed {position: fixed; top: 80px; opacity: 0;}

/* ESTILO PARA PAGINA COLORES JAVASCRIPT */

#fondo {
 --font-color: #000000;
 color: var(--font-color);
}

#contenido .card .card_header h1 {display: inline-block; transition: .5s linear;}
#contenido .card .card_header h1:hover {
 transition: .5s linear;
 padding: 5px;
 color: hsl(calc(var(--hue) / 2), calc(var(--saturation) * 0.7), calc(var(--lightness) * 1.2));
 box-shadow: 2px 2px 8px var(--card-shadow);
}

/*
  #contenido .card p {
    font-size: calc(var(--font-size-base) * 1.1);
    line-height: var(--line-height-base); 
    width: 100%; 
    max-width: 95%;
    margin-left: 30px;
    transition: .5s;
  }
*/

.color-flex hr {
  width: 100%;
  height: 2px;
  margin: 1rem 0;
  border: 0;
  background: rgba(255, 255, 255, 0.8);
  opacity: 0.5;
}
.btn-color {
  --bg: #1e234550;
  background-color: var(--bg);
  font-family: "Roboto Mono", monospace;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  font-size: var(--font-size-base);
  display: grid;
  place-items: center;
  -webkit-tap-highlight-color: transparent;
  color: var(--font-color);
}
.btn-color .color-flex {
  --medida-x: 1.5rem;
  --medida-y: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 5px;
  margin-top: calc(-1 * var(--medida-y));
  margin-right: calc(-.5 * var(--medida-x));
  margin-left: calc(-.5 * var(--medida-x)); 
}
.color-flex > * {
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  padding-right: calc(var(--medida-x) * 0.5);
  padding-left: calc(var(--medida-x) * 0.5);
  margin-top: var(--medida-y);
}
.btn-color .color-flex button {width: auto;}
.btn-color .titulo {margin: 0 60px; text-align: center;}
.btn-color .titulo, 
.btn-color .titulo1, 
.btn-color .titulo2,
.btn-color .titulo3,
.btn-color .titulo4 {
  background: rgba(255, 255, 255, 0.8); 
  padding: 5px;
  color: var(--bg);
  transition: all 0.3s linear 0s;
}
.btn-color .input:active {filter: brightness(90%);}
.btn-color .input:focus {
  border-color: #86b7fe;
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}
.btn-color .input[type=radio]:checked {
  background: #ccf7ff;
  box-shadow: 0 0 0 1px rgba(0, 216, 255, 0.7) inset, 0 0 3px 2px #00d8ff inset, 0 0 1px 0 rgba(0, 216, 255, 0.7) inset, 0 0 1px 1px rgba(0, 216, 255, 0.6), 0 0 10px 0px #00d8ff;
  animation: destello 5s ease 1s infinite;
  /* 
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e");
    imágen de flecha abajo url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-color: #0d6efd;
    border-color: #0d6efd; 
  */
}
.btn-color .input[type=radio] {
  width: 10px;
  height: 18px;
  border-radius: 50%;
  margin: 0 10px;
  outline: none;
  /* 
    vertical-align: top;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    border: 1px solid rgba(0,0,0,.25); 
  */
  background-blend-mode: lighten;
  box-shadow: 0 0 0 1px #07090a inset, 0 0 3px 2px #07090a inset, 0 0 1px 0 transparent inset, 0 0 1px 1px transparent, 0 0 8px 1px transparent;
  transform: scale(1);
  transition: background-color 0.4s ease-out, box-shadow 0.3s ease-out 0.1s;
  appearance: none;
}
.btn-color .input[type=radio]::before {
  content: "";
  position: absolute;
  width: 30px;
  height: 30px;
  margin-top: -8px;
  margin-left: -8px;
}
.btn-color .input[type=radio]::after {
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  background: white;
  /* margin-left: 4px; */
  margin-top: 4px;
  border-radius: 9px;
  opacity: 0.3;
  transform: scale(1.5);
  background: linear-gradient(135deg, rgba(255,255,255,1) 0%, 
            rgba(255,255,255,0) 70%, rgba(255,255,255,0) 100%);
}
@keyframes destello {
  0%, 100% {/*background-color: var(--color1);box-shadow: var(--blueShadow);*/background-color: #b3f3ff; box-shadow: 0 0 0 1px rgba(0, 216, 255, 0.7) inset, 0 0 3px 2px #00d8ff inset, 0 0 1px 0 rgba(0, 216, 255, 0.7) inset, 0 0 1px 1px rgba(0, 216, 255, 0.6), 0 0 10px 0px #00d8ff;}
   50% {/*background-color: var(--color2);box-shadow: var(--greenShadow);*/background-color: #dbffe4;box-shadow: 0 0 0 1px rgba(91, 255, 132, 0.7) inset, 0 0 3px 2px #5bff84 inset, 0 0 1px 0 rgba(91, 255, 132, 0.7) inset, 0 0 1px 1px rgba(91, 255, 132, 0.6), 0 0 8px 1px #5bff84;}
}

.btn {
  display: inline-block;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  background-color: transparent;
  border: 1px solid transparent;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  border-radius: 0.25rem;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.color-flex .btn:hover {color: #212529;}
.color-flex .btn:focus {
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}
.btn-color input, 
.btn-color label {cursor: pointer;}
.btn-color label {
  width: auto;
  background: rgba(255, 255, 255, 0.8);
  padding: 2px 5px;
  margin-left: 5px;
  color: var(--bg);
}
.btn-color #verde:checked + label {transition: all 0.3s linear 0s;letter-spacing: 3px;background: rgba(0,0,0,.4); border: 1px solid white;border-radius: 30px;color: #2cbb4d;box-shadow: 0px 0px 40px 20px rgba(44, 44, 44, 0.302);}
.btn-color #morado:checked + label {transition: all 0.3s linear 0s;letter-spacing: 3px;background: white; border: 1px solid black;border-radius: 30px; color: #563d7c;box-shadow: 0px 0px 40px 20px rgba(44, 44, 44, 0.302);}
.btn-color #blanco:checked + label {transition: all 0.3s linear 0s;letter-spacing: 3px;background: rgba(255, 255, 255, 0.6);; border: 1px solid white;border-radius: 5px;color: black;box-shadow: 0px 0px 40px 20px rgba(44, 44, 44, 0.302);}
.btn-color #negro:checked + label {transition: all 0.3s linear 0s;letter-spacing: 3px;background: black; border: 1px solid white;border-radius: 5px;color: white;box-shadow: 0px 0px 40px 20px rgba(255, 255, 255, 0.302);}

.btn-color #verde:checked + label ~ .titulo1,
.btn-color #verde:checked + label ~ .titulo3 {
  transition: all 0.3s linear 0s;
  letter-spacing: 3px;
  box-shadow: 0px 0px 40px 20px rgba(44, 44, 44, 0.302);
  animation: vuelta 0.5s linear 0s 1 backwards;
}

.btn-color #verde:checked + label ~ .titulo2,
.btn-color #verde:checked + label ~ .titulo4 {
  transition: all 0.3s linear 0s;
  letter-spacing: 3px;
  box-shadow: 0px 0px 40px 20px rgba(44, 44, 44, 0.302);
  animation: revuelta 0.5s linear 0s 1 backwards;
}

.btn-color #morado:checked + label  ~ .titulo1,
.btn-color #morado:checked + label  ~ .titulo3 {
  transition: all 0.3s linear 0s;
  letter-spacing: normal;
  box-shadow: 0px 0px 40px 20px rgba(44, 44, 44, 0.302);
  animation: ancho 0.5s linear 0s 1 backwards;
}

.btn-color #morado:checked + label ~ .titulo2,
.btn-color #morado:checked + label ~ .titulo4 {
  transition: all 0.3s linear 0s;
  letter-spacing: 6px;
  box-shadow: 0px 0px 40px 20px rgba(44, 44, 44, 0.302);
  animation: alto 0.5s linear 0s 1 backwards; 
} 

.btn-color #blanco:checked + label ~ .titulo1,
.btn-color #blanco:checked + label ~ .titulo3 {
  transition: all 0.3s linear 0s;
  letter-spacing: 3px;
  box-shadow: 0px 0px 40px 20px rgba(44, 44, 44, 0.302);
  background: rgba(0, 0, 0, 0.4);
  animation: ancho 0.5s linear 0s 1 backwards, vuelta 0.5s linear 0s 1 backwards;
}

.btn-color #blanco:checked + label ~ .titulo2,
.btn-color #blanco:checked + label ~ .titulo4 {
  transition: all 0.3s linear 0s;
  letter-spacing: 3px;
  box-shadow: 0px 0px 40px 20px rgba(44, 44, 44, 0.302);
  background: rgba(0, 0, 0, 0.4);
  animation:alto 0.5s linear 0s 1 backwards, revuelta 0.5s linear 0s 1 backwards;
}

.btn-color #negro:checked + label ~ .titulo1,
.btn-color #negro:checked + label ~ .titulo3 {
  transition: all 0.3s linear 0s;
  letter-spacing: 5px;
  font-family: impact;
  box-shadow: 0px 0px 40px 20px rgba(44, 44, 44, 0.302);
  background: rgba(0, 0, 0, 0.4);
  animation: vuelta 0.5s linear 0s 1 backwards;
}

.btn-color #negro:checked + label ~ .titulo2,
.btn-color #negro:checked + label ~ .titulo4 {
  transition: all 0.3s linear 0s;
  letter-spacing: 5px;
  font-family: impact;
  box-shadow: 0px 0px 40px 20px rgba(44, 44, 44, 0.302);
  background: rgba(0, 0, 0, 0.4);
  animation: revuelta 0.5s linear 0s 1 backwards;
}

@keyframes vuelta {
  from {transform: none;}
    to {transform: rotateX(360deg);}
}
@keyframes revuelta {
  from {transform: none;}
    to {transform: rotateX(-360deg);}
}
@keyframes ancho {
  from {transform: none;}
    to {transform: scaleX(0.8);}
}
@keyframes alto {
  from {transform: none; line-height: normal;}
    to {transform: scaleY(0.8); line-height: 200%;}
}
 
/* Estilo para botones que funcionan con onmouseover */

.btn-primary {
  color: #fff;
  background-color: #0d6efd;
  border-color: #0d6efd;
  margin: 0 10px;
}
.btn-primary:hover {
  color: #fff;
  background-color: #0b5ed7;
  border-color: #0a58ca;
}
.btn-primary:focus {
  color: #fff;
  background-color: #0b5ed7;
  border-color: #0a58ca;
  box-shadow: 0 0 0 0.25rem rgba(49, 132, 253, 0.5);
}
.btn-primary:active {
  color: #fff;
  background-color: #0a58ca;
  border-color: #0a53be;
}
.btn-primary.active:focus {box-shadow: 0 0 0 0.25rem rgba(49, 132, 253, 0.5);}
.btn-success {
  color: #fff;
  background-color: #198754;
  border-color: #198754;
  margin: 0 10px;
}
.btn-success:hover {
  color: #fff;
  background-color: #157347;
  border-color: #146c43;
}
.btn-success:focus {
  color: #fff;
  background-color: #157347;
  border-color: #146c43;
  box-shadow: 0 0 0 0.25rem rgba(60, 153, 110, 0.5);
}
.btn-success:active {
  color: #fff;
  background-color: #146c43;
  border-color: #13653f;
}
.btn-success:active:focus {box-shadow: 0 0 0 0.25rem rgba(60, 153, 110, 0.5);}
.btn-danger {
  color: #fff;
  background-color: #dc3545;
  border-color: #dc3545;
  margin: 0 10px;
}
.btn-danger:hover {
  color: #fff;
  background-color: #bb2d3b;
  border-color: #b02a37;
}
.btn-danger:focus {
  color: #fff;
  background-color: #bb2d3b;
  border-color: #b02a37;
  box-shadow: 0 0 0 0.25rem rgba(225, 83, 97, 0.5);
}
.btn-danger:active {
  color: #fff;
  background-color: #b02a37;
  border-color: #a52834;
}
.btn-danger:active:focus {box-shadow: 0 0 0 0.25rem rgba(225, 83, 97, 0.5);}
.btn-light {
  color: #000;
  background-color: #f8f9fa;
  border-color: #f8f9fa;
  margin: 0 10px;
}
.btn-light:hover {
  color: #000;
  background-color: #f9fafb;
  border-color: #f9fafb;
}
.btn-light:focus {
  color: #000;
  background-color: #f9fafb;
  border-color: #f9fafb;
  box-shadow: 0 0 0 0.25rem rgba(211, 212, 213, 0.5);
}
.btn-light:active {
  color: #000;
  background-color: #f9fafb;
  border-color: #f9fafb;
}
.btn-light:active:focus {box-shadow: 0 0 0 0.25rem rgba(211, 212, 213, 0.5);}

/* Estilo para cambiar el background aleatoriamente */

#background {
  position: relative;
  width: 100%;
  max-width: 50vw;
  height: 50vh;
  box-shadow: 0px 0px 40px 20px rgba(44, 44, 44, 0.302);
}
.container-card {
  position: relative;
  top: 20%;
  width: 100%;
  max-width: 60%;
  height: 230px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 30px;
  padding: 10px;
}

.container-card .content {position: relative; top: 10%; margin-left: 50%; display: flex; flex-direction: column; align-items: center; gap: 15px;}
.container-card .content p {color: var(--bg); font-size: var(--font-size-sm); font-weight: normal; margin: 0;}
.container-card .content button {
  background: var(--bg);
  border-radius: 100px;
  border: none;
  color: white;
  cursor: pointer;
  font-size: var(--font-size-sm);
  outline: none;
  padding: 1rem 2rem;
  text-align: center;
  transition: opacity 0.4s ease-in-out;
}
button:hover {opacity: 0.8;}

.color-card {
  position: absolute;
  left: -30px;
  top: 40px;
  width: 100%;
  max-width: 150px;
  height: 150px;
  background: var(--bg);
  border-radius: 30px 0 30px 30px;
  box-shadow: 0px 0px 40px 20px rgba(44, 44, 44, 0.302);
}
.title {color: var(--bg); font-size: var(--font-size-md); margin: 0; text-align: center;}
p.color-number {color: var(--bg); margin: 10px auto;}

/* Estilo para el último grupo de botones */

#grupo-botones {
  width: 100%;
  max-width: 70%;
  background: hsl(227, 10%, 10%);
  margin: 50px auto;
  background: black;
  padding: 20px;
  display: flex; 
  justify-content: space-around;
}
#grupo-botones button {
  padding: 1em 2em;
  margin: 0.5em;
  font: 300 1em/.8em 'Fira Sans', sans-serif;
  background: none;
  color: white;
  border: 2px solid white;
  border-radius: 10px;
  cursor: pointer;
}
#grupo-botones button:hover {background: rgba(255, 255, 255, 0.7);}
.pulse {
  --color: #ef6eae;
  --hover: #ef8f6e;
}
.pulse:hover, 
.pulse:focus {
  animation: pulse 1s;
  box-shadow: 0 0 0 2em transparent;
}

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 var(--hover); }
}

/* ESTILO PARA PAGINA METODOS WIDTH */

#width_view {
  width: 100%;
  min-width: 100vw; 
  height: 10vh;
  margin-left: -12vw;
  margin-bottom: 2vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #32bacf;
  color: white;
}

#height_view {
  width: 100%;
  min-width: 100vw; 
  height: 10vh;
  margin-left: -12vw;
  display: flex;
  justify-content: center;
  align-items: center;
  background: orangered;
  color: white;
}

.grid-width {
  padding: 10px;
  background: #f3f3f3;
  overflow-x: auto;
  display: grid;
  grid-template-columns: repeat(6, minmax(100px, max-content));
  grid-template-rows: repeat(5, 80px);
  place-items: center;
  gap: 10px;
}

.grid-width > div {
  display: flex;
  flex-direction: column;
}

.grid-width > div:nth-child(6) {
  display: flex;
  flex-direction: row !important;
}

.grid-width > div:nth-child(6) span:nth-child(1) {border-right: none;}
.grid-width > div:nth-child(6) span:nth-child(2) {border-left: none; text-indent: -10px;}

#contenido-width hr {
  width: 100%;
  max-width: 1200px;
  height: 2px;
  background-color: black;
}

.grid-width .prop-js,
.grid-width .prop-css {
  border: 1px solid black;
  padding: 5px;
}

/* MEDIA QUERYS */

@media screen and (min-width: 1200px) {
  #contenido-menu #posttext {max-width: 700px;}
  #contenido-menu #pretext {animation: cruzar 1s linear 1 forwards;}
  @keyframes cruzar {
   0% {transform: none;}
   100% {transform: translateX(-400px);}
  }
  #contenido-menu #text {animation: izq1 1s linear 1 forwards;}
  @keyframes izq1 {
   0% {transform: none;}
   100% {transform: translate(670px, 0px) scale(0.8)}
  }
  #contenido-toggle #prolongacion .ejemplo #primerejem {bottom: 200px;}
  #cont-img{left: 0;}
  #cont-img img{width: 160px; height: 180px;}
}

@media screen and (max-width: 1199px) {
  .grid-width .prop-js,
  .grid-width .prop-css {
    font-size: var(--font-size-sm) !important;
}
}

@media screen and (max-width: 1110px) {
/*  #contenido-toggle #prolongacion .ejemplo #primerejem {bottom: 150px;} */
}

@media screen and (max-width: 1050px) {
  #contenido-menu #pretext {animation: cruzar1 1s linear 1 forwards;}
  @keyframes cruzar1 {
   0% {transform: none;}
   100% {transform: translateX(-520px) scaleX(0.8);}
  }
  #contenido-menu #posttext {max-width: 550px;}
  #contenido-menu #text {animation: izq2 1s linear 1 forwards;}
  @keyframes izq2 {
   0% {transform: none;}
   100% {transform: translate(520px, 0px) scale(0.8)}
  }
}

@media screen and (max-width: 1040px) {
  #contenido-toggle #prolongacion .ejemplo #primerejem {bottom: 100px;}
  #cont-img{left: 0;}
}

@media screen and (max-width: 920px) {
  #contenido-menu #pretext {animation: cruzar2 1s linear 1 forwards;}
  @keyframes cruzar2 {
   0% {transform: none;}
   100% {transform: translateX(-570px) scaleX(0.8);}
  }
  #contenido-menu #posttext {max-width: 480px; left: 0;}
  #contenido-menu #text {animation: izq3 1s linear 1 forwards;}
  @keyframes izq3 {
   0% {transform: none;}
   100% {transform: translate(420px, 0px) scale(0.8)}
  }
}

@media screen and (max-width: 900px) { 
  #contenido-toggle #primerejem .card_header {font-size: calc(var(--font-size-base) * 1.4)}
}

@media screen and (max-width: 850px) {
  #contenido-toggle #botones-toggle {flex-direction: column; gap: 20px; transition: .3s; margin-bottom: 150px;}
  #contenido-toggle #bg_boton {transition: .3s; transform: scale(0.8);}
  #contenido-toggle #btn-color.active {transform: translate(0, 0) scale(0.8);}
  #contenido-toggle #div1, #contenido-toggle #div2,
  #contenido-toggle #div3, #contenido-toggle #div4 {transform: scale(0.8);}
  .vh-container {left: -15%;}
  .grid-width {transform: scale(0.9); gap: 0px;}
}

@media screen and (max-width: 800px) {
  #contenido-menu #posttext {left: -25px; max-width: 400px;}
  #contenido-menu #pretext {max-width: 470px;}
  #contenido-menu #text {max-width: 350px; animation: izq3 1s linear 1 forwards;}
  @keyframes izq3 {
   0% {transform: none;}
   100% {transform: translate(320px, 0px) scale(0.8)}
  }
  #contenido-menu .ejemplo textarea {position: relative; left: -20%;}
  #contenido-menu #trigger {opacity: 1;}
  #contenido-toggle #prolongacion .ejemplo #primerejem {bottom: 100px;}
  #contenido-toggle #prolongacion #primerejem p {font: 300 16px/26px 'Roboto', arial, sans-serif !important;}
  .grid-width .prop-js,
  .grid-width .prop-css {font-size: calc(var(--font-size-sm) * 0.9) !important;}
}

@media screen and (max-width: 750px) {
  .grid-width {transform: scale(1, 0.8);}
  .grid-width > div:nth-child(6) {flex-direction: column !important;}
  .grid-width > .prop-js {white-space: wrap !important;}
}

@media screen and (max-width: 700px) {
  .vh-container {left: -20%;}
  #main {max-width: 80%;}
  #cont-img img{width: 150px; height: 170px;}
  .grid-width {transform: scale(0.8);}
}

@media screen and (max-width: 500px) {
  #contenido-toggle #prolongacion .ejemplo #primerejem {bottom: 150px;}
  #contenido-toggle #prolongacion #primerejem p {margin-left: 5px; font: 300 14px/26px 'Roboto', arial, sans-serif !important;}
  .vh-container {left: -30%;}
}

@media screen and (max-height: 650px) {
  #contenido-toggle #prolongacion .ejemplo #primerejem {bottom: 180px;}
  #contenido-toggle #prolongacion #primerejem p {font: 300 14px/26px 'Roboto', arial, sans-serif !important;}
  .scroll-offset {top: 230px;}
  #cont-img img {width: 150px; height: 170px;}
}

@media screen and (max-height: 650px) and (max-width: 800px) {
  #contenido-toggle #prolongacion #primerejem p {font: 300 14px/26px 'Roboto', arial, sans-serif !important;}
}

@media screen and (max-height: 650px) and (min-width: 801px) {
  #contenido-toggle #prolongacion #primerejem p {font: 300 18px/26px 'Roboto', arial, sans-serif !important;}
}

@media screen and (min-height: 651px) and (max-height: 750px) {
  .scroll-offset{top: 280px;}
}

@media only screen and (max-width: 1055px) {
  #background {width: 100%; max-width: 60vw;}
}

@media only screen and (max-width: 870px) {
  .content {transform: scale(0.8);}
  .container-card {width: 100%; max-width: 70%;}
}

@media only screen and (max-width: 740px) {
  #background {width: 100%; max-width: 70vw;}
}

@media only screen and (max-width: 630px) {
  #background {width: 100%; max-width: 75vw;}
}
 
@media only screen and (max-width: 585px) {
  #background {width: 100%; max-width: 90vw;}
}