body{
       margin: 0;
       font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
       background-color: rgb(242, 239, 221);
       font-size: 16px;
       min-height: 100vh;
}

header{
       top: 0;
       display: flex;
       justify-content: space-between;
       align-items: center;
       background-color: white;
       font-size: 20px;
       margin: 5px;
       border-radius: 20px ;
       flex-wrap: wrap;
       position: sticky;
       z-index: 50;
}
#icon-header{
       color: #eec691;
       display: flex;
       align-items: center;
}

#icon-header > img{
       border-radius: 50%;
}

#nav-header{
       display: flex;
       align-items: center;
       width: 50%;
       margin: auto;
       justify-content: space-evenly;

}


#nav-header > a > p{
       display: flex;
       justify-content: center;
}
#nav-header > a.active {
       background-color: #eec691;
       color: white;
}
#nav-header > a{
       text-decoration: none;
       width: 150px;
       height: 70px;
       color: #eec691;
       border-radius: 10px;
       justify-content: center;
       align-items: center;
       transition: 0.5s ease;
}

#nav-header > a:hover{
       background-color: #eec691;
       color: aliceblue;
       transform: translateY(-5px);
       transition: 0.3s ease-in-out;
}


#login{
       display: flex ;
       align-items: center;
       gap: 10px;
       color: #70665b;
       margin: 30px;
}

#login > a{
       text-decoration: none;
       color: #eec691;
       transition: 0.3s ease;
}

#login > a:hover{
       color: black;
       transform: translateY(-5px);
       transition: 0.3s ease-in-out;
}

@media (max-width: 1100px) {
       #nav-header{
              display: flex;
              order: 3;
              width: 100%;
              justify-content: space-around;
       }
}