* {
    color: #fff;
}

.space-grotesk {
  font-family: "Space Grotesk", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

html,
body {
    height: 100vh;
    width: 100vw;
    margin: 0;
    padding: 0;
    font-size: 2vh;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #9DB3CA;
    text-align: center;
    overflow: hidden;
}

.container {
    display: grid;
    grid-template:
    'profile-photo' max-content
    'name' max-content
    'about-me' max-content
    'socials' max-content
    / 1fr;
    place-items: center;
    grid-gap: 1rem;
}

.profile-photo {
    grid-area: profile-photo;
    width: 10rem;
    height: 10rem;
    border-radius: 50%;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    background-color: #ddd;
    background-image: url('/assets/icons/profile-photo.jpeg');
    background-size: cover;
    background-position: center;
}

.name {
    grid-area: name;

    h1 {
        font-weight: 600;
        margin: 0;
        padding: 0;
    }
}

.about {
    grid-area: about-me;

    p {
        margin: 0;
        padding: 0;
    }
}

.socials {
    grid-area: socials;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-auto-rows: max-content;
    grid-auto-flow: column;
    grid-gap: 1rem;
}

.hover {
    user-select: initial;
    opacity: 0;
}

.no-hover {
    user-select: none;
    opacity: 1;
}


a:hover {
    .hover {
        opacity: 1;
    }

    .no-hover {
        opacity: 0;
    }
}

@media (hover: none),
@media (pointer: coarse) {
    .hover {
        opacity: 1;
    }

    .no-hover {
        opacity: 0;
    }
}

a {
    text-decoration: none;

    display: grid;
    grid-template:
        'icon' max-content
        'text' auto
        / 1fr;
    place-items: center;
    grid-gap: 0.25rem;

    .icon {
        grid-area: icon;
    }

    .text {
        grid-area: text;

        display: grid;
        grid-template-columns: max-content;
        grid-template-rows: max-content;

        > span {
            grid-row: 1;
            grid-column: 1;
        }
    }

    svg {
        width: 1.5rem;
        height: 1.5rem;
    }
}

#email {
    grid-row: 2;
    grid-column: 1 / -1;
}