/*  HTML5 ✰ Boilerplate  */
html, body, span, h1, h2, h3, h4, p,
dl, dt, dd, ol, ul, li,
hgroup, section, time {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
    letter-spacing:normal;
    word-spacing:normal;
}
ol, ul, li { list-style: none; }
hgroup, section { display:block; }
a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; letter-spacing:normal; word-spacing:normal; }
body { font:13px/1.231 sans-serif; *font-size:small; }
h1,h2,h3,h4 { font-weight: bold; }
::-moz-selection{ background: #069; color:#fff; text-shadow: none; }
::selection { background:#069; color:#fff; text-shadow: none; }
a:link { -webkit-tap-highlight-color: #FF5E99; }

/* Primary Styles */
body {
    background-color: #FFF;
    color: #000;
    font-family: Verdana;
    line-height: 1.5;
    margin: 1px;
    padding: 2em;
}
hgroup, section {
    margin-bottom: 22px;
}
h1 {
    font-size: 197%;
}
h2 {
    font-size: 153.9%;
}
h3 {
    font-size: 116%;
}
a.portfolio {
    font-size: 200%;
    font-weight: bold;
}
dt, dd {
    display: block;
    margin-top: 0.25em;
}
dd {
    margin-left: 20px;
}
ul li:before {
    color: #069;
    content: ".:";
    padding: 0 5px 0 0;
}
ol li {
    border-bottom: 1px dotted #069;
    margin-top: 5px;
    padding-bottom: 5px;
    width: 100%;
}
ol li:last-child {
    border-bottom: 0 none;
    padding-bottom: 0;
}
time {
    font-style: italic;
    font-weight: normal;
}
.where:before {
    color: #069;
    content: "@";
    font-weight: normal;
    margin: 0;
    padding: 0 0.2em;
}
.location {
    color: #666;
    font-size: 93%;
    font-weight: normal;
    padding: 0 0 0 4px;
}
#intro p, .what, .what-dett {
    margin: 0.3em 0;
    text-align: justify;
    text-indent: 1em;
}
a:link, a:visited, a:hover, a:active {
    border-bottom: 0 solid;
    color: #069;
    text-decoration: none;
}
a:hover, a:active {
    border-bottom: 1px solid;
}
a.url {
    word-wrap: break-word;
}


@media screen {
    html {
        background-color: #069;
    }
    body {
        background-color: #EEE;
        color: #333;
        position: relative;
    }
}

/* body:before {
    content: '';
    display: block;
    height: 100vh;
    width: 0;
    position: fixed;
    border-left: 1px solid red;
    top: 0;
    left: calc(50% - min(350px, 40%) * 0.4);
}
body:after {
    content: '';
    display: block;
    height: 100vh;
    width: 0;
    position: fixed;
    border-left: 1px solid red;
    top: 0;
    left: calc(50% - min(350px, 40%) * 0.4 + 20px);
} */