body{
    background-image: url(https://i5.glitter-graphics.org/pub/1512/1512005w7jbq7wpax.gif);
    background-attachment: fixed;
    background-repeat: repeat;
    overflow: hidden;
    overflow-y: scroll;
    font-family: verdana; 
    
}

.content{
    display:flex;
}
 
/*CONTAINER*/
.main-container{
        border-radius: 20px;
        display:flex;
        flex-direction: column;
        margin:auto;
        margin-top: 15px;
    max-width: 800px;
    min-height: 150vh; 
}



/*HEADER*/
.header{
    background-color: hsla(40, 94%, 58%, 0.7);;
    border-radius: 10px;
    color: white;
    padding: 1px;
    text-align: center;
    margin: 0 auto;
    margin-top:15px;
}

.header h1{
    text-shadow: 2px 5px 5px rgba(0,0,0,0.5); 
    margin: 5px;

}

/*ICON PIXEL*/
.icon-pixel{
  max-width: 40px;
  display:flex;
    justify-content: center;
  
}




/*NAVBAR*/
.navbar{
    background-color: hsla(110, 85%, 53%, 0.5);
    border-radius: 10px;
    display: flex;
        flex-direction: column;
        flex: 0 0 20%;
    margin: 15px 5px 15px 15px;
    padding:10px;
}

.navbar-box{
    background-color: #ffd9ed;
    border: 2px solid black;
    width: 100%;
    padding: 10px;
    margin-top: 10px;

   
}

.navbar-box a{
    color: black;
        align-items: center;
    font-size: 12px;
    padding: 8px 10px;  

}

.navbar-box a .icon{
    object-fit: cover;
    width: 20px;
}

.navbar a:hover{ /*cuando le pones el cursor*/
    background-color: grey;
    color: black;
}

.navbar h1{
    font-size: 14px;
    text-align: center;
    color:#fe0aa2;

}
  
/*CENTER*/
.center{
    background-color: hsla(110, 85%, 53%, 0.5);
    border-radius: 10px;
    color:black;
    flex:70%;
    font-size: 12px;
    height: 300px;
    margin: 15px 5px 15px 5px;
    padding: 20px;
    text-align: center;
    overflow-y: scroll;
    
}


.snoopyconstruction{
    max-width: 180px;
}


 /*ASIDE*/
.aside{
    background-color: hsla(110, 85%, 53%, 0.5);
    border-radius: 10px;
    display: flex;
        flex-direction: column;
        flex: 20%;
    font-size: 12px;
    margin: 15px 15px 15px 5px;
    overflow:hidden;  
    
}

.aside ul{
    color: black;
    display: block; /*for responsive reasons*/
    padding: 5px 10px;  

}

.aside h1{
    font-size:14px;
    text-align: center;
    color:#fe0aa2
    
}

.row2{
    display:flex;
}

/*OTRO*/

.otro{
    background-color: hsla(110, 85%, 53%, 0.5);
    border-radius: 10px;
    color:black;
    display:flex;
        flex: 20%;
        flex-direction: column;
    height:200px;
    font-size: 12px;
    margin: 15px 15px 15px 15px;
    padding: 20px;
    overflow-y: scroll;
    
}

.otro h1{
    font-size: 14px;
    text-align: center;
    color:#fe0aa2

}

.otro p {
  margin-top:5px;
}


/*MINIBLOG*/
.miniblog{
    background-color: hsla(110, 85%, 53%, 0.5);
    border-radius: 10px;
    display:flex;
        flex: 60%;
        flex-direction: column;
    height:300px;
    font-size: 12px;
    margin: 15px 15px 15px 15px;
    padding: 20px;
    text-align: center;
    overflow-y: scroll;
}

.miniblog h1{
    font-size: 14px;
    text-align: center;
    color:#fe0aa2
}

/*TODOLIST*/
.todo{
    background-color: hsla(110, 85%, 53%, 0.5);
    border-radius: 10px;
    color:black;
    display:flex;
        flex: 20%;
        flex-direction: column;
    height:200px;
    font-size: 12px;
    margin: 15px 15px 15px 15px;
    padding: 20px;
    overflow-y: scroll;
    
}

.todo h1{
    font-size: 14px;
    text-align: center;
    color:#fe0aa2
    
}