/* Votre Style */
@import url('https://fonts.googleapis.com/css?family=Lato:700,900');

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: 'Lato', sans-serif;
    font-weight:700;
    -webkit-font-smoothing: antialiased;
    overflow: hidden;
}

html {
    font-size: 62.5%;
}

body {
    background: no-repeat center;
    background-size: cover;
    background-attachment: fixed;
    /*background-image: linear-gradient(to bottom, rgba(255,255,255,0.85) 0%,rgba(255,255,255,0.85) 100%), url(https://source.unsplash.com/collection/411392/1920x1080/daily);*/
    /*https://source.unsplash.com/7_hvLznGvfE/1920x1080*/
    background-image: linear-gradient(to bottom, rgba(255,255,255,0.85) 0%,rgba(255,255,255,0.85) 100%), url(https://images.unsplash.com/photo-1483965463974-fa25f3231fbc?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&s=273fba0529aa0ffdb64271c3b26235ce);

    display: flex;
    flex-direction: column;
    justify-content: center;
}

a {
    color: #333;
    text-decoration: none;
}

a:hover {
    color: #111;
}

#content {
    display: flex;
    flex-flow: row wrap;
}

.smallItem {
    flex-basis: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    order: 3;
}

.smallItem:hover {
    cursor: pointer;
}

.smallItem:hover ~ .headline, .smallItem:hover ~ .name .subline {
    opacity: .1;
}

.smallItem a, .smallItem span {
    font-size: 3rem;
}

.headline, .name, .subline, .credits {
    flex-basis: 100%;
    font-size: 5vw;
    text-transform: uppercase;
}

.headline {
    display: flex;
    align-items: flex-end;
    margin-top: 0vh;
    opacity: 1;
    transition: opacity .3s ease-in-out;
    order:1;
}

.name {
    display: flex;
    flex-flow: row wrap;
    /*height: 325px;
    line-height: 90px;*/
    order: 2;
}

.name > div {
    /*height: 95px;*/
    overflow:hidden;
    white-space: nowrap;
    transition: max-width .3s ease-in-out;
}

.contact, .at, .dotCom {
    max-width: 0;
}

.twitter:hover ~ .name {
    text-transform: lowercase;
}

.twitter:hover ~ .name .at {
    max-width: 1000px;
}

.twitter:hover ~ .name .space {
    max-width: 0;
}

.twitter.github:hover ~ .name .erwan::first-letter, .twitter.github:hover ~ .name .hesry::first-letter{
    text-transform: uppercase;
}

.mail:hover ~ .name {
    text-transform: lowercase;
}

.mail:hover ~ .name .at, .mail:hover ~ .name .contact, .mail:hover ~ .name .dotCom {
    max-width: 1000px;
}

.mail:hover ~ .name .space {
    max-width: 0;
}

.subline {
    opacity: 1;
    transition: opacity .3s ease-in-out;
}

.subline.smaller {
    font-size: 2vw;
    color: #999;
}

.credits {
    align-self: flex-end;
    /*line-height: 50px;*/
    font-size: 1.25rem;
    padding-left: 5px;
    order: 4;
}

::selection {
    background: #fff;
}

@media screen and (max-width:414px) {
    .headline, .name, .subline {
        font-size: 10vw;
    }
    .name > div {
        white-space: inherit;
    }
    .subline.smaller {
        font-size: 7vw;
        margin: 15px 0;
    }

}