/* Add font files for Hepta Slab */
@font-face {
    font-family: 'Hepta Slab';
    src: url('fonts/hepta-slab.woff2') format('woff2'),
         url('fonts/hepta-slab.woff') format('woff');
    font-weight: normal;
    font-style: normal;
  }
  
  /* Add font files for Inknut Antiqua */
  @font-face {
    font-family: 'Inknut Antiqua';
    src: url('fonts/inknut-antiqua.woff2') format('woff2'),
         url('fonts/inknut-antiqua.woff') format('woff');
    font-weight: normal;
    font-style: normal;
  }
  :root {
    --font-family-hepta-slab: 'Hepta Slab', sans-serif;
    --font-family-inknut-antiqua: 'Inknut Antiqua', sans-serif;
    --text-rgb-43-14-14: rgba(43, 14, 14, 1);
    --text-rgb-42-14-14: rgba(42, 14, 14, 1);
    --text-white: rgba(255, 255, 255, 1);
  }
  
  .text-rgb-43-14-14 {
    color: var(--text-rgb-43-14-14);
  }
  
  .text-rgb-42-14-14 {
    color: var(--text-rgb-42-14-14);
  }
  
  .text-white {
    color: var(--text-white);
  }
  
  
  /* CSS Reset */
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  body {
    width: 100%;
    min-height: 100vh;
    overflow-x: hidden;
  }
  
  img {
    max-width: 100%;
    height: auto;
  }
  
  .image-1-2 {
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
    margin: 0;
    padding: 0;
    vertical-align: top;
   
  }
  

  
  .Home {
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
    width: 80px;
    height: auto;
  }

  .References {
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
    width: 150px;
    height: auto;
  }
  
  .Resources {
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
    width: 148px;
    height: auto;
  }

  .contact {
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
    width: 450px;
    height: auto;
  }

  .line-1-10 {
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
    border: 5px solid rgba(43, 14, 14, 1);
    border: none;
    outline: none;
    position: absolute;
    top: 100px;
    right: 25px;
    width: 1300px;
 
  }
  
  .line-2-11 {
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
    border: 5px solid rgba(43, 14, 14, 1);
    border: none;
    outline: none;
    position: absolute;
    top: 86px;
    right: 409px;
    width: 500px;

  }
  
  
  .triangle-2-13 {
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
    fill: rgba(43, 14, 14, 1);
    border: none;
    outline: none;
    position: absolute;
    top: 357px;
    right: 740px;
    height: auto;
    width: 90px
  }
  
  .line-3-14 {
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
    border: 5px solid rgba(42, 14, 14, 1);
    border: none;
    outline: none;
    position: absolute;
    top: 340px;
    right: 578px;
    width: 743px;
  }
  
  .line-4-15 {
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
    border: 5px solid rgba(42, 14, 14, 1);
    border: none;
    outline: none;
    padding-left: 5px;
    position: absolute;
    top: 114px;
    right: 28px;
    height: 490px;
  }
  
  .line-5-16 {
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
    border: 5px solid rgba(42, 14, 14, 1);
    border: none;
    outline: none;
    position: absolute;
    top: 612px;
    right: 772px;
    width: 550px;

  }
  
  .line-6-17 {
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
    border: 5px solid rgba(42, 14, 14, 1);
    border: none;
    outline: none;
    position: absolute;
    top: 612px;
    right: 28px;
    width: 550px;
  }
  
  .text-box-shape-18 {
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
    border: 1px solid rgba(42, 14, 14, 1);
    fill: rgba(42, 14, 14, 1);
    border: none;
    outline: none;
    position: absolute;
    top: 401px;
    right: 656px;
    width: 575px;
    height: auto;
  }

  .text-body-border-36 {
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
    position: absolute;
    top: 390px;
    right: 645px;
    width: 598px;
    height: auto;
  }
  
  .ALLABOUTME {
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
    width: 200px;
    height: auto;
  }
  
  .line-7-20 {
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
    border: 5px solid rgba(42, 14, 14, 1);
    border: none;
    outline: none;
    position: absolute;
    top: 114px;
    right: 1319px;
    height: 490px;
  }
  
  .line-8-21 {
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
    border: 5px solid rgba(43, 14, 14, 1);
    border: none;
    outline: none;
    position: absolute;
    top: 567px;
    right: 240px;
    height: 32px;
  }

  
  .line-9-23 {
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
    border: 5px solid rgba(42, 14, 14, 1);
    border: none;
    outline: none;
    position: absolute;
    top: 159px;
    right: 28px;
    width: 490px;
  }
  
  .line-10-24 {
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
    border: 5px solid rgba(42, 14, 14, 1);
    border: none;
    outline: none;
    position: absolute;
    top: 184px;
    right: 508px;
    height: 400px;
  }
  
  .triangle-1-25 {
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
    fill: rgba(43, 14, 14, 1);
    border: none;
    outline: none;
    position: absolute;
    top: 357px;
    right: 1050px;
    height: auto;
    width: 90px
  }
  
  .frame-26 {
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
    box-shadow: 14px 7px 6.699999809265137px 2px rgba(0,0,0,0.5), 0px 4px 4px 0px rgba(0,0,0,0.5);
    width: 20%;
    height: auto;
  }
  
  .daguerreotype-27 {
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
    box-shadow: 14px 7px 6.699999809265137px 2px rgba(0,0,0,0.5);
    width: 15%;
    height: auto;
  }
  
  .p2-ornamental-border-28 {
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
    box-shadow: 11px 12px 5.300000190734863px 0px rgba(0,0,0,0.5);
    width: 8%;
    height: auto;
  }
  
  .p2-line-border {
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
    width: 7%;
    height: auto;
   
  }

  .P1 {
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
    width: 6%;
    height: auto;
  }

  .P2 {
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
    width: 4%;
    height: auto;
   
  }

  .P3 {
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
    width: 4.5%;
    height: auto;
  }
  
  .text-30 {
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
    box-shadow: 11px 12px 5.300000190734863px 0px rgba(0,0,0,0.5);
    font-family: var(--font-family-inknut-antiqua);
    font-weight: 700;
    font-size: 55px;
    letter-spacing: 1%;
    line-height: 10px;
    text-decoration: none;
    text-transform: none;
    color: var(--text-rgb-42-14-14);
  }
  
  .p3-ornamental-border-31 {
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
    box-shadow: 11px 12px 5.800000190734863px 0px rgba(0,0,0,0.5);
    width: 9%;
    height: auto;
  }
  
  .p3-line-border {
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
    width: 8%;
    height: auto;
  }
  
  .text-33 {
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
    box-shadow: 11px 12px 5.800000190734863px 0px rgba(0,0,0,0.5);
    font-family: var(--font-family-inknut-antiqua);
    font-weight: 700;
    font-size: 60px;
    letter-spacing: 1%;
    line-height: 10px;
    text-decoration: none;
    text-transform: none;
    color: var(--text-rgb-42-14-14);
  }
  
  .p1-ornamental-border-34 {
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
    box-shadow: 11px 13px 5.699999809265137px 0px rgba(0,0,0,0.5);
    width: 11%;
    height: auto;
  }
  
  .p1-line-border {
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
    width: 10%;
    height: auto;
  }
  
  .CRANEHUANG {
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: auto;
    width: auto;
    height: 50px;
  }
  
  .node-37 {
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
    width: 14%;
    height: auto;
 
  }
   
  .TMCC {
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
    width: 7%;
    height: auto;
  }

  .grc {
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
    width: 13%;
    height: auto;
  }
  
  .body-text { 
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
    width: 40%;
    height: auto;
  }
  
  
  .slide-16-9-1-1 {
  @media (max-width: 1440px) {
    .slide-16-9-1-1 {
      padding-left: 24px;
      padding-right: 24px;
    }
  }
  
  @media (max-width: 768px) {
    .slide-16-9-1-1 {
      padding-left: 16px;
      padding-right: 16px;
    }
  }
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
    background-color: rgba(255, 255, 255, 1);
  }