body {
    padding: 0;
    margin: 0;
    font-family: 'Oxanium', sans-serif;
    color: #3f5972;
}

.header {
    display: flex;
    justify-content: space-between; 
}

.subtitle {
    color: #777;
}

div.skill {
    display: inline;
    white-space: nowrap; 
    border-radius: 3px;
    padding: 3px;
    font-size: 0.8em;
    background: #aaa;
    color:#fff;
}


#cv {
    display: flex;
    flex-direction: row;
}

#left {
    width: 25%;
    padding:  20px;
    height: 250vh;
    background-color: #006699;
    text-align: right;
    color: white;
}
#hats {
    line-height: 1.5;
}
.period {
    float: right;
    font-size: 0.6em;
}

#right {
    width: 75%;
    padding:  75px 20px;
    height: 100vh;
}

table,th,td {
    border: 1px solid;
    border-collapse: collapse;
}

h1 {
    font-size: 2em;
}

h2 {
    font-size: 1.7em;
}

h3 {
   font-size: 1.5em;
}

h4 {
   font-size: 1.3em;
}

h5 {
   font-size: 1em;
}

.right {
    float:right;
}

.role {
    display: inline;
    white-space: nowrap; 
    margin-left: 10px;
    margin-bottom: 10px;
    border-radius: 10px;
    padding: 3px;
    font-size: 0.8em;
    color:#fff;
    background: lightskyblue;
}

.legend {
    float:left;
}