body {
  background-color: #4A2E1E; 
  color: #1a120c;
}

.page-wrapper{
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

h1{
  color: #d5d0dd;
  justify-content: center;
}

main {
  flex: 1;
}




/*navigation*/
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;

  padding: 20px 40px;
  background-color: #eae7f2;
  font-family: Arial, Helvetica, sans-serif;
}

.nav-logo {
  font-weight: bold;
  font-size: 24px;
}

.nav-links {
  list-style: none;
  display: flex;
  gap: 30px;
  margin: 0;
  padding: 0;
}

.nav-links a {
  text-decoration: none;
  font-size: 16px;
  color: #333;
}

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

/*carousel*/
.carousel-item img {
  max-height: 680px;
  align-items: center;
  object-fit: cover;
  width: 100%;
}

/*featured section*/
.featured-section{
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-template-rows: auto auto;
  gap: 10px;
  align-items: start;
}

.blog-preview {
  background-color: #C8A98B;
  display: flex; 
  flex-direction: row; 
  align-items: center; 
  gap: 20px; 

  border-radius: 12px;
  max-width: 80%; 
  margin: 80px auto; 
  padding: 30px 40px;
}

.blog-preview img {
  width: 40%;
  height: auto;
  border-radius: 8px;
}

.blog-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 100%;
}

.blog-text {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.date {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.8rem;
  color: #666;
  margin: 0;
}

.post-title {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.3;
  margin: 0;
}

.post-preview {
  font-family: Arial, Helvetica, sans-serif; 
  font-size: 0.9rem;
  color: #6d6d6d;
  line-height: 1.6;
  margin: 0;
}

.read-more {
  font-family: Arial, Helvetica, sans-serif;
  text-decoration: none;
  font-weight: bold;
  color: #4A2E1E;
  margin-top: 10px;
}

.right-column {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.hero {
  grid-column: 2;
  grid-row: 1;
  max-height: auto;
  overflow: hidden;
}

.hero img {
  width: 100%;
  height: auto;
  display: block;
}




/*cards*/
.card-section{
  grid-column: 1 / 3;
  grid-row: 2;
  display: flex;
  gap: 10px;
}

.card{
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 10px;
  padding: 20px;
  background-color: #C8A98B;
  border-radius: 12px;
  max-width: 300px;
  width: 100%;
  margin-bottom: 20px;
}

.card img {
  width: 100%;
  height: auto;
  border-radius: 8px;
}




/*feature contained blog previews*/
.featured-section .blog-preview {
  max-width: 100% !important;
  margin: 2px 0 !important;
  padding: 10px 0 !important;
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
}
.featured-section .blog-preview img {
  width: 80px;
}

.featured-section .blog-text {
font-size: 0.6rem;
}

.featured-section .post-preview {
font-size: 0.6rem;
line-height: 1;
}

.featured-section .post-title {
font-size: 0.8rem;
line-height: 1;
}

.featured-section .date {
font-size: 0.5rem;
}

.featured-section .read-more {
margin-top: 0px !important; 
}

.featured-section .card {
  height: auto;
}

.featured-section .card h3 {
  font-size: 1rem;
  margin: 0 0;
}

.featured-section .card p {
  font-size: 0.8rem;
  margin-top: 5px;
}



/*gallery*/
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-template-rows: auto auto;
  gap: 10px;
  margin: auto; 
  background-color: #4A2E1E;
  padding: 20px;
  border-radius: 8px;
}

.item {
  background-color: #C8A98B;
  border-radius: 8px;
  aspect-ratio: 1 / 1;
  display: flex;
  justify-content: center;
}

.item img {
  padding: 0;
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
  
}

.item p {
  text-align: center;
  display: flex;
  align-items: center;
}




/*footer*/
.footer {
  display: flex;
  justify-content: space-between; 
  align-items: flex-start;
  background-color: #d5d0dd; 
  padding: 30px 100px;
  font-family: Arial, Helvetica, sans-serif;
}

.footer ul {
  list-style: none; 
  padding: 0;
  margin: 0; 
}

.footer li {
  margin-bottom: 6px;
  font-size: 14px;
}

.social-icons img {
  width: 22px;
  margin-right: 10px;
  vertical-align: middle;
}



a:focus, button:focus, input:focus {
  outline: 2px solid #4a90e2;
  outline-offset: 2px;
}



@media (max-width: 600px) {
  .card-section{
    flex-direction: column;
  }
}


@media (min-width: 600px) and (max-width: 1024px) {
}

/*took some time to learn about scoped styling after hearing someone talk about it in a youtube video. If I did it all right I think
I wrapped my nav into my inspired component using the following styling. It should only affect my navbar when I use the .main-nav class
I was going for a crunchyroll type theme. It's not exactly how crunchy roll presents themselves but that's also not really what I was looking for.
My goal was for the page to look mildly similar but still be my design, just with inspiration.

I also have a friend who has been helping me understand the things we're covering in class. They own their own SEO company and are looking
to do an intership with me, then potentially hire me post graduation. I'm pretty stoked.*/

.main-nav {
  background-color: #2e241c;
  padding-block: 10px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.35);
  font-family: Arial, Helvetica, sans-serif;
  z-index: 1000;
}

.main-nav .nav-logo {
  height: 32px;
  width: auto;
  border-radius: 6px;
}

.main-nav .brand-text {
  font-size: 1.05rem;
  font-weight: 600;
  color: #f1e5d2;
  letter-spacing: 0.03em;
}

.main-nav .navbar-brand:hover .brand-text {
  color: #ffffff;
}

.main-nav .nav-links .nav-link {
  color: #e8d6c1;
  padding: 6px 14px;
  border-radius: 999px;
  font-weight: 500;
  transition: 0.15s ease;
}

.main-nav .nav-links .nav-link:hover,
.main-nav .nav-links .nav-link.active {
  background-color: rgba(255,255,255,0.1);
  color: #ffffff;
}

.main-nav .dropdown-menu {
  background-color: #3a2f26;
  border-color: #524438;
}

.main-nav .dropdown-item {
  color: #f1e5d2;
}

.main-nav .dropdown-item:hover {
  background-color: #524438;
  color: #ffffff;
}

.nav-search {
  background-color: #3e332b;
  border-radius: 999px;
  padding: 3px 10px;
}

.nav-search-input {
  background: transparent;
  border: none;
  color: #f1e5d2;
  width: 180px;
  font-size: 0.9rem;
}

.nav-search-input::placeholder {
  color: #baa48e;
}

.nav-search-input:focus {
  outline: none;
  box-shadow: none;
}

.nav-search-btn {
  color: #f1e5d2;
  font-size: 1rem;
  background: transparent;
  border: none;
  padding-left: 5px;
}

.nav-search-btn:hover {
  color: #ffffff;
}

@media (max-width: 991px) {
  .nav-search {
    margin-top: 10px;
    width: 100%;
  }
  .nav-search-input {
    width: 100%;
  }
  .main-nav .nav-links .nav-link {
    border-radius: 0;
    padding-left: 0;
  }
}