@keyframes appear-top {
  0% {
    opacity: 0;
    transform: translateY(-40px);
  }
  25% {
    opacity: 0;
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes disappear-top {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  25% {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translateY(-40px);
  }
}

@keyframes appear-left {
  0% {
    opacity: 0;
    transform: translateX(-40px);
  }
  25% {
    opacity: 0;
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes disappear-left {
  0% {
    opacity: 1;
    transform: translateX(0);
  }
  25% {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translateX(-40px);
  }
}

@keyframes appear-bottom {
  0% {
    opacity: 0;
    transform: translateY(40px);
  }
  25% {
    opacity: 0;
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes disappear-bottom {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  25% {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translateY(40px);
  }
}

@keyframes appear-right {
  0% {
    opacity: 0;
    transform: translateX(40px);
  }
  25% {
    opacity: 0;
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes disappear-right {
  0% {
    opacity: 1;
    transform: translateX(0);
  }
  25% {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translateX(40px);
  }
}

@keyframes appear-opacity {
  0% {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes disappear-opacity {
  0% {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes appear-zoom-in {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  25% {
    opacity: 0;
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes disappear-zoom-in {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  25% {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: scale(0);
  }
}

@keyframes appear-zoom-out {
  0% {
    opacity: 0;
    transform: scale(1.5);
  }
  25% {
    opacity: 0;
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes disappear-zoom-out {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  25% {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: scale(1.5);
  }
}

@keyframes appear-zoom-in-from-top {
  0% {
    opacity: 0;
    transform: translateY(-400px) scale(0);
  }
  25% {
    opacity: 0;
  }
  to {
    opacity: 1;
    transform: translateY(0px) scale(1);
  }
}
@keyframes disappear-zoom-in-from-top {
  0% {
    opacity: 1;
    transform: translateY(0px) scale(1);
  }
  25% {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translateY(-400px) scale(0);
  }
}

@keyframes appear-zoom-in-from-left {
  0% {
    opacity: 0;
    transform: translateX(-400px) scale(0);
  }
  25% {
    opacity: 0;
  }
  to {
    opacity: 1;
    transform: translateX(0px) scale(1);
  }
}
@keyframes disappear-zoom-in-from-left {
  0% {
    opacity: 1;
    transform: translateX(0px) scale(1);
  }
  25% {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translateX(-400px) scale(0);
  }
}

@keyframes appear-zoom-in-from-bottom {
  0% {
    opacity: 0;
    transform: translateY(400px) scale(0);
  }
  25% {
    opacity: 0;
  }
  to {
    opacity: 1;
    transform: translateY(0px) scale(1);
  }
}
@keyframes disappear-zoom-in-from-bottom {
  0% {
    opacity: 1;
    transform: translateY(0px) scale(1);
  }
  25% {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translateY(400px) scale(0);
  }
}

@keyframes appear-zoom-in-from-right {
  0% {
    opacity: 0;
    transform: translateX(400px) scale(0);
  }
  25% {
    opacity: 0;
  }
  to {
    opacity: 1;
    transform: translateX(0px) scale(1);
  }
}
@keyframes disappear-zoom-in-from-right {
  0% {
    opacity: 1;
    transform: translateX(0px) scale(1);
  }
  25% {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translateX(400px) scale(0);
  }
}

@keyframes appear-strange {
  0% {
    opacity: 0;
    filter: blur(14px);
    border-radius: 0.75rem;

    clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);
  }
  25% {
    opacity: 1;
    filter: blur(9px);
    border-radius: 0.75rem;

    clip-path: polygon(0% 0%, 50% 0%, 50% 50%, 0% 50%);
  }
  50% {
    filter: blur(5px);
    border-radius: 0.75rem;

    clip-path: polygon(50% 50%, 100% 50%, 100% 100%, 50% 100%);
  }
  75% {
    filter: blur(3px);
    border-radius: 0.75rem;

    clip-path: polygon(25% 25%, 75% 25%, 75% 75%, 25% 75%);
  }
  100% {
    filter: blur(0px);
    border-radius: 0.75rem;

    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}

@keyframes caret {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

@keyframes animateLG {
  0%,
  100% {
    background-position: left top;
  }
  50% {
    background-position: right bottom;
  }
}

@keyframes borders {
  0%,
  100% {
    border-width: calc(var(--font) * 0.2) calc(var(--font) * 0.1)
      calc(var(--font) * 0.02) calc(var(--font) * 0.02);
  }
  25% {
    border-width: calc(var(--font) * 0.1) calc(var(--font) * 0.02)
      calc(var(--font) * 0.02) calc(var(--font) * 0.2);
  }
  50% {
    border-width: calc(var(--font) * 0.02) calc(var(--font) * 0.02)
      calc(var(--font) * 0.2) calc(var(--font) * 0.1);
  }
  75% {
    border-width: calc(var(--font) * 0.02) calc(var(--font) * 0.2)
      calc(var(--font) * 0.1) calc(var(--font) * 0.02);
  }
}

@keyframes activebtn {
  0%,
  100% {
    background-color: var(--pulse-button-1);
  }
  50% {
    background-color: var(--pulse-button-2);
  }
}

@keyframes appear-years {
  from {
    opacity: 0;
    transform: translateX(-50px);
  }
  to {
    opacity: 1;
    transform: translateX(0px);
  }
}

@keyframes appear-months {
  from {
    opacity: 0;
    transform: translateX(-500px);
  }
  to {
    opacity: 1;
    transform: translateX(0px);
  }
}

@keyframes appear-files {
  from {
    opacity: 0;
    transform: translateX(-200px);
  }
  to {
    opacity: 1;
    transform: translateX(0px);
  }
}

@keyframes width {
  0%,
  50% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}

@keyframes height {
  0%,
  50% {
    height: 0%;
  }
  100% {
    height: 100%;
  }
}

@keyframes opacity {
  0%,
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes circle-disappear {
  0% {
    width: 0;
    height: 0;
    opacity: 1;
  }
  80% {
    width: 125%;
    height: 250%;
    opacity: 1;
  }
  100% {
    width: 125%;
    height: 250%;
    opacity: 0;
  }
}

.appear,
.animation {
  animation-duration: var(--animation-duration);
  animation-timing-function: cubic-bezier(0.6, 0.55, 0.25, 1);
}

.disappear {
  animation-duration: var(--animation-duration);
  animation-timing-function: cubic-bezier(0.6, 0, 0.75, 0);
}

.appear.top {
  animation-name: appear-top;
}
.disappear.top {
  animation-name: disappear-top;
}

.appear.right {
  animation-name: appear-right;
}
.disappear.right {
  animation-name: disappear-right;
}

.appear.bottom {
  animation-name: appear-bottom;
}
.disappear.bottom {
  animation-name: disappear-bottom;
}

.appear.left {
  animation-name: appear-left;
}
.disappear.left {
  animation-name: disappear-left;
}

.appear.opacity {
  animation-name: appear-opacity;
}
.disappear.opacity {
  animation-name: disappear-opacity;
}

.appear.zoom-in{
  animation-name: appear-zoom-in;
}
.disappear.zoom-in{
  animation-name: disappear-zoom-in;
}

.appear.zoom-out{
  animation-name: appear-zoom-out;
}
.disappear.zoom-out{
  animation-name: disappear-zoom-out;
}

.appear.zoom-in-from-top{
  animation-name: appear-zoom-in-from-top;
}
.disappear.zoom-in-from-top{
  animation-name: disappear-zoom-in-from-top;
}

.appear.zoom-in-from-left{
  animation-name: appear-zoom-in-from-left;
}
.disappear.zoom-in-from-left{
  animation-name: disappear-zoom-in-from-left;
}

.appear.zoom-in-from-bottom{
  animation-name: appear-zoom-in-from-bottom;
}
.disappear.zoom-in-from-bottom{
  animation-name: disappear-zoom-in-from-bottom;
}

.appear.zoom-in-from-right{
  animation-name: appear-zoom-in-from-right;
}
.disappear.zoom-in-from-right{
  animation-name: disappear-zoom-in-from-right;
}

.appear.fluid{
  animation-name: appear-fluid;
}

.animation.change-form-mode-to-left {
  animation-name: change-form-mode-to-left;
}
.animation.change-form-mode-to-right {
  animation-name: change-form-mode-to-right;
}

.intro{ animation: animateLG 60s ease infinite; }

.intro-circle-animation{ animation: circle-disappear 3s cubic-bezier(0, 1, 0.25, 1); }

.menu-form-div,
.logged-in-div{ transition: transform calc(var(--animation-duration) * 4); }

/* 

upload-username,
*,
*::before,
*::after,

*/
.menu-div, 
.menu-label, 
.menu-input, 
.l-option
{ transition: all var(--animation-duration) ease; }

.functionality-form input[type="file"]::file-selector-button{ transition: box-shadow var(--animation-duration) ease; }

ul li .date, ul li .date::before{ transition: all var(--animation-duration) cubic-bezier(0.66, 0, 0.01, 1); }

button{ transition: all var(--animation-duration) cubic-bezier(0, 1, 0.5, 1); }

.file-item{ transition: all var(--animation-duration) cubic-bezier(0, 2, 0, 1); }

.line-break{
    animation: opacity var(--animation-duration) ease;
    transition: height var(--animation-duration) ease;
}

.video-title, .quality{ transition: background-position var(--animation-duration) cubic-bezier(0, 0, 0.3, 1); }

.nav-item{ transition: box-shadow var(--animation-duration) ease-out; }

button:hover::before{ animation: borders infinite 2s linear; }

button.active{ animation: activebtn 2s cubic-bezier(0.42, 0, 0.28, 0.99) infinite; }

.year-item{ animation: appear-months var(--animation-duration) cubic-bezier(1, 0.4, 0.3, 1); }

.years-line{ animation: height var(--animation-duration) ease; }

.month-item{ animation: appear-years var(--animation-duration) cubic-bezier(1, 0.4, 0.3, 1); }
/*
.file-item{ animation: appear-files var(--animation-duration) cubic-bezier(0, 1.06, 0.6, 1.02); }
*/
.months-line.active{ animation: height var(--animation-duration) ease; }

.year-item::before,
.month-item::before{ animation: opacity 2000ms ease; }

.status-container{ animation: opacity var(--animation-duration) ease-in-out; }

.overlay{ animation: opacity var(--animation-duration) ease; }

.skeleton {

  position: relative;
  display: block;
  background: #1b1b1b;
  width: 100%;
  height: 100%;
  overflow: hidden;
  user-select: none;
  cursor: default;

}

.skeleton::after {

  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transform: translateX(-100%);
  background-image: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0,
    rgba(255, 255, 255, 0.2) 20%,
    rgba(255, 255, 255, 0.5) 60%,
    rgba(255, 255, 255, 0)
  );
  animation: shimmer 1s infinite;
  content: '';

}

@keyframes shimmer{ 100%{ transform: translateX(100%); } }