@font-face{font-family: 'Roboto Mono';src: url(/x/RobotoMono-VariableFont_wght.ttf);}

:root{
    --mw: 1000px;
    --defin: 12px;

    --bgdx:#999aa3;
    --bgdk:#c4c5cf;
    --bgd:#d4dbdd;
    --bg: #e8eced;
    --bgsd: #ebeff2;
    --bgb: white;

    --tx: #565656;

    --rot: #b9353d;

    --aprot:#d43843;
    --apsch: #282828;
}



::selection{background-color:var(--rot);color:white}

/* sequence fraktion */
body{background-color:var(--bg);margin:0;padding:0;
    font-family:"Roboto Mono","Meiryo",Arial, Helvetica, sans-serif;font-size:11.5px;color:var(--tx);cursor:default;font-weight: 400;}
img{max-width:100%;}
a{transition: font-weight 1s,filter 1s, border-bottom 0.2s ;color:var(--rot);text-decoration:none;border-bottom: var(--aprot) 0px solid;}
a:hover{transition: filter 0.2s, font-weight 0.5s,border-bottom 0.2s ;filter:brightness(135%);font-weight:bolder;border-bottom: var(--aprot) 3px solid;}
p{padding:0;margin:0}h1{padding:0;margin:0}h2{padding:0;margin:0}h3{padding:0;margin:0}
hr{color:var(--bg);}

.blocks{display:flex;height:100%;width:100%;overflow:hidden;}  .aprot{background-color:var(--aprot);width:50%;height:100%} .apsch{background-color:var(--apsch);width:50%;height:100%}
.warning{font-size:113%;background-color:#fffab8;border:1px solid #5f5f5f; padding:20px;}


.rbar{background-color:var(--aprot);height:4px;}
.hed{background-color:var(--bgb);padding:16px;border: 1px solid var(--bgdk);}
    .heda{margin:auto;max-width:var(--mw);display:flex;align-items:center;justify-content: space-between;}    
        .lc{align-items: center;gap:8px}
        .ri{list-style-type:none;}
            .ri a{padding:8px;margin-right:10px;}

.droppu{display:none;}
.ri  a:hover .droppu{display:block;}
.ri ul li{list-style-type:none;}

.core{display:grid;margin:auto;gap:var(--defin);padding:var(--defin)}
    .bx-t1{background:linear-gradient(var(--bgb), var(--bgsd));padding:16px;border: 1px solid var(--bgdk);border-bottom:none}
        .bx-t1b{background:var(--bgb);padding:16px;border: 1px solid var(--bgdk);border-bottom: 1px solid var(--bgd)}
    .bx-b1{background-color:var(--bgb);padding:16px;border: 1px solid var(--bgdk);border-top:none;}
    .bx-b2{background-color:var(--bgd);padding:16px;}

    .rtop{border-top: 4px solid var(--rot);border-bottom: var(--bgd) 1px solid;}
/* technical fraktion */

.xpani{animation: xpand 0.8 forwards}
@keyframes xpand{
    0%{max-height:0%};
    100%{max-height:100%}
}

.hori-wl{display:grid;grid-template-columns: 7fr 3fr;gap:var(--defin);width: var(--mw);max-width:100%;}
.hori-wr{display:grid;grid-template-columns: 3fr 7fr;gap:var(--defin);width: var(--mw);}

.veri{display:grid;gap:var(--defin);align-self: flex-start;}

.mw{max-width: var(--mw);}
.tw{width:30%;box-sizing: border-box;}
.ww{width:70%;box-sizing: border-box;}

.au{margin:auto}

/*div alignment*/
.jl{justify-content: left;}
.rw{float:right}rw{float:right}

/*grid positioning*/
.gappu{display:grid;gap:var(--defin);}
.vertcon{display:flex;}

.fx{display:flex;}
.bk{display:block;}
.sb{justify-content: space-between;}

.vc{justify-items: center;align-items:center;}

.bd1{border-radius: 4px;}
    .bd-t1{border-radius: 4px;border-bottom-right-radius: 0px;border-bottom-left-radius: 0px;}
    .bd-b1{border-radius: 4px;border-top-right-radius: 0px;border-top-left-radius: 0px;}


.shd{box-shadow: 0 3px 4px var(--bgd);}
.fono{display:none;}

@media (max-width: 768px){
    .fono{display:block}
    .moml{margin-left:var(--defin)}
    .end{margin-right: var(--defin);}
    .ri ul li{display:none;}.ri a{padding:7px;margin-right:0px;}
    .core{display:block;}.vertcon{display:block;gap: var(--defin);}
    .hori-wl{display:block;max-width:100%}.hori-wr{display:block;max-width:100%}
    .tw{min-width:100%;}.ww{min-width:100%;}
    .mobtop{margin-top:var(--defin)}.mobbot{margin-bottom:var(--defin)}
}

/* cosmetic extras*/
.thinb{border:1px solid var(--bgdk)}
.gray{color:var(--bgdx)}
red{color:var(--rot)}
.fs{font-size: 80%;}
fs{font-size:80%}

      .container {max-height:0px;position:relative; background-color:#bc352b;  overflow:hidden; margin-bottom:0px; transition:height 1.356s ease; margin-top:0px;animation: linesin 1.5s ease-out forwards}
      @keyframes linesin {
        0%{max-height:0px;}100%{max-height:11px;}
      }
      .line {position:absolute; top:0; bottom:0; animation: move-left 5s linear infinite;}
      @keyframes move-left {0% {left:100%;} 100% {left:-90px;}}