:root{
    --dark-primary-color:#1976D2;
    --default-primary-color:#2196F3;
    --light-primary-color:#BBDEFB;
    --text-primary-color: #FFFFFF;
    --accent-color: #7C4DFF;
    --primary-text-color: #212121;
    --secondary-text-color: #757575;
    --divider-color: #BDBDBD;

    --shadow-level-1: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    --shadow-level-2: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
    --shadow-level-3: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
    --shadow-level-4: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
    --shadow-level-5: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);

}




*{font-family: 'Roboto', sans-serif; vertical-align: middle; color:var(--primary-text-color, #212121);padding:0; margin:0;box-sizing:border-box;}
html{font-size: 16px;}


header{display:flex; position:fixed; top:0; left:0; /*height:50px;*/ width:100%; background-color:var(--dark-primary-color); justify-content: space-between; box-shadow: var(--shadow-level-3);}

.title{display:inline-block; margin:.5rem 0; color:var(--text-primary-color); padding-left: 3rem; font-size:3rem;font-family: 'Barrio', cursive;line-height:1em;}

nav{display:inline-flex; margin: .5rem auto; flex-flow: row; justify-content: flex-end;}

.nav{display: inline-block; padding:.5rem 1rem; margin: 0 .5rem; background-color:var(--accent-color); color:var(--text-primary-color); transition: box-shadow 0.25s ease; text-decoration: none; font-size:1.5rem; box-shadow: var(--shadow-level-1);}
.nav:hover{box-shadow: var(--shadow-level-3);}

.content{
    width:100%; height:calc(100vh - 4rem);
    margin: 4rem 0 0;
    display:flex;
    flex-flow: row;
    flex-wrap: wrap;
    align-items: stretch;
}

.content-flex{
    height:calc(50vh - 2rem); width:50%;
    display:inline-block;
    fill: var(--default-primary-color);
}

.content-flex polygon{box-shadow: var(--shadow-level-1)}

.flex-light{
    background:var(--text-primary-color);
    color:var(--primary-text-color);
    padding:1rem;
}

.flex-dark{
    background:var(--default-primary-color);
    color:var(--text-primary-color);
    padding:1rem;
}