/* Anim - CSS */



.element {
    position: relative;
    left: 0;
    opacity: 1;
    transform: scale(1);
    transition: ease 2s left, ease 2s opacity, ease 2s transform;
}



/* CSS */
.button-56 {
    align-items: center;
    background-color: #222;
    border: 2px solid #C8A644;
    border-radius: 8px;
    box-sizing: border-box;
    color: #fff;
    cursor: pointer;
    display: flex;
    /* font-family: Inter,sans-serif; */
    text-transform: uppercase;
    font-weight: 900;
    font-size: 16px;
    height: 48px;
    justify-content: center;
    line-height: 24px;
    max-width: 100%;
    padding: 0 25px;
    position: relative;
    text-align: center;
    text-decoration: none;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
  }
  
  .button-56:after {
    background-color: #C8A644;
    border-radius: 8px;
    content: "";
    display: block;
    height: 48px;
    left: 0;
    width: 100%;
    position: absolute;
    top: -2px;
    transform: translate(8px, 8px);
    transition: transform .2s ease-out;
    z-index: -1;
  }
  
  .button-56:hover:after {
    transform: translate(0, 0);
  }
  
  .button-56:active {
    background-color: #C8A644;
    outline: 0;
  }
  
  .button-56:hover {
    outline: 0;
  }
  
  @media (min-width: 768px) {
    .button-56 {
      padding: 0 40px;
    }
  }





.anim-scale {
    transform: scale(0);
}

.anim-left {
    left: -1200px;
}

.anim-right {
    left: 1200px;
}

.anim-fade {
    opacity: 0;
}

.anim-delay-1 {
    transition-delay: 0.5s;
}

.anim-delay-2 {
    transition-delay: 1s;
}

.anim-delay-3 {
    transition-delay: 1.5s;
}

/* - */

.workspace {
    overflow-x: hidden;
}


.youtube-video {
    aspect-ratio: 16 / 9;
    width: 100%;
}