* {
    box-sizing: border-box;
    font-size: inherit;
  }

  body {
    margin: 0;
    padding: 0;
    font-family: 'DotGothic16', sans-serif;
  }

  #loader {
    width: 100%;
    height: 100dvh;
    display: grid;
    place-items: center;
    background-color: #F8F6EF;
    position: fixed;
    z-index: 6;
    opacity: 1;
    transition: 2s;
  }

  .scene {
    position: relative;
    z-index: 2;
    height: 220px;
    width: 220px;
    display: grid;
    place-items: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 95%;
  }

  .cube-wrapper {
    animation: bouncing 2s infinite;
  }

  .cube {
    transform-style: preserve-3d;
    transform: rotateX(45deg) rotateZ(45deg) scale(2);
    animation: rotation 2s infinite;
  }

  .cube-faces {
    transform-style: preserve-3d;
    height: 200px;
    width: 200px;
    position: relative;
    transform-origin: 0 0;
    transform: translateX(0) translateY(0) translateZ(-40px);
  }

  .cube-face {
    position: absolute;
    inset: 0;
    /* background-image: url(../img/Frame\ 159.jpg); */
    background-size: cover;
    border: solid 1px rgb(255, 244, 244);
  }

  .cube-face.shadow {
    transform: translateZ(-80px);
    animation: bouncing-shadow 2s infinite;
    background-image: url(../img/Frame\ 168.jpg);
  }

  .cube-face.top {
    transform: translateZ(200px);
    background-image: url(../img/Frame\ 166.jpg);
    transition: .35s ease-in-out;
  }

  .cube-face.front {
    transform-origin: 0 50%;
    transform: rotateY(-90deg);
    background-image: url(../img/Frame\ 159.jpg);
  }

  .cube-face.back {
    transform-origin: 0 50%;
    transform: rotateY(-90deg) translateZ(-200px);
    background-image: url(../img/Frame\ 164.jpg);


  }

  .cube-face.right {
    transform-origin: 50% 0;
    transform: rotateX(-90deg) translateY(-200px);
    background-image: url(../img/Frame\ 165.jpg);
  }

  .cube-face.left {
    transform-origin: 50% 0;
    transform: rotateX(-90deg) translateY(-200px) translateZ(200px);
    background-image: url(../img/Frame\ 168.jpg);
  }

  @keyframes rotation {
    0% {
      transform: rotateX(45deg) rotateY(0) rotateZ(45deg);
      animation-timing-function: cubic-bezier(0.17, 0.84, 0.44, 1);

    }

    50% {
      transform: rotateX(45deg) rotateY(0) rotateZ(225deg);
      animation-timing-function: cubic-bezier(0.76, 0.05, 0.86, 0.06);


    }

    100% {
      transform: rotateX(45deg) rotateY(0) rotateZ(405deg);
      animation-timing-function: cubic-bezier(0.17, 0.84, 0.44, 1);

    }
  }

  @keyframes bouncing {
    0% {
      transform: translateY(-40px);
      animation-timing-function: cubic-bezier(0.76, 0.05, 0.86, 0.06);
    }

    45% {
      transform: translateY(40px);
      animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
    }

    100% {
      transform: translateY(-40px);
      animation-timing-function: cubic-bezier(0.76, 0.05, 0.86, 0.06);
    }
  }

  @keyframes bouncing-shadow {
    0% {
      transform: translateZ(-200px) scale(1.3);
      animation-timing-function: cubic-bezier(0.76, 0.05, 0.86, 0.06);
      opacity: 0.05;
    }

    45% {
      transform: translateZ(0);
      animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
      opacity: 0.3;
    }

    100% {
      transform: translateZ(-200px) scale(1.3);
      animation-timing-function: cubic-bezier(0.76, 0.05, 0.86, 0.06);
      opacity: 0.05;
    }
  }

  .loader {
    font-size: 48px;
    color: #293855;
    display: inline-block;
    font-weight: bolder;
    letter-spacing: 10px;
    font-weight: 700;
    position: relative;
  }

  .loader:before {
    content: '';
    animation: 2s print linear alternate infinite;
  }

  .loader:after {
    content: '';
    position: absolute;
    right: -4px;
    top: 80%;
    transform: translatey(-45%);
    width: 3px;
    height: 1.3em;
    background: currentColor;
    opacity: 0.8;
  }

  @keyframes print {
    0% {
      content: 'L'
    }

    10% {
      content: 'Lo'
    }

    20% {
      content: 'Loa'
    }

    30% {
      content: 'Load'
    }

    40% {
      content: 'Loadi'
    }

    50% {
      content: 'Loadin'
    }

    60% {
      content: 'Loading'
    }

    70% {
      content: 'Loading.'
    }

    80% {
      content: 'Loading..'
    }

    90%,
    100% {
      content: 'Loading...'
    }
  }

  @media(max-width: 1280px) {
    #loader {
      width: 100%;
      height: 100dvh;
      display: grid;
      place-items: center;
      background-color: #F8F6EF;
      position: fixed;
      z-index: 6;
      opacity: 1;
      transition: 2s;
    }

    .scene {
      position: relative;
      z-index: 2;
      height: 110px;
      width: 110px;
      display: grid;
      place-items: center;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      gap: 95%;
    }

    .cube-faces {
      transform-style: preserve-3d;
      height: 80px;
      width: 80px;
      position: relative;
      transform-origin: 0 0;
      transform: translateX(0) translateY(0) translateZ(-40px);
    }

    .cube-face.top {
      transform: translateZ(80px);
      background-image: url(../img/Frame\ 166.jpg);
      transition: .35s ease-in-out;
    }

    .cube-face.back {
      transform-origin: 0 50%;
      transform: rotateY(-90deg) translateZ(-80px);
      background-image: url(../img/Frame\ 164.jpg);


    }

    .cube-face.right {
      transform-origin: 50% 0;
      transform: rotateX(-90deg) translateY(-80px);
      background-image: url(../img/Frame\ 165.jpg);
    }

    .cube-face.left {
      transform-origin: 50% 0;
      transform: rotateX(-90deg) translateY(-80px) translateZ(80px);
      background-image: url(../img/Frame\ 168.jpg);
    }

    @keyframes bouncing-shadow {
      0% {
        transform: translateZ(-80px) scale(1.3);
        animation-timing-function: cubic-bezier(0.76, 0.05, 0.86, 0.06);
        opacity: 0.05;
      }

      45% {
        transform: translateZ(0);
        animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
        opacity: 0.3;
      }

      100% {
        transform: translateZ(-80px) scale(1.3);
        animation-timing-function: cubic-bezier(0.76, 0.05, 0.86, 0.06);
        opacity: 0.05;
      }
    }

    .loader {
      font-size: 20px;
      color: #293855;
      display: inline-block;
      font-weight: bolder;
      letter-spacing: 5px;
      font-weight: 700;
      position: relative;
    }
  }

  @media(max-width: 932px){
    #loader{
      width: 100%;
      height: 100dvh;
      display: grid;
      place-items: center;
      background-color: #F8F6EF;
      position: fixed;
      z-index: 6;
      opacity: 1;
      transition: 2s;
    }
    .scene {
      position: relative;
      z-index: 2;
      height: 110px;
      width: 110px;
      display: grid;
      place-items: center;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      gap: 70%;
    }
    .cube-faces {
      transform-style: preserve-3d;
      height: 80px;
      width: 80px;
      position: relative;
      transform-origin: 0 0;
      transform: translateX(0) translateY(0) translateZ(-40px);
    }
    .cube-face.top {
      transform: translateZ(80px) ;
      background-image: url(../img/Frame\ 166.jpg);
      transition: .35s ease-in-out;
    }
    .cube-face.back {
      transform-origin: 0 50%;
      transform: rotateY(-90deg) translateZ(-80px);
      background-image: url(../img/Frame\ 164.jpg);
      
      
    }
    .cube-face.right {
      transform-origin: 50% 0;
      transform: rotateX(-90deg) translateY(-80px);
      background-image: url(../img/Frame\ 165.jpg);
    }
    .cube-face.left {
      transform-origin: 50% 0;
      transform: rotateX(-90deg) translateY(-80px) translateZ(80px);
      background-image: url(../img/Frame\ 168.jpg);
    }

    @keyframes bouncing-shadow {
      0% {
        transform: translateZ(-80px) scale(1.3);
        animation-timing-function: cubic-bezier(0.76, 0.05, 0.86, 0.06);
        opacity: 0.05;
      }
      45% {
        transform: translateZ(0);
        animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
        opacity: 0.3;
      }
      100% {
        transform: translateZ(-80px) scale(1.3);
        animation-timing-function: cubic-bezier(0.76, 0.05, 0.86, 0.06);
        opacity: 0.05;
      }
    }
    .loader{
      font-size: 20px;
      color: #293855;
      display: inline-block;
      font-weight: bolder;
      letter-spacing: 5px;
      font-weight: 700;
      position: relative;
    }
  }
  @media(max-width: 736px) {
    #loader {
      width: 100%;
      height: 100dvh;
      display: grid;
      place-items: center;
      background-color: #F8F6EF;
      position: fixed;
      z-index: 6;
      opacity: 1;
      transition: 2s;
    }

    .scene {
      position: relative;
      z-index: 2;
      height: 110px;
      width: 110px;
      display: grid;
      place-items: center;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      gap: 55%;
    }

    .cube-faces {
      transform-style: preserve-3d;
      height: 80px;
      width: 80px;
      position: relative;
      transform-origin: 0 0;
      transform: translateX(0) translateY(0) translateZ(-40px);
    }

    .cube-face.top {
      transform: translateZ(80px);
      background-image: url(../img/Frame\ 166.jpg);
      transition: .35s ease-in-out;
    }

    .cube-face.back {
      transform-origin: 0 50%;
      transform: rotateY(-90deg) translateZ(-80px);
      background-image: url(../img/Frame\ 164.jpg);


    }

    .cube-face.right {
      transform-origin: 50% 0;
      transform: rotateX(-90deg) translateY(-80px);
      background-image: url(../img/Frame\ 165.jpg);
    }

    .cube-face.left {
      transform-origin: 50% 0;
      transform: rotateX(-90deg) translateY(-80px) translateZ(80px);
      background-image: url(../img/Frame\ 168.jpg);
    }

    @keyframes bouncing-shadow {
      0% {
        transform: translateZ(-80px) scale(1.3);
        animation-timing-function: cubic-bezier(0.76, 0.05, 0.86, 0.06);
        opacity: 0.05;
      }

      45% {
        transform: translateZ(0);
        animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
        opacity: 0.3;
      }

      100% {
        transform: translateZ(-80px) scale(1.3);
        animation-timing-function: cubic-bezier(0.76, 0.05, 0.86, 0.06);
        opacity: 0.05;
      }
    }

    .loader {
      font-size: 16px;
      color: #293855;
      display: inline-block;
      font-weight: bolder;
      letter-spacing: 5px;
      font-weight: 700;
      position: relative;
    }
    
  }