@charset "utf-8";

@import url('https://use.fontawesome.com/releases/v5.6.1/css/all.css');

@import url('https://use.fontawesome.com/releases/v5.15.4/css/all.css');

@import url('https://use.fontawesome.com/releases/v6.4.0/css/all.css');

@import url('https://fonts.googleapis.com/css2?family=DotGothic16&display=swap');

@font-face { font-family: mame; src: url("https://dl.dropboxusercontent.com/s/lsf1ghjzundlxd5/Mamelon-3-Hi-Regular.ttf?dl=0") format("woff"); }

@font-face { font-family: hff; src:
  url("https://dl.dropboxusercontent.com/s/uv6aw8v8i82nb8m/HFFFloralStencil.woff") format("woff"); }

@font-face { font-family: cre; src: url("https://dl.dropboxusercontent.com/s/01o2e43eixyq2to/crayon_1-1.woff") format("woff"); }

@font-face { font-family: kei; src:
  url("https://dl.dropboxusercontent.com/s/ee13dokj9t69hxprbj4wn/keifont.ttf?rlkey=0hwvbbrp2fh9tujg238zeb99r") format("woff"); }

@font-face { font-family: zidou; src: url("https://dl.dropboxusercontent.com/s/tiphv99n2x27d7u/zidou.woff") format("woff"); }

@font-face { font-family: yowa; src:
  url("https://dl.dropboxusercontent.com/s/nnb4fw68qohe21wjei7jd/851CHIKARA-YOWAKU_002.ttf?rlkey=o9rxlbv08f75s6zgc84gln3e5") format("woff"); }

@font-face { font-family: tuyo; src:
  url("https://dl.dropboxusercontent.com/s/muqwyuxhvwidgbiknh7rn/851CHIKARA-DZUYOKU_kanaA_004.ttf?rlkey=9kawz74b5nqtbqav32sgj6gmi") format("woff"); }

*{
 font-family: 'DotGothic16', sans-serif;
}
body{
 font-size: 12px;
 background: #009933;
 font-family: 'DotGothic16', sans-serif;
}

a {
 margin: 0;
 padding: 0;
 text-decoration:none;
}

hr{
 height: 0;
 margin: 0;
 padding: 0;
 border: none;
}

#container {
  position: relative;
}

#container::before,
#container::after {
  color: transparent;
}

#container {
 color: transparent;
} 

a[href*="/dm?"] {
 font-size: 0;
}

a[href*="/dm?"]::before{
 font-family: 'Font Awesome 6 Free';
 content:'\f2ed';
 color: #ced1d3;
 padding: 3px auto;
}

a[href*="/dt"] {
 font-size: 0;
}

a[href*="/dt"]::before{
 font-family: 'Font Awesome 6 Free';
 content:'\f2ed';
 color: #ced1d3;
 padding: 3px auto;
}

a[href*="/um?"] {
 font-size: 0;
}

a[href*="/um?"]::before {
 font-family: 'Font Awesome 6 Free';
 content: '\f044';
 color: #ced1d3;
 padding: 3px auto;
}

a[href*="/cp?"] {
 font-size: 0;
}

a[href*="/cp?"]::before {
 font-family: 'Font Awesome 6 Free';
 content: "\f24d";
 color: #ced1d3;
 padding: 3px auto;
}

/*タイトル*/

.h2 {
 margin: 20px;
 font-size: 40px;
 font-family: kei;
 font-weight: bold;
 text-shadow:
       3px 3px 0 #fff,
     -1px -1px 0 #fff,  
      1px -1px 0 #fff,
      -1px 1px 0 #fff,
       1px 1px 0 #fff;
 animation:niji 3s infinite;
}

@keyframes niji {
   12%{color:#ff5353;}
    24%{color:#ffcf53;}
    36%{color:#e8ff53;}
    48%{color:#53ff5d;}
    60%{color:#53ffbc;}
    72%{color:#5393ff;}
    84%{color:#ca53ff;}
    100%{color:#ff53bd;}
}

.obi {
 overflow: hidden;
 background: white;
 margin: 0 calc(50% - 50vw);
 width: 100vw;
}

.obi p {
 color: black;
 animation: y 8s linear infinite;
 transform: translateX(100%);
}

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

.hon {
 width: 90%;
 margin: 0;
}

.hon p {
 color: white;
}

.bp {
 color: white;
 
}

/*本文*/

.tt{
 width: 85%;
 border: 3px #d3d3d3;
 border-style: ridge;
 background: #fff;
 margin: 0 auto;
 box-shadow: 20px 20px 36px -27px #000000;
}

.tt .ti{
 margin: 0;
 padding: 0.2em 0.2em;
 background: linear-gradient(90deg, rgba(94,35,60,1) 0%, rgba(140,70,100,1) 77%);
 border-bottom-style: ridge;
 color: #FFF;
 font-family: 'DotGothic16', sans-serif;
 text-align: left;
 border-bottom: solid 3px #d3d3d3;
 display: flex;
 justify-content: space-between;
}

.tt p{
 text-align: justify;
 font-weight: bold;
 padding: 1em 2em;
 letter-spacing: 0.15em;
 line-height: 1.5;
 font-family: 'DotGothic16', sans-serif;
 background: #fff;
 font-size:12px;
 color: black;
}

.kg{
 width: 85%;
 border: 3px #d3d3d3;
 border-style: ridge;
 background: #fff;
 margin: 0 auto;
 box-shadow: 20px 20px 36px -27px #000000;
}

.kg .ti{
 margin: 0;
 background: linear-gradient(90deg, rgba(57,136,85,1) 0%, rgba(110,180,135,1) 77%);
 border-bottom-style: ridge;
 color: #FFF;
 font-family: 'DotGothic16', sans-serif;
 text-align: left;
 border-bottom: solid 3px #d3d3d3;
 display: flex;
 justify-content: space-between;
}

.kg p{
 text-align: justify;
 font-weight: bold;
 padding: 1em 2em;
 letter-spacing: 0.15em;
 line-height: 1.5;
 font-family: 'DotGothic16', sans-serif;
 background: #fff;
 font-size:12px;
 color: black;
}

.ra{
 width: 85%;
 border: 3px #d3d3d3;
 border-style: ridge;
 background: #fff;
 margin: 0 auto;
 box-shadow: 20px 20px 36px -27px #000000;
}

.ra .ti{
 margin: 0;
 padding: 0.2em 0.2em;
 background: linear-gradient(90deg, rgba(183,29,111,1) 0%, rgba(216,54,141,1) 77%);
 border-bottom-style: ridge;
 color: #FFF;
 font-family: 'DotGothic16', sans-serif;
 text-align: left;
 border-bottom: solid 3px #d3d3d3;
 display: flex;
 justify-content: space-between;
}

.ra p{
 text-align: justify;
 font-weight: bold;
 padding: 1em 2em;
 letter-spacing: 0.15em;
 line-height: 1.5;
 font-family: 'DotGothic16', sans-serif;
 background: #fff;
 font-size:12px;
 color: black;
}

.rrm{
 width: 85%;
 border: 3px #d3d3d3;
 border-style: ridge;
 background: #fff;
 margin: 0 auto;
 box-shadow: 20px 20px 36px -27px #000000;
}

.rrm .ti{
 margin: 0;
 background: linear-gradient(90deg, rgba(192,67,102,1) 0%, rgba(239,111,148,1) 77%);
 border-bottom-style: ridge;
 color: #FFF;
 font-family: 'DotGothic16', sans-serif;
 text-align: left;
 border-bottom: solid 3px #d3d3d3;
 display: flex;
 justify-content: space-between;
}

.rrm p{
 text-align: justify;
 font-weight: bold;
 padding: 1em 2em;
 letter-spacing: 0.15em;
 line-height: 1.5;
 font-family: 'DotGothic16', sans-serif;
 background: #fff;
 font-size:12px;
 color: black;
}

.ran{
 width: 85%;
 border: 3px #d3d3d3;
 border-style: ridge;
 background: #fff;
 margin: 0 auto;
 box-shadow: 20px 20px 36px -27px #000000;
}

.ran .ti{
 margin: 0;
 background: linear-gradient(90deg, rgba(109,57,160,1) 0%, rgba(234,109,57,1) 77%);
 border-bottom-style: ridge;
 color: #FFF;
 font-family: 'DotGothic16', sans-serif;
 text-align: left;
 border-bottom: solid 3px #d3d3d3;
 display: flex;
 justify-content: space-between;
}

.ran p{
 text-align: justify;
 font-weight: bold;
 padding: 1em 2em;
 letter-spacing: 0.15em;
 line-height: 1.5;
 font-family: 'DotGothic16', sans-serif;
 background: #fff;
 font-size:12px;
 color: black;
}

.ky{
 width: 85%;
 border: 3px #d3d3d3;
 border-style: ridge;
 background: #fff;
 margin: 0 auto;
 box-shadow: 20px 20px 36px -27px #000000;
}

.ky .ti{
 margin: 0;
 background: linear-gradient(90deg, rgba(65,71,149,1) 0%, rgba(90,95,170,1) 77%);
 border-bottom-style: ridge;
 color: #FFF;
 font-family: 'DotGothic16', sans-serif;
 text-align: left;
 border-bottom: solid 3px #d3d3d3;
 display: flex;
 justify-content: space-between;
}

.ky p{
 text-align: justify;
 font-weight: bold;
 padding: 1em 2em;
 letter-spacing: 0.15em;
 line-height: 1.5;
 font-family: 'DotGothic16', sans-serif;
 background: #fff;
 font-size:12px;
 color: black;
}

.gk{
 width: 85%;
 border: 3px #d3d3d3;
 border-style: ridge;
 background: #fff;
 margin: 0 auto;
 box-shadow: 20px 20px 36px -27px #000000;
}

.gk .ti{
 margin: 0;
 background: linear-gradient(90deg, rgba(214,133,46,1) 0%, rgba(254,203,91,1) 77%);
 border-bottom-style: ridge;
 color: #FFF;
 font-family: 'DotGothic16', sans-serif;
 text-align: left;
 border-bottom: solid 3px #d3d3d3;
 display: flex;
 justify-content: space-between;
}

.gk p{
 text-align: justify;
 font-weight: bold;
 padding: 1em 2em;
 letter-spacing: 0.15em;
 line-height: 1.5;
 font-family: 'DotGothic16', sans-serif;
 background: #fff;
 font-size:12px;
 color: black;
}

/*乱入用*/

.rt_r{
 width: 85%;
 border: 3px #d3d3d3;
 border-style: ridge;
 background: #fff;
 margin: 0 auto;
 box-shadow: 20px 20px 36px -27px #000000;
}

.rt_r .ti{
 margin: 0;
 padding: 0.2em 0.2em;
 background: linear-gradient(90deg,rgba(250, 195, 30, 1) 0%, rgba(186, 116, 137, 1) 100%);
 border-bottom-style: ridge;
 color: #FFF;
 font-family: 'DotGothic16', sans-serif;
 text-align: left;
 border-bottom: solid 3px #d3d3d3;
 display: flex;
 justify-content: space-between;
}

.rt_r p{
 text-align: justify;
 font-weight: bold;
 padding: 1em 2em;
 letter-spacing: 0.15em;
 line-height: 1.5;
 font-family: 'DotGothic16', sans-serif;
 background: #fff;
 font-size:12px;
 color: black;
}


.rb_r{
 width: 85%;
 border: 3px #d3d3d3;
 border-style: ridge;
 background: #fff;
 margin: 0 auto;
 box-shadow: 20px 20px 36px -27px #000000;
}

.rb_r .ti{
 margin: 0;
 padding: 0.2em 0.2em;
 background: linear-gradient(90deg,rgba(165, 140, 220, 1) 0%, rgba(90, 95, 170, 1) 100%);
 border-bottom-style: ridge;
 color: #FFF;
 font-family: 'DotGothic16', sans-serif;
 text-align: left;
 border-bottom: solid 3px #d3d3d3;
 display: flex;
 justify-content: space-between;
}

.rb_r p{
 text-align: justify;
 font-weight: bold;
 padding: 1em 2em;
 letter-spacing: 0.15em;
 line-height: 1.5;
 font-family: 'DotGothic16', sans-serif;
 background: #fff;
 font-size:12px;
 color: black;
}


.mn_r{
 width: 85%;
 border: 3px #d3d3d3;
 border-style: ridge;
 background: #fff;
 margin: 0 auto;
 box-shadow: 20px 20px 36px -27px #000000;
}

.mn_r .ti{
 margin: 0;
 padding: 0.2em 0.2em;
 background: linear-gradient(90deg,rgba(100, 200, 240, 1) 0%, rgba(90, 95, 170, 1) 100%);
 border-bottom-style: ridge;
 color: #FFF;
 font-family: 'DotGothic16', sans-serif;
 text-align: left;
 border-bottom: solid 3px #d3d3d3;
 display: flex;
 justify-content: space-between;
}

.mn_r p{
 text-align: justify;
 font-weight: bold;
 padding: 1em 2em;
 letter-spacing: 0.15em;
 line-height: 1.5;
 font-family: 'DotGothic16', sans-serif;
 background: #fff;
 font-size:12px;
 color: black;
}

.ky_r{
 width: 85%;
 border: 3px #d3d3d3;
 border-style: ridge;
 background: #fff;
 margin: 0 auto;
 box-shadow: 20px 20px 36px -27px #000000;
}

.ky_r .ti{
 margin: 0;
 padding: 0.2em 0.2em;
 background: linear-gradient(90deg,rgba(90, 95, 170, 1) 0%, rgba(100, 200, 240, 1) 100%);
 border-bottom-style: ridge;
 color: #FFF;
 font-family: 'DotGothic16', sans-serif;
 text-align: left;
 border-bottom: solid 3px #d3d3d3;
 display: flex;
 justify-content: space-between;
}

.ky_r p{
 text-align: justify;
 font-weight: bold;
 padding: 1em 2em;
 letter-spacing: 0.15em;
 line-height: 1.5;
 font-family: 'DotGothic16', sans-serif;
 background: #fff;
 font-size:12px;
 color: black;
}

/*その他*/

.btn{
   display: flex;
   width: 50px;
}

.btn1{
 color: #000000;
 font-size:10px;
 width: 12px;
 height: 12px;
 vertical-align: 10px;
 text-align: center;
 text-decoration: none;
 background: #d3d3d3;
 border: 2px outset #d3d3d3;
}

.btn2{
 color: #000000;
 font-size:10px;
 width: 12px;
 height: 12px;
 vertical-align: 10px;
 text-align: center;
 text-decoration: none;
 background: #d3d3d3;
 border: 2px outset #d3d3d3;
}

.btn3{
 color: #000000;
 font-size:10px;
 width: 12px;
 height: 12px;
 vertical-align: 10px;
 text-align: center;
 text-decoration: none;
 background: #d3d3d3;
 border: 2px outset #d3d3d3;
}

/*ペン*/

nijip {
 background: linear-gradient(to right, #f00 0%, #f80 14.28%, #dd0 28.56%, #0d0 42.85%, #0dd 57.14%, #00f 71.42%, #e0e 85.71%, #f00 100%) 0% center / 200% auto;
	background: -webkit-linear-gradient(left, #f00 0%, #f80 14.28%, #dd0 28.56%, #0d0 42.85%, #0dd 57.14%, #00f 71.42%, #e0e 85.71%, #f00 100%) 0% center / 200% auto;
	background: -o-linear-gradient(right, #f00 0%, #f80 14.28%, #dd0 28.56%, #0d0 42.85%, #0dd 57.14%, #00f 71.42%, #e0e 85.71%, #f00 100%) 0% center / 200% auto;
 -webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	text-fill-color: transparent;
 font-family: kei;
 font-size: 15px;
}

bkp {
 font-size: 20px;
}

chp {
 font-size: 15px;
}

gkp {
 font-family: zidou;
 font-size: 14px;
}

rttp {
 color: #8C4664;
 font-family: zidou;
 font-size: 14px;
}

ttp {
 padding: 0;
 margin: 0;
 color: #8C4664;
}

rtp {
 padding: 0;
 margin: 0;
 color: #FAC31E;
}

rbp {
 padding: 0;
 margin: 0;
 color: #A58CDC;
}

mnp {
 padding: 0;
 margin: 0;
 color: #64C8F0;
}

kyp {
 padding: 0;
 margin: 0;
 color: #5A5FAA;
}

ywp {
 font-family: yowa;
 font-size: 14px;
}

ywp2 {
 font-size: 14px;
 font-family: yowa;
 display: inline-block;
 animation: hurueru 2s infinite;
}

ywp3 {
 font-size: 20px;
 font-family: yowa;
 display: inline-block;
 animation: hurueru 2s infinite;
}

typ {
 font-family: tuyo;
 font-size: 14px;
}

typ2 {
 font-size: 14px;
 margin: 0;
 padding: 0 -2em;
 font-family: tuyo;
 display: inline-block;
 animation: hurueru .2s infinite;
}

typ3 {
 margin: 0;
 padding: 0 -2em;
 font-size: 20px;
 font-family: tuyo;
 display: inline-block;
 animation: hurueru .2s infinite;
}

@keyframes hurueru {
    0% {transform: translate(0px, 0px) rotateZ(0deg)}
    25% {transform: translate(2px, 2px) rotateZ(1deg)}
    50% {transform: translate(0px, 2px) rotateZ(0deg)}
    75% {transform: translate(2px, 0px) rotateZ(-1deg)}
    100% {transform: translate(0px, 0px) rotateZ(0deg)}
}


/*マーカー*/

ttmr {
 padding: 0 2px;
 background: #8C4664;
 color: white;
 line-height: 1.5;
 display: inline-block;
}

wnmr {
 padding: 0 2px;
 background: #FF8C9B;
 color: white;
 line-height: 1.5;
 display: inline-block;
}

rtmr {
 padding: 0 2px;
 background: #FAC31E;
 color: white;
 line-height: 1.5;
 display: inline-block;
}

mnmr {
 padding: 0 2px;
 background: #64C8F0;
 color: white;
 line-height: 1.5;
 display: inline-block;
}

rbmr {
 padding: 0 2px;
 background: #A58CDC;
 color: white;
 line-height: 1.5;
 display: inline-block;
}

kgmr {
 padding: 0 2px;
 background: #6EB487;
 color: white;
 line-height: 1.5;
 display: inline-block;
}

kymr {
 padding: 0 2px;
 background: #5A5FAA;
 color: white;
 line-height: 1.5;
 display: inline-block;
}

rimr {
 padding: 0 2px;
 background: #DCFF50;
 color: white;
 line-height: 1.5;
 display: inline-block;
}

/*乱入マーカー*/

mnmr2 {
 padding: 2px;
 background: linear-gradient(90deg,rgba(100, 200, 240, 1) 0%, rgba(90, 95, 170, 1) 100%);
 color: white;
 line-height: 1.5;
 display: inline-block;
}

rbmr2 {
 padding: 2px;
 background: linear-gradient(90deg,rgba(165, 140, 220, 1) 0%, rgba(90, 95, 170, 1) 100%);
 color: white;
 line-height: 1.5;
 display: inline-block;
}

kymr2 {
 padding: 2px;
 background: linear-gradient(90deg,rgba(90, 95, 170, 1) 0%, rgba(100, 200, 240, 1) 100%);
 color: white;
 line-height: 1.5;
 display: inline-block;
}

/* キーフレームの設定 */

.timer_display {
 font-family: kei;
 background: 
   linear-gradient(rgba(255,0,0,1) 0%, rgba(255,154,0,1) 10%, rgba(208,222,33,1) 20%, rgba(79,220,74,1) 30%, rgba(63,218,216,1) 40%, rgba(47,201,226,1) 50%, rgba(28,127,238,1) 60%, rgba(95,21,242,1) 70%, rgba(186,12,248,1) 80%, rgba(251,7,217,1) 90%, rgba(255,0,0,1) 100%) 
   0 0/100% 200%;
  animation: a 2s linear infinite;
 width: 100%;
 height: 100px;
 display: flex;
 justify-content: center;
 line-height: 100px;
 overflow: hidden;
 font-size: 40px;
 border-radius: 2px;
 text-align: center;
 color: white;
}

@keyframes a {
  to {background-position:0 -200%}
}

@keyframes time {
  0% {transform: translate(0,0px);}
  100%{transform: translate(0,-6000px);}
}

@keyframes flash {
  0% {opacity: 1;}
  100% {opacity: 0;}
}

/* 数字を準備する */
.timer_display::before,
.timer_display::after {
    display: block;
    content:'00\a 01\a 02\a 03\a 04\a 05\a 06\a 07\a 08\a 09\a 10\a 11\a 12\a 13\a 14\a 15\a 16\a 17\a 18\a 19\a 20\a 21\a 22\a 23\a 24\a 25\a 26\a 27\a 28\a 29\a 30\a 31\a 32\a 33\a 34\a 35\a 36\a 37\a 38\a 39\a 40\a 41\a 42\a 43\a 44\a 45\a 46\a 47\a 48\a 49\a 50\a 51\a 52\a 53\a 54\a 55\a 56\a 57\a 58\a 59\a 60\a 61\a 62\a 63\a 64\a 65\a 66\a 67\a 68\a 69\a 70\a 71\a 72\a 73\a 74\a 75\a 76\a 77\a 78\a 79\a 80\a 81\a 82\a 83\a 84\a 85\a 86\a 87\a 88\a 89\a 90\a 91\a 92\a 93\a 94\a 95\a 96\a 97\a 98\a 99';
    white-space: pre;
}

/* 分の計算・アニメーション */
.timer_display::before {
    animation: time 3600s steps(60, end), flash 1s steps(2, start);
    animation-direction: var(--timer_direction);
    animation-delay: calc(-1s * (3600 - 60*var(--timer_min) - var(--timer_sec))), calc(1s * (60*var(--timer_min) + var(--timer_sec)));
    animation-iteration-count: 1, infinite;
}

/* 秒の計算・アニメーション */
.timer_display::after {
    animation: time 99s steps(60, end), flash 1s steps(2, start);
    animation-direction: var(--timer_direction);
    animation-delay: calc(-1s* (60 - var(--timer_sec))), calc(1s * (60*var(--timer_min) + var(--timer_sec)));
    animation-iteration-count: calc(var(--timer_min) + 1), infinite;
}

.timer_display  div {
    animation: flash 1s steps(2, start) infinite;
}

/* ボタンにhoverしたときにタイマーを止める */
.timer_button:hover + .timer_display::before,
.timer_button:hover + .timer_display::after {
    animation-play-state: paused;
}

a.btn_22 {
 display:inline-block;
 text-align: center;
 vertical-align: middle;
 text-decoration: none;
 width: 30%;
 padding: 1rem;
 margin: auto;
 font-weight: bold;
 border: 2px solid yellow;
 background: yellow;
 color: red;
 border-radius: 5px;
 transition: 0.5s;
 animation: move_d 2s infinite;
 box-shadow: 0 5px 0 rgb(255, 51, 0, 1);
 position: relative;
 font-family: kei;
 font-size: 20px;
}
@keyframes move_d {
    0% {box-shadow: 0 5px 0 rgb(255, 51, 0, 1); top: 0px;}
    10% {box-shadow: 0 0 0 rgb(255, 51, 0, 1); top: 5px;}
    20% {box-shadow: 0 5px 0 rgb(255, 51, 0, 1); top: 0px;}
    30% {box-shadow: 0 0 0 rgb(255, 51, 0, 1); top: 5px;}
    40% {box-shadow: 0 5px 0 rgb(255, 51, 0, 1); top: 0px;}
}

a.btn_22:hover {
	color: #27acd9;
	background: #fff;
	border: 2px solid orange;
}

.glitch {
   position: relative;
   font-size: 20px;
   font-weight: bold;
   color: #000000;
 padding: 1em 2em;
   letter-spacing: 3px;
   z-index: 1;
}

.glitch:before {
 padding: 1em 2em;
   content: attr(data-text);
   position: absolute;
   top: 0;
   left: -2px;
   width: 70%;
   color: 20px;
   background-color: #fff;
   overflow: hidden;
   clip: rect(0, 900px, 0, 0);
   animation: noise-before 3s infinite linear alternate-reverse;
}

.glitch:after {
 padding: 1em 2em;
   content: attr(data-text);
   position: absolute;
   top: 0;
   left: 2px;
   width: 70%;
   color: 20px;
   background-color: #fff;
   overflow: hidden;
   clip: rect(0, 900px, 0, 0);
   animation: noise-after 2s infinite linear alternate-reverse;
}

@keyframes noise-before {
   0% {
      clip: rect(61px, 9999px, 52px, 0);
   }
   5% {
      clip: rect(33px, 9999px, 144px, 0);
   }
   10% {
      clip: rect(121px, 9999px, 115px, 0);
   }
   15% {
      clip: rect(144px, 9999px, 162px, 0);
   }
   20% {
      clip: rect(62px, 9999px, 180px, 0);
   }
   25% {
      clip: rect(34px, 9999px, 42px, 0);
   }
   30% {
      clip: rect(147px, 9999px, 179px, 0);
   }
   35% {
      clip: rect(99px, 9999px, 63px, 0);
   }
   40% {
      clip: rect(188px, 9999px, 122px, 0);
   }
   45% {
      clip: rect(154px, 9999px, 14px, 0);
   }
   50% {
      clip: rect(63px, 9999px, 37px, 0);
   }
   55% {
      clip: rect(161px, 9999px, 147px, 0);
   }
   60% {
      clip: rect(109px, 9999px, 175px, 0);
   }
   65% {
      clip: rect(157px, 9999px, 88px, 0);
   }
   70% {
      clip: rect(173px, 9999px, 131px, 0);
   }
   75% {
      clip: rect(62px, 9999px, 70px, 0);
   }
   80% {
      clip: rect(24px, 9999px, 153px, 0);
   }
   85% {
      clip: rect(138px, 9999px, 40px, 0);
   }
   90% {
      clip: rect(79px, 9999px, 136px, 0);
   }
   95% {
      clip: rect(25px, 9999px, 34px, 0);
   }
   100% {
      clip: rect(173px, 9999px, 166px, 0);
   }
}

@keyframes noise-after {
   0% {
      clip: rect(26px, 9999px, 33px, 0);
   }
   5% {
      clip: rect(140px, 9999px, 198px, 0);
   }
   10% {
      clip: rect(184px, 9999px, 89px, 0);
   }
   15% {
      clip: rect(121px, 9999px, 6px, 0);
   }
   20% {
      clip: rect(181px, 9999px, 99px, 0);
   }
   25% {
      clip: rect(154px, 9999px, 133px, 0);
   }
   30% {
      clip: rect(134px, 9999px, 169px, 0);
   }
   35% {
      clip: rect(26px, 9999px, 187px, 0);
   }
   40% {
      clip: rect(147px, 9999px, 137px, 0);
   }
   45% {
      clip: rect(31px, 9999px, 52px, 0);
   }
   50% {
      clip: rect(191px, 9999px, 109px, 0);
   }
   55% {
      clip: rect(74px, 9999px, 54px, 0);
   }
   60% {
      clip: rect(145px, 9999px, 75px, 0);
   }
   65% {
      clip: rect(153px, 9999px, 198px, 0);
   }
   70% {
      clip: rect(99px, 9999px, 136px, 0);
   }
   75% {
      clip: rect(118px, 9999px, 192px, 0);
   }
   80% {
      clip: rect(1px, 9999px, 83px, 0);
   }
   85% {
      clip: rect(145px, 9999px, 98px, 0);
   }
   90% {
      clip: rect(121px, 9999px, 154px, 0);
   }
   95% {
      clip: rect(156px, 9999px, 44px, 0);
   }
   100% {
      clip: rect(67px, 9999px, 122px, 0);
   }
}