body {
    background: #316ab0;
    background: linear-gradient(15deg, rgba(49, 106, 176, 1) 0%, rgba(99, 142, 195, 1) 16%, rgba(153, 181, 216, 1) 41%, rgba(198, 214, 233, 1) 67%, rgba(255, 255, 255, 1) 100%);
    
    /*background-image: url('/images/backgrounds/fleurs.svg');*/
    min-height: 100vh; 
    display: flex;
    justify-content: center;
    /*align-items: center;*/
}

header {
    background: center  no-repeat url('/images/backgrounds/monde2.png');
    height:5em;
    width: 900px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
}
header div {
    backdrop-filter: blur(5px);
    display: flex;
    justify-content: center;
    border-radius: 10px;
    height: 4em;
}

#navi {
    grid-area: navi;
    height:auto;
}
nav {
    margin-top: 5px;
    height:400px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
nav ul {
    margin : 1px;
    gap: 5px;
    list-style-type: none;
    padding-left: 0px;
    display: flex;
    flex-direction: column;
    align-items: center;
    float: left;
    height: 100%;
    width: 100%;
    overflow-y:hidden;
    overflow-y:scroll; /* Enable scrolling if the sidenav has too much content */
}
nav ul a {
    padding-right:4px;
    padding-left: 4px;
    border: solid dodgerblue 2px;
    border-radius: 3px;
    width:80%;
    display: flex;
    align-items: center;
    background: #dcdcf7;
    background: linear-gradient(180deg,rgba(220, 220, 247, 1) 0%, rgba(209, 209, 209, 1) 34%, rgba(220, 229, 230, 1) 58%, rgba(222, 222, 222, 1) 100%);
}
nav ul a:hover {
    background: #9ee6d7;
background: linear-gradient(180deg, rgba(158, 230, 215, 1) 0%, rgba(72, 254, 236, 1) 38%, rgba(174, 232, 226, 1) 77%, rgba(222, 222, 222, 1) 100%);
}

main {
    background-color: #dcdcdc88;
    width: 900px;
    gap:8px;
    display: grid;
    grid-template-areas: 
    "status welcome navi"
    "featImg welcome navi"
    "plans blog news";
    grid-template-columns: 150px 1fr 150px;
    padding-top: 10px;
    padding: 3px;
    border: solid 1px gray;
}
main p {
    padding-left: 4px;
    font-size: 17px;
}

#featuredImage {
    grid-area: featImg;
}
#featuredImage img {
    width: 100px;
    padding: 2px;
}
#featuredImage div {
    padding-top: 20px;
}

#welcomeBlock {
    grid-area: welcome;
}
#welcomeBlock img {
    width: 250px;
    height:max-content;
}

#status {
    grid-area: status;
    padding-bottom: 15px;
}
#status a {
    margin-left: 15px;
}

#plans {
    grid-area: plans;
}
#news {
    grid-area: news;
}
#lastestPosts {
    grid-area: blog;
}


.section {
    background-color: white;
    overflow-wrap: break-word;
    border: solid 1px black;
    border-radius: 10px 10px 0px 0px;
}
.sectionTitle {
    color: aliceblue;
    margin: 0px;
    padding-left: 20px;
    font-weight:900;
    font-size: 18px;
    border-radius: 10px 10px 0px 0px;
    background: #a0a0d9;
    background: linear-gradient(180deg,rgba(160, 160, 217, 1) 0%, rgba(60, 60, 222, 1) 30%, rgba(79, 138, 201, 1) 53%, rgba(105, 126, 219, 1) 77%, rgba(204, 204, 237, 1) 100%);
}