*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
  body{
    font-size: 14px;
    font-family: 'Inter', sans-serif;      
    background-color: hsl(230, 17%, 14%);
    color: hsl(0, 0%, 100%);  
  }
  h1{
    font-size: 1.5rem;
  }
  .title{
    padding: 40px 25px;
    /* color: hsl(0, 0%, 100%);     */
    font-weight: 700;
    text-align: left;
    border-radius: 0 0 20px 15px;
  }
  .subtitle{
    padding: 25px;
    /* color: hsl(0, 0%, 100%);     */
    font-weight: 700;
    text-align: left;
  } 
  .title{
    height: 42vh;
    background-color: hsl(232, 19%, 15%);    
  }
  .titles{
    max-width: 1120px;
    margin: auto;    
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    line-height: 22px;
}  
  .titles span, p{
    color: hsl(228, 34%, 66%);    
    font-size: 0.9rem;
  }
  .title hr{
    border-color: hsl(228, 22%, 28%);
    margin: 22px 0;
    border-top: 0px;
  }
  .buttonCheck{
    display: flex;
    flex-direction: row;
    align-items: center;  
    justify-content: space-between;    
  }
  .buttonCheck p{
    padding-right: 15px;
  }
  .checkbox:checked ~ .check:before{
    transform: translateX(25px);    
  }
  .checkbox{
    display: none;
  }
  .check{
    width: 50px;
    height: 25px;
    background-image: linear-gradient(to right, hsl(210, 78%, 56%), hsl(146, 68%, 55%));    
    border-radius: 50px; 
    cursor: pointer; 
    user-select: none;  
  }
  .check::before{
    content: "";
    display: flex;
    background: hsl(230, 17%, 14%);
    width: 18px;
    height: 18px;
    margin: 3px;
    border-radius: 50%;
    align-items: center;  
    transform: translateX(0px);  
    transition: 0.3s;
    will-change: transform;
  }  
  .container{          
    text-align: center;  
    padding: 0px 0 45px 0;    
  }  
  .cards{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: -55px;
  }
  .box{
    margin: 12px 25px;     
    border-radius: 4px;
    overflow: hidden;
    background-color: hsl(228, 28%, 20%); 
    cursor: pointer;   
  }
  .box:hover{
    background-color: #333a54;
  }
  .box:before{
    content: "";
    height: 4px;
    display: flex;
    padding: 30px, 0 25px 0;
  }
  .box p img{
    font-size: 22px;
    padding-right: 5px;
  }   
  .neg{
    color: hsl(356, 69%, 56%);
  }
  .pos{
    color: hsl(163, 72%, 41%);
  }
  .facebook::before{
    background: hsl(208, 92%, 53%);
  }
  .twitter::before{
    background: hsl(203, 89%, 53%);
  }
  .instagram::before{
    background-image: linear-gradient(to right, hsl(37, 97%, 70%), hsl(329, 70%, 58%));    
  }
  .youtube::before{
    background: hsl(348, 97%, 39%);
  }
  .user, 
  .followers{
    color: hsl(228, 34%, 66%);   
    
  }
  .user{
    padding-top: 25px;
    display: flex;
    justify-content: center;
    font-weight: 700;
  }
  .numberF{
    color: hsl(0, 0%, 100%);  
  }      
  .today{
    padding-bottom: 20px;
    display: flex;
    justify-content: center;
    align-items: center;    
    font-weight: 700;
  }
  .facebook .today{
    color: hsl(0, 0%, 100%);  
  }
  .numberF{
    padding-top: 20px;
    font-weight: 700;
    font-size: 3.7rem;
  }
  .followers{
    padding-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 0.3em;
  }
  .miniBox{    
    padding: 20px 35px 20px 20px;
  }
  .likes{
    display: flex;
    justify-content: space-between;
  }
  .up{
    padding-bottom: 10px;    
  }
  .down{
    padding-top: 10px;
    align-items: flex-end;
  }
  .overview{
    display: flex;
    flex-direction: column;    
    justify-content: center;
  }
  .likes p{
    font-weight: 700;
  }
  .numberL{
    font-size: 2rem;
    font-weight: 700;
    color: hsl(0, 0%, 100%);
  }

  @media(min-width: 600px){
    h1{
      font-size: 1.7rem;
      flex: 1;
    }
    .container{     
      margin: 0 auto;
    }  
    .buttonCheck{      
      flex-direction: row; 
    }  
    .cards{
      flex-direction: row;     
      margin:-120px auto 0;
      max-width: 1120px; 
   } 
   .box{
     margin: 10px 15px;
     width: 250px;
   }
   .subtitle{
     margin: 40px auto 20px auto;
   }
   .overview{    
    flex-direction: row;   
    flex-wrap: wrap;
   }
   .title{
    height: 35vh;
   }
   .titles{
     padding: 0 15px;
     flex-direction: row;
     justify-content: space-between;
     align-content: center;
   }
   hr{
     border:0px;
   }   
  }
 
  /* modo light */
  
  .light-mode {    
    background-color: hsl(0, 0%, 100%);    
    color: hsl(228, 12%, 44%);
  }
  .light-mode .box{
    background-color: hsl(227, 47%, 96%);  
  }  
  .light-mode .numberF{
    color: hsl(230, 17%, 14%);  
  }
  .light-mode .titles span{
    color: hsl(228, 12%, 44%);        
  }
  .light-mode .titles p{
    color: hsl(228, 12%, 44%);        
  }
  .light-mode .title{    
    background-color: hsl(225, 100%, 98%);    
    color: hsl(230, 17%, 14%); 
  }
  .light-mode .numberL{   
    color: hsl(230, 17%, 14%);   
  }
  .light-mode .user{
    color:hsl(228, 12%, 44%); 
  }
  .light-mode .followers{
    color:hsl(228, 12%, 44%); 
  }
  .light-mode .facebook .today{
    color:hsl(163, 72%, 41%);
  }
  .light-mode .check{
    /* background-image: linear-gradient(to right, hsl(0, 0%, 28%), hsl(0, 0%, 32%));    ; */
    background-image: none;
    background-color: hsl(230, 22%, 74%);
}
  .light-mode .check::before{
    background-color:white;
  }
  .light-mode .box:hover{
    background-color: #e1e3f0;
  }