style.css

.header {
    background-color: #f2f2f2;
}
.content{
max-width:750px ;
margin:auto;
justify-content: center;
align-items: center;
padding:15px;
}

.navbar{
background-color: #394356;
color:#ffffff;
font-family: segoe ui;
padding-left:50px;
}
.icon{height:35px;
width:35px;
margin-left:10px;
margin-right: 10px;;
}

.note-input{
    margin-top:30px;
    padding:20px;
    display:flex;
    flex-direction: row;

}
.input-text{
    height:100px;
    width: 500px;;
    padding:10px;  
    box-shadow: 5px 5px #394356;
    background-color: #ffffff;
    border-radius: 6px;

}

.btn{
    background-color: #394356;
    color:#ffffff;
    box-shadow: 5px 5px #d1d1e0;

}
.btn:focus{
    color:#ffffff;
}
.action{display: flex;
flex-direction: column;}
.theme{
    width:90px;
    height:35px;
    
}

.notes-list{
    max-width: 1000px;
    align-items: center;
    justify-content: center;
    margin: auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.note{
    padding:15px;
    border-radius: 5px;
    width: 260px;
    box-shadow: 4px 4px #f2f2f2;
    margin:10px;
    height:160px;
    border-top: solid 5px #4d4d4d;
   
}
.note-view{
    height:100px;
    overflow-y: scroll;
    scrollbar-width: 6px;
    scrollbar-color: #f2f2f2f2;
         


}
.note-view::-webkit-scrollbar {
    display: none;
}
.bin-icon{
    
    height:18px;
    width:18px;
    float:right;
    margin-top:8px;

}

.illustration{height:250px;
width:400px;}
.no-notes{display: flex;
flex-direction: row;}
.msg{margin-top:100px;
text-align: center;
opacity: 70;
}
footer {
    height: 40px;
    text-align: center;
    background-color: #f2f2f2;;
    padding: 10px;
    font-size: 14px;
    margin-top:300px;
}



@media screen and (max-width:600px){
    .note-input{
        display: flex;
        flex-direction: column;
        margin-top: 20px;
    }
    .navbar{padding-left:20px;}
    .action{
        display: flex;
        flex-direction: row;
        margin: auto;
        align-items: center;
        justify-content: center;
    }
    .notes{
        display: flex;
        flex-direction: column;
    }
    .no-notes{
        display: flex;
        flex-direction: column;
    }
    .msg{margin:20px;
        font-size: 20px;
    }
    .input-text{
        width:auto;
    }
}