@font-face {
  font-family: 'DenimMed';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/Denim-Medium.woff') format('woff');
}

@font-face {
  font-family: 'Loretta';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/Loretta-Regular.woff') format('woff');
}

@font-face {
  font-family: 'VCTRMono';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/VCTRMonov0.12-Regular.woff') format('woff');
}

body{
    background-color: #FFCE70;
}
  
.parent {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(5, auto);
  grid-column-gap: 020px;
  grid-row-gap: 0px;
  }
  
  .div1 { grid-area: 1 / 1 / 4 / 4; }
  .div2 { grid-area: 1 / 4 / 2 / 6; }
  .div3 { grid-area: 1 / 6 / 2 / 7; }
  .div4 { grid-area: 2 / 4 / 3 / 6; }
  .div5 { grid-area: 3 / 5 / 4 / 7; }
  .div6 { grid-area: 4 / 2 / 5 / 3; }
  .div7 { grid-area: 4 / 3 / 5 / 6; }
  .div8 { grid-area: 5 / 2 / 6 / 4; }
  .div9 { grid-area: 5 / 4 / 6 / 6; }
  .div10 { grid-area: 6 / 2 / 7 / 3; }
  .div11 { grid-area: 6 / 3 / 7 / 6; }
  .div12 { grid-area: 7 / 1 / 8 / 7; }
  .div13 { grid-area: 8 / 4 / 9 / 5; }
  .div14 { grid-area: 8 / 5 / 9 / 7; }
  .div15 { grid-area: 9 / 1 / 10 / 7; }
  .div16 { grid-area: 10 / 4 / 11 / 5; }
  .div17 { grid-area: 11 / 2 / 12 / 3; }
  .div18 { grid-area: 11 / 3 / 12 / 4; }
  .div19 { grid-area: 11 / 4 / 12 / 5; }
  .div20 { grid-area: 11 / 5 / 12 / 6; }


.btp{
  margin: 200px 0;
}  

.div6{margin-top: 231px}

.dark{
  background-color: #111;
  color: #FFCE70
}

.intro{
  font-family: "Loretta", serif;
  font-size: 32px;
  font-weight: 300;
  line-height: 42px;
  letter-spacing: -0.02em;
  text-align: left;
  -webkit-font-smoothing: antialiased;
}

h1{
  font-family: "DenimMed", serif;
  font-size: 66px;
  line-height: 73px;
  letter-spacing: 0em;
  text-align: left;
  color: #111;  
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  text-transform: uppercase;
}

h3{
  font-family: "DenimMed", serif;
  font-size: 66px;
  line-height: 73px;
  letter-spacing: 0em;
  text-align: left;
  color: #FFCE70;  
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  text-transform: uppercase;
  /* background-blend-mode: multiply; */
}

.pt{
  padding-top: 500px;
}

.mono{
    font-family: "VCTRMono", 'Courier New', Courier, monospace;
    font-size: 14px;
    font-weight: 600;
    line-height: 15px;
    letter-spacing: 0em;
    text-align: center;  
    padding-top: 20px;  
    color: #111;
    display: block;
    font-feature-settings: 'ordn' on;
}

.mono-text{
  font-family: "VCTRMono", 'Courier New', Courier, monospace;
  font-size: 14px;
  font-weight: 600;
  line-height: 15px;
  letter-spacing: 0em;
  color: #111;
  font-feature-settings: 'ordn' on;  
}

.dark-mono{
  font-family: "VCTRMono", 'Courier New', Courier, monospace;
  font-size: 14px;
  font-weight: 600;
  line-height: 15px;
  letter-spacing: 0em;
  color: #FFCE70;
  font-feature-settings: 'ordn' on;
  -webkit-font-smoothing: antialiased;
}

.ralign{
    text-align: right;
    padding-right: 20px;
}

.divider{
  margin: 20px 0;
  width: 300px;
  display: block;
  height: 1px;
  background-color: #111;
}

.dark-divider{
  margin: 20px 0;
  width: 100%;
  display: block;
  height: 1px;
  background-color: #FFCE70;
}

ul{
  list-style: none;
  padding: 0
}

.text2{
  margin-top: 100px;
}

.orange-box{
width: 100%;
height: 1117px;
background-image: url("../assets/me-in-korea.png");
  background-size: cover;
  background-color: #FFCE70;
  background-blend-mode: multiply;
  background-position: 80% 0%;
border-radius: none;
  &:before {
background-color: #FFCE70;
  }
&:after {
    background-color:#FFCE70;
  }
}

.lg-reveal--layer:after, .lg-reveal--layer-to-top:after, .lg-reveal--layer-to-right:after, .lg-reveal--layer-to-bottom:after, .lg-reveal--layer-to-left:after{
    background: #FFCE70 !important;
}

.lg-reveal--title-line.is-in .title__word {
  --rotate: 0deg;
  --y: 0%; }

.t-title-line .title__line,
.t-title-line .title__word {
  display: inline-block;
  position: relative; }

.t-title-line .title__word, .t-title-line-dark .title__word {
  --rotate: 12deg;
  --y: 113%;
  -webkit-clip-path: polygon(-0.15em 0%, calc( 100% + 0.15em) 0%, calc( 100% + 0.15em) 120%, -0.15em 130%);
          clip-path: polygon(-0.15em 0%, calc( 100% + 0.15em) 0%, calc( 100% + 0.15em) 120%, -0.15em 130%);
  color: transparent; }
  .t-title-line .title__word:before, .t-title-line .title__word:after, .t-title-line-dark .title__word:before, .t-title-line-dark .title__word:after {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    content: attr(data-word);
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
    -webkit-transition: -webkit-transform 1s cubic-bezier(0.19, 1, 0.22, 1);
    transition: -webkit-transform 1s cubic-bezier(0.19, 1, 0.22, 1);
    transition: transform 1s cubic-bezier(0.19, 1, 0.22, 1);
    transition: transform 1s cubic-bezier(0.19, 1, 0.22, 1), -webkit-transform 1s cubic-bezier(0.19, 1, 0.22, 1); }
  .t-title-line .title__word:before {
    -webkit-transform: translate3d(0, calc( var(--y, 100%) * 1.25), 0) rotate(var(--rotate, 0deg));
            transform: translate3d(0, calc( var(--y, 100%) * 1.25), 0) rotate(var(--rotate, 0deg));
    color:rgba (0,0,0,0);
    z-index: 1; }
  .t-title-line .title__word:after {
    -webkit-transform: translate3d(0, var(--y, 100%), 0) rotate(var(--rotate, 0deg));
            transform: translate3d(0, var(--y, 100%), 0) rotate(var(--rotate, 0deg));
    color: #111;
    z-index: 2; }

    .t-title-line-dark .title__word:before {
      -webkit-transform: translate3d(0, calc( var(--y, 100%) * 1.25), 0) rotate(var(--rotate, 0deg));
              transform: translate3d(0, calc( var(--y, 100%) * 1.25), 0) rotate(var(--rotate, 0deg));
      color:rgba (0,0,0,0);
      z-index: 1; }
    .t-title-line-dark .title__word:after {
      -webkit-transform: translate3d(0, var(--y, 100%), 0) rotate(var(--rotate, 0deg));
              transform: translate3d(0, var(--y, 100%), 0) rotate(var(--rotate, 0deg));
      color: #FFCE70;
      inset-block-end: difference;
      z-index: 2; }

    
      .galleria-dark{
        background: none !important;
        z-index: 0;
        top: 20px !important;
      }
      
    .galleria {
      top: -80px;
      width: 100vw;
      background: #FFCE70;
      margin: auto;
      position: relative;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      justify-content: center;
      flex: none;
    }
    
      .galleria__inner {
        display: flex;
        align-items: start;
        position: relative;
        cursor: grab;
        touch-action: none;
        }
      
    
      .galleria__item {
        flex: 0 0 300px;
        padding: 0 1rem;
      }
    
        .galleria__item-inner {
          height: 811px;
          width: 563px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 3rem;
          font-family: sans-serif;
          color: none;
          background: #FFCE70;
          transition: all .6s ease-in-out;
        }

        .galleria-dark .galleria__item-inner{
          height: 600px !important;
          width: 600px !important;
        }

        .galleria__item-inner:hover{
          margin: 0 4px;
        }

    .bookit{
      background-image: url('../assets/it.png');
      background-size: cover;
      background-color: #FFCE70;
      background-blend-mode: multiply;
    }
    .bookdune{
      background-image: url('../assets/dune.png');
      background-size: cover;
      background-color: #FFCE70;
      background-blend-mode: multiply;
    }
    .bookwim{
      background-image: url('../assets/wim.png');
      background-size: cover;
      background-color: #FFCE70;
      background-blend-mode: multiply;
    }
    .bookrams{
      background-image: url('../assets/rams.png');
      background-size: cover;
      background-color: #FFCE70;
      background-blend-mode: multiply;
    }

    .me1{
      background-image: url('../assets/me1.png');
      background-size: cover;
      background-color: #FFCE70;
      background-blend-mode: multiply;
    }

    .me2{
      background-image: url('../assets/me2.png');
      background-size: cover;
      background-color: #FFCE70;
      background-blend-mode: multiply;
    }

    .me3{
      background-image: url('../assets/me3.png');
      background-size: cover;
      background-color: #FFCE70;
      background-blend-mode: multiply;
    }

    .me4{
      background-image: url('../assets/me4.png');
      background-size: cover;
      background-color: #FFCE70;
      background-blend-mode: multiply;
    }

    .me5{
      background-image: url('../assets/me5.png');
      background-size: cover;
      background-color: #FFCE70;
      background-blend-mode: multiply;
    }

    ::selection{
      color: #FFCE70;
      background: #111;
    }

    @media screen and (prefers-reduced-motion: reduce) {  
      * {
        /* Very short durations means JavaScript that relies on events still works */
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
      }
    }


    /* Media queries */
    @media only screen and (max-width: 600px) {
      .orange-box{height: 500px;}
     
      .parent {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(20, 0fr);
        grid-column-gap: 0px;
        grid-row-gap: 0px;
        padding: 0 10px;
        }

        .div3 .mono{text-align: center !important;}
        .div2 .mono{text-align: left;}
        .div6 .mono{text-align: right;}
        .div4{padding: 40px 0;}
        .div6{margin-top: 0 !important;}
        .div17, .div18, .div19, .div20 {padding: 40px 0px}
        .div13 .dark-mono{padding-left: 20px;}
        .div14 h3, .div17 h3{margin-left: 10px;}
        .btp{margin: 20px 0;}
        .galleria{top: 0;}
        .galleria__item-inner{height: 560px; width: 376px;}
        
        .div1 { grid-area: 1 / 1 / 2 / 3; }
        .div2 { grid-area: 2 / 1 / 3 / 2; }
        .div3 { grid-area: 2 / 2 / 3 / 3; }
        .div4 { grid-area: 3 / 1 / 4 / 3; }
        .div5 { grid-area: 4 / 1 / 5 / 3; }
        .div6 { grid-area: 5 / 1 / 6 / 3; }
        .div7 { grid-area: 6 / 1 / 7 / 3; }
        .div8 { grid-area: 7 / 1 / 8 / 3; }
        .div9 { grid-area: 8 / 1 / 9 / 3; }
        .div10 { grid-area: 9 / 1 / 10 / 3; }
        .div11 { grid-area: 10 / 1 / 11 / 3; }
        .div12 { grid-area: 11 / 1 / 12 / 3; }
        .div13 { grid-area: 12 / 1 / 13 / 3; }
        .div14 { grid-area: 13 / 1 / 14 / 3; }
        .div15 { grid-area: 14 / 1 / 15 / 3; }
        .div16 { grid-area: 15 / 1 / 16 / 3; }
        .div17 { grid-area: 16 / 1 / 17 / 3; }
        .div18 { grid-area: 17 / 1 / 18 / 3; }
        .div19 { grid-area: 18 / 1 / 19 / 3; }
        .div20 { grid-area: 19 / 1 / 20 / 3; }
    }