* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
  
  html {
    height: 100%; /* con esto el body ocupa el 100% pagina*/
  }
  body {
    font-family: "Public Sans", sans-serif;
    font-size: 1.2rem;
    min-height: 100%; /* Para que la pagina ocupe 100%*/
    padding: 5px;
  }
  
  
  
      
  .grid_contenedor {
    display: grid; /* DISEÑO MOVIL*/
    gap: 2px; /* Separador entre pantallas*/
  }  
  
  #CajaLogo{
      color: white;
      text-align: center;
  }
  
  /* ##Device = Desktops
    ##Screen = 1281px to higher resolution desktops
  */
  @media (min-width: 1281px)  {
    .grid_contenedor{
        grid-template: 
        "cabecera cabecera cabecera" 100px
        "menu menu menu" 100px
        "item1 item2 item3" auto
        "pies pies pies" 50px;
    }  
    }
    /* 
      ##Device = Laptops, Desktops
      ##Screen = B/w 1025px to 1280px
    */
    @media (min-width: 1025px) and (max-width: 1280px) {
      .grid_contenedor{
          grid-template: 
          "cabecera cabecera cabecera" 100px
          "menu menu menu" 100px
          "item1 item2 item3" auto
          "pies pies pies" 50px;
      }  
    }
    /* 
      ##Device = Tablets, Ipads (portrait)
      ##Screen = B/w 768px to 1024px
    */
    @media (min-width: 768px) and (max-width: 1024px) {
      .grid_contenedor{
          grid-template: 
          "cabecera cabecera cabecera" 100px
          "menu menu menu" 100px
          "item1 item2 item3" auto
          "pies pies pies" 50px;
      }  
    }
    /* 
      ##Device = Low Resolution Tablets, Mobiles (Landscape)
      ##Screen = B/w 481px to 767px
    */
   @media (min-width: 481px) and (max-width: 767px) {
      .grid_contenedor{
          grid-template: 
          "cabecera cabecera cabecera" 100px
          "menu menu menu" 100px
          "item1 item2 item3" auto
          "pies pies pies" 50px;
      }  
    }
    /* 
      ##Device = Most of the Smartphones Mobiles (Portrait)
      ##Screen = B/w 320px to 479px
    */
   @media (min-width: 320px) and (max-width: 480px) {
      .grid_contenedor {
        display: grid; /* DISEÑO MOVIL*/
        gap: 2px; /* Separador entre pantallas*/
        grid-template-areas: 
        "cabecera"
        "menu"
        "item1"
        "item2"
        "item3"
        "pies";  
  
       
    }  
    }
          

.header {
    grid-area: header;
    background-color: aqua;
}
.navbar {
    grid-area: navbar;
    background-color:blue 
}
.siderbar {
    grid-area: sidebar;
    background-color: rgb(251, 255, 0);
}
.main {
    grid-area: main;
    background-color:coral;
}
.footer {
    grid-area: footer;
    background-color: aqua;
}



body {
    margin: 0;
    padding: 0;
    background: url(../images/fondologin.jpg) no-repeat center top;
    width: 100%;
    background-size: cover;
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial;
    height: 100vh;
    
 
        font-size: 1.2rem;
        min-height: 100%; /* Para que la pagina ocupe 100%*/
    }


  
  .home{
    display: flex;
    flex-wrap: wrap;

  }
 .in-flex {
    flex: 1;
    padding: 25px;
    min-width: 250px;

 }

  .login-box {
    width: 420px;
    height: 380px;
    background: #fffdfdf5;
    color: #fff;
    top: 60%;
    left: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
    box-sizing: border-box;
    padding: 90px 10px;
    border-radius: 20px;
    box-shadow: 2px 2px 2px 1px rgb(255 255 255 / 80%);
  }
  
  .login-box .avatar {
    width: 300px;
    height: 300px;
    border-radius: 10%;
    position: absolute;
    top: -180px;
    left: calc(30% - 70px);
  }
  
  .login-box h1 {
    margin: 0;
    padding: 0 0 30px;
    text-align: center;
    font-size: 23px;
  }
  
  .login-box label {
    margin: 0;
    padding: 0;
    font-weight: bold;
    display: block;
  }
  
  .login-box input {
    width: 100%;
    margin-bottom: 20px;
  }
  
  .login-box input[type="text"], .login-box input[type="password"] {
    border: none;
    border-bottom: 2px solid #e34718;
    background: transparent;
    outline: none;
    height: 40px;
    color: #564f4f;
    font-size: 16px;
  }
  
  .login-box input[type="submit"] {
    border: none;
    outline: none;
    height: 40px;
 
    background-image: linear-gradient(312deg, #1550bd, #e95a07);
    color: #fff;
    font-size: 18px;
    border-radius: 20px;
  }
  
  .login-box input[type="submit"]:hover {
    cursor: pointer;
    background-image: linear-gradient(312deg, #e95a07,  #1550bd);
    color: #000;
  }
  
  .login-box a {
    text-decoration: none;
    font-size: 12px;
    line-height: 20px;
    color: darkgrey;
  }
  
  .login-box a:hover {
    color: #fff;
  }
  
  nav{
    display: flex;
    align-items: right;
   
    padding-top: 50px;
    padding-left: 50%;
    padding-right: 5%;
    font-weight:normal;
}
h1{
    color: #db5026;
    font-size: 60px;

}