@charset "UTF-8";
/* CSS Document */
body{
    margin:0;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.5em;
    background-image: url(images/Background@2x.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
    background-size: cover;
    
    
}

#Home #site_wrap{
    display:grid;
    grid-template-columns: 1fr repeat(4,minmax(0,480px)) 1fr;
    grid-gap:0px;
    grid-template-rows: 
        177px
        min-content
        595px
        1fr
    	;
    grid-template-areas: 
        ". header header header header ."
        "featured_back featured_infomartion . . . featured_main"
        "featured_back featured_infomartion . . featured_buttom featured_main"
        "featured_footer featured_footer featured_footer featured_footer featured_footer featured_footer";
    

}




.header{
    grid-area:header;
    display:flex;
    align-items: center;
    justify-content: space-between;
    padding-right: 2em;
}
.header .logo{
    width:300px;
}
.header .nav{
    list-style: none;
    padding: 0;
    display: flex;
}
.header .nav a{
    text-decoration: none;
    border: 1px solid #F2EFC4;
    border-radius: 50em;
    color: #707070;
    padding: 12px 40px;
    margin: 0 29px;
    background-color: #F2EFC4 ;
    text-transform: initial;
    font-weight: bold;
    font-family: Chiller, CommercialScript BT, sans-serif;
    font-size:30pt;
    display: inline-block;

}
.header .nav a:hover, .active{
    background-color: #F2F2F2;
    padding: 14px 44px;
    margin: 0 29px;
}

.featured_main{
    background-color: transparent;
    grid-area:featured_main;
}
.featured_infomartion{
    grid-area:featured_infomartion;
    margin: 20px 20px;
    padding-top: 2em;
    padding-left: 2em;
    padding: 5px 10px;

}
.featured_infomartion .phrase{
    color: #F2F2F2;
    font-family: Chiller, CommercialScript BT, sans-serif;
    font-style: italic;
    text-align: center;
    font: size 35pt;
    line-height: 1
    
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}


.featured_infomartion {
  animation: fadeIn 1s ease-out 0.3s both;
}

.header {
  animation: fadeIn 1s ease-out 0.2s both;
}

.featured_buttom .btn {
  animation: fadeIn 1s ease-out 0.5s both;
}

.featured_infomartion p{
    color: #F2F2F2;
    font-family: Chiller, CommercialScript BT, sans-serif;
    text-align: center;
    font-size:25pt;
    line-height: 1
}

.featured_buttom{
    align-content: flex-end;
    grid-area:featured_buttom;
    padding-bottom: 1.5em;
}
.featured_buttom .btn{
    text-decoration: none;
    color: #F2F2F2;
    -webkit-text-stroke: 1px #DBC21F;
    text-transform: initial;
    font-family: Chiller, CommercialScript BT, sans-serif;
    font-size:50pt;
    text-transform: uppercase;
    float: center;
      
}
.featured_buttom .btn:hover, .active{
    color: #DBC21F;
    -webkit-text-stroke: 1px #F2F2F2;
    font-size:52pt;
}

.featured_back{
    background-color: transparent;
    grid-area:featured_back;
}
.featured_footer {
    grid-area: featured_footer;
    grid-column: 1 / -1; 
    background-color: #050508;
    background-size: cover;
    padding-top: 1.5em;
    padding-bottom: 1.5em;
    text-align: center;
    color: #F2F2F2;
}


@media screen and (max-width: 480px) {
  #Home #site_wrap{
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    grid-template-rows: auto auto auto auto;
    grid-template-areas:
      "header header header"
      "featured_main featured_infomartion featured_back"
      "featured_main featured_buttom featured_back"
      "featured_footer featured_footer featured_footer";
    max-width: 100%;
    margin: 0;
    padding: 0 1em;
  }


  .header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1em 0;
  }

  .header .logo {
    max-width: 200px;
    margin-bottom: 1em;
  }

  .header .nav {
    list-style: none;
    flex-direction: column;
    padding: 0;
    display: flex;
    margin-top: 1em;
  }

  .header .nav a {
    margin: 0.5em 0;
    font-size: 20pt;
    padding: 10px 20px;
    width: 100%;
    box-sizing: border-box;
  }
  .header .nav a:hover, .active{
    background-color: #F2F2F2;
    padding: 5px 19px;
    margin: 0 17px;
}


  .featured_infomartion {
    grid-area: featured_infomartion;
    display: block;
    text-align: center;
    padding: 1em;
    margin-bottom: 1.5em;
    animation: fadeIn 1s ease-out 0.3s both;
  }

  .featured_infomartion .phrase,
  .featured_infomartion p {
    font-size: clamp(16pt, 5vw, 20pt);
    line-height: 1.3;
    color:#F2F2F2;
    -webkit-text-stroke: 0.8px #ad7601;
    font-family: Chiller, CommercialScript BT, sans-serif;
  }

  .featured_buttom {
    grid-area: featured_buttom;
    text-align: center;
    margin-bottom: 2em;
  }

  .featured_buttom .btn {
    font-size: 28pt;
    padding: 0.75em 1.5em;
    display: inline-block;
    color: #F2F2F2;
    -webkit-text-stroke: 1px #DBC21F;
    font-family: Chiller, CommercialScript BT, sans-serif;
    text-transform: uppercase;
    border-radius: 0.5em;
    transition: transform 0.3s ease, background-color 0.3s ease;
  }

  .featured_buttom .btn:hover,
  .active {
    transform: scale(1.05);
    background-color: rgba(219, 194, 31, 0.1);
    color: #DBC21F;
    -webkit-text-stroke: 1px #F2F2F2;
    font-size: 30pt;
  }

  .featured_footer {
    grid-area: featured_footer;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: #050508;
    padding: 1em 0;
    text-align: center;
    color: #F2F2F2;
    z-index: 1000;
  }

}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}















/*------------------------------ About page -------------------------------------------------------------------*/

#about #site_wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2em;
  display: grid;
  gap: 2em;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "header header"
    "about_text about_images"
    "featured_button featured_button"
    "featured_footer featured_footer";
  grid-template-rows: 
    min-content
    min-content
    min-content
    1fr
    

}


/* Text section */
.about_text {
  grid-area: about_text;
  display: flex;
  flex-direction: column;
  justify-content: center;   /* vertical centering */
  align-items: center;       /* horizontal centering */
  padding: 1.5em;
  background-color: #F2EFC4;
  color: #000000;
  font-family: Chiller, CommercialScript BT, sans-serif;
  max-width: 600px;
  margin: 0 auto;
}


.about_text .slogan {
  font-size: 35pt;
  font-style: italic;
  margin-bottom: 1em;
  line-height: 1.6;
  text-align: center;
}

.about_text .mission,
.about_text .response {
  font-size: 24pt;
  line-height: 1.5;
}

.about_text .question {
  font-size: 50pt;
  margin-top: 1em;
}

.featured_button {
  grid-area: featured_button;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 1em;
}

.featured_button .button{
    text-decoration: none;
    color: #F2F2F2;
    -webkit-text-stroke: 1px #DBC21F;
    text-transform: initial;
    font-family: Chiller, CommercialScript BT, sans-serif;
    font-size:50pt;
    text-transform: uppercase;
    float: center;
    padding-bottom: 1em;
      
}
.featured_button .button:hover, .active{
    color: #DBC21F;
    -webkit-text-stroke: 1px #F2F2F2;
    font-size:52pt;
}

.about_images {
  display: flex;
  flex-direction: column;
  gap: 2em;
  align-items: center;
}

.about_images img {
  max-width: 100%;
  border-radius: 1em;
  box-shadow: 0 0 10px #000000;
}
.featured_footer {
    grid-area: featured_footer;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: #050508;
    padding: 1em 0;
    text-align: center;
    color: #F2F2F2;
    z-index: 1000;
  }


@media screen and (max-width: 480px) {
  #about #site_wrap {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "about_text"
      "about_images"
      "featured_button"
      "featured_footer";
    gap: 1.5em;
    padding: 1em;
    max-width: 100%;
  }

  #about .header {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1em 0;
  }

  #about .logo {
    max-width: 200px;
    margin-bottom: 1em;
  }

  #about .nav {
    flex-direction: column;
    gap: 1em;
    padding: 0;
    margin: 0;
  }

  #about .nav a {
    font-size: 20pt;
    padding: 10px 20px;
    width: 100%;
    box-sizing: border-box;
  }

  .about_text {
    text-align: center;
    padding: 1em;
  }

  .about_text .slogan {
    font-size: 20pt;
    line-height: 1.6;
  }

  .about_text .mission,
  .about_text .response,
  .about_text .question {
    font-size: 16pt;
    line-height: 1.5;
  }

  .about_images {
    flex-direction: column;
    align-items: center;
    gap: 1em;
  }

  .about_images img {
    max-width: 100%;
    border-radius: 1em;
  }

  .featured_button {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1em 0;
  }

  .featured_button .button {
    font-size: 28pt;
    padding: 0.75em 1.5em;
    border-radius: 1em;
    text-align: center;
  }

  .featured_footer {
    text-align: center;
    padding: 1em 0;
    font-size: 14pt;
    left: 0;
    bottom: 0;

  }
}




/*------------------------------ gallery page -------------------------------------------------------------------*/

body#gallery{
  background-image :url(images/Selection.png)
}

#gallery #site_wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2em;
  display: grid;
  gap: 2em;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "header header"
    "gallery_intro gallery_intro"
    "option_dark option_light"
    "option_dark option_light"
    "featured_footer featured_footer";
  grid-template-rows: 
    min-content
    min-content
    1fr
    1fr
    min-content
}


.gallery_intro {
  grid-area: gallery_intro;
  display: flex;
  flex-direction: column;
  justify-content: center;   /* vertical centering */
  align-items: center;       /* horizontal centering */
  padding: 1em;
  color: #f3b008;
  -webkit-text-stroke: 0.2px #b75301;
  font-family: Chiller, CommercialScript BT, sans-serif;
  font-size: 50px
}

.option_light, 
.option_dark{
  padding: 2rem;

}

.dark, .light {
  display: flex;
  flex-direction: column;
  align-items: center;   /* horizontal centering */
  justify-content: center; /* vertical centering if needed */
  text-align: center;
}


.dark .button{
  text-decoration: none;
  border: 1px solid #000000;
  border-radius: 50em;
  color: #F2EFC4;
  padding: 12px 40px;
  margin: 0 29px;
  background-color: #000000 ;
  text-transform: initial;
  font-weight: bold;
  font-family: Chiller, CommercialScript BT, sans-serif;
  font-size:30pt;
  display: inline-block;
}

.dark .dark_text{
  font-size: 24pt;
  line-height: 1.5;
  grid-area: gallery_intro;
  padding: 1.5em;
  color: #F2EFC4;
  font-family: Chiller, CommercialScript BT, sans-serif;
  max-width: 600px;
  margin: 0 auto;
}

.light .button{
  text-decoration: none;
  border: 1px solid #F2EFC4;
  border-radius: 50em;
  color: #000000;
  padding: 12px 40px;
  margin: 0 29px;
  background-color: #F2EFC4 ;
  text-transform: initial;
  font-weight: bold;
  font-family: Chiller, CommercialScript BT, sans-serif;
  font-size:30pt;
  display: inline-block;
}

.light .light_text{
  font-size: 24pt;
  line-height: 1.5;
  grid-area: gallery_intro;
  padding: 1.5em;
  color: #000000;
  font-family: Chiller, CommercialScript BT, sans-serif;
  max-width: 600px;
  margin: 0 auto;
}

.light .button:hover, .active{
    background-color: #e69e03;
    padding: 14px 44px;
    margin: 0 29px;
}

.dark .button:hover, .active{
    background-color: #3f1871;
    padding: 14px 44px;
    margin: 0 29px;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


.button {
  animation: fadeIn 1s ease-out forwards;
  animation-delay: 0.3s;
  opacity: 0; /* Start hidden */
}

.dark_text, .light_text {
  animation: fadeIn 1s ease-out forwards;
  animation-delay: 0.6s;
  opacity: 0;
}

@media (max-width: 768px) {
  #gallery #site_wrap {
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "gallery_intro"
      "option_dark"
      "option_light"
      "featured_footer";
    grid-template-rows: 
    min-content
    min-content
    min-content
    min-content
    1fr
  }

  .option_dark, .option_light {
    padding: 1rem;
  }

  .option_dark .button,
  .option_light .button {
    line-height: 1em;
    font-size: 18pt;
    padding: 10px 20px;
    margin: 0 auto; /* center buttons */
  }



  .dark_text, .light_text {
    font-size: 16pt;
    max-width: 90%;
    padding-bottom: 2em;
    padding-top: 1em; 
  }

  .dark .dark_text{
    color: #000000;
  }

  .gallery_intro {
    font-size: 30px;
    line-height: 1.5;
    align-items: center;   /* horizontal centering */
    justify-content: center; /* vertical centering if needed */
    text-align: center;
  }
}






/*------------------------------ light page -------------------------------------------------------------------*/



body#light_option{
  background-image :url(images/light_side.png)
}

#light_option #site_wrap {
  display: grid;
  padding: 120px 2rem 2rem 2rem; /* top, right, bottom, left */
  grid-template-areas:
    "header header"
    "gallery-grid gallery-grid"
    "more more"
    "featured_footer featured_footer";
  grid-template-rows: 
    auto 
    1fr 
    min-content 
    auto;
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

#light_option .header {
  grid-area: header;
  background-color: transparent;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 1em;

}

.nav {
  list-style: none;
  display: flex;
  gap: 2rem;
  margin: 0;
  padding: 0;
}

.nav li a {
  text-decoration: none;
  font-weight: bold;
  color: #333;
  font-size: 20px;
}

.featured_footer {
  grid-area: featured_footer;
}


.gallery-grid {
  grid-area: gallery;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 1rem;
  padding: 2rem;
}


.art-piece {
  background: transparent;
  border-radius: 15px;
  overflow: hidden;
  background-size: contain; /* shows full image */
  background-repeat: no-repeat;
  background-position: center;

}

.art-piece img {
  max-width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 10px;
  max-height: 600px;
}


.more {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 1.5em;
}


.more h1 {
  color: #f3b008;
  -webkit-text-stroke: 0.2px #b75301;
  font-family: Chiller, CommercialScript BT, sans-serif;
  font-size: 50px;
}

@media (max-width: 768px) {
  #light_option #site_wrap {
    padding-top: 120px;
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "gallery-grid"
      "more"
      "featured_footer";
    grid-template-rows: 
    min-content
    1fr
    min-content
    min-content
    
  }

  .gallery-grid {
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1.5rem;
  }

  .art-piece img {
    max-height: 400px;
  }

  #light_option .header {
  align-items: center;
  justify-content: center;
  background-color: transparent;
  display: inline-block;

  }

  #light_option .header .nav {
  list-style: none;
  display: flex;
   align-items: center;
  justify-content: center;
  flex-direction: row;
  padding: 0;
  
  }
  #light_option .header .nav a{
    display: inline-block;

  }


  .nav {
  flex-direction: column;
  align-items: center;
  gap: 1rem;

  }



  .more h1 {
  color: #f3b008;
  -webkit-text-stroke: 0.2px #b75301;
  font-family: Chiller, CommercialScript BT, sans-serif;
  font-size: 30px;
  }

}




/*------------------------------ dark page -------------------------------------------------------------------*/



body#dark_option{
  background-image : url(images/dark_side.png)
}

#dark_option #site_wrap {
  display: grid;
  padding: 120px 2rem 2rem 2rem; /* top, right, bottom, left */
  grid-template-areas:
    "header header"
    "gallery-grid gallery-grid"
    "more more"
    "featured_footer featured_footer";
  grid-template-rows: 
    auto 
    1fr 
    min-content 
    auto;
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

#dark_option .header {
  grid-area: header;
  background-color: transparent;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 1em;

}

.nav {
  list-style: none;
  display: flex;
  gap: 2rem;
  margin: 0;
  padding: 0;
}

.nav li a {
  text-decoration: none;
  font-weight: bold;
  color: #333;
  font-size: 20px;
}

.featured_footer {
  grid-area: featured_footer;
}


.gallery-grid {
  grid-area: gallery;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 1rem;
  padding: 2rem;
}


.art-piece {
  background: transparent;
  border-radius: 15px;
  overflow: hidden;
}

.art-piece img {
  max-width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 8px;
  max-height: 600px;
}


.more {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 1.5em;
}


.more h1 {
  color: #f3b008;
  -webkit-text-stroke: 0.2px #b75301;
  font-family: Chiller, CommercialScript BT, sans-serif;
  font-size: 50px;
}

@media (max-width: 768px) {
  #dark_option #site_wrap {
    padding-top: 120px;
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "gallery-grid"
      "more"
      "featured_footer";
    grid-template-rows: 
    min-content
    1fr
    min-content
    min-content
    
  }

  .gallery-grid {
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1.5rem;
  }

  .art-piece img {
    max-height: 400px;
  }

  #dark_option .header {
  align-items: center;
  justify-content: center;
  background-color: transparent;
  display: inline-block;

  }

  #dark_option .header .nav {
  list-style: none;
  display: flex;
   align-items: center;
  justify-content: center;
  flex-direction: row;
  padding: 0;
  
  }
  #dark_option .header .nav a{
    display: inline-block;

  }


  .nav {
  flex-direction: column;
  align-items: center;
  gap: 1rem;

  }



  .more h1 {
  color: #f3b008;
  -webkit-text-stroke: 0.2px #b75301;
  font-family: Chiller, CommercialScript BT, sans-serif;
  font-size: 30px;
  }

}