/* Font & text color
--------------------------------*/

body {
	font-family: 'Eczar', serif;
    font-weight: 500;
	color: black;
	background-color: white;
}

::-moz-selection, ::selection {
	color: white;
	background-color: black;
}

.footnote {
	color: #AAAAAA;
}

/* Font sizes
--------------------------------*/

body {
	font-size: 1.45em;
}

@media screen and (max-width: 1100px) {
    body {
        font-size: 20px;
    }
}

@media screen and (max-width: 500px) {
	body {
		font-size: 20px;
	}
}

/* Hyperlinks 
--------------------------------*/

a {
	color: black;
	text-decoration: none;
  	font-weight: bold;
}

/* Layout
--------------------------------*/

html, body {
	margin:0;
	padding:0;
	width: 100%;
}

body {
	position: absolute;
	min-height:100%;
}

/* Header
--------------------------------*/

header {
	z-index: 1;
	position: absolute;
	top: 2%;
	left: 2%;
	right: 2%;
}

header a {
	display: inline-block;
}

@media screen and (max-width: 550px) {
    header {
        position: relative;
        top: unset;
        left: unset;
        margin-top: 2em;
        margin-left: 2em;
        margin-right: 2em;
        max-width: unset;
    }
}

#animated_logo {
	overflow: hidden;
	font-weight: 800;
	font-size:2.2em;
	text-transform: none;
	max-height:1.3em;
}

a #animated_logo {
    text-decoration: none;
    font-weight: 800;
	text-transform: none;
}

a:hover #animated_logo {
	color: black;
}

.olek-logo-cursor {
	background-color:black;
}

.olek-logo-cursor, .olek-logo-invisible-cursor {
	display:inline-block;
	width:1px;
	height:1.3em;
    vertical-align: top;
 }

.olek-logo-selected {
	display:inline-block;
	background-color:black;
	color:white;
}

header .header-logo {
	position: absolute;
	right: 0;
	top: 0;
}

header .header-logo img {
	width: 3.2em;
}

/* Content
--------------------------------*/

article {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
}

article #content {
    text-align: initial;
    display: inline-block;
    max-width: 350px;
}

@media screen and (max-width: 1100px) {
    article #content {
        max-width: 300px;
    }
}

@media screen and (max-width: 900px) {
    article {
        height: 100%;
    }
}

@media screen and (max-width: 550px) {
    article {
        display: block;
        height: unset;
        width: 100%;
        text-align: center;
    }
    article #content {
    }
}

article #content > p:first-child {
	margin-top: 7em;
}
article #content > p:last-child {
	margin-bottom: 6em;
}

@media screen and (max-width: 550px) {
    article #content > p:first-child {
        margin-top: 3em;
    }
}

article #content > p {
	line-height: 1.1em;
	margin-bottom: 1em;
}

article a {
	text-decoration: underline;
}

/* Footer
--------------------------------*/

footer {
	position: absolute;
	left: 2%;
	right: 2%;
	bottom: 2%;
}

footer .footer-icon {
	width: 12em;
}

footer .footer-copy {
	position: absolute;
	right: 0;
	bottom: 0;
	height: 12em;
}

footer .footer-copy strong {
	display: inline-block;
	transform: rotate(-90deg) translate(-100%, 200%);
/*  	transform-origin: left bottom;*/
}

@media screen and (max-width: 550px) {
    footer {
        display: block;
        position: relative;
        left: unset;
        bottom: unset;
        margin-top: 1em;
        margin-left: 2em;
        margin-right: 2em;
        margin-bottom: 2em;
        max-width: unset;
    }
}