@media screen and (max-width: 1320px) {

    .myinfopara {
        height: 150px;
        padding: 0 50px 0 50px;
    }

    .profilepic {
    left: 200px;
    width: 300px;
    height: 300px;
    transition: 3s;
    }
}


@media screen and (max-width: 1115px) {

    .rightherobanner {
        text-align: center;
    }

    .profilepic {
        height: 300px;
        width: 300px;
    }

    .myinfoimage {
        width: 230px;
        height: 230px;
    }

    .myinfoheader {
        font-size: 30px;
    }

    .myinfopara {
        height: 150px;
        font-size: 18px;
        padding: 0 20px 0 20px;
    }

    #name {
        font-size: 60px;
    }

}

@media screen and (max-width: 720px) {

    .profilepic {
        width: 250px;
        height: 250px;
    }

    .rightsidetop {
        padding-right: 50px;
    }

    .intro {
        font-size: 35px;
        text-align: right;
        line-height: 60px;
    }
    
    #name {
        font-size: 50px;
    }

    .myinfo {
        height: 400px;
    }

    .myinfoimage {
        width: 100px;
        height: 100px;
    }

    .myinfoheader {
        font-size: 25px;
    }

    .myinfopara {
        height: 100px;
        font-size: 15px;
        padding: 0 10px 0 10px;
    }

    input {
        width: 90%;
    }

    textarea {
        width: 90%;
    }
}

@media screen and (max-width: 600px) {

    .hamburger::before {
        content: '\2630';
        font-size: 35px;
        color: #dbf5ff;
        position: relative;
        display: flex;
        transition: all 0.2s ease-in-out;
        cursor: pointer;
        justify-content: center;
    }

    /* https://stackoverflow.com/questions/30064643/css-wont-flip-a-unicode-font-icon-and-wont-change-its-color-on-hover */

    .hamburger:hover:before {
        color: black;
        transform: scale(1.25);
    }

    .hamburgercrossed::before {
        content: '\2715';
        font-size: 35px;
        color: #dbf5ff;
        position: relative;
        display: flex;
        transition: all 0.2s ease-in-out;
        cursor: pointer;
        justify-content: center;
    }

    .hamburgerdiv {
        width: 60px;
        height: 55px;
    }

    .hamburgerdiv:hover {
        background-color: #dbf5ff;
        border-radius: 20px;
    }

    .hamburgerdiv > .hamburger:hover {
        text-decoration: none;
    }

    .rightsidetop {
        padding-right: 20px;
        flex-direction: column;
        position: relative;
    }


    .shown {
        display: block;
        position: relative;
        height: 200px;
        font-size: 25px;
    }

    .rightside {
        display: none;
    }

    .icon {
        margin-left: 5px;
    }

    .hidden {
        padding-left: 25px;
    }

    .herobanner {
        flex-direction: column;
        height: 700px;
        justify-content: center;
    }

    .leftherobanner, .rightherobanner {
        width: 100%;
    }

    .profilepic {
        height: 300px;
        width: 300px;
    }

    .intro {
        margin-top: 20px;
        text-align: center;
    }
    
    .myinfo {
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    .about, .projects, .resume {
        height: 700px;
    }

    .myinfoimage {
        width: 250px;
        height: 250px;
    }

    .myinfoheader {
        font-size: 45px;
    }

    .myinfopara {
        height: 200px;
        font-size: 25px;
        padding: 0 100px 0 100px;
    }

    .myinfobutton {
        margin-bottom: 30px;
    }

    .connect {
        font-size: 15px;
    }
    
}   

@media screen and (max-width: 470px) {

    .intro {
        font-size: 30px;
        line-height: 50px;
    }
    
    #name {
        font-size: 50px;
    }

    .profilepic {
        height: 250px;
        width: 250px;
    }

    .myinfoimage {
        width: 150px;
        height: 150px;
        margin-bottom: 50px;
    }

    .myinfoheader {
        font-size: 40px;
    }

    .myinfopara {
        font-size: 20px;
        padding: 0 50px 0 50px;
        height: 200px;
    }

}