/*------------------------------------*\
   Page
\*------------------------------------*/

html {
    box-sizing: border-box;
    font-size: 16px;
}
@media (max-width: 768px) {
    html {
        font-size: 15px;
   }
}
@media (max-width: 400px) {
    html {
        font-size: 13px;
   }
}
 *, *:before, *:after {
    box-sizing: inherit;
}
:root {
    --bg-colour: #fefefe;
    --text-colour: #353535;
    --title-colour: #363636;
    --accent-colour: #f00;
    --hover-colour: #db0000;
}
::selection {
    color: var(--bg-colour);
    background: var(--hover-colour);
}
::-moz-selection {
    color: var(--bg-colour);
    background: var(--hover-colour);
}
body {
    font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif !important;
    line-height: 1.5;
    width: 85%;
    padding: 0 2% 2% 4%;
    margin: 0;
    background-color: var(--bg-colour);
    color: var(--text-colour);
    counter-reset: sidenote-counter;
}
@media (max-width: 768px) {
    body {
        width: 100%;
        padding: 0 8% 0 8%;
   }
}






/*------------------------------------*\
  Content
\*------------------------------------*/

.title {
    font-weight: bold;
    color: var(--hover-colour);
}
.title--toc {
    display: inline-block;
    padding: 10px 50px 10px 10px;
    margin: 0.9rem 0 0.9rem 0;
    font-size: 2.3rem;
    color: var(--bg-colour);
    background: var(--hover-colour);
}
.title--toc::selection {
    color: var(--hover-colour);
    background: var(--bg-colour);
}
.title--toc::-moz-selection {
    color: var(--hover-colour);
    background: var(--bg-colour);
}
.link {
    color: var(--accent-colour);
    text-decoration: underline;
}
.link:hover {
    color: var(--hover-colour);
}
.link:focus {
    color: var(--hover-colour);           
    font-weight: bold; 
}