.fade-out {
-webkit-animation: fade-out 1s ease-out both;
animation: fade-out 1s ease-out both;
 }

 .shake-horizontal {
-webkit-animation: shake-horizontal 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
animation: shake-horizontal 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
 }

 .form-contact input[type=text]::placeholder {
color: red;
 }

 .fade-in-fwd {
-webkit-animation: fade-in-fwd 800ms steps(1, start) 3s both;
animation: fade-in-fwd 800ms steps(1, start) 3.5s both;
 }

 /* ----------------------------------------------
* Generated by Animista on 2023-1-23 17:16:51
* Licensed under FreeBSD License.
* See http://animista.net/license for more info.
* w: http://animista.net, t: @cssanimista
* ---------------------------------------------- */

 /**
* ----------------------------------------
* animation fade-in-fwd
* ----------------------------------------
*/
 @-webkit-keyframes fade-in-fwd {
0% {
     -webkit-transform: translateZ(-80px);
     transform: translateZ(-80px);
     opacity: 0;
}
100% {
     -webkit-transform: translateZ(0);
     transform: translateZ(0);
     opacity: 1;
}
 }
 @keyframes fade-in-fwd {
0% {
     -webkit-transform: translateZ(-80px);
     transform: translateZ(-80px);
     opacity: 0;
}
100% {
     -webkit-transform: translateZ(0);
     transform: translateZ(0);
     opacity: 1;
}
 }

 /* ----------------------------------------------
* Generated by Animista on 2023-2-10 23:46:14
* Licensed under FreeBSD License.
* See http://animista.net/license for more info.
* w: http://animista.net, t: @cssanimista
* ---------------------------------------------- */

 /**
* ----------------------------------------
* animation shake-horizontal
* ----------------------------------------
*/
 @-webkit-keyframes shake-horizontal {
0%,
100% {
     -webkit-transform: translateX(0);
     transform: translateX(0);
}
10%,
30%,
50%,
70% {
     -webkit-transform: translateX(-10px);
     transform: translateX(-10px);
}
20%,
40%,
60% {
     -webkit-transform: translateX(10px);
     transform: translateX(10px);
}
80% {
     -webkit-transform: translateX(8px);
     transform: translateX(8px);
}
90% {
     -webkit-transform: translateX(-8px);
     transform: translateX(-8px);
}
 }
 @keyframes shake-horizontal {
0%,
100% {
     -webkit-transform: translateX(0);
     transform: translateX(0);
}
10%,
30%,
50%,
70% {
     -webkit-transform: translateX(-10px);
     transform: translateX(-10px);
}
20%,
40%,
60% {
     -webkit-transform: translateX(10px);
     transform: translateX(10px);
}
80% {
     -webkit-transform: translateX(8px);
     transform: translateX(8px);
}
90% {
     -webkit-transform: translateX(-8px);
     transform: translateX(-8px);
}
 }

 /* ----------------------------------------------
* Generated by Animista on 2023-2-11 3:36:27
* Licensed under FreeBSD License.
* See http://animista.net/license for more info.
* w: http://animista.net, t: @cssanimista
* ---------------------------------------------- */

 /**
* ----------------------------------------
* animation fade-out
* ----------------------------------------
*/
 @-webkit-keyframes fade-out {
0% {
     opacity: 1;
}
100% {
     opacity: 0;
}
 }
 @keyframes fade-out {
0% {
     opacity: 1;
}
100% {
     opacity: 0;
}
 }

 #app {
   background: #000;
   height: 100vh;
   width: 100%;
   margin: 0;
   padding: 0;
   position: relative;
   z-index: 1;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   background-size: cover;
   background-position: center;
 }

 .glitch {
   position: relative;
   color: #B9B9BF;
   animation: glitch-skew 1s infinite linear alternate-reverse;
 }
 .glitch::before {
   content: attr(data-text);
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   left: 2px;
   text-shadow: -2px 0 #ff00c1;
   clip: rect(44px, 450px, 56px, 0);
   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 #ff00c1, 2px 2px #ff00c1;
   clip: rect(44px, 450px, 56px, 0);
   animation: glitch-anim2 5s infinite linear alternate-reverse;
 }

 @keyframes glitch-anim {
   0% {
     clip: rect(77px, 9999px, 81px, 0);
     transform: skew(0.04deg);
   }
   5% {
     clip: rect(58px, 9999px, 47px, 0);
     transform: skew(0.3deg);
   }
   10% {
     clip: rect(25px, 9999px, 61px, 0);
     transform: skew(0.31deg);
   }
   15% {
     clip: rect(1px, 9999px, 20px, 0);
     transform: skew(0.8deg);
   }
   20% {
     clip: rect(77px, 9999px, 72px, 0);
     transform: skew(0.68deg);
   }
   25% {
     clip: rect(73px, 9999px, 2px, 0);
     transform: skew(0.91deg);
   }
   30% {
     clip: rect(95px, 9999px, 67px, 0);
     transform: skew(0.74deg);
   }
   35% {
     clip: rect(38px, 9999px, 77px, 0);
     transform: skew(0.67deg);
   }
   40% {
     clip: rect(20px, 9999px, 49px, 0);
     transform: skew(0.53deg);
   }
   45% {
     clip: rect(96px, 9999px, 29px, 0);
     transform: skew(0.48deg);
   }
   50% {
     clip: rect(68px, 9999px, 13px, 0);
     transform: skew(0.06deg);
   }
   55% {
     clip: rect(99px, 9999px, 65px, 0);
     transform: skew(0.34deg);
   }
   60% {
     clip: rect(10px, 9999px, 97px, 0);
     transform: skew(0.65deg);
   }
   65% {
     clip: rect(30px, 9999px, 57px, 0);
     transform: skew(0.52deg);
   }
   70% {
     clip: rect(72px, 9999px, 27px, 0);
     transform: skew(0.76deg);
   }
   75% {
     clip: rect(37px, 9999px, 12px, 0);
     transform: skew(0.1deg);
   }
   80% {
     clip: rect(50px, 9999px, 86px, 0);
     transform: skew(0.21deg);
   }
   85% {
     clip: rect(26px, 9999px, 54px, 0);
     transform: skew(0.91deg);
   }
   90% {
     clip: rect(61px, 9999px, 79px, 0);
     transform: skew(0.73deg);
   }
   95% {
     clip: rect(17px, 9999px, 48px, 0);
     transform: skew(0.57deg);
   }
 }
 @keyframes glitch-anim2 {
   0% {
     clip: rect(75px, 9999px, 43px, 0);
     transform: skew(0.41deg);
   }
   5% {
     clip: rect(6px, 9999px, 51px, 0);
     transform: skew(0.57deg);
   }
   10% {
     clip: rect(20px, 9999px, 36px, 0);
     transform: skew(0.42deg);
   }
   15% {
     clip: rect(58px, 9999px, 60px, 0);
     transform: skew(0.59deg);
   }
   20% {
     clip: rect(86px, 9999px, 3px, 0);
     transform: skew(0.53deg);
   }
   25% {
     clip: rect(50px, 9999px, 47px, 0);
     transform: skew(0.12deg);
   }
   30% {
     clip: rect(90px, 9999px, 28px, 0);
     transform: skew(0.32deg);
   }
   35% {
     clip: rect(28px, 9999px, 14px, 0);
     transform: skew(0.56deg);
   }
   40% {
     clip: rect(12px, 9999px, 35px, 0);
     transform: skew(0.53deg);
   }
   45% {
     clip: rect(95px, 9999px, 12px, 0);
     transform: skew(0.78deg);
   }
   50% {
     clip: rect(69px, 9999px, 86px, 0);
     transform: skew(0.75deg);
   }
   55% {
     clip: rect(60px, 9999px, 57px, 0);
     transform: skew(0.2deg);
   }
   60% {
     clip: rect(14px, 9999px, 32px, 0);
     transform: skew(0.17deg);
   }
   65% {
     clip: rect(22px, 9999px, 7px, 0);
     transform: skew(0.09deg);
   }
   70% {
     clip: rect(17px, 9999px, 75px, 0);
     transform: skew(0.87deg);
   }
   75% {
     clip: rect(39px, 9999px, 57px, 0);
     transform: skew(0.94deg);
   }
   80% {
     clip: rect(61px, 9999px, 77px, 0);
     transform: skew(0.72deg);
   }
   85% {
     clip: rect(86px, 9999px, 69px, 0);
     transform: skew(0.69deg);
   }
   90% {
     clip: rect(73px, 9999px, 52px, 0);
     transform: skew(0.11deg);
   }
   95% {
     clip: rect(77px, 9999px, 82px, 0);
     transform: skew(0.12deg);
   }
 }
 @keyframes glitch-skew {
   0% {
     transform: skew(-4deg);
   }
   10% {
     transform: skew(2deg);
   }
   20% {
     transform: skew(0deg);
   }
   30% {
     transform: skew(-3deg);
   }
   40% {
     transform: skew(5deg);
   }
   50% {
     transform: skew(2deg);
   }
   60% {
     transform: skew(0deg);
   }
   70% {
     transform: skew(-1deg);
   }
   80% {
     transform: skew(1deg);
   }
   90% {
     transform: skew(1deg);
   }
 }

 /*
 * CSS Credits:
 *  the starting point http://js13kgames.com/entries/lost-in-cyberspace
 *  flicker animation taken from http://goonhub.com/secret
 *  scanlines based on https://blog.carbonfive.com/2015/01/07/vintage-terminal-effect-in-css3/
 *  noise solution based on Temani Afif https://codepen.io/t_afif/pen/RwyqLKZ
 */

.terminal img[src*="blob:"],
.terminal video {
    max-width: 100%;
}
/* glow */
.terminal {
    text-shadow: 0 0.2rem 1rem #0c7b46;
}
:root {
    --background: #031e11;
}
@media (min-width: 800px) {
    :root {
        --size: 1.2;
    }
}
@media (min-width: 1200px) {
    :root {
        --size: 1.5;
    }
}
/* to see yourself like in a mirror */
.self {
    transform: scale(-1, 1);
}
.flicker {
    position: absolute;
    top: 100px;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgba(18, 16, 16, 0.2);
    opacity: 0;
    z-index: 1000;
    pointer-events: none;
    animation: flicker 0.12s infinite;
}
@keyframes flicker {
    0% {
        opacity: 0.552;
    }
    5% {
        opacity: 0.48287;
    }
    10% {
        opacity: 0.59134;
    }
    15.0% {
        opacity: 0.79543;
    }
    20% {
        opacity: 0.75134;
    }
    25% {
        opacity: 0.1956;
    }
    30.0% {
        opacity: 0.90687;
    }
    35% {
        opacity: 0.122;
    }
    40% {
        opacity: 0.62254;
    }
    45% {
        opacity: 0.56977;
    }
    50% {
        opacity: 0.9925;
    }
    55.0% {
        opacity: 0.55487;
    }
    60.0% {
        opacity: 0.16607;
    }
    65% {
        opacity: 0.12353;
    }
    70% {
        opacity: 0.2214;
    }
    75% {
        opacity: 0.67908;
    }
    80% {
        opacity: 0.97163;
    }
    85.0% {
        opacity: 0.1275;
    }
    90% {
        opacity: 0.37186;
    }
    95% {
        opacity: 0.24475;
    }
    100% {
        opacity: 0.37221;
    }
}
.scanlines {
    top: 100px;
    left: 0;
    height: 80%;
    width: 100%;
    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0),
        rgba(255, 255, 255, 0) 50%,
        rgba(0, 0, 0, 0.2) 70%,
        rgba(0, 0, 0, 0.6)
    );
    background-size: 100% 0.3rem;
    position: absolute;
    pointer-events: none;
}
.scanlines:before {
    position: absolute;
    width: 100%;
    height: 10px;
    background: #fff;
    background: linear-gradient(
        to bottom,
        rgba(255, 0, 0, 0) 0%,
        rgba(255, 250, 250, 1) 50%,
        rgba(255, 255, 255, 0.98) 51%,
        rgba(255, 0, 0, 0) 100%
    ); /* W3C */
    opacity: 0.1;
}
.scanlines:after {
    box-shadow: 0 2px 6px rgba(25, 25, 25, 0.2),
        inset 0 1px rgba(50, 50, 50, 0.1), inset 0 3px rgba(50, 50, 50, 0.05),
        inset 0 3px 8px rgba(64, 64, 64, 0.05),
        inset 0 -5px 10px rgba(25, 25, 25, 0.1);
}
#terminal:focus-within ~ .scanlines:before {
    content: "";
    display: block;
    animation: vline calc(var(--time, 2) * 1s) linear infinite;
}
/*
 * MS Edge don't support focus-within and css vars
 * inside pseudo selector
 */
@supports (-ms-ime-align: auto) {
    .scanlines:before {
        content: "";
        animation: vline 3s linear infinite;
    }
}
@keyframes vline {
    to {
        transform: translate(0, 100vh);
    }
}
/* turn off animation */
.tv {
    position: relative;
}
.tv.collapse {
    animation: size 2s ease-out;
    animation-fill-mode: forwards;
}
.tv.collapse:before {
    content: "";
    display: block;
    height: 80%;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    background: white;
    z-index: 1;
    opacity: 0;
    animation: opacity 2s ease-out;
    animation-fill-mode: forwards;
}

@keyframes opacity {
    to {
        opacity: 1;
    }
}
@keyframes size {
    50% {
        transform: scaleX(calc(1 / var(--width)));
        opacity: 1;
    }
    98% {
        transform: scaleX(calc(1 / var(--width)))
            scaleY(calc(1 / var(--height)));
        opacity: 1;
    }
    100% {
        transform: scaleX(calc(1 / var(--width)))
            scaleY(calc(1 / var(--height)));
        opacity: 0;
    }
}
#terminal {
    padding-bottom: 36px;
}
.collection {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 10px;
}
.noise {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 2000;
    opacity: 0.05;
    pointer-events: none;
    background: repeating-radial-gradient(#000 0 0.0001%, #fff 0 0.0002%) 50% 0/2500px
            2500px,
        repeating-conic-gradient(#000 0 0.0001%, #fff 0 0.0002%) 50% 50%/2500px
            2500px;
    background-blend-mode: difference;
    animation: shift 0.2s infinite alternate;
}
@keyframes shift {
    100% {
        background-position: 50% 0, 50% 60%;
    }
}
@media (prefers-reduced-motion) {
    .flicker,
    .scanlines:before {
        animation: none !important;
    }
}