/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */


/* INDEX PAGE */
*{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.homepage {
  width: 100%;
  min-height: 100%;
  overflow: hidden;
  cursor:url(./Images/paintbrush-cursor.png), default;
  position: relative;
  width: 100%;
  background-image: url(./Images/paint-video1_web_optimized.gif); 
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex; 
  justify-content: space-between;
  flex-direction: column;
}


.homepage-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  line-height: 1;
  gap:0.5rem; 
}

.Logo {
  margin-left: auto;
  margin-right: auto;
  width: 20%;
  height: auto;
  object-fit: contain;
}
.Logo img {
  display: block;
  width: 100%;
  height: auto;
}
@media screen and (max-width: 800px) {
  .Logo{
   width: 30%;
  height: auto;}}

.header{
  font-family: "subway-new-york-sc";
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center; 
  flex-wrap: wrap; 
  color: #913e37;
  font-size: 6em;
  letter-spacing: 0.1em;
  margin-top: -10px;
  margin-left: 5vw;
  margin-right: 5vw;
}
@media screen and (max-width: 1200px) {
  .header{
    font-size: 4em;
    margin-left: 15vw;
    margin-right: 15vw;
    line-height: 1;}}
  @media screen and (max-width: 500px) {
  .header{
    font-size: 3em;
    margin-left: 15vw;
    margin-right: 15vw;
    line-height: 1;}}
.start-subtitle-black{
  font-family: "walnut";
  display: flex;
  justify-content: center;
  text-align: center;
  color: black; 
  font-size: 2rem; 
  font-weight: 200;
 margin-left: 10vw;
  margin-right: 10vw;} 


.blogroll-subtitle{
  font-family: "walnut";
  display: flex;
  justify-content: center;
  text-align: center;
  color: black; 
  font-size: 1.3rem; 
  font-weight: 200;
 margin-left: 10vw;
  margin-right: 10vw;} 


.hint {
  font-family: "walnut";
  color: #c95b2f;
  font-size: 1.5em;
  font-weight: 200;
  text-align: center;
  margin-left: 2rem;
 margin-right: 2rem;
}

/* INDEX JAVASCRIPT PAINT REVEAL */
.gallery-links{
    display:flex;
    justify-content: center;
    gap: 2em; 
    width:100%;
    height:auto;
    padding: 1rem;}

 .paint-container {
  position: relative;
  display: block;
  align-self: start;
  justify-self: start;
  height: fit-content;

  line-height: 0;
  user-select: none;
  -webkit-user-select: none;
  overflow: hidden;} 


.paint-canvas {
  position: absolute; 
  inset: 0;
  display: block; 
  z-index: 2; 
  width: 100%;
  height: 100%;
  touch-action: none;
  transition: opacity 0.5s ease;
  cursor:url(./Images/paintbrush-cursor.png), default;} 


.paint-container img{
  display: block;
  width: 100%;
  height: auto;
}

.paint-container-link1 { 
  width:90%; 
  height: auto; 
}

.paint-container-link2 { 
  width:75%; 
  height: auto; 
}

.paint-container-link3 { 
  width:110%; 
  height: auto; 
}

@media screen and (max-width: 1200px) {
.gallery-links{
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;}
.paint-container {
    align-self: center;
    justify-self: auto;

    width: 90%;
    max-width: 400px;
    height: fit-content;}} 


  /* UNLOCK */
.unlock-message {
  position: absolute;
  left: 50%;
  bottom: 1rem;
  z-index: 3;

  transform: translateX(-50%);

  padding: 0.5rem 0.8rem;
  border-radius: 999px;

  background: rgba(255, 255, 255, 0.9);
  color: #913e37;

  font-family: "sofia-pro";
  font-size: 0.85rem;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;

  opacity: 0;
  pointer-events: none;

}

.paint-container.is-unlocked .unlock-message {
  opacity: 1;
  visibility: visible; 
}

.paint-container.is-unlocked {
  cursor: pointer;
}

.paint-container.is-unlocked .paint-canvas {
  pointer-events: none;
}
/* PAINTLINK JAVASCRIPT END */

/* FOOTER styling */
.wordmark{
 width:80px;
 height: auto;
}
.index-nav-bar{ 
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  margin-left: 8vw;
  margin-right: 8vw;  
}
@media screen and (max-width: 500px) {
  .index-nav-bar{
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 0.5em;}     
  }

.copyright{
  font-family: "sofia-pro"; 
  text-align: center;
  font-size: 0.8rem;
}

/* PAINTING GALLERY */
.painting-gallery-body{
  margin: 0;
  padding: 0;
  cursor: url("./Images/paintbrush-cursor.png"), auto;
}

.start-subtitle-orange{
  font-family: "walnut";
  display: flex;
  justify-content: center;
  text-align: center;
  color: #c95b2f;
  font-size: 2rem; 
  font-weight: 200; 
  margin-left: 15vw;
  margin-right: 15vw;} 


/* painting gallery JAVASCRIPT PAINT REVEAL */

.painting-gallery{
    display:grid;

    grid-template-columns:repeat(12,1fr);
    grid-template-rows:repeat(7,1fr);

    width:100%;
    height:auto;
}

 .paint-container {
  position: relative;
  display: block;
    align-self: start;
  justify-self: start;
  height: fit-content;

  line-height: 0;
  user-select: none;
  -webkit-user-select: none;
  overflow: hidden;} 



.paint-canvas {
  position: absolute; 
  inset: 0;
  display: block; 
  z-index: 2; 
  width: 100%;
  height: 100%;
  touch-action: none;
  transition: opacity 0.5s ease;
cursor: url("./Images/paintbrush-cursor.png"), auto;} 


.paint-container img{
  display: block;
  width: 100%;
  height: auto;
}

.paint-container-gallery1{
    grid-column:2/5;
    grid-row:1/5;
    width:85%;
    height:auto;
}

.paint-container-gallery2{
    grid-column:5/8;
    grid-row:3/8;
    width:90%;
    height:auto;
}

.paint-container-gallery3{
   grid-column:8/11;
    grid-row:1/5;
      width:95%;
    height:auto;
}

.paint-container-gallery4{
    grid-column:8/10;
    grid-row:5/8;
      width:100%;
    height:auto;
}

.paint-container-gallery5{
    grid-column:11/13;
    grid-row:3/8;
    width:85%;
    max-width:85%;
    height:auto;
}

@media screen and (max-width: 1200px) {
  .painting-gallery{
   display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  
   width: 100%;
    height: auto;
    min-height: 0;
    gap: 2rem;
    padding: 0 1rem 2rem;}
.paint-container {
    align-self: center;
    justify-self: auto;

    width: 90%;
    max-width: 400px;
    height: fit-content;
  }} 


/* NAV BAR!!!!!*/
.nav-bar{ 
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  margin-left: 8vw;
  margin-right: 8vw; 
}
.nav-bar a img{
  width: 150px; 
  height: auto;
}
@media screen and (max-width: 800px) {
  .nav-bar{
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 10px} 
  .wordmark{
    order: 999;}     
.wordmark{ 
  display: flex;
  justify-content: flex-start;
  align-items: center;
}}

/* ATHENA PAGE START */
 .athena-page {
  height: 100%; 
  margin: 0; 
  padding: 0; 
    background-image: url(./Images/About-background-paint.png);
    background-size: contain;
    background-position: top center;
    background-repeat: repeat;

    cursor:url(./Images/paintbrush-cursor.png), default;
 }
 @media screen and (max-width: 800px) {
  .athena-page{
    background-image: url("./Images/About-background-paint-mobile.png");
    background-size: contain;
    background-repeat: repeat;
    background-position: top center;
  }
}

.athena-image{
  max-width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 1rem auto;}
.athena-image img {
  width:300px; height: auto;
  display: block; 
}
@media screen and (max-width: 500px) {
  .athena-image img{
    width:90%; 
    max-width: 100%;
    height: auto; 
    margin: auto;}}


 /* BLURB STYLING */
.blurb{
  font-family: "sofia-pro"; 
  font-size: 1.3em;
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
  padding-top: 2vh; 
  gap: 1.5rem;
  margin-left: 15vw;
  margin-right: 15vw; 
  text-align: left;}
  @media screen and (max-width: 500px) {
  .blurb{
  margin-left: 12vw;
  margin-right: 12vw;
}}



/* VIDEO styling */
.video-caption{
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
  margin-left: 15vw;
  margin-right: 15vw; 
  text-align: center; 
}
.videocaptitle{
  font-family: "walnut";
  text-align: center; 
  color: black; 
  font-size: 1.8rem;
  font-weight: 200;
}
.videocapsub{
    text-align: center;
    font-family: "sofia-pro";
    color: black; 
  font-size: 1.2em; 
} 
.videocapblurb{
   font-family: "sofia-pro";
    text-align: center;
    color: black;
  font-size: 1em;
  margin-left: 5vw;
  margin-right: 5vw;}

.video {
  width: min(70%, 850px);
  aspect-ratio: 16 / 9;
  margin: 1rem auto 0.05rem;
}
.video iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
@media screen and (max-width: 800px) {
  .video {
    width: 90%;
    margin: 2rem auto;
  }}

/* LA BELLE DAME SANS start here */
.labelledamesans-page {
  height: 100%; 
  margin: 0; 
  padding: 0; 
    background-image: url(./Images/green-warm-background-paint.png);
    background-size: contain;
    background-position: top center;
    background-repeat: repeat;

    cursor:url(./Images/paintbrush-cursor.png), default;
 }
 @media screen and (max-width: 800px) {
  .labelledamesans-page{
    background-image: url("Images/green-warm-background-paint-mobile.png");
    background-size: contain;
    background-repeat: repeat;
    background-position: top center;
  }
}

.labelle-image{
  max-width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 1rem auto;}
.labelle-image img {
  width:600px; height: auto;;
  display: block; 
}
@media screen and (max-width: 600px) {
  .labelle-image img{
    width:90%; 
    max-width: 100%;
    height: auto; 
    display: block; 
  }}

.readmore{
  font-family: "walnut";
  display: flex;
  justify-content: center;
  text-align: center;
  color: #c95b2f;; 
  font-size: 3rem; 
  font-weight: 200; 
  margin-left: 15vw;
  margin-right: 15vw;
  padding-top: 1rem; 
} 
@media screen and (max-width: 1200px) {
.readmore{
    font-size: 3em;
    margin-left: 15vw;
    margin-right: 15vw;
    line-height: 1;
  }}


.link{
  font-family: "sofia-pro";
  display: flex;
  justify-content: center;
  text-align: center;
  color: black; 
  font-size: 1.8em; 
  margin-top: 1rem;
}
.link:hover {
  color: #b51d10;  
  transform: scale(1.05);
}

.subheader{
  font-family: "subway-new-york-sc";
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center; 
  flex-wrap: wrap; 
  padding-top: 0.3em; 
  color: #913e37;
  font-size: 4em;
  letter-spacing: 0.1em;
  font-weight: 300;
   margin-left: 10vw;
  margin-right: 10vw;
}
@media screen and (max-width: 1200px) {
.subheader{
    font-size: 3.5em;
    line-height: 1;
  }}
 @media screen and (max-width: 500px) {
  .subheader{
    font-size: 2.5em;
    margin-left: 5vw;
    margin-right: 5vw;
    line-height: 1;
  }}

/* CAROUSEL HERE? */
.processphoto1{
  max-width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.processphoto1 img {
  width:400px; height: auto; display: block; 
}
@media screen and (max-width: 500px) {
  .processphoto1 img{
    width:80%; 
    max-width: 100%;
    height: auto; 
    margin: auto;
  }}

  /* THE KISS starts here */
  .thekiss-page {
  height: 100%; 
  margin: 0; 
  padding: 0; 
    background-image: url(./Images/yellowgreenblue-background-paint.png);
    background-size: contain;
    background-position: top center;
    background-repeat: repeat;

    cursor:url(./Images/paintbrush-cursor.png), default;
 }
 @media screen and (max-width: 800px) {
  .thekiss-page{
    background-image: url("Images/yellowgreenblue-background-paint-mobile.png");
    background-size: contain;
    background-repeat: repeat;
    background-position: top center;
  }
}

.thekiss-image{
  max-width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 1rem auto;}
.thekiss-image img {
  width:500px; height: auto;
  display: block; 
}
@media screen and (max-width: 500px) {
  .thekiss-image img{
    width:90%; 
    max-width: 100%;
    height: auto; 
    margin: auto;
  }}

.processphoto1{
  max-width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 1vh;
}
.processphoto1 img {
  width:400px; height: auto; display: block; 
}
@media screen and (max-width: 500px) {
  .processphoto1 img{
    width:90%; 
    max-width: 100%;
    height: auto; 
    margin: auto;
  }}

/* THE LAST DANCE start */
.thelastdance-page {
  height: 100%; 
  margin: 0; 
  padding: 0; 
    background-image: url(./Images/About-background-paint.png);
    background-size: contain;
    background-position: top center;
    background-repeat: repeat;

    cursor:url(./Images/paintbrush-cursor.png), default;}
 @media screen and (max-width: 800px) {
  .thelastdance-page{
    background-image: url("./Images/About-background-paint-mobile.png");
    background-size: contain;
    background-repeat: repeat;
    background-position: top center;
  }}


.michj{
  max-width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 1rem auto;}
.michj img {
  width:500px; height: auto;;
  display: block; 
}
@media screen and (max-width: 500px) {
  .michj img{
    width:90%; 
    max-width: 100%;
    height: auto; 
    margin: auto;
  }}
 
/* Michjprogress styling */
.michjprogress{
  max-width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;}
.michjprogress img {
  width:500px; height: auto;
  display: block;}
@media screen and (max-width: 500px) {
  .michjprogress img{
    width:90%; 
    max-width: 100%;
    height: auto; 
    margin: auto;
  }}

.kobecurrent{
  max-width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;}
.kobecurrent img {
  width:500px; height: auto;
  display: block;}
@media screen and (max-width: 500px) {
  .kobecurrent img{
    width:90%; 
    max-width: 100%;
    height: auto; 
    margin: auto;}}

/* PORTRAIT VIDEO */
.video {
  width: min(70%);
  aspect-ratio: 16 / 9;
  margin: 1rem auto 0.5rem;}
.portrait-video {
  width: min(35%, 700px);
  aspect-ratio: 9 / 16;}

@media screen and (max-width: 800px) {
  .video {
    width: 90%;}
  .portrait-video {
    width: 90%;}}

/* REMEMBER CULTURE NEVER DIES starts here */
.mementomori-page {
  height: 100%; 
  margin: 0; 
  padding: 0; 
    background-image: url(./Images/blue-background-paint.png);
    background-size: contain;
    background-position: top center;
    background-repeat: repeat;

    cursor:url(./Images/paintbrush-cursor.png), default;}
 @media screen and (max-width: 800px) {
  .mementomori-page{
    background-image: url("./Images/blue-background-paint-mobile.png");
    background-size: contain;
    background-repeat: repeat;
    background-position: top center;}}

.skull-image{
  max-width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 1rem auto}
.skull-image img {
  width:400px; height: auto; display: block; 
}
@media screen and (max-width: 500px) {
  .skull-image img{
    width:90%; 
    max-width: 100%;
    height: auto; 
    margin: auto;}}


.wip1{
  max-width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;}
.wip1 img {
  width:400px; height: auto; display: block; 
}
@media screen and (max-width: 500px) {
  .wip1 img{
    width:90%; 
    max-width: 100%;
    height: auto; 
    margin: auto;}}

.bts3{
  max-width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;}
.bts3 img {
  width: 400px; height: auto; display: block; }
@media screen and (max-width: 500px) {
  .bts3 img{
    width:90%; 
    max-width: 100%;
    height: auto; 
    margin: auto;}}

    /* ARCHITECTURE WORKS STARTS HERE */
    /* BETA styling */
.studiobeta-page {
  height: 100%; 
  margin: 0; 
  padding: 0; 
    background-image: url(./Images/greenblue-background-paint.png);
    background-size: contain;
    background-position: top center;
    background-repeat: repeat;

    cursor:url(./Images/paintbrush-cursor.png), default;}
 @media screen and (max-width: 800px) {
  .studiobeta-page{
    background-image: url("./Images/greenblue-background-paint-mobile.png");
    background-size: contain;
    background-repeat: repeat;
    background-position: top center;}}


.studioheader{
  font-family: "subway-new-york-sc";
  text-align: center;
  flex-wrap: wrap; 
  color: #913e37;
  font-size: 4em;
  font-weight: 300;
  letter-spacing: 0.1em;}  
  @media screen and (max-width: 1200px) {
  .studioheader{
    font-size: 3em;
    margin-left: 15vw;
    margin-right: 15vw;
    line-height: 1;
    margin-bottom: 1vh;}}
  @media screen and (max-width: 500px) {
  .studioheader{
    font-size: 2.5em;
    margin-left: 15vw;
    margin-right: 15vw;
    line-height: 1;
    margin-bottom: 1.5vh;}}


    .address{
  font-family: "walnut";
  display: flex;
  justify-content: center;
  text-align: center;
  color: #41505b; 
  font-size: 1.8rem; 
  font-weight: 200;
  margin-left: 15vw;
    margin-right: 15vw;}
 @media screen and (max-width: 500px) {
  .address{
    font-size: 1.5rem;
    margin-left: 5vw;
    margin-right: 5vw;
    line-height: 1;
    padding: 0.2rem;}}


.betahero-image{
  max-width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 1rem auto;}
.betahero-image img {
  width: 800px; height: auto; display: block;}
@media screen and (max-width: 500px) {
  .betahero-image img{
    width: 100%; 
    max-width: 100%;
    height: auto; 
    margin: auto;}}

.page1{
  max-width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;}
.page1 img {
  width:600px; height: auto; display: block;}
@media screen and (max-width: 500px) {
  .page1 img{
    width:90%; 
    max-width: 100%;
    height: auto; 
    margin: auto;}}

/* DESIGN JOURNAL STYLING */
.designjournal-button{
     display: flex;
  justify-content: center;
  align-items: center;
  padding: 1em;}

/* ALPHA styling */
 .alpha-page {
  height: 100%; 
  margin: 0; 
  padding: 0; 
    background-image: url(./Images/green-warm-background-paint.png);
    background-size: contain;
    background-position: top center;
    background-repeat: repeat;

    cursor:url(./Images/paintbrush-cursor.png), default;}
 @media screen and (max-width: 800px) {
  .alpha-page{
    background-image: url("./Images/green-warm-background-paint-mobile.png");
    background-size: contain;
    background-repeat: repeat;
    background-position: top center;}}

.alphahero-image{
  max-width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0.1rem auto;}
.alphahero-image img {
  width: 750px; height: auto; display: block; }
@media screen and (max-width: 500px) {
  .alphahero-image img{
    width: 100%; 
    max-width: 100%;
    height: auto; 
    margin: auto;}}

/* A3 CAROUSEL styling */

/* A12 CAROUSEL styling */

/* WIP CAROUSEL styling */

/* FODR styling starts here */
 .fodr-page {
  height: 100%; 
  margin: 0; 
  padding: 0; 
    background-image: url(./Images/About-background-paint.png);
    background-size: contain;
    background-position: top center;
    background-repeat: repeat;

    cursor:url(./Images/paintbrush-cursor.png), default;}
 @media screen and (max-width: 800px) {
  .fodr-page{
    background-image: url("./Images/About-background-paint-mobile.png");
    background-size: contain;
    background-repeat: repeat;
    background-position: top center;}}

.fodrhero-image{
  max-width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0.1rem auto;}
.fodrhero-image img {
  width: 550px; height: auto; display: block; }
@media screen and (max-width: 500px) {
  .fodrhero-image img{
    width: 100%; 
    max-width: 100%;
    height: auto; 
    margin: auto;}}

/* DPT styling starts here */
.dpt-page {
  height: 100%; 
  margin: 0; 
  padding: 0; 
    background-image: url(./Images/green-warm-background-paint.png);
    background-size: contain;
    background-position: top center;
    background-repeat: repeat;

    cursor:url(./Images/paintbrush-cursor.png), default;}
 @media screen and (max-width: 500px) {
  .dpt-page{
    background-image: url("./Images/green-warm-background-paint-mobile.png");
    background-size: contain;
    background-repeat: repeat;
    background-position: top center;}}

.dpthero-image{
  max-width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0.1rem auto;}
.dpthero-image img {
  width: 500px; height: auto; display: block; }
@media screen and (max-width: 500px) {
  .dpthero-image img{
    width: 90%; 
    height: auto; 
    margin: auto;}}

/* ABOUT page starts here */
 .about-page{
  height: 100%; 
  width: 100%;
  margin: 0; 
  padding: 0; 
    background-image: url(./Images/About-background-paint.png);
    background-size: contain;
    background-position: top center;
    background-repeat: repeat;

    cursor:url(./Images/paintbrush-cursor.png), default;}
 @media screen and (max-width: 800px) {
  .about-page{
    background-image: url("./Images/About-background-paint-mobile.png");
    background-size: contain;
    background-repeat: repeat;
    background-position: top center;}}

.paint-container-about{
  width: 50%;
  height: auto; 
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 1rem auto;}
@media screen and (max-width: 1200px) {
  .paint-container-about{
    width:90%; 
    height: auto; ;}}

/* BUSINESS CARD STYLING */
@keyframes appear { 
  from {
    opacity: 0; 
    scale: 0.5; }
  to {
    opacity: 1; 
    scale: 1; 
  }}

.business-card {
  position: relative;
  width: 50%;
  margin: 1rem auto;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: rotate(5deg);
  animation: appear linear;
  animation-timeline: view();
  animation-range: entry 0% cover 40%;}
    @media screen and (max-width: 1200px) {
  .business-card{
    width:70%; 
    height: auto;}}
  @media screen and (max-width: 600px) {
  .business-card{
    width:100%; 
    height: auto;}}

.business-card img {
  display: block;
  width: 80%;
  height: auto;}


.business-header {
  position: absolute;
  top: 10%;          
  left: 50%;         
  transform: translate(-50%, -50%);
   font-family: "walnut";
  text-align: center;
  color: #41505b; 
  font-size: 1.8rem; 
  font-weight: 200;}
 @media screen and (max-width: 500px) {
  .business-header{
   font-size: 1.2rem;}}

.message{
  position: absolute;
  top: 18%;          
  left: 50%;         
  transform: translate(-50%, -50%);
  font-family: "sofia-pro";
  text-align: center;
  color: black; 
  font-size: 1em;}
   @media screen and (max-width: 500px) {
  .message{
   font-size: 0.8em;
    top: 22%;}}

.invitation{ position: absolute;
  text-align: center;
  top: 50%;          
  left: 50%;         
  transform: translate(-50%, -50%);
  font-family: "subway-new-york-sc";
  text-align: center;
  color: #913e37;
  font-size: 3.2em;
  font-weight: 300;
  letter-spacing: 0.1em;}
    @media screen and (max-width: 500px) {
  .invitation{
   font-size: 2em;
    top: 53%;}}

.email{ position: absolute;
  top: 85%;          
  left: 35%;         
  transform: translate(-50%, -50%);
  font-family: "sofia-pro";
  text-align: center;
  color: black; 
  font-size: 1.4em;}
.email:hover {
  color: #b51d10;}
@media screen and (max-width: 500px) {
  .email{
   font-size: 0.9em;
  left: 32%;}}

.cv{ position: absolute;
  top: 85%;          
  left: 65%;         
  transform: translate(-50%, -50%);
  font-family: "sofia-pro";
  text-align: center;
  color: black; 
  font-size: 1.4em;}
.cv:hover {
  color: #b51d10;}
  @media screen and (max-width: 500px) {
  .cv{
   font-size: 0.9em;
    left: 67%}}

/* Carousel styling start */
.angie-photo{ 
  display: flex;
  justify-content: center;
  transform: rotate(deg); 
  padding: 5px; }
.angie-photo img{
 width:auto; height: 300px;}
@media screen and (max-width: 800px) {
  .angie-photo img{
    width:80%; max-width:100%; height:auto; 
    margin: auto;}}

/* DRAWING GALLERY starts here */
 .drawings-body {
  height: 100%; 
  margin: 0; 
  padding: 0; 
    cursor:url(./Images/paintbrush-cursor.png), default;}

.drawing-gallery{
  padding:2rem; 
    display:grid;
    grid-template-columns:repeat(12,1fr);
    grid-template-rows:repeat(13,1fr);

    width:100%;
    height:auto;}



.paint-canvas {
  position: absolute; 
  inset: 0;
  display: block; 
  z-index: 2; 
  width: 100%;
  height: 100%;
  touch-action: none;
  transition: opacity 0.5s ease;
cursor: url("./Images/pen-cursor_20px.jpg"), auto;} 


.drawing-blurb{
  font-family: "sofia-pro"; 
  font-size: 1.5em;
  grid-column:2/7;
  grid-row:1/7;
  justify-self: center;
  padding: 1rem;}

.paint-container-drawing1{
    grid-column:1/7;
    grid-row:2/5;
    width:100%;
    height:auto;
    transform: rotate(3deg);
  box-shadow: 5px 5px 10px rgba(0,0,0,0.5);}
.drawing-caption1{
  grid-column:1/7;
  grid-row:3/4;
  align-self: end;}
.paint-container-drawing1:hover {
   transform: scale(1.3);
  z-index: 2;}

.paint-container-drawing2{
    grid-column:2/7;
    grid-row: 5/7;
    width:80%;
    height:auto;
    transform: rotate(-2deg);
  box-shadow: 5px 5px 10px rgba(0,0,0,0.5);}
.drawing-caption2{
  grid-column:1/7;
  grid-row:7/8;
  align-self: start;
  padding: 1rem;}
.paint-container-drawing2:hover {
   transform: scale(1.3);
  z-index: 2;}

.paint-container-drawing3{
   grid-column:8/13;
    grid-row:1/4;
      width:85%;
    height:auto;
     transform: rotate(-3deg);
    box-shadow: 5px 5px 10px rgba(0,0,0,0.5);}
.drawing-caption3{
  grid-column:8/13;
  grid-row:2/3;
  align-self: center;}
.paint-container-drawing3:hover {
   transform: scale(1.3);
  z-index: 2;}

.paint-container-drawing4{
    grid-column:8/13;
    grid-row:3/8;
      width:90%;
    height:auto;
   transform: rotate(1deg);
  box-shadow: 5px 5px 10px rgba(0,0,0,0.5);}
.drawing-caption4{
  grid-column:7/13;
  grid-row:5/6;
  align-self: start;
  padding: 1rem;}
.paint-container-drawing4:hover {
   transform: scale(1.3);
  z-index: 2;}

.paint-container-drawing5 {
    grid-column:8/13;
    grid-row:6/10;
    width:95%;
    max-width:85%;
    height:auto;
   transform: rotate(2deg);
  box-shadow: 5px 5px 10px rgba(0,0,0,0.5);}
  .drawing-caption5{
   grid-column:7/13;
    grid-row:8/9;
  align-self: start;}
.paint-container-drawing5:hover {
   transform: scale(1.3);
  z-index: 2;}

.paint-container-drawing6 {
    grid-column:3/7;
    grid-row: 8/11;
    width:90%;
    max-width:85%;
    height:auto;
   transform: rotate(-3deg);
  box-shadow: 5px 5px 10px rgba(0,0,0,0.5);}
  .drawing-caption6{
    grid-column:3/7;
    grid-row: 10/11;
  align-self: start;
  padding: 1rem;}
  .paint-container-drawing6:hover {
   transform: scale(1.3);
  z-index: 2;}

  
.paint-container-drawing7 {
    grid-column:9/13;
    grid-row: 9/13;
    width:90%;
    max-width:85%;
    height:auto;
   transform: rotate(6deg);
  box-shadow: 5px 5px 10px rgba(0,0,0,0.5);}
  .drawing-caption7{
    grid-column:8/13;
    grid-row: 11/12;
  align-self: start;}
.paint-container-drawing7:hover {
   transform: scale(1.3);
  z-index: 2;}


.paint-container-drawing8 {
    grid-column:2/7;
    grid-row: 11/13;
    width:90%;
    max-width:85%;
    height:auto;
   transform: rotate(1deg);
  box-shadow: 5px 5px 10px rgba(0,0,0,0.5);}
   .drawing-caption8{
    grid-column:1/7;
    grid-row: 13/14;
  align-self: start;
  padding: 1rem;}
  .paint-container-drawing8:hover {
   transform: scale(1.3);
  z-index: 2;}
  
.paint-container-drawing9 {
    grid-column:7/13;
    grid-row: 12/15;
    width:95%;
    max-width:85%;
    height:auto;
   transform: rotate(-5deg);
  box-shadow: 5px 5px 10px rgba(0,0,0,0.5);}
   .drawing-caption9{
    grid-column:7/13;
    grid-row: 13/14;
  align-self: center;}
  .paint-container-drawing9:hover {
   transform: scale(1.5);
  z-index: 2;}

@media screen and (max-width: 1200px) {
  .drawing-gallery{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
  
   width: 100%;
    height: auto;
    min-height: 0;
    gap: 2rem;
    padding: 1rem 2rem 2rem;}
.paint-container {
    align-self: center;
    justify-self: auto;

    width: 90%;
    max-width: 400px;
    height: fit-content;}} 

/* ARCHITECTURE GALLERY starts here */
.architecture-body {
  height: 100%; 
  margin: 0; 
  padding: 0; 
    cursor:url(./Images/paintbrush-cursor.png), default;}

.architecture-gallery{
    padding: 0 1rem;
    display:grid;
    grid-template-columns:repeat(8 ,auto);
    grid-template-rows:repeat(5, auto);

    width:100%;
    height:auto;}

.paint-canvas {
  position: absolute; 
  inset: 0;
  display: block; 
  z-index: 2; 
  width: 100%;
  height: 100%;
  touch-action: none;
  transition: opacity 0.5s ease;
  cursor:url(./Images/paintbrush-cursor.png), default;}

.project-link{
   font-family: "subway-new-york-sc";
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center; 
  color: black;
  font-size: 3rem;
  letter-spacing: 0.1em;
  font-weight: 300;}
.project-link:hover{
   color: #b51d10;}
.model-caption1 a,
.model-caption2 a,
.model-caption3 a,
.model-caption4 a {
    text-decoration: none;}
@media screen and (max-width: 800px) {
.project-link{
 font-size: 2.2rem;
margin-left: 2vw; 
margin-right: 2vw;}}

.paint-container-model1{
    grid-column:1/5;
    grid-row:1/3;
    width:90%;
    height:auto;
      align-self: center;
    transform: rotate(3deg);}
  .model-caption1{
    grid-column:1/5;
    grid-row: 2/4;
  align-self: center;}
.paint-container-model1:hover {
   transform: scale(1.1);
  z-index: 2;}

.paint-container-model2{
    grid-column:6/9;
    grid-row:1/3;
    width:70%;
    height:auto;
    align-self: center;
    transform: rotate(-2deg);}
 .model-caption2{
    grid-column:6/9;
    grid-row: 2/4;
  align-self: center;}
.paint-container-model2:hover {
   transform: scale(1.1);
   z-index: 2;}

.paint-container-model3{
   grid-column:1/5;
    grid-row:3/5;
      width:85%;
    height:auto;
     justify-self: center;
    align-self: center;
     transform: rotate(-3deg);}
 .model-caption3{
    grid-column:2/4;
    grid-row: 4/6;
  align-self: end;}
.paint-container-model3:hover {
   transform: scale(1.1);
  z-index: 2;}

.paint-container-model4{
    grid-column: 6 / 9;
  grid-row: 3/ 5;
  width: 80%;
  height: auto;
  align-self: center;
   transform: rotate(1deg);
  margin-top: 3rem;}
.model-caption4{
    grid-column:6/8;
    grid-row: 5/6;
  align-self: start;}
.paint-container-model4:hover {
   transform: scale(1.1);
  z-index: 2;}

@media screen and (max-width: 1200px) {
  .architecture-gallery{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
  
   width: 100%;
    height: auto;
    min-height: 0;
    gap: 2rem;
    padding: 1rem 2rem 2rem;}
.paint-container {
    align-self: center;
    justify-self: auto;

    width: 100%;
    height: fit-content;}
.paint-container-model4{
  margin-top: auto;}
.paint-container-model1 img{
   width: 100%;}} 
    
/* LIGHTBOX AND SCROLL STACKED CARDS styling */
.stacking-frame {
  position: relative;
  width: min(95%);
  height: 75vh;
  margin: 2rem auto;

  overflow: hidden;
}
@media screen and (max-width: 800px) {
  .stacking-frame{
    height: 55vh;
    margin-top:0.5rem;
  }}

.stacking-scroll {
  width: 100%;
  height: 100%;

  overflow-y: auto;
  overflow-x: hidden;

  scroll-behavior: smooth;
  scroll-padding-top: 1rem;
}
  

.stack-card {
  position: sticky;
  top: 0.5rem;

  display: flex;
  justify-content: center;
  flex-direction: row;
  align-items: center;

  width: 100%;
  min-height: 65vh;

  padding: 2rem 4rem;
  scroll-margin-top: 1rem;
}
@media screen and (max-width: 800px) {
  .stack-card{
    padding: 1rem 1rem;
    min-height: 50vh;
  }}


.stack-card:last-of-type {
  margin-bottom: 9vh;
}

.anchor-target {
    display: block;
    height: 0;   
}

.postcard-each {
  width: min(90%);
  height: auto;
  max-height: calc(75vh - 3rem);
}


.postcard-each a {
  display: block;
  width: 100%;
  cursor: zoom-in;
}

.postcard-each img {
  display: block;
  width: 100%;
  max-height: calc(75vh - 6rem);
  height: auto;
  object-fit: contain;
  filter: drop-shadow(1px 2px 6px rgba(0, 0, 0, 0.2));}



.rotate-a {
        transform: rotate(-6deg);
        }
        
.rotate-b {
        transform: rotate(3deg) translate(-10%, 7%);
      }
        
 .rotate-c {
        transform: rotate(-4deg) translateX(10%);
      }
  @media screen and (max-width: 800px) {
  .rotate-c {
    transform: rotate(-4deg) translateX(2%);}}
      
      
.rotate-d {
        transform: rotate(2deg);}


.stack-nav {
  position: absolute;
  left: 1rem;
  right: 1rem; 
  bottom: 1rem;
  z-index: 100;

  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  font-family: "sofia-pro";
  font-size: 1.25rem;
  line-height: 2vh;
}
.stack-nav a {
  color: black;
  text-decoration: none;
}
.stack-nav a:hover {
  color: #b51d10;}
@media screen and (max-width: 1200px) {
  .stack-nav{
    font-size: 2rem;
    margin-left: 13vw;
  margin-right: 13vw;}} 
@media screen and (max-width: 800px) {
  .stack-nav{
    font-size: 1.5rem;
    margin-left: 13vw;
  margin-right: 13vw;
  }}
  @media screen and (max-width: 500px) {
  .stack-nav{
    font-size: 1.3rem;
    margin-left: 9vw;
  margin-right: 9vw;
  line-height: 1.2vh;
  }}


.lightboxOverlay {
  z-index: 100000 !important;
}

.lightbox {
  z-index: 100001 !important;
}

.lb-image {
  display: block;
  width: auto;
  height: auto;
  max-height: 50vh;
}


.lb-data .lb-caption {
  font-family: "walnut";
  color: rgb(219, 217, 217);
  font-size: 1rem !important;
  font-weight: 200;
  letter-spacing: 2px;
  line-height: 1.1;
}

.lb-data .lb-caption .lb-sub {
  display: block;
  font-family: "sofia-pro";
    color: rgb(150, 149, 149);
    font-size: 0.75em !important;
  line-height: 1.2;
  font-weight: 100;
  letter-spacing: 1px;
}

@media screen and (max-width: 1200px) {
  .lb-data .lb-caption {
    font-size: 1.25rem !important;}

  .lb-data .lb-caption .lb-sub {
    margin-top: 1rem;
    font-size: 0.85rem;
    line-height: 1.3;}}