/* libre-baskerville-regular - latin */
@font-face {
    font-family: 'Libre Baskerville';
    font-style: normal;
    font-weight: 400;
    src: local(''),
         url('/fonts/libre-baskerville-v9-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
         url('/fonts/libre-baskerville-v9-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  }
  
  /* libre-baskerville-italic - latin */
  @font-face {
    font-family: 'Libre Baskerville';
    font-style: italic;
    font-weight: 400;
    src: local(''),
         url('/fonts/libre-baskerville-v9-latin-italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
         url('/fonts/libre-baskerville-v9-latin-italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  }
  
  /* libre-baskerville-700 - latin */
  @font-face {
    font-family: 'Libre Baskerville';
    font-style: normal;
    font-weight: 700;
    src: local(''),
         url('/fonts/libre-baskerville-v9-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
         url('/fonts/libre-baskerville-v9-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  }
/* roboto-regular - latin */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    src: local(''),
         url('/fonts/roboto-v20-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
         url('/fonts/roboto-v20-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  }
  
  
* {padding: 0; margin: 0; color: #333;}
*, *:before, *:after {box-sizing: border-box;}

html {font-size: 15px; height: 100%;}
html, body {min-height: 100%;}
body {font-size: 1rem; border: 2rem solid #ffffff; background-color: #f5f6fb; overflow-y: scroll; line-height: 1.6; font-family: 'Libre Baskerville';}
.page {margin: 3.25rem auto 4rem; max-width: 90rem; width: 100%; padding: 0 10rem; position: relative;}

#brand {margin-bottom: 5.5rem;}
#brand a img {width: 11rem; height: 11rem; border-radius: 100%; display: inline-block; object-fit: cover; margin: -0.25rem 0 0;}
#menu, #togglemenu {position: absolute; right: 10rem; top: 0;}
#menu ul {display: flex;}
#menu ul li {list-style: none; padding-left: 2rem;}
#menu ul li a {text-decoration: none; color: rgb(35, 90, 138); display: inline-block; padding-bottom: 0.1rem;}
#menu ul li.active a {border-bottom: 1px solid rgba(35, 90, 138, 0.6);}
#togglemenu {display: none; color: rgb(35, 90, 138); cursor: pointer;}
.menuopen #togglemenu {color: #f8f7f3;}

.content, .footer {max-width: 45rem; width: 100%;}
.content ul li {list-style: none; padding-left: 1.25rem; position: relative;}
.content ul li::before {content: "›"; position: absolute; left: 0; font-size: 1.5rem; line-height: 1.25rem;}
.content ol {padding-left: 2.2rem;}
.content ol, .content p, .content ul {margin-bottom: 1.5em;}
.content a {text-decoration: none; position: relative; display: inline-block; white-space: nowrap;} 
.content a::before {content: ""; position: absolute; bottom: 0.25em; width: 100%; height: 0.45em; background: rgba(44, 158, 239, 0.25); z-index: -1; transition: all 0.25s ease-in-out;}
.content a:hover::before {height: 1.6em; bottom: 0em; margin: 0 -0.25em; width: calc(100% + 0.5em)}

h1, h2, .home h1 + p {font-weight: normal; line-height: 1.3; font-size: 2rem; margin-bottom: 2rem;}
.home h1 + p {font-size: 1.6rem; margin-bottom: 6.5rem!important; line-height: 1.6;}
h2, .footer {font-family: 'Roboto'; text-transform: uppercase; font-weight: normal; letter-spacing: 0.05rem;}
h2 {font-size: 1.15rem; margin: 4.5rem 0 0.75rem;}
.home .content h1 {font-size: 1.6rem; margin-bottom: 0rem; line-height: 1.6;}

.footer {border-top: 1px dotted rgba(51, 51, 51, 0.5); font-size: 0.7rem; padding: 0.65rem 0; margin-top: 9rem;}
.footer a {display: inline-block; text-decoration: none;}

@media only screen and (max-width: 75rem) {
    #togglemenu {display: block;}
    #menu {display: none;}
    #menu ul {display: block; text-align: right; margin-top: 2.15rem;}
    #menu ul li a {border-bottom: 0!important; margin-bottom: 0.4rem;}
    #menu ul li.active a {text-decoration: line-through;}
    .menuopen #menu {display: block;}
}
@media only screen and (max-width: 60rem) {
    .page {padding: 0 7vw; margin: 3rem auto 3rem;}
    #menu, #togglemenu {right: 7vw;}
    body {border: 3vw solid #ffffff;}
    .menuopen #brand a img {opacity: 0.25;}
}
@media only screen and (max-width: 30rem) { 
    #brand a img {width: calc(10vw + 5rem); height: calc(10vw + 5rem); margin-top: -0.1rem;}
    .content a {text-decoration: underline; text-decoration-thickness: 0.25rem; text-decoration-skip-ink: none; text-decoration-color: rgba(44, 158, 239, 0.25); white-space: normal; display: inline;}
    .content a:hover, .content a:focus {text-decoration: none; background: rgba(44, 158, 239, 0.25);}
    .content a::before {content: none;}
}
@media only screen and (max-width: 25rem) { 
    body {border: 0;}
    .page {padding: 0 5vw; margin: 2rem auto;}
    #menu, #togglemenu {right: 5vw;}
}