@import url("https://fonts.googleapis.com/css?family=Roboto+Mono:300,400,500,700&display=swap");
@font-face {
  font-family: 'VCR';
  src: url("../fonts/VCR_OSD.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

:root {
  --vh: 1vh;
}

html {
  font-size: 16px;
}

body {
  color: #262626;
  font-family: 'Roboto Mono', monospace;
  font-style: normal;
}

h1 {
  font-family: 'VCR';
  font-size: 3rem;
}

h2 {
  color: #f713d5;
  font-size: 1.8rem;
  font-weight: 400;
}

h3, p, a {
  font-size: 1.2rem;
  line-height: 1.8rem;
}

body,
html {
  margin: 0;
  padding: 0;
}

html {
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
}

body {
  background-color: #fffbf8;
  overscroll-behavior: none;
  overflow: auto;
  height: 100vh; /* Use vh as a fallback for browsers that do not support Custom Properties */
  height: calc(var(--vh, 1vh) * 100);
}
/*
body::after {
  content: "";
  background: url("../images/noise3.gif");
  opacity: 0.7;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: fixed;
  z-index: -1000;   
}
*/
.noise {
  width: 100%;
  height: 100%;
  /*position: fixed;*/
  margin: 0;
  overflow-x: hidden;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;

}

.noise::after {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  content: "";
  background: url("../images/noise3.gif") center center;
  background-repeat: repeat;
  background-size: auto;
  background-attachment: initial;
  opacity: .07;
  pointer-events: none;
  -webkit-overflow-scrolling: touch;
  z-index: -10000;
}

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

a {
  color: #262626;
  text-transform: uppercase;
  text-decoration: none;
  transition: all .3s ease-in-out;
}

a:hover, a:focus {
  text-decoration: none;
  color: #f713d5;
  transition: all .1s ease-in-out;
}

a:link, a:visited, a:active {
  text-decoration: none;
}

section {
  display: block;
  width: 80%;
  min-height: 100vh;
  margin: 0 auto;
  text-align: center;
  overscroll-behavior: none;
}

.inicio {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.title {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 7rem;
  text-align: center;
}

.title h1 {
  height: 3rem;
}

.title h2 {
  display: inline-block;
  margin: 2rem auto;
  background-image: url("../images/cinta.png");
  background-size: 100% 50px;
  background-repeat: no-repeat;
  background-position: center center;
  color: white;
}

.logo-home {
  width: auto;
  height: auto;
  position: absolute;
  left: 3%;
  top: 2rem;
  z-index: 100;
  display: block;
}

.logo-home a {
  background-image: url("../images/logo-juliabeyer.png");
  background-size: 120px;
  background-repeat: no-repeat;
  color: transparent;
  height: 90px;
  min-width: 120px;
  display: block;
}

.hide {
  display: none;
}

footer {
  width: auto;
  height: 30px;
  padding: 0rem 0rem;
  position: relative;
  bottom: 0;
  right: 2rem;
  text-align: right;
}
.footer p, .footer a{
    color: #262626;
    font-size: 10px;
}

.menu {
  z-index: 100;
}

.menu ul {
  display: flex;
  position: fixed;
}

.menu ul li {
  width: 100%;
  margin: 0 auto;
  padding-bottom: 2rem;
  transition: all .4s ease-in-out;
}

.menu ul li a {
  transition: all .4s ease-in-out;
}

.menu ul li a:hover, .menu ul li a:focus {
  text-decoration: none;
  transition: all .2s ease-in-out;
}

.menu ul li a:link, .menu ul li a:visited, .menu ul li a:active {
  text-decoration: none !important;
}

.redes {
  margin: 0rem auto !important;
}

.icon {
  background: #ebebeb;
  width: auto;
  height: auto;
  border-radius: 50%;
  transform: rotate(90deg);
  transition: all .3s linear;
  fill: #262626;
}

.icon:hover, .icon:focus {
  background: #262626;
  transform: rotate(0deg);
  fill: #ebebeb;
}

.side-alpha {
  -ms-writing-mode: tb-lr;
  writing-mode: vertical-lr;
  transform: rotate(-180deg);
  bottom: 7rem;
  left: 6%;
}

.side-beta {
  -ms-writing-mode: tb-lr;
  writing-mode: vertical-lr;
  top: 7rem;
  right: 6%;
}

.active > a {
  color: #f713d5 !important;
  text-decoration: none !important;
}

.options {
  height: 0;
  position: relative;
  padding-bottom: 7rem;
}

.options ul {
  display: inline-flex;
  flex-direction: row;
  justify-content: center;
}

.options ul a {
  width: 150px;
  display: block;
  padding: .5rem 0rem;
}

.options li a {
  background: linear-gradient(90deg, #ff8bee 50%, #fffbf8 50%);
}

.options li a,
.options li a:before {
  background-size: 400%;
  background-position: 100%;
  transition: .4s ease-in-out;
  color: #f713d5;
}

.options li a:hover {
  background-position: 0;
  color: white;
}

.options li a.active {
  color: white !important;
  background-color: rgba(247, 19, 213, 0.6) !important;
  text-decoration: none !important;
  background-position: initial !important;
}

#container-slide {
  width: 80%;
  height: 64vh;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  position: relative;
  bottom: 0;
  overflow: hidden;
}

.slide {
  width: auto;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  position: absolute;
  bottom: 0;
}

.slide a {
  display: block;
  width: 100%;
  height: 100%;
}

.slide a img {
  -o-object-fit: contain;
  object-fit: contain;
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

.about {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.about .bio-alpha {
  width: 500px;
  max-width: 100%;
  margin: 0 auto 2rem;
  padding: 2.4rem 0;
  border: 2px solid #262626;
  box-shadow: -5px 12px 0 -5px #262626;
}

.about .bio-beta {
  background-color: white;
  width: 50%;
  height: auto;
  margin: 0 auto;
  padding: 2rem;
  text-align: left;
}

.circle, .link-index {
  width: 240px;
  height: 240px;
  position: absolute;
  top: 4rem;
  left: 8rem;
  overflow: hidden;
  border-radius: 50%;
}

.circle img {
  width: auto;
  height: 100%;
  cursor: pointer;
}

.link-index {
  z-index: 100;
}

.link-index a {
  display: block;
  height: 100%;
}

.error {
  background-color: #ff8bee;
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  opacity: 1;
  z-index: 401;
}

.oops {
  width: 140px;
  height: auto;
  position: absolute;
  top: 10vh;
  left: 6vw;
  padding: 2rem;
  border: .2rem solid white;
  margin: 0 auto;
  z-index: 402;
  color: white;
}

.error_mensaje {
  width: 60%;
  height: 60vh;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: left;
  position: relative;
  top: 12vh;
  text-transform: uppercase;
  z-index: 402;
  text-align: left;
}

.error_mensaje h1, .error_mensaje h3 {
  font-family: 'Roboto Mono', monospace;
  font-style: normal;
  line-height: 3rem;
  font-size: 2.2rem;
  color: white;
}

.error_mensaje a, .error_mensaje a:hover, .error_mensaje a:link {
  cursor: pointer;
  color: white;
  background-color: none !important;
  font-size: 2rem;
  text-decoration: underline;
}

.julia {
  width: auto;
  margin: 0 auto;
  position: fixed;
  text-align: right;
  bottom: 4vh;
  right: 7vw;
  text-transform: uppercase;
  z-index: 402;
}

.julia h1 {
  color: black;
  font-family: 'VCR';
  font-size: 2rem;
  text-shadow: -3px 0 #f713d5;
}

.galeria-grid {
  width: 66vw;
  position: relative;
  -ms-grid-column-align: center;
  justify-items: center;
  align-items: center;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 1fr;
  grid-template-columns: 1fr 1fr;
  -ms-grid-rows: auto auto;
  grid-template-rows: auto auto;
  grid-column-gap: 2.4rem;
  grid-row-gap: 2.4rem;
  margin: 0 auto 2rem;
  overscroll-behavior: none;
}

.galeria-grid img {
  width: 100%;
  display: block;
  opacity: 1;
  transition: opacity 5s;
}

.item-1 {
  grid-column: 1/-1;
}

.item-a {
  grid-column: 1/2;
}

.item-b {
  grid-column: 2/3;
}

.item-films {
  grid-column: 1/-1;
  overscroll-behavior: none;
}

.item-films h3 {
  margin: 0rem 0rem 0rem;
  text-align: left;
}
.genre {
    font-size: 1.1rem;
}
.item-films p {
  margin: 0 0 1rem;
  text-align: left;
}
.text_off_1  { height: 36vh; }
.text_off_1 .scroll { height: 38vh; }

.overlay {
  background: rgba(255, 255, 255, 0.95);
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: -200%;
  left: 0;
  z-index: 400;
  -webkit-transform: translate3d(0,0,0);
}

.overlay .content-overlay {
  width: auto;
  height: auto;
  margin: auto;
  max-width: 90vw;
  display: flex;
  flex-direction: column;
  justify-content: end;
  position: relative;
}

.overlay img {
  opacity: 0;
  scale: .8;
}

.overlay:target {
  top: 0;
  left: 0;
  outline: none;
  cursor: default;
  overflow: scroll;
}

.overlay:target img {
  width: auto;
  height: auto;
  max-width: 100vw;
  max-height: 80vh;
  -ms-grid-row-align: center;
  align-self: center;
  -o-object-fit: cover;
  object-fit: cover;
  opacity: 1;
  scale: 1;
  transition: opacity .4s, scale .4s;
}

.overlay:target .btn_close, .overlay:target .description {
  opacity: 1;
  transition: opacity .2s;
}

.btn_close, .description {
  opacity: 0;
}

.btn_close {
  width: 30px;
  height: 30px;
  position: absolute;
  top: 0;
  right: -4rem;
  display: block;
}

.x_close {
   width: 20px;
   height: 30px;
   filter: invert(1);
}

.btn_close:visited, .btn_close:link, .btn_close:hover, .btn_close:active {
  color: white;
}

.description {
  background: white;
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 1rem 0;
}

.description p:first-child {
  text-align: left;  
}

.description p:nth-child(2) {
  text-align: right;  
}

.blur-up {
  filter: blur(10px);
  transition: filter .5s;
}

.blur-up.lazyloaded {
  filter: blur(0px);
  transition: filter .5s;
}

iframe {
  margin-bottom: 4rem;
}

.embed-container {
  background-color: black;
  max-width: 100%;
  height: 0;
  position: relative;
  margin-bottom: 02rem;
  padding-bottom: 56.25%;
  overflow: hidden;
}

.embed-container iframe,
.embed-container object,
.embed-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.arrows-ph {
  display: flex;
  position: absolute;
  bottom: 12%;
  right: 8%;
}

.arrows-ph a {
  width: 45px;
  height: 90px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  color: #262626;
  transition: .4s;
}

.arrows-ph a:hover, .arrows-ph a:focus {
  color: #f713d5;
}

.arrows-ph a:first-child {
  border-bottom-left-radius: 90px;
  border-top-left-radius: 90px;
}

.arrows-ph a:last-child {
  border-bottom-right-radius: 90px;
  border-top-right-radius: 90px;
}

#flecha_derecha:hover, #flecha_izquierda:hover {
    fill: #f713d5;
}

.grid_notas {
  width: 60vw;
  margin: auto;
  padding: 0rem 0 2rem;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (minmax(240px, 1fr))[auto-fill];
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  grid-gap: 2.6rem;
  overscroll-behavior: none;
}

.grid_notas .box {
  min-height: 120px;
  height: 136px;
  position: relative;
  padding: 1.4rem 1.2rem;
  border: 2px solid #262626;
  box-shadow: -5px 12px 0 -5px #262626;
  overflow: hidden;
  text-align: left;
  font-weight: bold;
}

.grid_notas .box p {
    margin-block-start: 0;
}

.grid_notas .read {
  position: absolute;
  bottom: 5%;
  right: 10%;
  font-style: italic;
  text-transform: lowercase;
  color: #f713d5;
}

.notas {
  width: 64vw;
  position: relative;
  left: 0;
  right: 0;
  margin: auto;
  bottom: 0;
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Safari */
  /* Konqueror HTML */
  -moz-user-select: none;
  /* Old versions of Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;
}

.wrap {
  width: 92%;
  height: 100%;
  margin: 0;
  overflow: visible;
  text-align: left;
}

.wrap .scroll {
  background-color: white;
  height: 80vh;
  padding: 0 2rem 0 1rem;
  border: none;
  overflow-y: scroll;
  overscroll-behavior: contain;
  scrollbar-color: #f713d5 white !important;
  scrollbar-width: thin;
}

.wrap .scroll h3 {
  background-color: white;
  width: auto;
  padding-bottom: .5rem;
}

.wrap .scroll p:nth-of-type(2) {
  padding-top: 2rem;
}

.wrap .scroll p:last-child {
  margin-bottom: 1rem;
}

.scroll::-webkit-scrollbar {
  width: .25rem;
  max-height: 10px;
}

.scroll::-webkit-scrollbar-track {
  max-height: 10px;
  box-shadow: none;
}

.scroll::-webkit-scrollbar-thumb {
  background-color: #f713d5;
  max-height: 10px;
}

.box {
  background: linear-gradient(90deg, #faf7a9 50%, transparent 50%);
}

.box,
.box:after {
  background-size: 300%;
  background-position: 100%;
  transition: .4s ease-in-out;
}

.box:hover,
.box:hover:after {
  background-position: 0;
}

.arrows {
  display: flex;
  position: absolute;
  bottom: 4%;
  right: -4%;
}

.arrows a {
  width: 45px;
  height: 90px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  color: #262626;
  transition: .4s;
}

.arrows a:hover, .arrows a:focus {
  color: #f713d5;
}

.arrows a:first-child {
  border-bottom-left-radius: 90px;
  border-top-left-radius: 90px;
}

.arrows a:last-child {
  border-bottom-right-radius: 90px;
  border-top-right-radius: 90px;
}

.last-line {
  height: 3.6rem;
  /* exactly three lines */
  text-overflow: ellipsis;
}

/* Grilla Films */

.grid_films {
  width: 60vw;
  margin: auto;
  padding: 0rem 0 2rem;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (minmax(200px, 1fr))[auto-fill];
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-gap: 2.6rem;
}

.grid_films .box_film {
  height: auto;
  position: relative;
  overflow: hidden;
  text-align: left;
}

.grid_films .box_film .afiche_poster img {
  width: 100%;
  -o-object-fit: contain;
  object-fit: contain;
  filter: contrast(97%) brightness(97%);
  transform: scale(1, 1);
  transition: .25s ease;
}

.grid_films .box_film .afiche_poster img:hover {
  filter: contrast(103%) brightness(103%);
  transform: scale(1, 1);
  transition: .25s ease;
}

.grid_films .box_film .afiche_poster + .title_film {
  display: block;
}

.film_detalle { font-size: 1rem;}

/* CONTACT FORM */ 
.mail {
  text-transform: lowercase;
}

.head-form {
  width: 580px;
  margin: auto;
  padding-top: 7rem;
}

.head-form h2, .head-form p {
  font-size: 1.4rem;
  text-align: left;
}

.formulario {
  width: 580px;
  height: 440px;
  margin: 2rem auto;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  border: 2px solid #262626;
  box-shadow: -5px 12px 0 -5px #262626;
  overflow: hidden;
}

.formulario form, .form-group {
  width: 90%;
  height: 100%;
  display: inline-flex;
  flex-direction: column;
  text-align: left;
}

.formulario form label, .form-group label {
  margin-top: 1rem;
}

.formulario form input[type='text'], .form-group input[type='text'] {
  height: 2rem;
  margin-top: 0.11rem;
  padding-left: 1rem;
  font-size: 1em;
  color: #f713d5;
}

.formulario form :-ms-input-placeholder, .form-group :-ms-input-placeholder  {
  color: #f713d5;
}

.formulario form ::placeholder, .form-group ::placeholder {
  color: #f713d5;
}

.formulario form textarea, .form-group textarea {
  resize: none;
  height: 24vh;
  overflow-y: hidden;
  font-size: 1rem;
  color: #f713d5;
}

.formulario form textarea:-ms-input-placeholder, .form-group textarea:-ms-input-placeholder {
  /* WebKit browsers */
  padding: .5rem;
  font-size: 1rem;
  color: #f713d5;
}

.formulario form textarea::placeholder, .form-group::placeholder {
  /* WebKit browsers */
  padding: .5rem;
  font-size: 1rem;
  color: #f713d5;
}

.formulario form #message, .form-group #message {
  padding-left: 10px;
  font-size: 1rem;
}

.formulario form div {
  width: 100%;
  height: auto;
}

.formulario form div button {
  background-color: #f713d5;
  width: 4rem;
  height: 2.2rem;
  color: white;
  text-align: center;
}
.button button {
    text-align: center;
}
.boton {
    margin-top: 1rem;
    text-align: right;   
}

.form-captcha {
    padding-top: 1rem;
}

.grecaptcha-badge { visibility: hidden; }
.condiciones p , .condiciones a {color: grey !important; font-size: 0.6rem !important; }

/**/

.item-1, .item-a, .item-b, .box_film, .circle {
    opacity: 0;
    visibility: hidden
}

.no-animate {
    animation: animateY 1.1s ease forwards !important;
}
.animate {
    transform: translateY(-12px);
    animation: animateY .8s ease forwards;
    transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1); 
}

@keyframes animateY {
    0% { transform: translateY(12px); visibility: hidden; opacity: 0; }
    52% { opacity: 0; }
    100% { transform: translateY(0px); visibility: visible; opacity: 1;}
}

/**/

.glitch {
  position: relative;
  color: #262626;
  /* Animation provies a slight random skew. Check bottom of doc
	for more information on how to random skew. */
  animation: glitch-skew 1s infinite linear alternate;
}

.glitch::before {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  left: 2px;
  text-shadow: -1px 0 #f713d5;
  /* Creates an initial clip for our glitch. This works in
	a typical top,right,bottom,left fashion and creates a mask
	to only show a certain part of the glitch at a time. */
  clip: rect(44px, 450px, 56px, 0);
  /* Runs our glitch-anim defined below to run in a 5s loop, infinitely,
	with an alternating animation to keep things fresh. */
  animation: glitch-anim 5s infinite linear alternate-reverse;
}

.glitch::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  left: -2px;
  text-shadow: -2px 0 #faf7a9, 2px 2px #f713d5;
  animation: glitch-anim2 1s infinite ease-in-out alternate-reverse;
}

/* Creates an animation with 20 steaps. For each step, it calculates 
  a percentage for the specific step. It then generates a random clip
  box to be used for the random glitch effect. Also adds a very subtle
  skew to change the 'thickness' of the glitch.*/
@keyframes glitch-anim {
  0% {
    clip: rect(15px, 9999px, 3px, 0);
    transform: skew(0.05deg);
  }
  5% {
    clip: rect(58px, 9999px, 39px, 0);
    transform: skew(0.49deg);
  }
  10% {
    clip: rect(31px, 9999px, 67px, 0);
    transform: skew(0.44deg);
  }
  15% {
    clip: rect(4px, 9999px, 96px, 0);
    transform: skew(0.88deg);
  }
  20% {
    clip: rect(95px, 9999px, 78px, 0);
    transform: skew(0.87deg);
  }
  25% {
    clip: rect(90px, 9999px, 93px, 0);
    transform: skew(0.92deg);
  }
  30% {
    clip: rect(51px, 9999px, 38px, 0);
    transform: skew(0.84deg);
  }
  35% {
    clip: rect(42px, 9999px, 22px, 0);
    transform: skew(0.85deg);
  }
  40% {
    clip: rect(90px, 9999px, 80px, 0);
    transform: skew(0.59deg);
  }
  45% {
    clip: rect(1px, 9999px, 86px, 0);
    transform: skew(0.58deg);
  }
  50% {
    clip: rect(34px, 9999px, 64px, 0);
    transform: skew(0.04deg);
  }
  55% {
    clip: rect(65px, 9999px, 68px, 0);
    transform: skew(0.32deg);
  }
  60% {
    clip: rect(73px, 9999px, 78px, 0);
    transform: skew(0.24deg);
  }
  65% {
    clip: rect(79px, 9999px, 62px, 0);
    transform: skew(0.08deg);
  }
  70% {
    clip: rect(42px, 9999px, 98px, 0);
    transform: skew(0.62deg);
  }
  75% {
    clip: rect(65px, 9999px, 56px, 0);
    transform: skew(0.25deg);
  }
  80% {
    clip: rect(72px, 9999px, 73px, 0);
    transform: skew(0.6deg);
  }
  85% {
    clip: rect(56px, 9999px, 87px, 0);
    transform: skew(0.16deg);
  }
  90% {
    clip: rect(22px, 9999px, 93px, 0);
    transform: skew(0.23deg);
  }
  95% {
    clip: rect(84px, 9999px, 80px, 0);
    transform: skew(0.75deg);
  }
  100% {
    clip: rect(28px, 9999px, 90px, 0);
    transform: skew(0.51deg);
  }
}

@keyframes glitch-anim2 {
  0% {
    clip: rect(78px, 9999px, 43px, 0);
    transform: skew(0.82deg);
  }
  5% {
    clip: rect(46px, 9999px, 8px, 0);
    transform: skew(0.86deg);
  }
  10% {
    clip: rect(68px, 9999px, 87px, 0);
    transform: skew(0.7deg);
  }
  15% {
    clip: rect(10px, 9999px, 21px, 0);
    transform: skew(0.89deg);
  }
  20% {
    clip: rect(42px, 9999px, 72px, 0);
    transform: skew(0.64deg);
  }
  25% {
    clip: rect(91px, 9999px, 85px, 0);
    transform: skew(0.56deg);
  }
  30% {
    clip: rect(64px, 9999px, 54px, 0);
    transform: skew(0.26deg);
  }
  35% {
    clip: rect(57px, 9999px, 98px, 0);
    transform: skew(0.37deg);
  }
  40% {
    clip: rect(59px, 9999px, 67px, 0);
    transform: skew(0.11deg);
  }
  45% {
    clip: rect(74px, 9999px, 76px, 0);
    transform: skew(0.37deg);
  }
  50% {
    clip: rect(15px, 9999px, 21px, 0);
    transform: skew(0.39deg);
  }
  55% {
    clip: rect(30px, 9999px, 11px, 0);
    transform: skew(0.62deg);
  }
  60% {
    clip: rect(41px, 9999px, 84px, 0);
    transform: skew(0.79deg);
  }
  65% {
    clip: rect(13px, 9999px, 49px, 0);
    transform: skew(0.77deg);
  }
  70% {
    clip: rect(82px, 9999px, 77px, 0);
    transform: skew(0.69deg);
  }
  75% {
    clip: rect(8px, 9999px, 56px, 0);
    transform: skew(0.84deg);
  }
  80% {
    clip: rect(90px, 9999px, 91px, 0);
    transform: skew(0.95deg);
  }
  85% {
    clip: rect(72px, 9999px, 17px, 0);
    transform: skew(0.6deg);
  }
  90% {
    clip: rect(98px, 9999px, 74px, 0);
    transform: skew(0.03deg);
  }
  95% {
    clip: rect(100px, 9999px, 64px, 0);
    transform: skew(0.51deg);
  }
  100% {
    clip: rect(85px, 9999px, 36px, 0);
    transform: skew(0.95deg);
  }
}

@keyframes glitch-skew {
  0% {
    transform: skew(1deg);
  }
  10% {
    transform: skew(1deg);
  }
  20% {
    transform: skew(5deg);
  }
  30% {
    transform: skew(-1deg);
  }g
  40% {
    transform: skew(-4deg);
  }
  50% {
    transform: skew(-2deg);
  }
  60% {
    transform: skew(2deg);
  }
  70% {
    transform: skew(0deg);
  }
  80% {
    transform: skew(-3deg);
  }
  90% {
    transform: skew(0deg);
  }
  100% {
    transform: skew(-2deg);
  }
}