:root {
    --pastel-blue: #bfe5e9;
    --pastel-pink: #f3e1e6;
    --pastel-yellow: #f5fcc4;
}

/* Return to Home Site Banner */

.portfolio-header {
    display: block ;
    background: #9427ee;
    color: #000;
    padding: 8px;
    border: 2px solid #000;
    z-index: 2000;
}

.portfolio-link {
    color: #000 !important;
    font-size: 1.2em !important;
}

/* General Styles */

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    font-family: Arial, sans-serif;
    font-size: 1.2em;
    line-height: 1.6;
    margin: 0;
    background-color: var(--pastel-pink);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

nav {
    background-color: white;
    padding: 8px;
    display: flex;
    flex-direction: row;
    & > .contact-info {
        margin-left: auto;
    }
    & > ul {
        list-style: none;
        display: flex;
        flex-direction: row;
        & > li {
            margin-right: 20px;
            & > a {
                font-size: 1.2em;
                color: #000;
                text-decoration: none;
                &:hover {
                    text-decoration: underline;
                }
            }
        }
    }
}

.main {
    margin: auto;
    width: 60%;
    text-align: center;;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1 0 auto;
}

.footer {
    box-sizing: border-box;
    width: 100%;
    padding: 10px;
    background-color: white;
    flex-shrink: 0;
}

.about-image-header {
    background-image: url('images/yarn-wall.jpg');
    background-size: cover;
    background-position: center;
    height: 200px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

/* Home Page */

.projects-sample {
  width: 50%;
  border-radius: 20px;
  display: grid;
  grid-template-areas: "header image"
                      "header button";
  justify-items: center;
  background-color: whitesmoke;
  padding: 50px;
  margin: 5px 5px 20px 25px;
  border: 2px solid black;
}

.header {
  grid-area: header;
  font-size: 2em;
}

.sample-image {
    grid-area: image;
    border-radius: 20px;
    width: 100%;
    height: auto;
    max-width: 600px;
    margin: 10px;
    object-fit: cover;
}

.button {
  grid-area: button;
  background-color: var(--pastel-blue);
  color: black;
  border-radius: 25px;
  border: 1px black solid;
  padding: 10px 15px;
  margin: 5px;
  cursor: pointer;
  font-size: 1.1em;
}

.blog-sample {
  width: 50%;
  border-radius: 20px;
  display: grid;
  grid-template-areas: "header image"
                      "header button";
  justify-items: center;
  padding: 50px;
  background-color: whitesmoke;
  margin: 5px 25px 20px auto;
  border: 2px solid black;
}


/* Social Media Icons */

.fa {
  padding: 10px;
  font-size: 50px;
  width: 20px;
  text-align: center;
  text-decoration: none;
  margin: 5px 2px;
  border-radius: 50%;
}

.fa:hover {
  opacity: 0.7;
}

.fa-facebook {
  background: #3B5998;
  color: white;
}

.fa-instagram {
  background: #E1306C;
  color: white;
}

.fa-youtube {
  background: #FF0000;
  color: white;
}

.logo {
    width: 40%;
    min-width: 200px;
    height: auto;
    margin: 5px;
}

/* Projects Section */

#projects {
    margin: auto;
    width: 80%;
    text-align: center;;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1 0 auto;
}

#projects-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  background-color: white;
  max-width: 300px;
  min-width: 220px;
  min-height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  margin: 10px;
  text-align: center;
  box-sizing: border-box;
}

.project-image {
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
}


.card button {
  margin-top: auto;
  margin-bottom: 10px;
  border: none;
  outline: 0;
  padding: 12px;
  color: black;
  background-color: var(--pastel-blue);
  text-align: center;
  cursor: pointer;
  width: 100%;
  font-size: 18px;
}

.card button:hover {
  opacity: 0.7;
}


/* Individual Project Page */

#project {
    margin: auto;
    width: 80%;
    text-align: center;;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1 0 auto;
}

#project-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

#project-image {
    width: 70%;
    max-width: 600px;
    height: auto;
    object-fit: cover;
}

#project-desc {
  width: 80%;
  max-width: 600px;
}


/* Blog Section */

.blog-image-header {
    background-image: url('images/crochet-white.jpg');
    background-size: cover;
    background-position: center;
    height: 200px;
    width: 90%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: black;
}

#blog-posts {
    margin: auto;
    width: 80%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1 0 auto;
}

.category-button {
  background-color: var(--pastel-blue);
  color: black;
  border-radius: 50px;
  border: 1px black solid;
  padding: 10px 20px;
  margin: 5px;
  cursor: pointer;
  font-size: .8em;
}

.active, .category-button:hover {
  background-color: var(--pastel-yellow);
}

.blog-card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  background-color: white;
  max-width: 300px;
  min-width: 220px;
  min-height: 450px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  margin: 10px;
  text-align: center;
  box-sizing: border-box;
}

.header-block {
  background-color: var(--pastel-blue);
  min-height: 150px;
  display: flex;
  align-items: center;
  padding: 5px;
}

.blog-card button {
  margin-top: auto;
  margin-bottom: 10px;
  border: none;
  outline: 0;
  padding: 12px;
  color: black;
  background-color: var(--pastel-blue);
  text-align: center;
  cursor: pointer;
  width: 100%;
  font-size: 18px;
}

.blog-card button:hover {
  opacity: 0.7;
}

.post-date {
  font-size: 0.8em;
  color: #666;
  margin-bottom: 2px;
}

.category {
  font-size: 0.8em;
}

#posts-container {
  width: 90%;
  margin: auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

/* Individual Blog Post Page */
#blog-post {
    margin: auto;
    width: 80%;
    text-align: center;;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1 0 auto;
}
#post-content {
  width: 90%;
  text-align: left;
}

.publish-date {
  font-size: 0.7em;
  color: #666;
  margin-bottom: 10px;
}

.post-author {
  font-size: 0.8em;
  margin-bottom: 10px;
}


@media (max-width: 600px) {
  .card {
    min-height: 220px; /* or remove min-height for mobile */
  }
}