body {
    margin : 0;
    height: 100%;
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 400;
}

.headered {
    width: 15em;
}

.monotext {
    margin: 1em;
    max-width: 800px;
    font-size: 14px
}

.prints {
        font-size: 14px;
    text-align: left;
}
.tokio {
    max-width: 550px;
}
.mm99 {
    max-width: calc(4.33px * 99);
}
.mm125 {
    max-width: calc(4.33px * 125);
}
.mm152 {
    max-width: calc(4.33px * 152);
}
.mm159 {
    max-width: calc(4.33px * 159);
}
.mm199 {
    max-width: calc(4.33px * 199);
}
.mm200 {
    max-width: calc(4.33px * 200);
}
.mm201 {
    max-width: calc(4.33px * 201);
}
.mm210 {
    max-width: calc(4.33px * 210);
}
.mm290 {
    max-width: calc(4.33px * 290);
}
.mm300 {
    max-width: calc(4.33px * 300);
}



figure {
    display: inline-table;
    margin: 1em;
    font-size: 14px;
    text-align: left;
    vertical-align: middle;
}

figure img {
    margin: 2em 0 0;
    max-width: 100%;
}
code {
    position: absolute;
    top: 0;
    left: 0;
    padding: 0 1em;
    margin: 1em;
    background: #ffffff;
    z-index: 1;
    font-size: 100%;
    opacity: 0.7;
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 400;
    font-size: 14px

}
#contacted {
    z-index: 0;
    xdisplay: none;
}
.patterns {
    xbackground-color: #14bdf5;
    height: 80vh;
    xposition: fixed;
    xwidth: 100vw;
}
.aaa {
    animation: ani_banda 30s  alternate infinite;
}
.bbb {
    animation: ani_banda 40s  alternate-reverse infinite;
} 

@keyframes ani_banda {
  0.000%{
fill: #FFF100
  }
  7.692%{
fill: #F6921E
  }
  15.385%{
fill: #F05A28
  }
  23.077%{
fill: #EC1C24
  }
  30.769%{
    fill: #FF008B
  }
  38.462%{
   fill: #90278E
  }
  46.154%{
    fill: #652D90
  }
  53.846%{
fill: #0D4BA0
  }
  61.538%{
   fill: #00ADEE 
  }
  69.231%{
    fill: #00ABA5
  }
  76.923%{
    fill: #37B34A
  }
  84.615%{
    fill: #8DC63F
  }
  92.308%{
    fill: #CCDB29
  }
  100.000%{
    fill: #FFDD15
  }
}


@keyframes ani_aaa {
    0.000%{
        fill: #FF0000;
    }
    16.667%{
        fill: #FF7F00;
    }
    33.333%{
        fill: #FFFF00;
    }
    50.000%{
        fill: #00FF00;

    }
    66.667%{
        fill: #0000FF;

    }
    83.333%{
        fill: #4B0082;

    }
    100.000%{
        fill: #9400D3;
    }
}

@keyframes ani_bbb {
    0.000%{
        fill: #FF0000;
    }
    16.667%{
        fill: #FF7F00;
    }
    33.333%{
        fill: #FFFF00;
    }
    50.000%{
        fill: #00FF00;

    }
    66.667%{
        fill: #0000FF;

    }
    83.333%{
        fill: #4B0082;

    }
    100.000%{
        fill: #9400D3;
    }
}

svg  {
            height: 100%;
            width: 100%;
        display: block;
        }

        g {
            visibility: hidden;
            mix-blend-mode: multiply;
            position: absolute;
            animation-iteration-count: infinite;
            /* animation-name: ani-round; */

            animation-timing-function: step-start;
            left: 0;
            top: 0;
        }


        #around .r27 { animation: ani-roundaa calc(27s * 0.4) calc(0.4s * 0) step-start infinite }
        #around .r26 { animation: ani-roundaa calc(27s * 0.4) calc(0.4s * 1) step-start infinite }
        #around .r25 { animation: ani-roundaa calc(27s * 0.4) calc(0.4s * 2) step-start infinite }
        #around .r24 { animation: ani-roundaa calc(27s * 0.4) calc(0.4s * 3) step-start infinite }
        #around .r23 { animation: ani-roundaa calc(27s * 0.4) calc(0.4s * 4) step-start infinite }
        #around .r22 { animation: ani-roundaa calc(27s * 0.4) calc(0.4s * 5) step-start infinite }
        #around .r21 { animation: ani-roundaa calc(27s * 0.4) calc(0.4s * 6) step-start infinite }
        #around .r20 { animation: ani-roundaa calc(27s * 0.4) calc(0.4s * 7) step-start infinite }
        #around .r19 { animation: ani-roundaa calc(27s * 0.4) calc(0.4s * 8) step-start infinite }
        #around .r18 { animation: ani-roundaa calc(27s * 0.4) calc(0.4s * 9) step-start infinite }
        #around .r17 { animation: ani-roundaa calc(27s * 0.4) calc(0.4s * 10) step-start infinite }
        #around .r16 { animation: ani-roundaa calc(27s * 0.4) calc(0.4s * 11) step-start infinite }
        #around .r15 { animation: ani-roundaa calc(27s * 0.4) calc(0.4s * 12) step-start infinite }
        #around .r14 { animation: ani-roundaa calc(27s * 0.4) calc(0.4s * 13) step-start infinite }
        #around .r13 { animation: ani-roundaa calc(27s * 0.4) calc(0.4s * 14) step-start infinite }
        #around .r12 { animation: ani-roundaa calc(27s * 0.4) calc(0.4s * 15) step-start infinite }
        #around .r11 { animation: ani-roundaa calc(27s * 0.4) calc(0.4s * 16) step-start infinite }
        #around .r10 { animation: ani-roundaa calc(27s * 0.4) calc(0.4s * 17) step-start infinite }
        #around .r09 { animation: ani-roundaa calc(27s * 0.4) calc(0.4s * 18) step-start infinite }
        #around .r08 { animation: ani-roundaa calc(27s * 0.4) calc(0.4s * 19) step-start infinite }
        #around .r07 { animation: ani-roundaa calc(27s * 0.4) calc(0.4s * 20) step-start infinite }
        #around .r06 { animation: ani-roundaa calc(27s * 0.4) calc(0.4s * 21) step-start infinite }
        #around .r05 { animation: ani-roundaa calc(27s * 0.4) calc(0.4s * 22) step-start infinite }
        #around .r04 { animation: ani-roundaa calc(27s * 0.4) calc(0.4s * 23) step-start infinite }
        #around .r03 { animation: ani-roundaa calc(27s * 0.4) calc(0.4s * 24) step-start infinite }
        #around .r02 { animation: ani-roundaa calc(27s * 0.4) calc(0.4s * 25) step-start infinite }
        #around .r01 { animation: ani-roundaa calc(27s * 0.4) calc(0.4s * 26) step-start infinite }
        @keyframes ani-roundaa {
            3.7037% { transform: translateX(-117.4px); visibility: visible; fill: #00ffff; }
            7.4074% { transform: translateX(0px); visibility: visible; fill: #00ffff; }
            11.111% { transform: translateX(117.4px); visibility: visible; fill: #00ffff; }
            
        }
        
        #bround .r27 { animation: ani-roundbb calc(26s * 0.3) calc(0.3s * 0) step-start infinite }
        #bround .r26 { animation: ani-roundbb calc(26s * 0.3) calc(0.3s * 1) step-start infinite }
        #bround .r25 { animation: ani-roundbb calc(26s * 0.3) calc(0.3s * 2) step-start infinite }
        #bround .r24 { animation: ani-roundbb calc(26s * 0.3) calc(0.3s * 3) step-start infinite }
        #bround .r23 { animation: ani-roundbb calc(26s * 0.3) calc(0.3s * 4) step-start infinite }
        #bround .r22 { animation: ani-roundbb calc(26s * 0.3) calc(0.3s * 5) step-start infinite }
        #bround .r21 { animation: ani-roundbb calc(26s * 0.3) calc(0.3s * 6) step-start infinite }
        #bround .r20 { animation: ani-roundbb calc(26s * 0.3) calc(0.3s * 7) step-start infinite }
        #bround .r19 { animation: ani-roundbb calc(26s * 0.3) calc(0.3s * 8) step-start infinite }
        #bround .r18 { animation: ani-roundbb calc(26s * 0.3) calc(0.3s * 9) step-start infinite }
        #bround .r17 { animation: ani-roundbb calc(26s * 0.3) calc(0.3s * 10) step-start infinite }
        #bround .r16 { animation: ani-roundbb calc(26s * 0.3) calc(0.3s * 11) step-start infinite }
        #bround .r15 { animation: ani-roundbb calc(26s * 0.3) calc(0.3s * 12) step-start infinite }
        #bround .r14 { animation: ani-roundbb calc(26s * 0.3) calc(0.3s * 13) step-start infinite }
        #bround .r13 { animation: ani-roundbb calc(26s * 0.3) calc(0.3s * 14) step-start infinite }
        #bround .r12 { animation: ani-roundbb calc(26s * 0.3) calc(0.3s * 15) step-start infinite }
        #bround .r11 { animation: ani-roundbb calc(26s * 0.3) calc(0.3s * 16) step-start infinite }
        #bround .r10 { animation: ani-roundbb calc(26s * 0.3) calc(0.3s * 17) step-start infinite }
        #bround .r09 { animation: ani-roundbb calc(26s * 0.3) calc(0.3s * 18) step-start infinite }
        #bround .r08 { animation: ani-roundbb calc(26s * 0.3) calc(0.3s * 19) step-start infinite }
        #bround .r07 { animation: ani-roundbb calc(26s * 0.3) calc(0.3s * 20) step-start infinite }
        #bround .r06 { animation: ani-roundbb calc(26s * 0.3) calc(0.3s * 21) step-start infinite }
        #bround .r05 { animation: ani-roundbb calc(26s * 0.3) calc(0.3s * 22) step-start infinite }
        #bround .r04 { animation: ani-roundbb calc(26s * 0.3) calc(0.3s * 23) step-start infinite }
        #bround .r03 { animation: ani-roundbb calc(26s * 0.3) calc(0.3s * 24) step-start infinite }
        #bround .r02 { animation: ani-roundbb calc(26s * 0.3) calc(0.3s * 25) step-start infinite }
        @keyframes ani-roundbb {
            3.8461% { transform: translateX(117.4px); visibility: visible; fill: #ff00ff; }
            7.6923% { transform: translateX(0px); visibility: visible; fill: #ff00ff; }
            11.538% { transform: translateX(-117.4px); visibility: visible; fill: #ff00ff; }
            
        }
        
        #cround .r26 { animation: ani-roundcc calc(25s * 0.2) calc(0.2s * 0) step-start infinite }
        #cround .r25 { animation: ani-roundcc calc(25s * 0.2) calc(0.2s * 1) step-start infinite }
        #cround .r24 { animation: ani-roundcc calc(25s * 0.2) calc(0.2s * 2) step-start infinite }
        #bround .r23 { animation: ani-roundcc calc(25s * 0.2) calc(0.2s * 3) step-start infinite }
        #cround .r22 { animation: ani-roundcc calc(25s * 0.2) calc(0.2s * 4) step-start infinite }
        #cround .r21 { animation: ani-roundcc calc(25s * 0.2) calc(0.2s * 5) step-start infinite }
        #cround .r20 { animation: ani-roundcc calc(25s * 0.2) calc(0.2s * 6) step-start infinite }
        #cround .r19 { animation: ani-roundcc calc(25s * 0.2) calc(0.2s * 7) step-start infinite }
        #cround .r18 { animation: ani-roundcc calc(25s * 0.2) calc(0.2s * 8) step-start infinite }
        #cround .r17 { animation: ani-roundcc calc(25s * 0.2) calc(0.2s * 9) step-start infinite }
        #cround .r16 { animation: ani-roundcc calc(25s * 0.2) calc(0.2s * 10) step-start infinite }
        #cround .r15 { animation: ani-roundcc calc(25s * 0.2) calc(0.2s * 11) step-start infinite }
        #cround .r14 { animation: ani-roundcc calc(25s * 0.2) calc(0.2s * 12) step-start infinite }
        #cround .r13 { animation: ani-roundcc calc(25s * 0.2) calc(0.2s * 13) step-start infinite }
        #cround .r12 { animation: ani-roundcc calc(25s * 0.2) calc(0.2s * 14) step-start infinite }
        #cround .r11 { animation: ani-roundcc calc(25s * 0.2) calc(0.2s * 15) step-start infinite }
        #cround .r10 { animation: ani-roundcc calc(25s * 0.2) calc(0.2s * 16) step-start infinite }
        #cround .r09 { animation: ani-roundcc calc(25s * 0.2) calc(0.2s * 17) step-start infinite }
        #cround .r08 { animation: ani-roundcc calc(25s * 0.2) calc(0.2s * 18) step-start infinite }
        #cround .r07 { animation: ani-roundcc calc(25s * 0.2) calc(0.2s * 19) step-start infinite }
        #cround .r06 { animation: ani-roundcc calc(25s * 0.2) calc(0.2s * 20) step-start infinite }
        #cround .r05 { animation: ani-roundcc calc(25s * 0.2) calc(0.2s * 21) step-start infinite }
        #cround .r04 { animation: ani-roundcc calc(25s * 0.2) calc(0.2s * 22) step-start infinite }
        #cround .r03 { animation: ani-roundcc calc(25s * 0.2) calc(0.2s * 23) step-start infinite }
        #cround .r02 { animation: ani-roundcc calc(25s * 0.2) calc(0.2s * 24) step-start infinite }
        @keyframes ani-roundcc {
            4% { transform: translateX(0px); visibility: visible; fill: #ffff00; }
            8% { transform: translateX(117.4px); visibility: visible; fill: #ffff00; }
            12% { transform: translateX(-117.4px); visibility: visible; fill: #ffff00; }
            
        }
@media screen and (max-width: 1000px) {
  .prints{
    text-align: center;
  }
    .monotext{
    text-align: center;
        margin: 1em auto;
            font-size: 20px

  }
    code {
    font-size: 20px
    }
}
/*
@media (orientation: portrait) {
    code, .monotext {
    font-size: 20px
    }
}
*/