* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
  /* Variable */
  --sb-box-shadow: -5px -5px 10px -4px rgba(255, 255, 255, 0.05),
               5px 5px 15px rgba(0, 0, 0, 0.5);
  --cp-color:#D4BCA5;
  --ep-color:#F9DBBD;
  /*Variables del pop-up*/
  --dark-box-shadow: -7px -7px 10px 0px rgba(255, 255, 255, 0.05),
        -4px -4px 5px 0px rgba(255, 255, 255, 0.05),
        7px 7px 10px 0px rgba(0, 0, 0, 0.5),
        4px 4px 5px 0px rgba(0, 0, 0, 0.5),
        inset 0px 0px 0px 0px rgba(255, 255, 255, 0.05),
        inset 0px 0px 0px 0px rgba(255, 255, 255, 0.05),
        inset 0px 0px 0px 0px rgba(255, 255, 255, 0.05),
        inset 0px 0px 0px 0px rgba(0, 0, 0, 0.5);
}
body {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
  min-height: 100vh;
  background: url(../img/fondo7.svg) no-repeat center var(--cp-color);
  background-size: cover;
}
/* -------------------- Cuerpo Principal -------------------- */
.container-flag {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background-color: var(--ep-color);
  text-align: center;
  height: 12.5rem;
  width: 28.125rem;
  border-radius: 0.75rem;
  box-shadow: var(--sb-box-shadow);
  cursor: pointer;
}
.container-text h2 {
  position: relative;
  font-size: 3.125rem;
  text-transform: uppercase;
  text-shadow: black 0.1em 0.1em 0.2em;
}
.container-text p {
  font-size: 1.25rem;
  text-align: center;
  color: #000;
  border: none;
  margin-top: 0.625rem;
}
.flag {
  width: 3.125rem;
  height: 3.125rem;
  margin-top: 0.938rem;
}
/* -------------------- Fin deñ Cuerpo Principal -------------------- */


/*-------------------- Boton de redes sociales --------------------*/
.container-button{
  position: fixed;
  bottom: 1.25rem;
  right: 1.25rem;
}
.button-main{
  display: none;
}
.redes a, .button-secondary label, .redes input {
  display: block;
  text-decoration: none;
  background: #000;
  color: #fff;
  width: 1.875rem;
  height: 1.875rem;
  line-height: 1.875rem;
  text-align: center;
  border-radius: 50%;
  box-shadow: var(--sb-box-shadow);
  transition: all 500ms ease;
}
.redes a, .redes input{
  margin-bottom: -0.938rem;
  opacity: 0;
  visibility: hidden;
  font-size: 0.75rem;
}
.redes a:hover{
  background: #00FF2E;
  color: #000;
}
.button-main:checked~ .redes a{
  margin-bottom: 0.625rem;
  opacity: 1;
  visibility: visible;
}
/* ~ selecciona el ítem que 
esté inmediatamente después 
y todos los siguientes*/
.button-secondary label{
  cursor: pointer;
  background: #000;
  font-size: 1.25rem;
}
.button-main:checked~ .button-secondary label{
  transform: rotate(135deg);
  font-size: 1.25rem;
}
/*-------------------- Fin de Boton de redes sociales --------------------*/

/* -------------------- PopUp - Bitácora -------------------- */
.modal-container {
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100vw;
  z-index: 99999;
  pointer-events: none;
  opacity: 0;  
  top: 0;
  left: 0;
  transition: opacity 0.5s ease;
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.9);
}
.show {
  pointer-events: auto;
  opacity: 1;
}
.modal {
  position: relative;
  display: flex;
  flex-direction: column;
  text-align: center;
  width: 37.5rem;
  max-width: 100%;
  padding: 1.875rem 1.875rem;
  margin: 0.625rem;
  border-radius: 0.625rem;
  background: #131319;
  box-shadow: var(--dark-box-shadow);
}
.modal h1 {
  margin: 0.125rem;
  font-weight: 500;
  letter-spacing: 0.063rem;
  color: #03a9f4;
}
.modal p {
  font-size: 0.875rem;
  text-align: justify;
  line-height: 1.375rem;
  color: #fff;
  opacity: 0.8;
  font-weight: 500;
}
.modal span {
  font-size: 0.75rem;
  color: #EC1B1B;
  margin-top: 0.125rem;
  font-weight: 900;
}
.author {
  text-align: center !important; 
  font-style: oblique; 
  font-size: 0.7rem !important;
  opacity: 0.5 !important;
}
.modal .boton-popup {
  position: absolute;
  top: 0.313rem;
  right: 0.625rem;
  padding: 0.125rem 0.438rem;
  z-index: 300;
  font-size: 1.25rem;
  cursor: pointer;
  line-height: 1.875rem;
  border: 0;
  border-radius: 6.25rem;
  color: #000;
  background: #2C2C35;
  box-shadow: -5px -5px 10px rgb(255 255 255 / 5%), 5px 5px 15px rgb(0 0 0 / 50%);
}
.modal .boton-popup:hover:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  border-radius: 50%;
  background: #000;
  box-shadow: inset -3px -3px 7px #000,
              inset 3px 3px 5px #000;
  z-index: 250;
  border-radius: 6.25rem;
  opacity: 0.2;
}
/* -------------------- Fin del PopUp - Bitácora -------------------- */

/* -------------------- Responsive -------------------- */
@media screen and (max-width: 22.5rem) {
  body {
    height: 100vh;
    width: 100vw;
    background: url(../img/fondo1.svg) repeat center var(--cp-color);
  }
  .container-flag {
    width: 20rem !important;
  }
  .container-text h2 {
    font-size: 2.5rem;
  }
}