* {
  box-sizing: border-box;
}

/* Estilo de fuente */

@font-face {
  font-family: Inter;
  src: url(fonts/Inter.ttf);
}

@font-face {
  font-family: italiana;
  src: url(fonts/Italiana-Regular.ttf);
}

@font-face {
  font-family: boogaloo;
  src: url(fonts/Boogaloo-Regular.ttf);
}

@font-face {
  font-family: Droid;
  src: url(fonts/DroidSans.ttf);
}

@font-face {
  font-family: Barlow;
  src: url(fonts/Barlow-Bold.ttf);
}

.titulo-tarjeta {
  font-family: Inter;
  font-weight: bold;
}

.texto-tarjeta {
  font-family: Droid;
}

body {
  font-family: Inter, sans-serif;
  margin: 0;
  padding: 0;
  height: 100vh;
  font-display: swap;
  /* estamos indicando que el navegador cargue la fuente de manera inmediata */
  text-align: justify;
  text-justify: inter-word;
  /* Texto justificado */
}

/* footer */

footer {
  width: 100%;
  height: 99px;
  background: #008a97;
  color: #ffff;
  text-align: center;
  justify-content: center;
  align-items: center;
  display: inline-flex;
  font-size: 25px;
}

footer a {
  text-decoration: none;
}

/* Estilos para el icono */
.icono-altavoz {
  font-size: 30px;
  color: #004080; /* Mismo color que la caja, pero puedes cambiarlo */
  left: 100px;
}

#padre-text {
  position: fixed;
  top: 42%;
}

/* Estilos para el cuadro de texto */
.vertical-box {
  width: 45px;
  height: 300px;
  background-color: #008a97;
  color: white;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 13px 10px 13px 7px;
  border-radius: 0 10px 10px 0;
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
}

#padre-text input {
  display: none;
}

#cajaPadreAccesibilidad {
  display: none;
}

#imagen-accesibilidad img {
  cursor: pointer;
}

#botonAccesibilidad:checked ~ div {
  display: flex;
}