/*body {
    margin: 0;
    font-family: 'Share Tech', sans-serif;
    font-size:16px;
    color: #505050;
    background:#eee;
    overflow-x:hidden;
}*/

body {
    margin: 0;
    font-family: 'Playfair Display', serif;
/*	font-optical-sizing: auto;*/
	font-style: normal;
    font-size:16px;
    color: #505050;
    background:#eee;
	overflow-x:hidden;
    overflow-y:scroll;
}

main {
    position:relative;
    padding:7vh 0 10vh;
    opacity:0;
    margin-top:-5px;
}

@media all and (min-width:670px) {
    main { 
        width: 900px;
        margin-left: 10vw;
    }
}

@media all and (max-width:670px) {
    main { margin:0 15px }
}

.wave {
    width:100vw;
    height:150px;
    position:fixed;
    bottom:0;
    fill:#1b7477;
    z-index:-1;
}

#one {
    height:180px;
    fill:#8adbd3;
    width:120vw;
    left:-10vw;
}

h1, h2 {
    position:relative;
    display:flex;
    align-items:center;
    font-family: 'Playfair Display', serif;
/*	font-family:'Share Tech Mono', monospace;*/
    line-height: 1em;
    word-spacing: .1em;
    letter-spacing: .05em;
    transition:.2s all ease;
    margin-left:10px;
    margin-bottom:15px;
}

h1 span, h2 span { 
    background:rgba(238,238,238,.7);
    padding:5px 7px;
    border-radius:10px;
    box-sizing:border-box;
}
h1, h2:active { color:#51b5ac; }
h1 { font-size:2.2em }
h2 { cursor:pointer }
p:first-child { margin-top:0 }
p:last-child { margin-bottom:0 }

.subtext {
    position:relative;
    border-radius:10px;
    background: white;
    border:1px solid;
    padding:13px;
    line-height:1.5em;
}

.subtext:not(#main) {
    display:none;
}

.subtext ul {
	margin:0;
    padding:10px 25px; 
}

.subtext a { 
    color:#0a9; 
    text-decoration:underline;
    cursor:pointer;
    transition:.2s all ease;
}

.subtext a:hover, h2:hover {
    color:#777;
}

.subtext:before {
    content:'';
    position:absolute;
    width:1px;
    background:#bbb;
    left:1.2em;
    height:1.2em;
    top:calc(-1.2em - 1px);
}

.subtext.coll:before {
    left:1em;
    height:1.2em;
    top:calc(-1.2em - 1px);
}

.hex:hover {
    transform:rotate(30deg);
}

.hex, .hex:before, .hex:after {

    height:1em;
    width:.59em;
    border:solid;
    border-width:1px 0;
    border-radius:2px;
    box-sizing:border-box;
}

main .hex { 
    position:relative;
    display:inline-block;
    margin-right:.5em;
    transition:.4s all ease;
}

.hex:before, .hex:after {
    content:'';
    position:absolute;
    margin-top:-1px;
    margin-left:;
/*     color:#ccc; */
}

.hex:before { transform:rotate(60deg); }
.hex:after { transform:rotate(-60deg); }

.hex, .hex:before, .hex:after, .subtext {
    border-color:#bbb;
}

.hex.moved {
    transform:rotate(30deg);
}

#hex-holder {
    position:fixed;
    height:100vh;
    width:100vw;
    top:0;
    z-index:-1;
    pointer-events:none;
    font-size:60px;
}

#hex-holder .hex {
    position:fixed;
}

/*#uno {
    border-radius:4px;
    border:none;
    background:#5b8b8c;
    transform:rotate(-12deg);
    bottom:30vh;
    left:30px;
}

#uno:before, #uno:after {
    margin-top:0;*/
}

#hex-holder .hex:before, #hex-holder .hex:after {
    border:inherit;
    border-radius:inherit;
    background:inherit;
}

/*#dos {
    border-color:#1B7477;
    border-radius:3px;
    border-width:5px 0;
    font-size:100px;
    bottom:12vh;
    right:-20px;
    transform:rotate(7deg);
}

#dos:before, #dos:after {
    margin-top:-5px;
}*/

/*#tres { display:none }*/

#bg {
/*     z-index:100; */
    position:fixed;
    top:0;
    height:100vh;
    width:100vw;
/*    box-sizing:border-box;*/
/*    border:5px solid black;*/
}

/* MYOWN */

#fotka {
        position: absolute;
        top: 50px;
        right: 50px;
		text-align: center;
    }
dt
    {
    font-size:18px;
	margin-bottom: 5px;
	font-weight: bold;
	}

dd
    {
	margin-bottom: 15px;
    }

#role {
    font-size:18px;
    }

#sznurek {
    }

/*    #fotka img {
        position: absolute;
        top: 50px;
        right: 50px;
    }*/

.footer {
    position: fixed;
    left: 15;
    bottom: 10;
    width: 100%;
    color: black;
    text-align: left;
    font-size:12px;
}

a.footerlink:link  {text-decoration: none; color: #8adbd3;}
a.footerlink:visited {text-decoration: none; color: #8adbd3;}
a.footerlink:hover {text-decoration: underline; color: #8adbd3;}
a.footerlink:active {text-decoration: none; color: #8adbd3;}