/*  ----  MODO OSCURO  ----  */
#toggle {
    display:none;
}
#label_toggle {
    font-size:1.5em;
    color: #000;
    cursor:pointer;
}

/* -----  aspecto de gradientes ----- */
 body {
background: #5FA0DC;
background: linear-gradient(180deg, rgba(95, 160, 220, 1) 0%, rgba(130, 185, 235, 1) 40%, rgba(185, 220, 250, 1) 75%, rgba(240, 250, 255, 1) 100%);
}

#fondo {
    margin-top: 30px;
    padding:0px 30px 25px 30px;
    box-shadow:0px 2px black;
    background-color: white;
}

.home-container .img {
    padding: 7px;
    border:1px solid;
    height:20em;
    width:30em;
    margin:0 auto;
}
body.dark {
background: #141419;
background: linear-gradient(180deg, rgba(20, 20, 25, 1) 0%, rgba(140, 10, 10, 1) 40%, rgba(220, 50, 0, 1) 75%, rgba(255, 110, 20, 1) 100%);   
}
body.dark #fondo {
    background-color: #000;
    color:white;    
}

body {
  transition: background 0.4s ease, color 0.3s ease;
}

#fondo {
  transition: background 0.4s ease;
}
/*  ----  BOTONES DE NAVEGACIÓN "EFECTO" ----  */
.menu-link:hover {
  color:rgb(12, 118, 150);
  transition: color .5s ease;
}
.xtras:hover {
    border-color:rgb(2, 200, 150);
    transition: all .7s ease;
    scale:1.1;
    box-shadow: 3px 6px 0 rgb(55,34,209);
    font-weight: bold;
}
.logo:hover {
    color:rgb(2, 200, 150);
    transition: color .7s ease;

}