/* Big tablets to small laptop from 1024px to 1200px */
@media only screen and (max-width: 1200px) {

    .row { padding: 0 2%; }

    .footer-icons { padding-top: 4rem; }

}

/* Tablets to big tablet from 769px to 1023px */
@media only screen and (max-width: 1023px) {

    .portfolio-flex,
    .resources-flex { width: 98%; }

}

/* Tablets: from 415px to 768px */
@media only screen and (max-width: 768px) {

h1 { font-size: 3rem; }

.footer-icons { padding-top: 4rem; }

.portfolio-flex,
.resources-flex { width: 93%; }

.about-me { height: auto; }

ion-icon { padding: .2rem; }

.logo-background-home { top: -2.4rem; }

.portfolio-flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}
.portfolio-flex img {
    padding: .5rem;
}

.resources-flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}
.resources-flex img {
    padding: .5rem;
}



/* Average phones: from 321px to 414px */
@media only screen and (max-width: 414px) {

.logo { height: 5rem; }

h1 { font-size: 2.2rem;}

h2 { font-size: 2.5rem}

p { font-size: 1.7rem}

.about-me { height: auto; 
            text-align: justify; }

.portfolio-flex,
.resources-flex { width: 92%; }

.contact-form { width: 35rem; }

ion-icon { padding: .2rem; }

.logo-background-home { top: -2.4rem; }

.portfolio-flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}

.portfolio-flex img {
    padding: .5rem;
}

.resources-flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}

.resources-flex img {
    padding: .5rem;
}

}

/* Average phones: from 321px to 414px */
@media only screen and (max-width: 320px) {

    h1 { font-size: 2rem; }

    h2 { font-size: 2rem;}
    
    h3 { font-size: 1.5rem;}
    
    p { font-size: 1rem; }

    .about-me {
        text-align: justify;
        padding: 10px;
    }

    .markup { font-size: 1.5rem; }

    .main-nav li {
        font-size: 1.5rem;
    }
    .contact-form { width: 25rem; }

}