*,
 ::before,
 ::after {
    box-sizing: border-box;
}


/* Keyframes - fadein */

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

html {
    color: #222222;
    background-color: #f6f2eb;
    -webkit-font-smoothing: subpixel-antialiased;
    -webkit-tap-highlight-color: #222222;
    margin-left: calc(100vw - 100%);
    /*Prevents jump between scroll bar/no scroll bar*/
}

body {
    font-size: 1em;
    line-height: 1.3;
    font-size: calc(1.1em + (1.3125 - 1) * ((100vw - 20em) / (80 - 20)));
    line-height: calc(1.3em + (1.4 - 1.3) * ((100vw - 20em) / (80 - 20)));
    margin: 0 auto;
    padding: 0 5% 5% 5.5%;
    word-break: break-word;
    overflow-wrap: break-word;
    scroll-behavior: smooth;
    max-width: 40em;
}

main {
    /* fadein */
    animation: fadein ease-in 0.5s;
}

article {
    max-width: 32em;
    margin: 0 auto;
}


/* Subset font loading */

.fonts-stage-1 body,
.no-js body {
    font-family: 'Volkorn-Subset';
    font-weight: 300;
}

.fonts-stage-1 h1,
.fonts-stage-1 h2,
.no-js h1,
.no-js h2 {
    font-weight: bold;
}

.fonts-stage-1 em,
.no-js em {
    font-style: italic;
}


/* Full font loading */

.fonts-stage-2 body,
.no-js body {
    font-family: 'Vollkorn-Regular';
}

.fonts-stage-2 h1,
.fonts-stage-2 h2,
.fonts-stage-2 strong,
.fonts-stage-2 b,
.no-js h1,
.no-js h2,
.no-js strong,
.no-js b {
    font-family: 'Vollkorn-SemiBold';
    font-weight: bold;
}

.fonts-stage-2 em,
.no-js em {
    font-family: 'Vollkorn-Italic';
    font-style: italic;
}

header {
    text-align: center;
    margin-top: 4vh;
    margin-bottom: 4vh;
    letter-spacing: 1px;
    line-height: 1.1;
    animation: fadein ease-in 0.5s;
}

header p {
    letter-spacing: 0;
    margin: 0;
    margin-top: 1em;
    margin-bottom: -1em;
}

h2 {
    text-align: center;
}

h2 em {
    letter-spacing: 0;
    letter-spacing: 1px;
    font-size: 70%;
    font-weight: normal;
}

h3 {
    text-align: center;
    font-weight: 600;
    letter-spacing: 1px;
}

.quotes {
    font-weight: bold;
}

.author {
    font-weight: bold;
    text-align: right;
}

img {
    width: 13em;
    max-width: 100%;
    opacity: 0.85;
    /* Line drawing a bit ense and mencacing on smaller screens */
}

.picture_wrapper {
    margin: 0 auto;
    width: 13em;
}

a,
a:visited {
    color: #222222;
    background-color: #f6f2eb;
    text-decoration-skip: ink;
    text-decoration-skip: auto;
    padding: 0 3px;
}

a:focus,
a:hover {
    color: #f6f2eb;
    background-color: #222222;
    text-decoration: none;
    border-radius: 0.2em;
}

a:active {
    color: #f2f2f2;
    background-color: #666666;
    text-decoration: none;
    border-radius: 0.2em;
}


/* External Links */

[href^="http"]:not(.btn):not([href*="sleepywombatt.com"]):not([href*="sleepywombatt.test"]):not([href*="bigmac.local"]):not([href*="192.168.1.152"]):not([href*="test.shoesforindustry.net"])::after {
    display: inline-block;
    width: 0;
    height: 0;
    opacity: 0.6;
    background-repeat: no-repeat;
    background-position: left;
    background-size: 60% auto;
    /* alternative text rules */
    content: '(external link)';
    overflow: hidden;
    white-space: nowrap;
    /* the width of the icon */
}


/* Fancy Divider */

hr.divider {
    /* For IE */
    overflow: visible;
    padding: 0;
    border: none;
    border-top: medium double #5a5a5a;
    background-color: #f6f2eb;
    text-align: center;
    margin: 0 auto;
    width: 13em;
    margin-bottom: 0.75em;
    line-height: 0.9;
}

hr.divider::after {
    text-align: center;
    margin: 0 auto;
    color: #5a5a5a;
    content: '§';
    transform: rotate(-90deg);
    display: inline-block;
    position: relative;
    top: -0.5em;
    font-size: 1.5em;
    padding: 0;
    background-color: #f6f2eb;
}


/* Intrinsic Image Ratios - http://daverupert.com/2015/12/intrinsic-placeholders-with-picture */

.intrinsic {
    /* Make sure <picture> wrapper is set to block
  Max-width is governed by parentNode */
    display: block;
    /* Intrinsic Ratio Box */
    position: relative;
    height: 0;
    width: 100%;
    padding-top: 100%;
    /* Default to square */
}


/* Add as many ratios as you'd like...*/

.intrinsic--square {
    padding-top: 100%;
}

.intrinsic--4x3 {
    padding-top: 75%;
}

.intrinsic--4x2 {
    padding-top: 66.6666667%;
}

.intrinsic--30x23 {
    padding-top: 76.6666667%;
}

.intrinsic--16x9 {
    padding-top: 56.25%;
}


/* Force the item to fill the intrinsic box */

.intrinsic-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


/* Fix IE10 Snap Mode & Windows Phone 8
 http://trentwalton.com/2013/01/16/windows-phone-8-viewport-fix/
 needs JS in header
 */

@-webkit-viewport {
    width: device-width;
}

@-moz-viewport {
    width: device-width;
}

@-ms-viewport {
    width: device-width;
}

@-o-viewport {
    width: device-width;
}

@viewport {
    width: device-width;
}


/* For MS Touch Devices */

canvas {
    -ms-touch-action: double-tap-zoom;
}


/* Mobile prevent callout */

.nocallout {
    -webkit-touch-callout: none;
}


/* Mobile text overflow with ellipsis */

.ellipsis {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}


/* Allow only vertical resizing of textareas.*/

textarea {
    resize: vertical;
}

footer {
    margin: 0 auto;
    text-align: center;
}

.center {
    margin: 0 auto;
    text-align: center;
}

a.btn,
a:visited.btn {
    border: 1px solid #aaaaaa;
    background-color: #f6f2eb;
    color: #444444;
    padding: 0.3em 1.2em;
    text-align: center;
    display: inline-block;
    /* Background clip for Android link buttons,
  r    emoves square showing outside of radius */
    -moz-background-clip: padding-box;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    z-index: 1;
    border-radius: 0.25em;
    text-decoration: none;
}

a:hover.btn,
a:focus.btn {
    border: 1px solid #222;
    background-color: #f6f2eb;
    color: #000;
    outline: 0;
    display: inline-block;
    font-weight: 600;
    text-decoration: none;
    text-shadow: none;
    font-weight: normal;
    transition: transform 0.2s;
    transform: scale(1.05, 1.05);
}

a:active.btn,
a.active.btn {
    opacity: 0.4;
    text-shadow: none;
    background: transparent;
    color: #f6f2eb;
    border: 1px solid grey;
    background-color: grey;
    transition: transform 0.2s;
    transform: scale(.95, .95);
}

a.btn-small {
    padding: 0.2em 1em;
    font-size: smaller;
}

.introduction {
    margin-top: 0;
    margin-bottom: 0;
    padding: 0;
    h2 {
        margin-top: 0;
        margin-bottom: 0;
        letter-spacing: 1px;
    }
}


/* Hide only visually, but have it available for screenreaders: h5bp.com/v */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}


/* Media Queries */

@media (min-width: 68em) {
    body {
        /* Larger Fonts */
        font-size: 1.3125em;
        line-height: 1.4;
        max-width: 68em;
    }
    /* Split Main text into two colums */
    .columns {
        columns: 2;
        column-gap: $gutterwidthrem * 3;
        column-fill: balance;
        -webkit-column-rule: 1px dotted #ccc;
        -moz-column-rule: 1px dotted #ccc;
        column-rule-width: 1px dotted #ccc;
        column-rule-color: #ccc;
    }
    .columns>p {
        margin-top: 0;
    }
    img {
        opacity: 1;
    }
    hr.divider {
        width: 16em;
    }
}


/*End media Query min-width:69em;*/