* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 18px;
}

@font-face {
    font-family: 'Playfair-Display';
    src: url('./fonts/PlayfairDisplay-VariableFont_wght.ttf') format('truetype');
}

@font-face {
    font-family: 'Roboto';
    src: url('./fonts/Roboto-VariableFont_wdth\,wght.woff2') format('woff2');
}

h1,
h2 {
    font-family: 'Playfair-Display', 'Roboto', sans-serif;
    font-weight: normal;
}

h1 {
    font-size: 2.5rem;
}

h2 {
    font-size: 2rem;
}

body {
    font-family: 'Roboto', sans-serif;
}


section {
    max-width: 75rem;
    margin: 0 auto;
    padding: 5rem 1.25rem;

}

.blue-container {
    background: #1f8aa0;
}

.grid {
    display: grid;
    grid-template-areas: 'about' 'work' 'contact';

    grid-template-columns: 1fr;
}

.about {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "image content";
    max-width: 75rem;
    margin: 0 auto;
    padding: 5rem 1.25rem;
}


.icons img,
.project-icons img,
.contact-details img,
.email-details img {
    width: 2rem;
    height: 2rem;
}

.icons {
    display: flex;
    gap: 1.25rem;
    justify-content: flex-end;
    opacity: 0.8;
    transition: all 0.3s ease;

}

.icons:hover {
    opacity: 1;

}

.about-me {
    font-size: 2.5rem;
    font-weight: 500;
    font-family: 'Playfair Display';
}

.description {
    font-size: 1.2rem;
    font-weight: 400;
    font-family: 'Roboto';
    line-height: 1.4;
}

.image-card {
    grid-area: image;
}

.pfp-img {
    width: 100%;
    height: auto;
    transform: scale(1.1);

}

.profile-card {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    background-color: white;
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
    padding: 2.5rem;

    grid-area: content;
}

/* main content */
.main {
    background-color: white;
    grid-area: work;
    padding: 3rem;
}

.main h1 {
    padding-bottom: 1.25rem;
}

.main-heading {
    font-family: 'Playfair Display';
}

.projects {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
    grid-template-areas: "card-1 card-2 card-3" "card-4 card-5 card-6" "card-7 card-8 card-9";
}

#card-1 {
    grid-area: card-1;
}

#card-2 {
    grid-area: card-2;
}

#card-3 {
    grid-area: card-3;
}

#card-4 {
    grid-area: card-4;
}

#card-5 {
    grid-area: card-5;
}

#card-6 {
    grid-area: card-6;
}

.projects>.project-card {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    background-color: white;
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
    height: 100%;
    min-height: 25rem;
    padding-bottom: 3.5rem;
}

.project-main {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1rem;
    gap: 0.625rem;
    padding: 1.25rem;
}

.project-main>.project-icons {
    display: flex;
    gap: 1.25rem;
    justify-content: flex-end;
    opacity: 0.8;
    transition: all 0.3s ease;
}

.project-icons:hover {
    opacity: 1;
    transform: translateY(0);
}

.project-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.project-card p {
    display: flex;
    padding: 1.25rem;
}


/* footer */

footer {
    padding: 5rem 1.25rem;
    grid-area: contact;
    color: white;
    max-width: 75rem;
    margin: 0 auto;
}

.footer-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    grid-template-areas: "content image";
}

.footer-content {
    grid-area: content;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.contact-details,
.email-details {
    display: flex;
    gap: 1.25rem;
    justify-content: flex-start;
    align-items: center;
}

.footer-heading {
    font-size: 3rem;
    font-weight: 500;
    font-family: 'Playfair Display';
}

.footer-text {
    font-size: 1.2rem;
    font-weight: 400;
    font-family: 'Roboto';
    line-height: 1.4;
}

.footer-content>.icons {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.footer-image {
    grid-area: image;
    place-self: center;
}

.footer-image img {
    width: 100%;
    height: auto;
    border-left: 0.3125rem solid #1f8aa0;
}

/* ---------------- media queries ---------------- */

/* for tablets */
@media (min-width: 600px) and (max-width: 999px) {

    html {
        font-size: 16px;
    }

    section,
    footer {
        padding: 4rem 1.5rem;
    }

    .about {
        grid-template-columns: 1fr;
        grid-template-areas: "image" "content";
    }

    .pfp-img {
        transform: scale(1);
    }

    .projects {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1.875rem;
        grid-template-areas: "card-1 card-2" "card-3 card-4" "card-5 card-6";
    }

    .footer-container {
        gap: 1rem;
    }

}

/* for mobile */

@media (max-width: 599px) {

    html {
        font-size: 14px;
    }

    section,
    footer {
        padding: 3rem 1rem;
    }

    .about {
        grid-template-columns: 1fr;
        grid-template-areas: "image" "content";
    }

    .pfp-img {
        transform: scale(1);
    }

    .projects {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1.875rem;
        grid-template-areas: "card-1" "card-2" "card-3" "card-4" "card-5" "card-6";
    }

    .footer-container {
        grid-template-columns: 1fr;
        grid-template-areas: "content" "image";
    }

    .footer-content {
        align-items: center;
    }

    .footer-text {
        text-align: center;
    }

    .footer-image img {
        border-left: none;
    }

}