h1 {
    margin-top: 0.4rem;
    margin-bottom: 1.5rem;
}

h1:hover {
    cursor: default;
}

h2 {
    margin-top: 0.1rem;
}

/* Avoid global h3 affecting article content */
.content > h3 {
    color: #DDDDDD;
    margin-top: -1rem;
    margin-bottom: 1rem;
    padding-left: 1rem;
    font-weight: lighter;
    text-shadow: 0rem 0.1rem 0.15rem #000000;
}

#clarification {
    display: none;
    color: #AAAAAA;
}

.content {
    margin-top: 3rem;
}

.social-media-icons-body {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin: 2rem;
}

.profile-pic {
    max-width: 26rem;
    width: 90%;
    margin-top: -2rem;
    filter: drop-shadow(0rem 0rem 1rem #000000);
}

.profile-pic:hover {                                                        /* Some cool cursor follow effect on text with JavaScript? */
    filter: drop-shadow(0rem 0rem 2rem #000000);
}

.profile-pic-div {
    text-align: center;
}

.section2 {
    margin-bottom: 3em;
}

.portfolio-buttons {
    display: flex;
    flex-direction: column;
}

.portfolio-button {
    margin-top: 0.5rem;
    margin-bottom: 0.5em;
}

.short-desc {
    margin-bottom: 1.5rem;
}

.highlight-projects {
    width: 100%;
}

.highlight1 {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    max-height: 100%;
    margin-top: 4rem;
    margin-bottom: 4rem;
}

.secondary-highlights {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.highlight-item {
    display: flex;
    position: relative;
    flex-direction: column;
    align-items: center;
    margin-bottom: 2rem;
    width: 100%;
}

.highlight-link {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.video-container {
    padding-top: 56.25%;
}

.highlight-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.highlight-image {
    max-height: 20rem;                                                  /* Possible to limit to the highest of other similar elements using js? */
}

@media screen and (min-width: 768px) {

h1 {
    position: relative;
    font-size: 7rem;
    order: -1;
    margin-bottom: 5vw;
    top: -2.5vw;
    letter-spacing: 0.25vw;
}

#clarification {
    display: block;
    position: relative;
    right: -18.2rem;
    top: -9vw;
    font-size: 1.1rem;
}

#clarification:hover {
    cursor: default;
}

.section1 {
    width: 100%;
    max-width: 63rem;
    display: flex;
    flex-direction: column;
    align-self: center;
    padding: 0;
    margin-bottom: 3rem;
    justify-content: center;
    align-items: center;
}

.profile-pic {
    position: relative;
    width: 90%;
    max-width: 20rem;
    z-index: 10;
    margin-top: 1.953rem;
}

.profile-pic-div {
    display: block;
    position: absolute;
    top: 5rem;
}

.social-media-icons-body {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin: 2rem;
    margin-top: 6rem;
}

.portfolio-buttons {
    flex-direction: row;
    justify-content: center;
    width: 100%;
}

.portfolio-button {
    width: 30%;
    margin-left: 0.5rem;
    margin-right: 0.5rem;
}

.highlight-item {
    width: 45%;
    margin: 2%;
}

}

@media screen and (min-width: 1024px) {

.portfolio-buttons {
    width: 80%;
}

}

@media screen and (min-width: 1400px) {

h1 {
    position: relative;
    font-size: 10vw;
    order: -1;
    margin-bottom: 5vw;
    top: -2.5vw;
    letter-spacing: 0.25vw;
}

#clarification {
    position: relative;
    right: -26.2vw;
    top: -9vw;
    font-size: 1.55vw;
    margin-bottom: -2vw;
}

.profile-pic {
    position: relative;
    width: 25vw;
    max-width: 100vw;
    z-index: 10;
}

.profile-pic-div {
    display: block;
    position: absolute;
    top: 7vw;
    width: 98vw;
}

.portfolio-button {
    width: 28%;
}

.portfolio-buttons {
    width: 90%;
}

}