﻿body {
    display: flex;
    flex-direction: column;
}

.hover-link-image {
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: -1;
    background-size: cover;
    background-position: center;
    filter: grayscale(100%);
    opacity: 0;
    transition: opacity .5s;
}

#main-content {
    padding: 30px;
    flex-direction: row;
    align-items: stretch;
}
#main-content > div.limit-width {
    display: flex;
    flex-direction: column;
}

.main-content-link.hover + .hover-link-image {
    opacity: .1;
}

#hover-link-photo-archive {
    background-image: url('../images/DNT-404404.jpg');
}

#hover-link-object-archive {
    background-image: url('../images/f.I.4090c.jpg');
}

#hover-link-contribute {
    background-image: url('../images/DNT-404404.jpg');
}

#main-content-welcome {
    color: #9C9C9C;
    margin: 0px 30px 30px 30px;
    font-size: 2.5em;
    line-height: 1.2em; /*50px*/
    letter-spacing: -0.02em;
    max-width: 1100px;
    /*pointer-events: none;
    user-select: none;*/
}

#main-content-links-wrapper {
    display: flex;
    width: 100%;
    flex-grow: 10;
    align-items: center;
}

#main-content-links {
    display: flex;
    flex-direction: column;
    align-self: center;
}

#beta-text {
    display: inline-block;
    max-width: 600px;
    margin: 30px;
    color: #9C9C9C;
    font-weight: normal;
    font-size: 1.2em;
    line-height: 22px;
    letter-spacing: -0.02em;
}

.main-content-link {
    font-weight: 600;
    font-size: 3em;
    line-height: .8em; /*60px;*/
    letter-spacing: -0.02em;
    margin-bottom: 5px;
    margin-left: 30px;
    margin-right: 30px;
    /*cursor: pointer;*/
    color: #fff;
    opacity: .5;
    transition: opacity .5s;
}
.main-content-link > *:first-child {
    margin: 10px 0px;
}

.link-subtext {
    /*color: #9C9C9C;*/
    font-weight: normal;
    font-size: .4em;
    line-height: 1.2em; /*22px;*/
    letter-spacing: -0.02em;
    max-width: 500px;
    transform: translateY(-45px);
    opacity: 0;
    transition: transform .5s, opacity .5s;
    margin-bottom: 5px;
}

.main-content-link.hover {
    opacity: 1;
}
.main-content-link.hover > .link-subtext {
    transform: translateY(-5px);
    opacity: 1;
}

#map-link {
    display: flex;
    flex-grow: 1;
    opacity: .5;
    transition: opacity .5s;
    margin-right: 30px;
    /*max-width: 800px;*/
    cursor: pointer;
}
#map-link:hover {
    opacity: 1;
}
#map {
    fill: white;
    overflow: visible;
}
/*#map > * {
    pointer-events: none;
}
*/
#map circle {
    fill: #02B268;
    stroke: none;
    opacity: .7;
}

/*.gmnoprint, .gm-style-cc, #map a > div > img {
    display: none;
}
*/
@media (max-height: 800px) {
    #main-content {
        font-size: .8em;
    }
    #map-link {
        max-height: 300px;
    }
}


@media (max-width: 650px) {
    .extended-welcome {
        display: none;
    }
    #main-content {
        padding-left: 0px;
        padding-right: 0px;
        font-size: .8em;
    }
}

@media (max-width: 1000px) {
    #main-content-links {
        align-self: flex-start;
    }
    #main-content-links-wrapper {
        flex-direction: column;
        align-items: stretch;
    }
    #map-link {
        /*min-height: 100vw;*/
        margin: 30px;
    }
}
