*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Montserrat', sans-serif;
}

.container {
    height: 100vh;
    display: flex;
    justify-content: space-between;
    background: #3E4347;
    color: #FFFFFF;  
}

.container > section {
    width: 50%;
    height: 100%;
}

/* Profile Image section */
.profile-image {
    /* margin-left: 250px; */
    background: url(raphaelavatar2.svg) no-repeat bottom center;
    background-size: 80vh;
}

/* Profile Info section */
.profile-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.name{
    font-size: 70px;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 570;
    display: inline;
}

.profession {
    color: #A5A6A8;
    font-weight: 400;
    margin-top: 30px;
    margin-left: 5%;
    /* max-width: 330px; */
    font-size: 20px;
    line-height: 30px;
}

.professionPortrait {
    display: none;
}

/* Links section */
.links {
    margin-top: 45px;
    margin-left: 20%;
}

.links-mobile {
    display: none;
}



/* Social links */

a { color: inherit; } /* lets the links inherit the color of its parent and not show the purple hyperlink color */

.links {
    letter-spacing: 50px;
    text-decoration: none;
}

.links i{
    display: inline-block;
    width: 36px;
    height: 24px;
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
}

.links i:hover {
    color: #FFFFFF;
}

.github {
    background-image: url()
}

a:hover {
    color: rgba(248, 45, 45, 0.76);
}














/* ------------------------------------- MEDIA QUERIES ---------------------------------------- */


/* @media screen and (max-width: 700px) {
    .container {
        background: green;
    }
} */


/* ----------------------------------------- iPad 3, 4, new Air, Pro 9.7 PORTRAIT ----------------------------------------- */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 2) {


    .profile-image {
        /* margin-left: 250px; */
        background: url(raphaelavatar2.svg) no-repeat bottom right; /* making sure that it only shows half the picture in portrait mode */
        background-size: 80vh;
    }

    .name{
        font-size: 60px;
        text-transform: uppercase;
        letter-spacing: 2px;
        font-weight: 670;
        display: inline;
    }

    .profession {
        display: none;
    }

    .professionPortrait {
        display: inline-block;
        color: #A5A6A8;
        font-weight: 400;
        margin-top: 30px;
        margin-left: 1.8%;
        /* max-width: 330px; */
        font-size: 20px;
        line-height: 30px;
    }


    .links {
        letter-spacing: 50px;
        text-decoration: none;
        margin-left: 10px;
        
    }

    .links i{
        display: inline-block;
        width: 36px;
        height: 24px;
        background-position: center center;
        background-size: contain;
        background-repeat: no-repeat;
    }

}


/* ----------------------------------------- iPad 3, 4, new Air, Pro 9.7 LANDSCAPE ----------------------------------------- */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 2) {

    .name{
        font-size: 50px;
        text-transform: uppercase;
        letter-spacing: 2px;
        font-weight: 670;
        display: inline;
    }
    
    .profession {
        color: #A5A6A8;
        font-weight: 400;
        margin-top: 30px;
        margin-left: 1.8%;
        /* max-width: 330px; */
        font-size: 17px;
        line-height: 30px;
    }
}

/* ----------------------------------------- iPhone 5 and SE PORTRAIT----------------------------------------- */

/* ----------- iPhone 5, 5S, 5C and 5SE ----------- */

@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {

    .profile-image {
        background: url(raphaelavatar2.svg) no-repeat bottom; /* making sure that it only shows half the picture in portrait mode */
        background-size: 70vh;
        background-position-x: 86%;
    }

    .name{
        font-size: 25px;
        text-transform: uppercase;
        letter-spacing: 1.8px;
        font-weight: 800;
        display: inline;
    }

    .profession {
        display: none;
    }

    .professionPortrait {
        display: inline-block;
        color: #A5A6A8;
        font-weight: 400;
        margin-top: 25px;
        margin-left: 0%;
        /* max-width: 330px; */
        font-size: 10.5px;
        line-height: 30px;
        padding-right: 20%;
    }

    .links {
        display: none;
    }

    .links-mobile {
        display: inline-block;
        letter-spacing: 13px;
        text-decoration: none;
        margin-left: 0px;
        padding: 0%;
        margin-top: 25px;
        
    }

    .links-mobile i{
        display: inline-block;
        width: 36px;
        height: 24px;
        background-position: center center;
        background-size: contain;
        background-repeat: no-repeat;
    }
}


/* ----------------------------------------- iPhone 5 and SE LANDSCAPE----------------------------------------- */

@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {

    /* Looks fine without any changes */

}


/* ----------------------------------------- iPhone 6, 6S, 7 and 8 PORTRAIT----------------------------------------- */


@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {


    .profile-image {
        background: url(raphaelavatar2.svg) no-repeat bottom; /* making sure that it only shows half the picture in portrait mode */
        background-size: 72vh;
        background-position-x: 86%;
    }

    .name{
        font-size: 32px;
        text-transform: uppercase;
        letter-spacing: 1.8px;
        font-weight: 700;
        display: inline;
    }

    .profession {
        display: none;
    }

    .professionPortrait {
        display: inline-block;
        color: #A5A6A8;
        font-weight: 400;
        margin-top: 25px;
        margin-left: 0%;
        /* max-width: 330px; */
        font-size: 12.3px;
        line-height: 30px;
        padding-right: 20%;
    }

    .links {
        display: none;
    }

    .links-mobile {
        display: inline-block;
        letter-spacing: 20px;
        text-decoration: none;
        margin-left: 0px;
        padding: 0%;
        margin-top: 25px;
        
    }

    .links-mobile i{
        display: inline-block;
        width: 36px;
        height: 24px;
        background-position: center center;
        background-size: contain;
        background-repeat: no-repeat;
    }

}



/* ----------------------------------------- iPhone 6, 6S, 7 and 8 LANDSCAPE----------------------------------------- */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {

    .name{
        font-size: 32px;
        text-transform: uppercase;
        letter-spacing: 1.8px;
        font-weight: 700;
        display: inline;
    }

    .profession {
        display: none;
    }

    .professionPortrait {
        display: inline-block;
        color: #A5A6A8;
        font-weight: 400;
        margin-top: 25px;
        margin-left: 0%;
        /* max-width: 330px; */
        font-size: 17px;
        line-height: 30px;
    }

    .links {
        display: none;
    }

    .links-mobile {
        display: inline-block;
        letter-spacing: 30px;
        text-decoration: none;
        margin-left: 0%;
        padding: 0%;
        margin-top: 25px;
        
    }



}



/* ----------- iPhone 6+, 7+ and 8+ PORTRAIT----------- */

/* Portrait */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: portrait) {

    .profile-image {
        background: url(raphaelavatar2.svg) no-repeat bottom; /* making sure that it only shows half the picture in portrait mode */
        background-size: 74vh;
        background-position-x: 84%;
    }

    .name{
        font-size: 35.5px;
        text-transform: uppercase;
        letter-spacing: 1.8px;
        font-weight: 900;
        display: inline;
    }

    .profession {
        display: none;
    }

    .professionPortrait {
        display: inline-block;
        color: #A5A6A8;
        font-weight: 400;
        margin-top: 25px;
        margin-left: 0%;
        /* max-width: 330px; */
        font-size: 13.3px;
        line-height: 30px;
        padding-right: 20%;
    }

    .links {
        display: none;
    }

    .links-mobile {
        display: inline-block;
        letter-spacing: 20px;
        text-decoration: none;
        margin-left: 0px;
        padding: 0%;
        margin-top: 25px;
        
    }

    .links-mobile i{
        display: inline-block;
        width: 36px;
        height: 24px;
        background-position: center center;
        background-size: contain;
        background-repeat: no-repeat;
    }

}


/* ----------- iPhone 6+, 7+ and 8+ LANDSCAPE----------- */

@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 

    .name{
        font-size: 35px;
        text-transform: uppercase;
        letter-spacing: 1.8px;
        font-weight: 900;
        display: inline;
    }

    .profession {
        display: none;
    }

    .professionPortrait {
        display: inline-block;
        color: #A5A6A8;
        font-weight: 400;
        margin-top: 25px;
        margin-left: 0%;
        /* max-width: 330px; */
        font-size: 18px;
        line-height: 30px;
    }

    .links {
        display: none;
    }

    .links-mobile {
        display: inline-block;
        letter-spacing: 30px;
        text-decoration: none;
        margin-left: 0%;
        padding: 0%;
        margin-top: 25px;
        
    }
}


/* ----------- iPhone X PORTRAIT----------- */

@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: portrait) {

    /* .profile-image {
        background: url(raphaelavatar2.svg) no-repeat bottom;
        background-size: 60vh;
        background-position-x: 84%;
    }

    .name{
        font-size: 30px;
        text-transform: uppercase;
        letter-spacing: 1.8px;
        font-weight: 900;
        display: inline;
        margin-top: 50%;
    }

    .profession {
        display: none;
    }

    .professionPortrait {
        display: inline-block;
        color: #A5A6A8;
        font-weight: 400;
        margin-top: 25px;
        margin-left: 0%;
        font-size: 10.3px;
        line-height: 30px;
        padding-right: 20%;
    }

    .links {
        display: none;
    }

    .links-mobile {
        display: inline-block;
        letter-spacing: 20px;
        text-decoration: none;
        margin-left: 0px;
        padding: 0%;
        margin-top: 25px;
        
    }

    .links-mobile i{
        display: inline-block;
        width: 36px;
        height: 24px;
        background-position: center center;
        background-size: contain;
        background-repeat: no-repeat;
    } */

}


/* ----------- iPhone X LANDSCAPE----------- */

@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) {


    .name{
        font-size: 38px;
        text-transform: uppercase;
        letter-spacing: 1.8px;
        font-weight: 900;
        display: inline;
    }

    .profession {
        display: none;
    }

    .professionPortrait {
        display: inline-block;
        color: #A5A6A8;
        font-weight: 400;
        margin-top: 25px;
        margin-left: 0%;
        font-size: 18px;
        line-height: 30px;
    }

    .links {
        display: none;
    }

    .links-mobile {
        display: inline-block;
        letter-spacing: 30px;
        text-decoration: none;
        margin-left: 0%;
        padding: 0%;
        margin-top: 25px;
        
    }

}



/* ----------- Laptops ----------- */
@media screen 
  and (min-device-width: 1200px) 
  and (max-device-width: 1600px) 
  and (-webkit-min-device-pixel-ratio: 1) { 

    .name{
        font-size: 60px;
        text-transform: uppercase;
        letter-spacing: 1.8px;
        font-weight: 500;
        display: inline;
    }

    .profession {
        color: #A5A6A8;
        font-weight: 400;
        margin-top: 30px;
        margin-left: 8%;
        /* max-width: 330px; */
        font-size: 17px;
        line-height: 30px;
    }

}