body{
    background-color: black;
    height:100%;
    color:white;
}

.about-container{
    margin-top:30px;
    font-family: 'Raleway', serif;
}

.about-img-container{
    max-width:38%;
}

.about-img{
    height:375px;
    width:375px;
}

.contact-link{
    color:grey;
    text-decoration: none;
}

.contact-link:hover{
    color:white;
    cursor: pointer;
    text-decoration: none;
}


.socials{
    margin-top:20px;
}

.fab {
    text-shadow: none;
    text-align: center;
    text-decoration: none;
    padding-left: 10px;
    padding-right:10px;
    padding-top:8px;
    padding-bottom:8px;
    border-radius: 100%;
}

.socials i{
    display:inline-block;
    background: white;
    color: black;
}

.socials span{
    text-align: center;
    padding-left:30px;
    padding-right:30px;
}

.about-text{
    font-size: larger;
    font-weight: normal;
}

.about-text-container{
    padding-top:0;
    padding-bottom: 10px;
}

@media (max-width: 1100px) {
    .about-img{
        height:300px;
        width:300px;
    }
}

@media (max-width: 900px) {
    .about-img {
        margin-left: auto;
        margin-right: auto;
        display: block;
        float:none!important
    }
    .about-img-container{
        max-width: 100%;
        flex:none;
    }
    .about-text-container{
        flex:none;
        padding-bottom:5px;
        padding-top:30px;
        max-width: 100%;
        text-align:center;
    }
    .about-text{
        font-size: inherit;
    }
    .socials{
        margin-top:10px;
        margin-bottom:20px;
    }
}



/* Portrait iphone 5*/
@media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {
    .about-text-container {
        font-size: 0.9em;
    }
}

/* Portrait 6/7/8*/
@media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {
    .about-text-container{
        font-size:1.2em;
    }
}

/* Portrait Pixel 2 */
@media screen
and (min-width: 411px)
and (max-width: 763px)
and (orientation: portrait) {
    .about-text-container{
        font-size:1.2em;
    }
}

/* Landscape S5, Pixel 2, Pixel 2XL, iphone 6/7/8, iphone 6+/7+/8+, iphone X*/
@media screen
and (max-device-height: 415px)
and (orientation: landscape) {
    .about-text-container{
        font-size:1.2em;
    }
}

@media only screen and (max-width: 330px){
    .about-img{
        height:250px;
        width:250px;
    }
    .about-text-container{
        padding-bottom:20px;
    }
    .socials{
        margin-top:0;
        margin-bottom:10px;
    }
}

/* ----------- iPad Pro 10.5" -----------

/* Ipad 10.5 Landscape */
/* Declare the same value for min- and max-width to avoid colliding with desktops */
/* Source: https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106*/
@media only screen
and (min-device-width: 834px)
and (max-device-width: 834px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 2) {
    #socials-regular{
    }
}


/* ----------- iPad 3, 4 and 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) {
    .about-text-container{
        font-size:1.3em;
    }
    #socials-regular{
        margin-top:20px;
    }
}

/* landscape */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 2) {
    #socials-regular{
        margin-top:20px;
        padding-bottom:20px;
    }
}
/* ----------- iPad Pro 12.9" ----------- */

/*Portrait ipad pro 12"*/
@media only screen
and (min-device-width: 1024px)
and (max-device-width: 1024px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 2) {
    .about-text-container{
        font-size:1em;
    }
    #socials-regular{

    }
}

/* Landscape */
/* Declare the same value for min- and max-width to avoid colliding with desktops */
/* Source: https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106*/
@media only screen
and (min-device-width: 1366px)
and (max-device-width: 1366px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 2) {
    .about-text-container{
        padding-top:0;
    }
}

@media only screen
and (min-device-width: 1024px)
and (max-device-width: 1024px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 2) {
    #socials-regular{

    }
}

/*larger screen*/
@media only screen and (min-width: 1500px) and (min-height:900px){
    .about-img-container{
        max-width:36%;
    }
    .about-container{
        margin-top:50px;
    }
}