@font-face{
    font-family: 'TT2020 Style B';
    src: url("https://cdn-eu.shinzan.hu/font/tt2020/TT2020StyleB-Regular.woff2") format('woff2');
}
@font-face{
    font-family: 'TT2020 Style D';
    src: url("https://cdn-eu.shinzan.hu/font/tt2020/TT2020StyleD-Regular.woff2") format('woff2');
}
@font-face{
    font-family: 'TT2020 Style F';
    src: url("https://cdn-eu.shinzan.hu/font/tt2020/TT2020StyleF-Regular.woff2") format('woff2');
}
@font-face{
    font-family: 'TT2020 Style G';
    src: url("https://cdn-eu.shinzan.hu/font/tt2020/TT2020StyleG-Regular.woff2") format('woff2');
}
*{
    margin: 0;
    padding: 0;
}
body{
    width: 100vw;
    height: 100vh;
    background-image: url('https://cdn-eu.shinzan.hu/nha/53.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 100%;
    background-blend-mode: difference;
    background-color: rgb(19, 71, 68);
    color: white;
    animation: flicker 16.6s linear infinite;
}
body:after{
    content:"";
    background-image: url("https://cdn-eu.shinzan.hu/noise.png");
    height: 800%;
    width: 800%;
    position: fixed;
    opacity:0.1;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    animation: animateGrain 4s steps(5) infinite;
    pointer-events: none;
}
.flex-container{
  display: flex;
}
.dossier{
  width: 150px;
  height: 140px;
  position: absolute;
  top: 25px;
  right: 25px;
}
.cycle-bg{
  background-image: url('https://cdn-eu.shinzan.hu/nha/53.jpg');
}
@keyframes animateGrain{
    0%, 100% { transform:translate(0, 0) }
    0%{transform: translate(-60%, -50%)}
    10%{
      transform:translate(-40%,-20%)
    }
    20%{
      transform:translate(-60%, -50%)
    }
    30%{
      transform:translate(-40%,-20%)
    }
    40%{
      transform:translate(-60%, -40%)
    }
    
    50%{
      transform:translate(-40%,-20%)
    }
    60%{
      transform:translate(-30%, -40%)
    }
    70%{
      transform:translate(-40%,-20%)
    }
    80%{
      transform:translate(-60%, -60%)
    }
    90%{
      transform:translate(-40%,-20%)
    }
    100%{
      transform:translate(-30%,-40%)
    }
   
  }
  @keyframes blurry {
	0% {filter: blur(1px);}
	14% {filter: blur(1px);}
	16% {filter: blur(3px);}
	18% {filter: blur(1px);}
	48% {filter: blur(1px);}
	50% {filter: blur(2px);}
	51% {filter: blur(1px);}
	52% {filter: blur(3px);}
	53% {filter: blur(1px);}
	76% {filter: blur(1px);}
	78% {filter: blur(4px);}
	80% {filter: blur(1px);}
	100% {filter: blur(1px);}
}
@keyframes flicker {
	0% {opacity:1.0;}
	14% {opacity:1.0;}
	14.5% {opacity:0.9;}
	15% {opacity:1.0;}
	47% {opacity:1.0;}
	47.5% {opacity:0.8;}
	48% {opacity:0.9;}
	48.5% {opacity:0.7;}
	49% {opacity:1.0;}
	76% {opacity:1.0;}
	76.5% {opacity:0.8;}
	77% {opacity:1.0;}
	100% {opacity:1.0;}
}
#info{
    font-family: 'Fira Code', monospace;
    padding: 10vh;
    width: 30%;
    min-width: 750px;
    height: 75vh;
    line-height: 1.45;
    overflow: scroll;
    scrollbar-width: none;
    transform: rotate(-0.99deg);
}
.hide-scrollbar{
  scrollbar-width: none;
  -ms-overflow-style: -ms-autohiding-scrollbar;
}
.hide-scrollbar::-webkit-scrollbar{
  display: none;
  -webkit-appearance: none;
  width: 0;
  height: 0;
}
h2{
    font-size: 4rem;
    font-family: 'TT2020 Style B', monospace;
    padding: 1rem;
    margin-top: 1.2rem;
    border-width: thin;
    border-top: solid;
    border-bottom: solid;
    text-align: center;
    text-shadow: 20px #fff;
    filter: none;
    animation: blurry 120s ease-in-out infinite;
}
h4{
    text-align: normal;
}
h4:hover::before{
  content:"* ";
  margin-left: -1.24rem;
}
p{
    margin-top: 1vh;
    margin-bottom: 4vh;
}
#info a{
  /* color: rgb(62, 250, 212); */
  color: white;
  text-decoration: none;
}
#info a:hover{
  color: rgb(62, 250, 212);
  animation: blurry 10s ease-in-out infinite;
}
.redacted{
    color: white;
    font-family: 'TT2020 Style B', monospace;
    font-size: 1.3rem;
    background-color: black;
    padding: 4px;
}
.redacted2{
    color: white;
    font-family: 'TT2020 Style B', monospace;
    font-size: 1.3rem;
    background-color: black;
    padding: 4px;
}
.redacted-true{
  color: black;
}
#logo{
    text-align: center;
    animation: blurry 120s ease-in-out infinite;
}
.blurry-full{
    animation: blurry 120s ease-in-out infinite;
}
.blurry-fast{
    animation: blurry 10s ease-in-out infinite;
}
.blur{
    filter: blur(1px);
}
/* .blur-less{
    filter: blur(0.5px);
} */
.stripe{
    border-top: solid;
    border-width: 0.5px;
    width: 50%;
    margin-bottom: 10px;
}
#letter{
  filter: blur(1px);
}
#letter h5{
  font-family: 'TT2020 Style D', monospace;
  font-size: 1.2rem;
}
#letter h3{
  font-family: 'TT2020 Style D', monospace;
  font-size: 1.6rem;
}
@media (max-width: 950px){
  body{
    background-position: 0;

  }
  .dossier{
    width: 75px;
    height: 75px;
    top:auto;
    bottom: 20px;
  }
  #info{
    margin: 0 auto;
    padding: 5vw;
    transform: rotate(0deg);
    width: 80vw;
    min-width: 0px;
  }
}