html {
  scroll-behavior: smooth;
}

body {
  --font-size: 1.2rem;
  --body-margin: 10rem;
  --menu-height: 8vh;
  --white: #f9f9f9;
  --black: #333;
  
  &.light-mode {
    --background-color: #f9f9f9;
    --text-color: #333;
    --text-light: #666;
    
    --accent-color-one-paler: #ffe4e2;
    --accent-color-one-pale: #ffa39a;
    --accent-color-one: #ff6f61;
    --accent-color-one-dark: #e73e2d;
    --accent-color-one-darker: #ba1403;
    --accent-color-two-pale: #ffdbb6;
    --accent-color-two: #ffa500;
    --accent-color-two-dark: #e68600;
    --accent-color-dark: #1C0D28;
    --accent-color-light: #FFF8E7;
  }
  
  &.dark-mode {
    --background-color: #333;
    --text-color: #f9f9f9
  }
  
  background-color: var(--background-color);
  margin: 0;
  box-sizing: border-box;
  font-family: Lato, sans-serif;
  font-size: var(--font-size);
  line-height: 1.5;
}

/* Sections */
nav#top-bar{
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 calc(var(--body-margin)/2);
  height: var(--menu-height);
  background-color: var(--background-color);
  
  #mobile-check{
  display: none;  
  }
  
  #mobile-toggle {
    background-color: transparent;
    border: none;
    padding: 1rem;
    font-size: inherit;
    display: none;
  }
  
  #main-menu[style*='display: block']{
      display: flex!important
    }
  
  ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex;
    
    li {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 1rem;
      
      a {
        color: var(--text-color);
        text-decoration: none;
      }
      
      
      &:hover a{
        text-decoration: underline;
      }
    }
  }
}

section {
  padding: calc(var(--menu-height) + 2rem) var(--body-margin);
  min-height: 100vh;
  box-sizing: border-box;
  
  .blog-post & {
    min-height: max-content;
    padding: 0;
    margin: 1rem calc(var(--body-margin)*1.5) 4rem;
  }
  
}

#hero {
  box-sizing: border-box;
  padding-top: 20vh;
  font-size: 1.5rem;
  position: relative;
  padding-left: calc(var(--body-margin)/2);
  
  div:first-child {
    width: 60%;
  }
  
  &:before {
    content:'';
    background-color: var(--accent-color-two);
    width: 170px; /* adjust to control the size */
    display: block;
    position: absolute;
    bottom: 29rem;
    right: 1.9rem;
    aspect-ratio: 1;
    clip-path: polygon(100% 50%,78.98% 57.76%,93.3% 75%,71.21% 71.21%,75% 93.3%,57.76% 78.98%,50% 100%,42.24% 78.98%,25% 93.3%,28.79% 71.21%,6.7% 75%,21.02% 57.76%,0% 50%,21.02% 42.24%,6.7% 25%,28.79% 28.79%,25% 6.7%,42.24% 21.02%,50% 0%,57.76% 21.02%,75% 6.7%,71.21% 28.79%,93.3% 25%,78.98% 42.24%);
  }
  
  &:after{
    content:'';
    background-color: var(--accent-color-one);
    display: block;
    position: absolute;
    right: 3vw;
    bottom: 5vh;
    
    width: 300px; /* adjust to control the size */
  aspect-ratio: 1;
  --g:/20.56% 20.56% radial-gradient(#000 calc(71% - 1px),#0000 71%) no-repeat;
  mask: 100% 50% var(--g),93.301% 75% var(--g),75% 93.301% var(--g),50% 100% var(--g),25% 93.301% var(--g),6.699% 75% var(--g),0% 50% var(--g),6.699% 25% var(--g),25% 6.699% var(--g),50% 0% var(--g),75% 6.699% var(--g),93.301% 25% var(--g),radial-gradient(100% 100%,#000 38.366%,#0000 calc(38.366% + 1px));
  }
}

#corporate-work {
  display: flex;
  gap: 5rem;
  position: relative;
  box-sizing: border-box;
  padding: calc(var(--menu-height) + 2rem) calc(var(--body-margin)/2);
  
  &:before {
    box-sizing: border-box;
    --p: 400px; /* control the shape (can be percentage) */
    z-index: -10;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: var(--menu-height);
    clip-path: polygon(0 var(--p),100% 0,100% 100%,0 100%);
    background: var(--accent-color-one);
    content: '';
  }
  
  div:first-child {
    box-sizing: border-box;
    max-width: 30vw;
    padding: 2rem 2em;
    background-color: var(--background-color);
    border: 2px solid var(--accent-color-one);
    
    h2 {
      margin-bottom: 1rem;
      font-size: calc(var(--font-size)*2);
    }
    
    box-shadow: 3px 3px 21px -2px rgba(62,12,70,0.26);
    -webkit-box-shadow: 3px 3px 21px -2px rgba(62,12,70,0.26);
    -moz-box-shadow: 3px 3px 21px -2px rgba(62,12,70,0.26);
  }
  
  .card-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
  }
}

#web-design {
  
  position: relative;
  padding-top: 10rem;
  
  /* curved line seperator */
  &:before {
    content: '';
    --c: 70px; /* control the curvature (works with percentage) */
    height: 10rem;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    z-index: -10;
  /* you can also update the 60%  */
  mask: radial-gradient(60% var(--c) at bottom,#0000 calc(100% - 2px),#000);
  background: var(--accent-color-one);
  }
  
  h2 {
    text-align: center;
    margin-bottom: 5rem;
    font-size: calc(var(--font-size)*2.5);
  }
  
  .card-grid {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

#philosophy {
  
  h2 {
    font-size: calc(var(--font-size) *2);
    margin-bottom: 3rem;
  }
  
  .card-grid {
    grid-template-columns: 1fr 1fr 1fr;
  }
  
  .card {
    border-radius: 0;
  }
}

.project-title {
  background-color: var(--accent-color-two-pale);
  padding: calc(var(--menu-height) + 2rem) var(--body-margin);
  margin: 2rem 0;
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 1rem;
  
  &.single {
    grid-template-columns: 1fr;
  }
  
  &.peek-up {
    padding: calc(var(--menu-height) + 2rem) calc(var(--body-margin)/2) 0;
    
    .image-box {
      display: flex;
      justify-content: center;
      align-items:flex-end;
      margin-bottom: -3px;
        
        img {
          max-height: 90%;
          max-width: 100%;
      }
    }
  }
  
  .title-area {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  
  h1 {
    text-align: center;
  }
  
  nav {
    margin: 0;
    
    
    ul {
      justify-content: center;
      list-style-type: none;
      position: relative;
      margin: 0;
      padding: 0;
      display: flex;
      flex-wrap: wrap;
      
      li a {
        color: var(--text-color);
        text-decoration: none;
        margin: 0.5rem 1rem;
        
        &:hover {
          text-decoration: underline;
        }
      }
    }
  }
  
}

.full-span {
  background-color: var(--accent-color-one-paler); 
  display:flex;
  flex-direction: column;
  align-items: center;
  
  .blog-post section& {
    margin: 1rem 0 4rem;
    padding: 3rem;
  }
    
  &:has(.impact-callout) {
    background-color: var(--accent-color-one);
      
    h2 {
      text-align: center;
      width: 30vw;
      color: white;
      border: none;
      font-size: 2.5rem;
      margin-bottom: 2rem;
    }
  }
    
  p {
    text-align: center;
    padding-bottom: 1rem;
  }
}

.impact-callout {
  display: flex;
  gap: 2rem;
  justify-content: center;
  flex-wrap: wrap;
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 2rem;
    
  > * {
    width: 230px;
    padding: 2rem;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--accent-color-two-pale);
    border-radius: 5px;
  }
}

.example-images {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  padding: 1rem 0 0.5rem;
  
  img {
    width: 100%;
    justify-self: center;
    align-self: center;
  }
  
}

.left-image {
  display: grid;
  grid-template-columns: min-content 1fr;
  gap: 2rem;
  
  h3 {
    margin-top: 0;
  }
  
  p:first-child {
    margin-top: 0;
  }
  
  .frame-position {
    display: flex;
    justify-content: center;
  }
}

.right-image {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 2rem;
  
  h3 {
    margin-top: 0;
  }
  
  p:first-child {
    margin-top: 0;
  }
  
  li {
    margin-bottom: 1rem;
  }
  
  .frame-position {
    display: flex;
    justify-content: center;
  }
}

.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  
  img {
    width: 100%;
  }
}

footer {
  min-height: 10vh;
  padding: 2rem var(--body-margin);
  background-color: var(--accent-color-two-pale);
}


/* Components */
button, .btn {
  cursor: pointer;
  font-size: 90%;
  padding: .5rem .8rem;
  border-radius: 0.5rem;
  color: var(--accent-color-dark);
  border: 2px solid transparent;
  font-weight: 500;
}

.card-grid {
  display: grid;
  gap: 2rem;
}

.card {
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  border-radius: 0.5rem;
  border: 2px solid transparent;
  
  box-shadow: 3px 3px 21px -2px rgba(62,12,70,0.26);
  -webkit-box-shadow: 3px 3px 21px -2px rgba(62,12,70,0.26);
  -moz-box-shadow: 3px 3px 21px -2px rgba(62,12,70,0.26);
  
  .card-image {
    width: 100%;
    aspect-ratio: 2/1.2;
    object-fit: contain;
    background-color: var(--background-color);
  }
  
  .card-image + * {
    margin-top: 0.5rem;
  }
  
  h3 {
    font-size: var(--font-size);
  }
  
  a& {
    text-decoration: none;
  }
  
  &:hover .fake-link {
    text-decoration: underline;
  }
  
  .blog-post li& {
    border-left: 3px solid var(--accent-color-two);
    padding: .5rem 1.5rem;
    margin-top: 2rem;
    border-radius: 0;
    box-shadow: none;
    
    p:first-child {
      font-weight:700;
      margin-bottom: 0;
    }
    
    p {
      color: var(--text-one);
    }
  }
}

#imageModal {
  padding: 0;
  border-radius: 1rem;
  border: 0;
  background-color: transparent;
  
  img {
    max-height: 90vh;
  }
  
  #text {
    height: 0;
  }
  
  .modalClose {
    position: absolute;
    right: 0.5rem;
    top: 0.5rem;
  }
}

iframe {
  width: 100%;
  aspect-ratio: 16/9;
}

#back-to-top {
  position: fixed;
  float: right;
  top: 90vh;
  right: 1rem;
  z-index: 10;
  background-color: var(--contrast-background);
  padding: 0.5rem;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  text-decoration: none;
  color: var(--text-one);
  opacity: 0.5;
  
  &:hover {
    opacity: 1;
  }
}

/* Text and styles */
h1 {
  margin: 0;
  margin-left: -0.2rem;
  font-size: calc(var(--font-size) * 3);
}

h2 {
  margin: 0;
  font-size: calc(var(--font-size) * 1.5);
}

h3 {
  margin: 0;
  font-size: calc(var(--font-size) * 1.1);
}

p {
  margin: 0;
  margin-bottom: 1rem;
}

.subhead-text {
    color: var(--text-light);
    margin-bottom: 1rem;
  }

/* used for toggling the nav on smaller screens, important is used to override the id level specificity */
.hidden {
  display: none!important;
}

.coral-solid, a.coral-solid {
    background-color: var(--accent-color-one);
    color: var(--accent-color-dark);
    
    &:hover{
      background-color: var(--accent-color-one-dark);
    }
  }
  
  .coral-outline, a.coral-outline {
    background-color: var(--background-color);
    border-color: var(--accent-color-one);
    color: var(--accent-color-dark);
    
    &:hover{
      background-color: var(--accent-color-one-paler);
    }
  }

.coral-shadow, a.coral-shadow {
  background-color: var(--background-color);
  border-left-color: var(--accent-color-one-pale);
  box-shadow: 3px 3px 21px -2px var(--accent-color-one-pale);
  -webkit-box-shadow: 0 0 11px 2px var(--accent-color-one-paler);
  -moz-box-shadow: 3px 3px 21px -2px var(--accent-color-one-pale);
}
  
  .orange-solid, a.orange-solid {
    background-color: var(--accent-color-two);
    color: var(--accent-color-dark);
    
    &:hover{
      background-color: var(--accent-color-two-dark);
    }
  }
  
  .orange-outline, a.orange-outline {
    background-color: var(--background-color);
    border-color: var(--accent-color-two);
    color: var(--accent-color-dark);
    
    &:hover{
      background-color: var(--accent-color-two-pale);
    }
  }
  
  .orange-pale-solid, a.orange-pale-solid {
    background-color: var(--accent-color-two-pale);
    color: var(--accent-color-dark);
    
    &:hover{
      background-color: var(--accent-color-two);
    }
  }
  
  .orange-pale-outline, a.orange-pale-outline {
    background-color: var(--background-color);
    border-color: var(--accent-color-two-pale);
    color: var(--accent-color-dark);
    
    &:hover{
      background-color: var(--accent-color-two);
    }
  }
  
  .dark-solid, a.dark-solid {
    background-color: var(--accent-color-dark);
    color: var(--accent-color-light);
    
    &:hover{
      background-color: var(--accent-color-two-pale);
      color: var(--accent-color-dark);
    }
  }
  
  .dark-outline, a.dark-outline {
    background-color: var(--background-color);
    border-color: var(--accent-color-dark);
    color: var(--accent-color-dark);
    
    &:hover{
      background-color: var(--accent-color-light);
    }
  }


/* the below shape classes need another class added to apply height or width values */
.diamond-fill {
  background: #EDC951;
  mask: radial-gradient(#0000 71%, #000 72%) 10000% 10000%/99.5% 99.5%;

  /* if you will use a different unit than px consider round()
   height: round(__,1px);
   width: round(__,1px);
  */
}

.diamond-outline {
  --b: 10px; /* border thickness */

  background: #EDC951;
  mask: radial-gradient(#0000 71%, #000 72% calc(72% + var(--b)),#0000 calc(73% + var(--b))) 10000% 10000%/99.5% 99.5%;

  /* if you will use a different unit than px consider round()
   height: round(__,1px);
   width: round(__,1px);
  */
}

.flower {
  aspect-ratio: 1;
  --g:/20.56% 20.56% radial-gradient(#000 calc(71% - 1px),#0000 71%) no-repeat;
  mask: 100% 50% var(--g),93.301% 75% var(--g),75% 93.301% var(--g),50% 100% var(--g),25% 93.301% var(--g),6.699% 75% var(--g),0% 50% var(--g),6.699% 25% var(--g),25% 6.699% var(--g),50% 0% var(--g),75% 6.699% var(--g),93.301% 25% var(--g),radial-gradient(100% 100%,#000 38.366%,#0000 calc(38.366% + 1px));
}

.starburst {
  aspect-ratio: 1;
  clip-path: polygon(100% 50%,78.98% 57.76%,93.3% 75%,71.21% 71.21%,75% 93.3%,57.76% 78.98%,50% 100%,42.24% 78.98%,25% 93.3%,28.79% 71.21%,6.7% 75%,21.02% 57.76%,0% 50%,21.02% 42.24%,6.7% 25%,28.79% 28.79%,25% 6.7%,42.24% 21.02%,50% 0%,57.76% 21.02%,75% 6.7%,71.21% 28.79%,93.3% 25%,78.98% 42.24%);
}

.hero-deco-one{
  position: absolute;
  bottom: 60vh;
  right: 27vw;
  
  height: 20vh;
  aspect-ratio: 1.2/2;
  --b: 2px;
}

.hero-deco-two {
  position: absolute;
  bottom: 45vh;
  right: 17vw;
  background-color: var(--accent-color-one-pale);
  
  height: 150px;
  aspect-ratio: 1/2.5;
  
}

.hero-deco-three {
  position: absolute;
  bottom: 8vh;
  right: 25vw;
  background: var(--accent-color-two);
  
  height: 10vh;
  aspect-ratio: 1/2.1;
}

.hero-deco-four {
  position: absolute;
  bottom: 25vh;
  right: 31vw;
  
  height: 12vh;
  
  background-color: var(--accent-color-one-paler);
}

.hero-deco-five {
  position: absolute;
  bottom: 8vh;
  right: 42vw;
  
  height: 10vh;
  background-color: var(--accent-color-two-pale);
}

@media (max-width: 1300px) {
  #corporate-work {
    flex-direction: column;
    
    div:first-child {
      max-width: 100%;
    }
  }
  
  #philosophy .card-grid {
    grid-template-columns: 1fr;
  }
  
  .hero-deco-three {
    right: 30vw;
  }
}

@media (max-width: 1200px) {
  
  section {
    padding: calc(var(--menu-height) + 2rem) calc(var(--body-margin)/2);
    min-height: 100vh;
    box-sizing: border-box;
    
    .blog-post & {
      margin: 1rem var(--body-margin) 4rem;
    }

  }
  
  .project-title {
    grid-template-columns: 1fr;
  }
  
  #hero {
    padding: calc(var(--body-margin)/2);
    padding-top: 20vh;
    div:first-child {
      width: 100%;
    }
    
    &:before {
      bottom: 65vh;
      right: 3vw;
    }
    
    &:after{
      left: -20vh;
      bottom: -7vh;
    }
  }
  
  .hero-deco-one {
    bottom: 74vh;
    right: 33vw;
    height: 8rem;
  }
  
  .hero-deco-two {
    right: 25vw;
    height: 4rem;
    bottom: 60vh;
  }
  
  .hero-deco-three {
    right: 18vw;
    bottom: 15vh;
    height: 2rem;
  }
  
  .hero-deco-four {
    right: 65vw;
    bottom: 13vh;
  }
  
  .hero-deco-five {
    right: 41vw;
    bottom: 5vh;
    height: 8vh;
  }
}

@media (max-width: 900px) {
  nav#top-bar {
    padding: 0 calc(var(--body-margin)/5);
    
    ul li {
      margin-right: 0;
      margin-left: 1rem;
    }
    #mobile-toggle {
      display: block;
      padding-left: 0;
    }
    
    #main-menu {
      position: fixed;
      top: var(--menu-height);
      bottom: 0;
      left: 0;
      right: 0;
      
      background-color: var(--background-color);
      display: none;
      flex-direction: column;
      justify-content: center;
      gap: 2rem;
      font-size: calc(var(--font-size)*2);
      
      li { margin-left: 0;}
      
    }
  }
  
  .blog-post section {
    margin: 1rem calc(var(--body-margin)/2) 4rem;
  }
  
  #hero {
    &:before {
      bottom: 81vh;
      right: -9vw;
    }
  }
  
  #web-design {
    padding: calc(var(--menu-height) + 2rem) var(--body-margin);
    padding-top: 10rem;
    
    .card-grid {
      grid-template-columns:1fr;
      
      .card-image {
        width: unset;
        max-width: 100%;
        max-height: 15rem;
      }
    }
  }
  
  #philosophy h2 {
    text-align: center;
  }
  
  .project-title {
    padding: calc(var(--menu-height) + 2rem) calc(var(--body-margin)/2);
  }
  
  .right-image, .left-image {
    grid-template-columns: 1fr;
  }
  
  .example-images {
    grid-template-columns: 1fr;
    padding: 3rem 2rem 0.5rem;
  }
  
  #imageModal {
    width: 80vw;
  }
  
  .two-col {
    grid-template-columns: 1fr;
  }
  
  footer {
    text-align: center;
  }
  
  .hero-deco-one {
    right: 16vw;
  }
  
  .hero-deco-two {
    right: 8vw;
    bottom: 65vh;
  }
  
  .hero-deco-three {
    right: 31vw;
  }
  
  .hero-deco-four {
    right: 60vw;
    bottom: 12vh;
  }
  
  .hero-deco-five {
    right: 44vw;
    bottom: 4vh;
  }
}

@media (max-width: 700px) {
  
  section {
    padding: calc(var(--menu-height) + 2rem) calc(var(--body-margin)/3);
    
    .blog-post & {
      margin: 1rem calc(var(--body-margin)/3) 4rem;
    }
  }
  
  #hero {
    padding-top: calc(var(--menu-height) + 2rem);
    
    &:before {
      top: 12vh;
      width: 7rem;
    }
    
    &:after {
      left: -14.5rem;
      bottom: 5vh;
    }
  }
  
  #corporate-work {
    padding: calc(var(--menu-height) + 2rem) calc(var(--body-margin)/3);
    
    .card-grid {
      grid-template-columns: 1fr;
    }
  }
  
  #web-design {
    padding: calc(var(--menu-height) + 2rem) calc(var(--body-margin)/3);
    padding-top: 10rem;
  }
  
  .project-title {
    padding: calc(var(--menu-height) + 2rem) calc(var(--body-margin)/4);
  }
  
  .full-span {
    .blog-post section& {
      padding: 0.5rem;
    }
}
  
  .hero-deco-one {
    height: 8vh;
    right: 11vw;
    top: 10vh;
  }
  
  .hero-deco-two {
    height: 3rem;
    right: 5vw;
    top: 29vh;
  }
  
  .hero-deco-three {
    right: 4vw;
    bottom: 23vh;
  }
  
  .hero-deco-four {
    right: -4vw;
    bottom: 5vh;
  }
  
  .hero-deco-five {
    right: 60vw;
    bottom: -3vh;
  }
}

@media (max-width: 550px) {
  .hero-deco-one {
    right: 19vw;
  }
  
  
}