/* #region VARIABLES DE DISEÑO */
:root {
/* #region COLORES Y FUENTES */
  --texto-blanco: #F3F4EF;   
  --texto-negro: black; 
/* #endregion COLORES Y FUENTES */
}
/* #endregion VARIABLES DE DISEÑO */

/* #region COLOR DE TEXTO */
.texto-negro {                            /* clase para texto oscuro (sobre fondos claros) */
  color: var(--texto-blanco);              
}
/* #endregion COLOR DE TEXTO */

/* #region CUERPO DE LA PAGINA */
body{
  background: linear-gradient(to bottom right, #b7b8cd, #3936dd);  /*fondo con degradado*/
 /* #region Flexbox basico */
  display: flex;                          /*Que tipo de caja es */
  flex-direction: column;                 /*La dirección de acomodo*/
  align-items: center;                    /*La direccion de izquierda a derecha*/
  justify-content: center;                /*Acomodar el contenido dentro de la caja*/
  /* #endregion Flexbox basico */
  height: 100vh;                           /*Altura*/
  margin: 0;                               /*Espacio afuera de una caja*/
}
/* #endregion CUERPO DE LA PAGINA */

/* #region PARRAFO */
p {                                       /*Modifica todos los parrafos*/
  text-align: center;
}
/* #endregion PARRAFO */

/* #region BOTON */
button{
  position: fixed;
  top: 10px;
  right: 10px;
}
/* #endregion BOTON */