html{scroll-behavior: smooth;}
body {
    font-size: 20px;
    line-height: 28px;
}
/* Globals */
* {font-family: 'Open Sans', serif; box-sizing:border-box; position: relative;}
h1,h2,h3,h4,h5,h6{ font-family: 'Montserrat', serif; font-weight: 900; line-height: initial; }

a:link { text-decoration:underline; color: blue; transition: all .3s ease; }
a:hover { color: teal; }

.clickable { cursor:pointer; display:block; }

.wrapper { position: relative; width:100%; max-width:1400px; margin:0px auto; padding:0 1em; }
article.wrapper.content{position: relative; margin-bottom:3em;}

.flex{ display: flex; flex-wrap: wrap; justify-content: space-between; position: relative;}
.flex>.one-third{width:38.33%;}
.flex>.two-third{width:CALC(61.66% - 1em);}


header .logo{
    display: flex;
    align-items: center;
}
nav{ z-index: 1;}
nav .menu{
    list-style: none;
    padding:0;
    margin:0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: space-between;
    align-items: center;
}
nav .menu .sub-menu{
    display: none;
    position: absolute;
    width: 300px;
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid blue;
    background: blue;
    flex-direction: column;
    gap: 1px;
}
nav .menu .menu-item:hover .sub-menu{
    display:flex;
}
nav li{}
nav .menu .menu-item:hover .sub-menu a{
    display: block;
    background: #fff;
    padding: 5px 8px;
    font-size: 0.8em;
}


nav ul li.admin-link{}
nav ul li.admin-link.logout{}