html, body {
background-color: rgb(162, 231, 252, 0.1) ;
margin: 0;
padding: 0;
}

#main {
 display: flex;
 flex-direction: column;
 min-height: 100vh;
}
#header{
    display: flex;
    background:linear-gradient(to top, rgb(162, 231, 252), rgb(248, 124, 190));
    height: 100px;
    justify-content: center;
    align-items: center;
}
#footer {
    margin-top: auto;
    background-color:  rgb(162, 231, 252, 0.75);
    padding: 40px;
    text-align: center;


}
#columns-container{
    display: flex;
}
#content1{
    width: 50%;
    background-color: rgba(208, 220, 254, 0.5   );
    min-height: 200px ;
}   
#content2{
    width: 20%;
   background-color: rgba(208, 220, 254, 0.75);
    min-height: 200px ;
}  
#content3{
    width: 30%;
    background-color: rgba(208, 220, 254);
    min-height: 200px ;
}  
#main ul {
    list-style-type: none;
    margin-top: 10px;
    padding: 0;
    background:linear-gradient(to top,  rgba(208, 220, 254), rgb(162, 231, 252));
    height: 50px;
    overflow: hidden;
    display: flex;
    align-items: center;
    width: 100%;

}
#main li{
        width: 33.3333%;
}
#main li a { 
        display: block;
        color: black;
        text-align: center;
        padding: 16px;
        text-decoration: none;

    }
#main li a:hover{
    background:linear-gradient(to top, rgb(194, 209, 249),  rgb(148, 223, 246));
    }