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

body {
    display: block;
    background-color: black;
    background-image: url("/images/shaan_black_background_closer_to_center.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    font-family: "IBM Plex Sans", sans-serif;
}

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

#header {
    grid-area: header;
}

#header nav {
    border-bottom: 1px solid white;
    padding: 0.5rem;
    display: block;
}

#footer nav {
    vertical-align: bottom;
}

#header nav ul {
    color: white;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    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: 6rem;
}

#contact p {
    margin: 0;
    font-size: 3rem;
    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: min-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: min-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;
}

#home_link,
#about_link,
#skills_link,
#experience_link,
#projects_link,
#contact_link {
    border-right: 1px solid white;
    padding: 0.5rem 1rem;
    min-width: fit-content;
    font-weight: 100;
    font-size: 1rem;
    list-style: none;
}

#education_link,
#blog_link {
    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;
}