/* Theme */
.theme {
    color:              hsl(0, 0%, 25%);
    background:         hsl(0, 0%, 97%);
}
.theme hr {
    border-top:         1px solid hsl(0, 100%, 33%);
}
.theme.button {
    box-shadow:         0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
    border-radius:      8px;
}

.dark-mode {
    color:              hsl(0, 0%, 95%);
    background:         hsl(0, 0%, 25%);
}
.darkmode hr {
    border-top:         1px solid hsl(0, 100%, 33%);
}
.darkmode.button {
    box-shadow:         0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
    border-radius:      8px;
}

/* Main */
html {
  scroll-behavior: smooth;
}

body {
    font-weight:        normal;
    text-decoration:    none;
    line-height:        1.25;
    vertical-align:     baseline;
    font-size:          11pt;
    font-family:        "Avenir";
    font-style:         normal;
    max-width:          90vw;
    padding:            1vw;
}

br {
    content: "";
    margin: 2em;
    display: block;
    font-size: 20%;
}

article {
    max-width:          700px;
    margin:             auto;
}

audio {
    width:              80%;
}

ol {
    margin:             0;
    padding-top:        5pt;
    padding-left:       25px;
}
ul {
    margin:             0;
    padding-top:        5pt;
    padding-left:       25px;
}
li {
    margin-left:        3em;
    padding-left:       0.5em;
    line-height:        1.5;
}

table td,table th {
    border-collapse:    collapse;
    font-size:          11pt;
    padding:            10px 0px 5px 5px;
    vertical-align:     top;
}

tr:nth-child(even) {
    background-color:   hsl(0, 0%, 90%);
}

table td.name {
    white-space:        no-wrap;
    width:              30%;
}

table.blog-title {
    padding-top:        2em;
    width:              100%;
}
table.blog-title td {
    margin:             0;
    padding:            0;
    vertical-align:     bottom;
}

p {
    margin:             0;
}
.centered {
    padding-top:        6pt;
    padding-bottom:     6pt;
    text-align:         center;
}
.text {
    padding-top:        6pt;
    padding-bottom:     6pt;
}
.alinea {
    padding-top:        6pt;
    padding-bottom:     6pt;
}
.alinea::before {
    content:            "\00A0\00A0\00A0\00A0";
}
.definition {
    padding-top:        0pt;
}
.definition::before {
    content:            "\00A0\00A0\00A0\00A0";
}

a:link {
    color:              hsl(0, 0%, 20%);
    text-decoration:    underline;
}
a:hover {
    color:              hsl(0, 100%, 33%);
    text-decoration:    none;
}
a:visited {
    color:              #666;
    text-decoration:    underline;
}

img {
    width:              80%;
    border-radius:      2%;
    margin-left:        auto;
    margin-right:       auto;
}

hr {
    width:              66%;
}
hr.blog {
    width:              33%;
}

.h1 {
    font-size:          20pt;
    padding-top:        20pt;
    padding-bottom:     6pt;
}
.h2 {
    font-size:          16pt;
    padding-top:        18pt;
    padding-bottom:     6pt;
}
.h3 {
    color:              #434343;
    font-size:          14pt;
    padding-top:        16pt;
    padding-bottom:     4pt;
}
.h4 {
    color:              #666;
    font-size:          12pt;
    padding-top:        14pt;
    padding-bottom:     4pt;
}
.h5 {
    color:              #666;
    font-size:          11pt;
    padding-top:        12pt;
    padding-bottom:     0pt;
}

h1,h2 {
    font-weight:        normal;
}

.title {
    padding-top:        2em;
    font-size:          26pt;
    padding-bottom:     1em;
    text-align:         center;
}
.subtitle {
    padding-top:        0pt;
    color:              #444;
    font-size:          15pt;
    padding-bottom:     16pt;
    text-align:         center
}
.quote {
    padding-top:        12pt;
    color:              #666;
    font-size:          11pt;
    padding-bottom:     4pt;
    font-style:         italic;
    padding-right:      5em;
    padding-left:       3em;
}
.quote-by {
    text-align:         right;
    padding-right:      3em;
    padding-bottom:     25px
}
.quote-by::before {
    content:            "\2014\00A0\00A0"
}

/* toc */
.toc {
    background:         white;
    color:              #434343;
    -webkit-animation: fadeIn 0.5s;
}
.toc li {
    line-height:        1.3;
    list-style-type:    none;
    padding-left:       0;
}

.toc a:link {
    color:              #434343;
    padding-top:        0;
}
.toc a.h1 {
    font-size:          11pt;
    padding-left:       0;
}
.toc a.h2 {
    font-size:          10.5pt;
    padding-left:       1em;
}
.toc a.h3 {
    font-size:          10pt;
    padding-left:       2em;
}
.toc a.h4 {
    font-size:          9.5pt;
    padding-left:       3em;
}


.h1:target,
.h2:target,
.h3:target,
.h4:target,
.h5:target {
    animation: highlight 1s ease;
}

@keyframes highlight {
    from    { color: #800; }
    to      { color: hsl(0, 0%, 20%); }
}


#vertical-nav a {
    text-align:         left;
    text-decoration:    none;
    transition:         color 0.25s;
}

#vertical-nav a.active,  #vertical-nav a:hover {
    color:              #880000;
}

.float-panel header {
    padding:            3px;
    background-color:   inherit;
}

.modal {
    display:            none; /* Hidden by default */
    position:           fixed; /* Stay in place */
    z-index:            1; /* Sit on top */
    left:               0;
    top:                0;
    width:              100%; /* Full width */
    height:             100%; /* Full height */
    overflow:           auto; /* Enable scroll if needed */
    background-color:   rgb(0,0,0); /* Fallback color */
    background-color:   rgba(0,0,0,0.4); /* Black w/ opacity */
}

.modal-content {
    width:              20em;
    max-width:          90vw;
    max-height:         90vh;
    overflow-y:         auto;
    overflow-x:         none;
    position:           absolute;
    left:               60%;
    top:                10px;
    transform:          translate(-50%, 0);
    margin:             10px;
    /*border-radius:      0.5em;*/
}

audio {
    padding-top:        2em;
    padding-bottom:     2em;
    margin-left:        10%;
    margin-right:       10%;
}

@media only screen and (max-width: 600px) {

    .modal-content {
        left:               50%;
    }

    .quote {
        padding-left:       2em;
        padding-right:      1em;
    }

    audio {
        transform: scale(1.2);
    }

    img {
        width:              90%;
    }

    .left {
        min-width:          90%;
        display:            inline-block;
        padding:            0.5em 1em 1em 1em;
        margin-left:        5%;
    }

    .right {
        min-width:          90%;
        display:            inline-block;
        padding:            0.5em 1em 1em 1em;
        margin-right:        5%;
    }

}

/* Popup container - can be anything you want */
.popup {
    position:               relative;
    display:                inline;
    cursor:                 pointer;
    -webkit-user-select:    none;
    -moz-user-select:       none;
    -ms-user-select:        none;
    user-select:            none;
    color:                  #666666;
    text-decoration:        underline dashed;
}

/* The actual popup */
.popup .popuptext {
    visibility:             hidden;
    width:                  320px;
    background-color:       #555;
    color:                  #fff;
    text-align:             left;
    font-wight:             lighter;
    border-radius:          6px;
    padding:                8px;
    position:               absolute;
    z-index:                1;
    bottom:                 125%;
    left:                   50%;
    margin-left:            -160px;
}

.popup .empty {
    width:                  160px;
    margin-left:            -80px;
    text-align:             center;
}

.popup .left {
    margin-left:            -60px;
}

.popup .right {
    margin-left:            -260px;
}

.popup .popuptext a:link {
    color:                  #eee;
    text-decoration:        none;
}
.popup .popuptext a:hover {
    color:                  #ddd;
    text-decoration:        underline;
}
.popup .popuptext a:visited {
    color:                  #ddd;
    text-decoration:        none;
}

/* Popup arrow */
.popup .popuptext::after {
    content:                "";
    position:               absolute;
    top:                    100%;
    left:                   48%;
    margin-left:            -5px;
    border-width:           5px;
    border-style:           solid;
    border-color:           #555 transparent transparent transparent;
}

.popup .left::after {
    left:                   15%;
}

.popup .right::after {
    left:                   75%;
}

/* Toggle this class - hide and show the popup */
.popup .show {
    visibility:             visible;
    -webkit-animation:      fadeIn 0.5s;
    animation:              fadeIn 0.5s;
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
  from  {opacity:   0;}
  to    {opacity:   1;}
}

@keyframes fadeIn {
  from  {opacity:   0;}
  to    {opacity:   1;}
}

.blog-button {
    background-color:   hsl(0, 0%, 90%);
    cursor:             pointer;
    padding:            8px;
    padding-right:      24px;
    width:              100%;
    border:             none;
    text-align:         left;
    outline:            none;
    font-size:          inherit;
    border-radius:      4px;
}
.blog-button:hover {
    background-color:   hsl(0, 0%, 85%);
}
.blog-button:active {
    background-color:   hsl(0, 0%, 80%);
}
.blog-button.active {
    text-align:         right;
}


.blog-content {
    display:            none;
}

.language-toggle {
    background-color:   hsl(0, 0%, 93%);
    cursor:             pointer;
    padding:            8px;
    padding-left:       8px;
    border:             none;
    text-align:         right;
    outline:            none;
    font-size:          8pt;
    border-radius:      4px;
}

.NL {
    display:            block;
}

.EN {
    display:            none;
}

.left{
    width:              60%;
    float:              left;
    padding:            0.5em 2em 1em 0;
}

.right{
    width:              60%;
    float:              right;
    padding:            0.5em 0 1em 2em;
}