@font-face {
    font-family: 'FontAwesome';
    src: url('../fonts/FontAwesome/fontawesome-webfont.eot');
    src: url('../fonts/FontAwesome/fontawesome-webfont.eot') format('embedded-opentype'), url('../fonts/FontAwesome/fontawesome-webfont.woff2') format('woff2'), url('../fonts/FontAwesome/fontawesome-webfont.woff') format('woff'), url('../fonts/FontAwesome/fontawesome-webfont.ttf') format('truetype'), url('../fonts/FontAwesome/fontawesome-webfont.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

:focus {outline:none;}
* {padding:0; margin:0;}
html, body {width:100%; height:100%;}
body {
    background-color:#29292a;
    background-image:linear-gradient(#29292a,#3d3d3f);
    font-size:10.5pt; cursor:default; /*text-align:justify;*/
    font-family:"Lato",sans-serif; letter-spacing:0.03em;
    font-weight:lighter;
}

main { 
    max-height:100%;
    overflow-y:scroll;
}
main section:last-child {
    margin-bottom:19.1vh;
}
section, nav {
    margin-left:auto; margin-right:auto; 
    color:#dfdfe2;
    position:relative;
    box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 3px 10px 0 rgba(0, 0, 0, 0.2), 0 2px 4px -1px rgba(0, 0, 0, 0.12);
    background-color:#29292a;
    background-color:rgba(255, 255, 255, 0.0157);
    display:block;
    width:512px; max-width:90%;
    margin-top:3em;
    margin-bottom:0;
    padding-bottom:2em;
}
#vcard {
    width:505px; height:289px; /* 505 => 512 due to border... aspect ratio 1.78 */
    border-left:7px solid rgba(42,143,146,0.75);
    margin-top:calc(38.2vh - 0.618 * 289px);
}
#vcard, nav {
    padding-bottom:0;
}

#vcardlogo {
    position:relative;
    height:61.8%;
}
#vcardlogo .descr {
    position:absolute;
    bottom:0;
}

/* partial logo */
/* image aspect ratio must be 1.78 i.e. 16:9 */
/*
#vcardlogo { 
    background:url("../img/test178.1.png");
    background-repeat:no-repeat;
    background-size:46.35% 75%; 
    background-position:87.5% 50%;
}
@media only screen and (max-width:550px) {
    #vcardlogo { background-size:33%; }
}
@media only screen and (max-width:455px) {
    #vcardlogo { background-size:27%; background-position:95% 50%; }
}
*/

/* full logo */
/* image aspect ratio must be 2.83 */

#vcardlogo { 
    background:
	linear-gradient(191deg, rgba(0,0,0,0.075) -20%, rgba(0,0,0,0.85)), 
	url("../img/suomi_283colored.jpg");
    background-repeat:no-repeat;
    background-size:100% 100%;
    background-position:0% 0%;
}
@media only screen and (max-width:550px) {
    #vcardlogo { background-size:cover; background-position:50% 50%; }
}


h1 { display:none; }

section hr {
    background-color:#616164; border:0; height:1px; 
    margin-bottom:0.75em; width:100%;
}
h1, h2, h3 {
    clear:both; font-size:1.3em;
    line-height:1.3em; text-transform:capitalize;
    font-weight:bold; font-family:"Julius Sans One", sans-serif;
    padding:1.5em 7% 1em 7%;
}
h3 {
    font-size:0.85em; 
    letter-spacing:0.0825em;/*0.0625em*/
}
#vcard h1, #vcard h2, #vcard h3 {
    margin:0; padding:0;
    margin-left:14%; 
}
#vcard h3 {
    padding:0.5em 0.05em;
    margin-bottom:0.33em;
}
#vcard #vcardlogo .descr {
    text-shadow:1px 1px 2px rgba(0,0,0,0.95);
}


dl { width:89%; margin-left:4%;}
dt { float:left; width:29%; text-align:right;}
dd { margin-left:29%; padding-left:1em;}
dl > dt, dl> dd { margin-top:0.5em; }
dl dt:first-of-type, dl dd:first-of-type {margin-top:0;}
dt::after {content:":";}

dd.quote {font-style: italic; font-weight: normal;}
dd.quote em, dd.quote i, dd.quote cite {font-style: normal;}
dd.quote cite {color: #9f9fa2; font-weight:300; letter-spacing:0.05em; text-transform: uppercase;}
dd.quote small {font-size:0.7em; display:block; padding-top:0.33em;}
dd.quote br {margin-bottom:0.5em;}

dt::before {
    content:""; position:absolute; left:7%;
    display:inline-block;
    font:normal normal normal 14px/1 FontAwesome;
    font-size:0.75em;
    padding-top:0.25em;
    transform:translate(0, 0);
}
#vcard dt::before {
    left:6%;
}
dt.mail::before {content:"\f003";}
dt.external::before {content:"\f08e";}
dt.src::before {content:"\f002";}
dt.year::before {content:"\f133";}
dt.topic::before {content:"\f19d";}
dt.lang::before {content:"\f1ab";}
dt.location::before {content:"\f124";}


a {text-decoration:none; cursor:default; color:#dfdfe2; transition:all 0.2s ease-in-out;}
a:hover {cursor:pointer; color:#2a8f92;}
/*a:hover::before {content:"\203A";}
a:hover::after {content:"\2039";}*/

p { margin:0 7%; padding-bottom:0.85em; text-align:justify; }

nav ul {
    display:flex;
    height:100%;
}
nav ul li {
    height:100%;
    display:flex;
    flex:1 1 100%;
    justify-content:center; align-items:center; 
    transition:all 0.5s ease-in-out;
    border-bottom:2px solid transparent;
}
nav ul li:hover { 
    border-bottom-color:rgba(42,143,146,0.75);
    background-color:rgba(0,0,0,0.0628);
}
nav ul li a { 
    display:flex; 
    flex:1 1 100%;
    justify-content:center; align-items:center; 
    padding:1.25em 0;
    cursor:pointer;
}

#antiSpam1::after {content:"@";}
#antiSpam2 {margin-left:1ex; margin-right:1ex;}
#antiSpam3 {}
#antiSpam4 {margin-left:1ex; margin-right:1ex;}
#antiSpam5::before {content:".";}
#antiSpam2, #antiSpam4 {display:inline-block; width:0; font-size:.001px; color:transparent;}



@media only screen and (max-width:550px) {
    nav ul, nav ul li {
	display:block;
    }
    dt { clear:both; width:100%; text-align:left; padding-left:10%; margin-bottom:0.33em;}
    dd { margin-left:10%; }
    #vcardlogo { height:38.2% }
}
@media only screen and (max-width:550px), only screen and (max-height:500px) {
    #vcard { margin-top:1em; }
}
@media only screen and (max-width:350px) { body { font-size:10pt; } }
@media only screen and (max-width:300px) { body { font-size:9pt; } }