.header{
position:relative;
width: 100%;
border:2px solid;
left: 0;
border-radius: 15px;
}

.navigation-bar{
    padding: 15px;
    border: 2px solid;
    background-color: rgb(185, 247, 226);
    border-radius: 15px;
    display: flex;
    justify-content: center;
    gap: 70px;
    text-decoration-color: black;

}

.navigation-bar a{
    text-decoration: none;
    border: 2px solid black ;
    border-radius: 10px;
    padding: 5px;
    background-color: rgb(2, 124, 124);
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}


.navigation-bar a.active{
    background-color: rgb(144, 240, 233);
    
}

.start{
    border: 2px solid;
    padding:20px;
    text-align:center;
    border-radius: 15px;
}

.name{
    font-size:3rem;
    margin-bottom:10px;
}

.role{
    font-size:2rem;
     margin-bottom:10px;

}

.start p{
    color:rgb(28, 11, 11);
}

.grid-container{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 400px;
    gap:1px;
    border-radius: 15px;
}

.box1,
.box2,
.box3{
    border: 2px solid;
    padding: 20px;
    border-radius: 15px;

}

.flex-container{
    display: flex;
    border: 2px solid black;
    justify-content: space-around;
    border-radius: 15px;



}

.flex-box1,
.flex-box2,
.flex-box3{
    border: solid black;
    margin: 20px;
    width: 400px;
    height: 200px;
    border-radius: 15px;


}