html, body {
    overflow: hidden;
}

body {
    font-family: gill-sans-nova, sans-serif;
    font-weight: 600;
    font-style: normal;
    color: #1a1a1a;
}

a {
    color: #1a1a1a;
    text-decoration: none;
}

#family, p {
    height: .9em;
    line-height: .75em;
}

#family span, p a {
    display: inline-block;
    height: .9em;
    line-height: .75em;
}


@media (orientation: portrait) {
    html, body {
        position: relative;
        max-width:100%;
        max-height:100%;
        height: 100%;
    }
    #h {
        display: flex;
    }

    #brothers {
        font-size: 15vw;
        padding-right: 0.2vw;
    }

    #family {
        writing-mode: vertical-lr;
        -webkit-text-orientation: mixed;
        text-orientation: mixed;
        font-size: 22vh;

        position: absolute; /*or fixed*/
        right: 0px;
    }
}

@media (orientation: landscape) {
    #h {
        position: fixed;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        display: flex;
    }

    #brothers {
        font-size: 3.5vw;
        padding-right: 1.0vw;

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

    #family {
        font-size: 8vw;
        width: 32vw;
    }   

    #family:hover span {
        display:none;
    }
    
    #family:hover:before {
        content:"<<<<<<<"; 
    }
}

#brothers p {
    margin: 0;
    opacity: 1;
    transition: opacity .5s linear;
}

#brothers:hover p {
    opacity: 0.15;
}

#brothers:hover p:hover{
    opacity: 1;
}

#felix {
    letter-spacing: 0.05em;
}