html,
body {
    min-height: 100%;
}

body {
    display: block;
    background-color: black;
    font-family: "IBM Plex Sans", sans-serif;
}

.container {
    display: grid;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
        "header header contact"
        "header header contact"
        "header header contact"
        "header header contact"
        "email email email"
        "email email email"
        "email email email"
        "phone phone phone"
        "phone phone phone"
        "phone phone phone"
        "socials socials socials"
        "socials socials socials"
        "socials socials socials"
        "looking_forward looking_forward looking_forward"
        "looking_forward looking_forward looking_forward"
        "looking_forward looking_forward looking_forward"
        "footer footer footer";
    gap: 1.5rem;
}

#header {
    grid-area: header;
    border-right: 1px solid white;
}

#header nav {
    padding: 0.5rem;
    display: block;
}

#footer nav {
    vertical-align: bottom;
}

#header nav ul {
    color: white;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: space-evenly;
    gap: 2rem;
    padding: 1rem 0;
}

#contact {
    grid-area: contact;
    color: white;
    text-align: right;
    padding-right: 2rem;
}

#contact h1 {
    font-family: "IBM Plex Sans";
    font-size: 5rem;
}

#contact p {
    margin: 0;
    font-size: 2rem;
    font-weight: lighter;
    text-align: right;
    text-justify: right;
}

#looking_forward {
    grid-area: looking_forward;
    color: white;
    text-align: left;
    padding: 2rem;
    font-family: "IBM Plex Sans", sans-serif;
    font-size: 2rem;
}

#email {
    grid-area: email;
    color: white;
    margin: 1rem;
    padding: 1rem;
    height: fit-content;
    width: fit-content;
    border: 1px solid white;
    border-radius: 1rem;
}

#email h2 {
    font-size: 3rem;
}

#email p {
    font-size: 2rem;
}

#email p a {
    color: white;
}

#phone {
    grid-area: phone;
    color: white;
    margin: 1rem;
    padding: 1rem;
    height: fit-content;
    width: fit-content;
    border: 1px solid white;
    border-radius: 1rem;
}

#phone h2 {
    font-size: 3rem;
}

#phone p {
    font-size: 2rem;
}

#phone p a {
    color: white;
}

#socials {
    grid-area: socials;
    color: white;
    margin: 1rem;
    padding: 1rem;
    height: fit-content;
    width: fit-content;
    border: 1px solid white;
    border-radius: 1rem;
}

#socials h2 {
    font-size: 3rem;
}

#socials p {
    font-size: 2rem;
}

#footer {
    grid-area: footer;
    background-color: black;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-weight: 100;
    padding: 1rem;
    color: white;
    border-top: 1px solid white;
}

#footer nav ul {
    color: white;
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
    justify-content: space-evenly;
}

#header nav ul li {
    padding: 0.5rem 1rem;
    min-width: fit-content;
    font-weight: 100;
    font-size: 1rem;
    list-style: none;
}

#footer nav ul li {
    padding: 0.5rem 1rem;
    min-width: fit-content;
    font-weight: 100;
    font-size: 1rem;
    list-style: none;
}


#header nav ul li a,
footer nav ul li a {
    display: flex;
    align-items: center;
    gap: 0.8rem;

    text-decoration: none;
    color: white;
    position: relative;
}

#header nav ul li a svg {
    min-width: 1rem;
}

#header nav ul li a::after {
    content: '';
    width: 0;
    height: 1px;
    background: #f142d7;
    position: absolute;
    left: 50%;
    bottom: -6px;
    transition: 0.3s ease-in-out;
}

#header nav ul li a:hover::after {
    width: 100%;
    left: 0;
}