style.css

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300&display=swap');

@font-face {
    font-family: "StretchPro";
    src: url(StretchPro.otf);
}

* {
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
}

.home {
    display: flex;
    max-height: 39.5em;
    background-color: #232323;
}

.socialMedia {
    float: left;
    position: static;
    max-width: 5%;
    max-height: 10%;
    margin: 6% 0 0 2em;
}

.socialMedia svg {
    width: 2em;
    padding: 0.65em 0 0 0.42em;
    fill: #632c9e;

    transition: 0.6s ease-out fill;
}

.socialMedia svg:hover {
    fill: rgb(243, 243, 243);
}

.title {
    position: relative;
    width: 100%;
    font-size: 2vw;
}

@media screen and (min-width: 3.2em) {
    .title h1 {
      font-size: 2.2em;
    }
}

@media screen and (min-width: 20em) {
    .title h1 {
      font-size: 4em;
    }
}

.title h1 {
    float: left;
    color: #632c9e;
    font-family: "StretchPro";
    font-weight: 300;
    line-height: 0.95em;
    padding: 0.65em 0 0 1em;
    max-width: 60%;
    margin-bottom: 1em;

    transition: 1.2s ease-out color;
}

.title h1:hover { 
    color: #7642b3;
}

#resume {
    float: right;
    font-size: 0.95em;
    opacity: 0.95;
    font-family: "Poppins";
    font-weight: 300;
    margin: 3.5em 4.2em 1em 0.5em;
    padding: 0.3em 0.6em;
    color: #7a4bb1;
    border: 1.5px solid #632c9e;
    background-color: #232323;
    border-radius: 8%;
    text-decoration: none;

    transition: 0.8s ease-out;
    transition-property: background-color, color, border-radius;
}

#resume:visited {
    color: #7a4bb1;
}

#resume:hover {
    background-color: #632c9e;
    color: rgb(243, 243, 243);
    border-radius: 12%;
}

#scroll {
    margin: 0 0 0.5em 43.5%;
    clear: both;
    fill: #632c9e;

    transition: 1s ease-out fill;
}

#scroll:hover {
    fill: rgb(243, 243, 243);
}

#intro {
    position: relative;
    background-color: #632c9e;
    width: 100%;
    height: 39.5em;
}

#intro p {
    width: 50%;
    padding-top: 2em;
    margin: 0 auto;
    font-family: "Poppins";
    font-size: 1.2em;
    color: rgb(243, 243, 243);
}