/*
    This file is part of miestasmia.com.

    miestasmia.com is free software: you can redistribute it and/or modify
    it under the terms of the GNU General Public License as published by
    the Free Software Foundation, either version 3 of the License, or
    (at your option) any later version.

    miestasmia.com is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU General Public License for more details.

    You should have received a copy of the GNU General Public License
    along with miestasmia.com.  If not, see <http://www.gnu.org/licenses/>.
*/

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,700&subset=latin,latin-ext);

html, body {
    margin: 0;
}
section, footer {
    width: 100%;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-align-items: center;
    align-items: center;
}
section {
    padding: 0 25vw;
    box-sizing: border-box;
    background-size: cover;
    background-position: center;
}
footer {
    padding: 32px;
    box-sizing: border-box;
}
footer > div {
    text-align: center;
}
h1, h2, p, footer > div {
    font-family: 'Open Sans', sans-serif;
}
h1 {
    font-size: 70px;
    text-align: center;
}
h2 {
    color: #888;
    text-align: center;
}
h2 .emoji {
    height: 32px;
}
p {
    text-align: justify;
}
p, footer > div {
    font-weight: 300;
    font-size: 20px;
}
p .emoji, footer > div .emoji {
    height: 20px;
}
a {
    color: #000;
    text-decoration: none;
    border-bottom: 1px solid black;
}
a:hover {
    border-bottom: none;
}



#header {
    padding: 0;
    background-image: url(images/header.jpg);
    height: calc(100vh);
}
#header > img {
    height: 5vw;
    margin-top: calc(50vh - 2.5vw);
}
#header > ul {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    list-style: none;
    background-color: rgba(0, 0, 0, .5);
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100px;
    margin-top: auto;
}
#header > ul > li {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    font-family: 'Open Sans', sans-serif;
    height: 100%;
    padding: 0 48px;
    cursor: pointer;
}
#header > ul > li > a {
    color: #fff;
    font-size: 25px;
    text-decoration: none;
    border: none;
}
#header > ul > li:hover > a {
    border-bottom: 2px solid #fff;
    margin-top: 1px;
}
#divider, #links {
    height: 12.9688vw;
    min-height: 100px;
    margin: 58.1px 0;
}
#divider {
    background-image: url(images/divider.jpg);
}
#links {
    background-image: url(images/links.jpg);
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-justify-content: center;
    justify-content: center;
}
#links > *:not(:last-child) {
    margin-right: 48px;
}
#links * {
    height: 25%;
    min-height: 50px;
}
#links a {
    border: none;
}


#likedThing {
    display: inline-block;
    position: relative;
    text-align: left;
    width: 330px;
    height: 1.4em;
    color: #999;
    overflow: hidden;
    vertical-align: top;
}

#likedThing::after {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0.2em;
    border-bottom: 2px dashed #888;
}

#likedThing .likedItem {
    display: inline-block;
    position: absolute;
    left: 0;
    top: 0;
    height: 1em;
    z-index: 1;
}

#likedThing .likedItem.animated {
    transition: transform 0.3s cubic-bezier(0.2, 0.3, 0, 1);
}

@media (max-width: 1500px) {
    #header > img {
        height: 75px;
        margin-top: calc(50vh - 37.5px);
    }
}
@media (max-width: 1250px) {
    section {
        padding: 0 20vw;
    }
}
@media (max-width: 1000px) {
    section {
        padding: 0 15vw;
    }
    #header > img {
        height: 50px;
        margin-top: calc(50vh - 25px);
    }
}
@media (max-width: 575px) {
    #header > img {
        height: 30px;
        margin-top: calc(50vh - 15px);
    }
    #header > ul > li {
        padding: 0 32px;
    }
}
@media (max-width: 475px) {
    section {
        padding: 0 10vw;
    }
    #header > ul > li {
        padding: 0 16px;
    }
}