/* base.scss This is the base scss file that contains all the variables and defaults. */
@import url("https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,200..900;1,8..60,200..900&display=swap");
* { font-family: "Source Serif 4", serif; }

body { margin: 0; padding: 0; }

p, h1, h2, h3, h4, h5, h6 { color: #2c2c2c; }

hr { display: none; }

.museum-exhibit { min-height: 100vh; background-color: #f5f5f0; display: flex; flex-direction: column; }

.exhibit-container { flex: 1; display: flex; align-items: center; justify-content: center; padding: 40px 20px; max-width: 1200px; margin: 0 auto; width: 100%; box-sizing: border-box; }

.exhibit-layout { display: flex; align-items: center; gap: 60px; width: 100%; justify-content: center; }

.artwork-container { flex-shrink: 0; }

.artwork-image { display: block; max-width: 600px; width: 100%; height: auto; }

.museum-label { max-width: 450px; padding: 30px 40px; background-color: #f5f5f0; border-left: 3px solid #8b7355; }

.label-title { font-size: 14px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: #2c2c2c; margin: 0 0 8px 0; }

.museum-label > i { display: block; margin-bottom: 25px; }

.label-description { font-size: 14px; line-height: 1.7; color: #2c2c2c; margin: 0 0 25px 0; font-weight: 400; }

.label-metadata { font-size: 14px; color: #6b6b6b; font-style: italic; margin: 0; padding-top: 15px; border-top: 1px solid #e8e8e0; }

@media (max-width: 900px) { .exhibit-layout { flex-direction: column; gap: 40px; }
  .artwork-image { max-width: 500px; }
  .museum-label { text-align: center; border-left: none; border-top: 3px solid #8b7355; padding: 30px 20px; } }
@media (max-width: 500px) { .exhibit-container { padding: 30px 15px; }
  .artwork-image { max-width: 300px; }
  .label-description { font-size: 16px; } }
.navigation-bar { position: fixed; width: 100%; top: 0; left: 0; z-index: 100; transition: 0.2s; background-color: #f5f5f0; }
.navigation-bar a { display: inline-block; text-decoration: none; color: #2c2c2c; font-family: "Source Serif 4", serif; font-weight: 500; font-size: 18px; padding: 15px 20px; transition: color 0.2s; }
.navigation-bar a:hover { color: #8b7355; text-decoration: none; }
.navigation-bar a.navigation-link { float: right; letter-spacing: 0.05em; text-transform: uppercase; font-size: 14px; }
.navigation-bar a.logo { color: #2c2c2c; font-weight: 600; }
.navigation-bar button.menu { display: none; float: right; font-size: 24px; color: #2c2c2c; border: none; background: transparent; padding: 15px 20px; outline: none; cursor: pointer; }
.navigation-bar button.menu:hover { transition-duration: 0.2s; color: #8b7355; }

#mobile-nav { display: none; position: fixed; height: 100vh; width: 100%; background-color: #f5f5f0; z-index: 99; }
#mobile-nav .link-wrapper { height: 100%; width: 100%; display: table; }
#mobile-nav .link-wrapper .centered-links { display: table-cell; vertical-align: middle; }
#mobile-nav .link-wrapper .centered-links a { display: block; width: 100%; text-decoration: none; text-align: center; color: #2c2c2c; font-size: 24px; padding: 18px; }
#mobile-nav .link-wrapper .centered-links a:hover { color: #8b7355; }

.dark-background { background-color: #f5f5f0; transition: 0.2s; }

@media (max-width: 640px) { .navigation-bar button.menu { display: block; }
  .navigation-bar a.navigation-link { display: none; } }
.contact-page { min-height: 100vh; background-color: #f5f5f0; display: flex; flex-direction: column; }

.contact-container { flex: 1; display: flex; align-items: center; justify-content: center; padding: 40px 20px; }

.contact-form-wrapper { max-width: 500px; width: 100%; padding: 40px; background-color: white; border-radius: 4px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); border-top: 4px solid #8b7355; }

.contact-title { font-size: 14px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: #2c2c2c; margin: 0 0 10px 0; text-align: center; }

.contact-subtitle { font-size: 16px; color: #6b6b6b; text-align: center; margin: 0 0 30px 0; font-style: italic; }

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

.form-group { display: flex; flex-direction: column; gap: 8px; }

.form-label { font-size: 13px; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; color: #6b6b6b; }

.form-input, .form-textarea { font-family: "Source Serif 4", serif; font-size: 16px; padding: 12px 15px; border: 1px solid #e8e8e0; border-radius: 3px; background-color: #f5f5f0; color: #2c2c2c; transition: border-color 0.2s, box-shadow 0.2s; }
.form-input:focus, .form-textarea:focus { outline: none; border-color: #8b7355; box-shadow: 0 0 0 3px rgba(139, 115, 85, 0.1); }
.form-input::placeholder, .form-textarea::placeholder { color: #9e9e9e; }

.form-textarea { min-height: 150px; resize: vertical; }

.form-submit { font-family: "Source Serif 4", serif; font-size: 14px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; padding: 15px 30px; background-color: #8b7355; color: white; border: none; border-radius: 3px; cursor: pointer; transition: background-color 0.2s, transform 0.1s; margin-top: 10px; }
.form-submit:hover { background-color: #5c4a3a; }
.form-submit:active { transform: translateY(1px); }

@media (max-width: 500px) { .contact-form-wrapper { padding: 30px 20px; } }
.about-me .header-section { height: 35vh; background-image: url("../images/about.jpg"); background-position: center; background-size: cover; }
.about-me .header-section .header-background-filter { height: 100%; width: 100%; background-color: rgba(36, 19, 0, 0.658); }
.about-me .header-section .header-background-filter h1 { line-height: 35vh; font-family: "Source Serif 4", serif; font-size: 54px; font-family: "Source Serif 4", serif; font-weight: 800; color: #f0f0f0; text-align: center; margin: 0; }
.about-me .content-section { background-color: #f0f0f0; min-height: 65vh; }
.about-me .content-section .container { padding: 30px; }
.about-me .content-section .container p { font-family: "Source Serif 4", serif; font-weight: 400; font-size: 20px; line-height: 40px; text-align: justify; margin-bottom: 25px; }
.about-me .content-section .container p img { float: right; width: 300px; margin-left: 30px; margin-right: 30px; }
.about-me .content-section .container p .desktop-image { display: block; }
.about-me .content-section .container p .mobile-image { display: none; }

@media (max-width: 800px) { .about-me .header-section .header-background-filter h1 { font-size: 36px; }
  .about-me .content-section .container p { font-size: 16px; line-height: 32px; }
  .about-me .content-section .container p img { width: 100%; margin: 0; }
  .about-me .content-section .container p .desktop-image { display: none; }
  .about-me .content-section .container p .mobile-image { display: block; } }
.blog .header-section { height: 35vh; background-image: url("../images/about.jpg"); background-position: center; background-size: cover; }
.blog .header-section .header-background-filter { height: 100%; width: 100%; background-color: rgba(36, 19, 0, 0.658); }
.blog .header-section .header-background-filter h1 { line-height: 35vh; font-family: "Source Serif 4", serif; font-size: 54px; font-family: "Source Serif 4", serif; font-weight: 700; color: #f0f0f0; text-align: center; margin: 0; }
.blog .content-section { background-color: #f0f0f0; min-height: 65vh; }
.blog .content-section .container { padding: 30px; }
.blog .content-section .container .post { margin-top: 40px; margin-bottom: 60px; }
.blog .content-section .container .post p { font-family: "Source Serif 4", serif; font-weight: 400; font-size: 20px; line-height: 40px; text-align: justify; color: #3f3f3f; }
.blog .content-section .container .post p a { text-decoration: none; color: #3f3f3f; }
.blog .content-section .container .post h2 { text-align: left; font-weight: 600; }
.blog .content-section .container .post h2 a { color: #3f3f3f; text-decoration: none; }
.blog .content-section .container .post hr { width: 40%; border: solid 2px #cfcfcf; }

@media (max-width: 800px) { .blog .header-section .header-background-filter h1 { font-size: 36px; }
  .blog .content-section .container .post p { font-size: 16px; line-height: 32px; } }
.post-page .header-section { height: 35vh; background-image: url("../images/about.jpg"); background-position: center; background-size: cover; }
.post-page .header-section .header-background-filter { height: 100%; width: 100%; background-color: rgba(36, 19, 0, 0.658); }
.post-page .header-section .header-background-filter h1 { line-height: 35vh; font-family: "Source Serif 4", serif; font-size: 54px; font-family: "Source Serif 4", serif; font-weight: 300; color: #f0f0f0; text-align: center; margin: 0; }
.post-page .post-section { background-color: #f0f0f0; min-height: 65vh; }
.post-page .post-section .container { padding: 30px; }
.post-page .post-section .container p { font-family: "Source Serif 4", serif; font-weight: 400; font-size: 20px; line-height: 40px; text-align: justify; margin-bottom: 25px; }
.post-page .post-section .container h2 { text-align: center; }
.post-page .post-section .container blockquote { background-color: #dfdfdf; padding: 15px; border-left: solid 5px #bfbfbf; }

@media (max-width: 800px) { .post-page .header-section .header-background-filter h1 { font-size: 36px; }
  .post-page .post-section .container p { font-size: 16px; line-height: 32px; } }