main {
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url("../img/background-interlaced.jpg");
    background-size: cover;
    background-position: center;
}

.info {
    width: 90%;
    text-align: center;
    color: #fff;
    margin: 20px 0 20px 0;
}

.headshot {
    width: 70%;
    border-radius: 50%;
    border: 7px solid #F0803C;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.info h1 {
    font-size: 2.5em;
    text-shadow: 2px 2px 4px #000000;
}

.info h2 {
    text-shadow: 2px 2px 4px #000000;
}

.info .icons i {
    font-size: 2em;
    color: #fff;
    text-shadow: 2px 2px 4px #000000;
    transition: color .2s;
}

.info .icons i:hover {
    color: #3777FF;
}

.icons {
    display: grid;
    grid-auto-flow: column;
    grid-gap: 1em;
    justify-content: center;
    margin-top: 1em;
}

@media only screen and (min-width: 600px) {
    main {
        justify-content: flex-start;
        padding: 0 5% 0 5%;
    }

    .info {
        text-align: left;
    }

    .headshot {
        width: 50%;
    }

    .icons {
        justify-content: start;
    }
}

@media only screen and (min-width: 800px) {
    .headshot {
        width: 40%;
    }
}

@media only screen and (min-width: 1000px) {
    .headshot {
        width: 240px;
    }
}

@media only screen and (min-width: 2000px) {
    .info h1 {
        font-size: 3em;
    }

    .info h2 {
        font-size: 1.8em;
    }

    .headshot {
        width: 300px;
    }
}