/* =========================================
   GENERAL
========================================= */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;

    background-color: #e7efe1;

    color: #292929;

    font-family: Arial, sans-serif;

    line-height: 1.6;
}


/* =========================================
   NAVIGATION
========================================= */

header {
    width: 100%;

    background-color: #174b50;
}

nav {
    width: 100%;

    margin: 0;

    padding: 18px 30px;
}

.nav-container {
    width: 100%;

    max-width: 1050px;

    margin: 0 auto;

    display: flex;

    justify-content: space-between;

    align-items: center;
}

.site-title {
    color: white;

    text-decoration: none;

    font-size: 20px;

    font-weight: bold;

    white-space: nowrap;
}

.site-title:hover {
    text-decoration: underline;
}

nav ul {
    list-style: none;

    margin: 0;

    padding: 0;

    display: flex;

    align-items: center;

    gap: 40px;
}

nav li {
    margin: 0;

    padding: 0;
}

nav a {
    color: white;

    text-decoration: none;

    font-size: 17px;

    font-weight: bold;

    white-space: nowrap;
}

nav a:hover {
    text-decoration: underline;
}


/* =========================================
   MAIN CONTENT
========================================= */

main {
    width: 100%;

    max-width: 1050px;

    margin: 0 auto;

    padding: 65px 30px 80px;
}


/* =========================================
   HERO
========================================= */

.hero {
    width: 100%;

    background-color: #cc7b63;

    color: #fffaf2;

    text-align: center;

    padding: 85px 70px;

    border-radius: 10px;

    margin-bottom: 45px;
}

.hero h1 {
    margin: 0 0 25px;

    font-size: 64px;

    line-height: 1.1;
}

.hero h2 {
    margin: 0 0 35px;

    font-size: 34px;

    line-height: 1.2;
}

.hero .welcome {
    margin: 0 auto 25px;

    font-size: 25px;

    font-weight: bold;
}

.hero p:not(.welcome) {
    max-width: 760px;

    margin: 0 auto;

    font-size: 17px;
}


/* =========================================
   BUTTONS
========================================= */

.project-link {
    display: inline-block;

    background-color: #174b50;

    color: white;

    text-decoration: none;

    padding: 15px 25px;

    margin: 5px 3px;

    border-radius: 5px;

    font-weight: bold;

    font-size: 16px;
}

.project-link:hover {
    background-color: #28636a;
}


/* =========================================
   PROJECT SECTIONS
========================================= */

.projects {
    width: 100%;

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 35px;

    margin-bottom: 55px;
}

.project {
    padding: 10px 5px;
}

.project h2 {
    color: #174b50;

    font-size: 34px;

    margin: 0 0 10px;
}

.project p {
    margin: 0 0 25px;

    font-size: 17px;
}


/* =========================================
   PLAYGROUND
========================================= */

.playground {
    text-align: center;

    margin-bottom: 65px;
}

.playground h2 {
    color: #174b50;

    font-size: 36px;

    margin-bottom: 10px;
}

.playground p {
    max-width: 650px;

    margin: 0 auto 25px;

    font-size: 17px;
}


/* =========================================
   PHOTOS
========================================= */

.photos {
    width: 100%;

    padding: 0;

    margin-bottom: 45px;
}

.photo-grid {
    width: 100%;

    max-width: 1050px;

    margin: 0 auto;

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 35px;
}

.photo-box {
    width: 100%;

    display: flex;

    justify-content: center;
}

.photo-box img {
    display: block;

    width: 100%;

    max-width: 100%;

    height: 380px;

    object-fit: cover;
}


/* =========================================
   ABOUT ME
========================================= */

.about {
    background-color: #f5f1e8;

    border-left: 8px solid #6d8558;

    padding: 45px 50px;

    margin-bottom: 60px;
}

.about h2 {
    color: #174b50;

    font-size: 36px;

    margin: 0 0 25px;
}

.about p {
    margin: 0 0 20px;

    font-size: 17px;
}

.about p:last-child {
    margin-bottom: 0;
}


/* =========================================
   REFLECTION
========================================= */

.reflection {
    padding: 0 50px;

    margin-bottom: 60px;
}

.reflection h2 {
    color: #174b50;

    font-size: 36px;

    margin-bottom: 25px;
}

.reflection p {
    font-size: 17px;

    margin-bottom: 20px;
}


/* =========================================
   FOOTER
========================================= */

footer {
    background-color: #174b50;

    color: white;

    text-align: center;

    padding: 25px;

    margin-top: 30px;
}

footer p {
    margin: 0;
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 900px) {

    main {
        padding: 50px 25px 70px;
    }

    .hero {
        padding: 70px 45px;
    }

    .hero h1 {
        font-size: 52px;
    }

    .hero h2 {
        font-size: 29px;
    }

    .projects {
        gap: 25px;
    }

    .photo-box img {
        height: 320px;
    }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 700px) {

    /* Navigation */

    nav {
        padding: 18px 20px;
    }

    .nav-container {
        flex-direction: column;

        gap: 15px;
    }

    nav ul {
        flex-direction: column;

        gap: 10px;

        width: 100%;

        text-align: center;
    }

    nav a {
        font-size: 16px;
    }


    /* Main */

    main {
        padding: 35px 18px 55px;
    }


    /* Hero */

    .hero {
        padding: 55px 25px;

        margin-bottom: 35px;
    }

    .hero h1 {
        font-size: 42px;
    }

    .hero h2 {
        font-size: 25px;
    }

    .hero .welcome {
        font-size: 21px;
    }

    .hero p:not(.welcome) {
        font-size: 16px;
    }


    /* Buttons */

    .project-link {
        display: block;

        width: 100%;

        margin: 10px 0;
    }


    /* Projects */

    .projects {
        grid-template-columns: 1fr;

        gap: 35px;

        margin-bottom: 45px;
    }

    .project h2 {
        font-size: 30px;
    }


    /* Playground */

    .playground {
        margin-bottom: 45px;
    }

    .playground h2 {
        font-size: 30px;
    }


    /* Photos */

    .photo-grid {
        grid-template-columns: 1fr;

        gap: 25px;
    }

    .photo-box img {
        width: 100%;

        height: auto;

        aspect-ratio: 4 / 3;

        object-fit: cover;
    }


    /* About */

    .about {
        padding: 35px 25px;

        border-left-width: 6px;
    }

    .about h2 {
        font-size: 30px;
    }

    .about p {
        font-size: 16px;
    }


    /* Reflection */

    .reflection {
        padding: 0 10px;
    }

    .reflection h2 {
        font-size: 30px;
    }

    .reflection p {
        font-size: 16px;
    }

}


/* =========================================
   SMALL PHONES
========================================= */

@media (max-width: 450px) {

    .hero {
        padding: 45px 20px;
    }

    .hero h1 {
        font-size: 36px;
    }

    .hero h2 {
        font-size: 22px;
    }

    .hero .welcome {
        font-size: 19px;
    }

    .project h2,
    .playground h2,
    .about h2,
    .reflection h2 {
        font-size: 27px;
    }

}