/* Properties ordered by: Positioning, Display & Box Model, Color, Text, Other */

/* Globals */

* {box-sizing: border-box; font-family: 'Droid Sans', tahoma, arial, helvetica, sans-serif;}
body {margin: 0; padding: 0; background-color: #eff0f0; color: #0f1010; font-size: 18px;}
h1, h2, h3, h4, h5, h6 {font-family: 'Merriweather', serif; line-height: 1.2}
h1 {font-size: 1.6em;}
h2 {font-size: 1.4em;}
h3 {font-size: 1.225em;}
h4 {font-size: 1.1em;}
h5 {font-size: 1em;}
h6 {font-size: 0.8em;}
p {line-height: 1.3}
p:first-child, h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child, h6:first-child {margin-top:0;}
p:last-child, h1:last-child, h2:last-child, h3:last-child, h4:last-child, h5:last-child, h6:last-child {margin-bottom:0;}
a {color: #002c3d;}
header {margin: 0 0 1em 0;}
footer {margin: 1em 0 0 0;}

/* Layout */

body,
.flexbox {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
}

.container {
    margin: 0;
    padding: 2em;
    min-height: 100vh;
    max-width: 800px;
}

.tooltip-context {position: relative;}

.tooltip-context a {cursor: help;}

.tooltip {
    position: absolute;
    top: 1.75em;
    left: 1.25em;
    visibility: hidden;
    opacity: 0;
    margin: 0;
    padding: 1em;
    width: auto;
    width: fit-content;
    background: #0f1010;
    color: #eff0f0;
    transition-property: visibility, opacity;
    transition-duration: 0.5s;
    transition-timing-function: ease-in-out;
}

.tooltip::before {
    /* adds the arrow to the top of the tooltip */

    content: '';
    position: absolute;
    top: -0.7em;
    left: 1em;
    display: block;
    width: 0;
    height: 0;
    border-left: 0.75em solid transparent;
    border-right: 0.75em solid transparent;
    border-bottom: 0.75em solid #0f1010;
}

.tooltip::after {
    /* plugs the gap between the link and the tooltip that causes
       the hover state to deactivate when the user moves the cursor
       from the link to the tooltip */

    content: '';
    position: absolute;
    top: -0.75em;
    left: 0;
    display: block;
    width: 100%;
    height: 0.8em;
}

#define:target .tooltip {
    display: initial;
    visibility: visible;
    opacity: 1;
}

.tooltip a {
    color: #c2eeff;
    cursor: pointer;
}

.close-btn {
    display: none;
    margin-top: 1em;
    font-size: 0.8em;
    text-align: center;
}

.close-btn a {
    text-decoration: none;
}
    
#define:target .close-btn {
    display: block;
}

@media (hover: hover) {
    /* the hover media query is in working draft
       https://developer.mozilla.org/en-US/docs/Web/CSS/%40media/hover#Browser_compatibility */
	/* Hover behaviour is inconsistent across touch screen devices,
       and browser compatibility for the hover media query is
       currently low, the hover effects defined here should not be
       essential to the UX as many users won't benefit */

    .tooltip-context:hover .tooltip {
        display: initial;
        visibility: visible;
        opacity: 1;
    }

}

@media (min-width: 44.444445em) {

    .container {margin-left: calc((100vw - 800px) / 4);}

}

@media (min-width: 700px) {

    h1 {font-size: 2em;}
    h2 {font-size: 1.6em;}

}