html,
body {
    margin: 0;
    padding: 0;
}

#root {
    width: 1200px;
    height: 100vh;
    margin: 0 auto;
    display: flex;
    flex-flow: column;
}

#topBar {
    /* background-color:#C1292E ; */
    background-image: linear-gradient(to bottom, #da2e33, #cb5e32, #ab7e00);
    height: 8.1rem;
    color: white;
    padding-bottom: 0.3em;
    padding: 0.5em 10%;
}
#topBar>div{
  height: 100%;
}

#title{
  margin: 0.3em 0em 0 3em;vertical-align: top;
}

#logo{
  border-radius: 50%; object-fit: cover;max-height: 100%;
}

#menuBar {
    /* background-color:#1e5385; */
    background-image: linear-gradient(to right, #0d6ac1,#0353d3, #0d6ac1);
    display: flex;
    justify-content: space-between;
    padding: 0 2em;
    align-items: center;
    font-size: 1.7em;
}

#menuBar>a {
    font-variant: small-caps;
    color: white;
    text-decoration: none;
    margin: 0.3em 0;
}


@keyframes fadein {
    from { opacity: 0.5; }
    to   { opacity: 1; }
}

#contentZone {
    flex-grow: 1;
    background-color: #d8f7f2;
    padding: 1em;
    animation: fadein 0.5s ease-in-out;
}

#contentZone label {
    display: block;
}
#contentZone li {
    margin-bottom: 1em;

}
#topElem>*{
    display: inline-block;
}