@font-face {
    font-family: "prefix";
    src: url("/font/prefix.ttf") format("truetype");
}
@font-face {
  font-family: "Computer Modern";
  src: url('/font/cmunrm.woff') format("woff");
}
@font-face {
  font-family: "Computer Modern Italic";
  src: url('/font/cmunti.woff') format("woff");
}
@font-face {
  font-family: "FingerPaint";
  src: url("/font/FingerPaint-Regular.ttf");
}
@font-face {
  font-family: "KottaOne";bu
  src: url("/font/KottaOne-Regular.ttf");
}
html, body { height: 100%; margin: 0; --fntsz: 1.1rem; } /* not min(calc(3vmin), 1.4em) anymore */
body { font-size: var(--fntsz); }
input, button { font: inherit; }
body { 
    --black-w: black;
    --white-b: white;
    --fplot-brightness: 45%; 
    --levobg-brightness: 95%;
}
.modal { background-color: #fbfbfb; }
body.dark-mode { 
    --black-w: white; 
    color: white; 
    background-color: #040404;
}
.w1, .w1h1 { width: 100%; }  .h1, .w1h1 { height: 100%; }
.abs { position: absolute; } .rel { position:relative; } .fixed { position: fixed; } .flex { display: flex; flex-direction: column; } .none { display: none !important; }
.flex { align-items: center; } .astretch { align-items: stretch; }
.saround { justify-content: space-around; } .seven { justify-content: space-evenly; } .scenter { justify-content: center; }
.flex-centering { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.flex.row { flex-direction: row; }
.dtld { top:0; bottom:0; left:0; right:0; }
.oxaut { overflow-x: auto; } .oyaut { overflow-y: auto; }

* { box-sizing: border-box; } /* everything is stupid */
input { text-align: center; }

body.dark-mode .modal { background-color: #444; --modal-close-brightness: 50%; }
input[type=range][orient=vertical] {
    writing-mode: bt-lr; /* IE */
    -webkit-appearance: slider-vertical; /* WebKit */
    /*padding: 0 5px;*/
}

/* modal */
.modal-container {
    background-color: #111d;
    z-index: 100; /* zhen nb */
}
.modal {
    margin: auto;
    width: 100%;
    max-width: max(700px, 50%);
    height: 100%;
    max-height: max(400px, 50%);
    border-radius: 15px;
    overflow: hidden;
    font-size: var(--fntsz);
    --modal-close-brightness: 80%;
}
.modal-title {
    height: 50px;
    font-weight: bold;
    flex: none;
}
.modal-scrollable {
    overflow-y: auto;
    padding: 0 4vw;
    flex: auto;
}
.modal-content {
    min-height: 0;
}
.modal-content > * {
    flex: none;
    align-self: center;
}
.modal-content::after {
    flex: none;
    content: "";
    height: 50px;
    display: block;
}
.modal-close {
    position: absolute;
    right: 0;
    top: 0;
    width: 50px;
    height: 50px;
    background-color: hsl(0, 100%, var(--modal-close-brightness));
    cursor: pointer;
    font-size: 32px;
}
.modal-close:hover {
    opacity: 0.5;
}

/* this is like modals */
.alert-panel {
    width: 300px;
    max-width: 60vw;
    left: 50%;
    transform: translateX(-50%);
    font-size: calc(min(16px, var(--fntsz)));
    z-index: 100; /* to be in front of modals */
}
.alert-body {
    width: 100%;
    min-height: 0;
    max-height: 90px;
    border-radius: 10px;
    margin: 5px;
    color: black;
}
.alert-body::before {
    position: absolute;
    width: 20px; text-align: center;
    top: 0; left: 0;
    color: gray;
}
/* TL letter */
.alert-ann::before   { content: "A"; }
.alert-corr::before  { content: "C"; }
.alert-err::before   { content: "E"; }
.alert-msg::before   { content: "M"; }
.alert-solve::before { content: "S"; }
.alert-team::before  { content: "T"; }
.alert-unl::before   { content: "U"; }

.alert-close::before { content: "\d7"; }
.alert-reply::before { content: "\219e"; }
.alert-closeall::before { content: "\1f4a3"; }

/* BG color */
.alert-err { background-color: hsla(20,80%,90%,0.95); }
.alert-corr { background-color: hsla(100,80%,90%,0.95); }
.alert-msg, .alert-ann { background-color: hsla(60,80%,90%,0.95); }
.alert-solve, .alert-team, .alert-unl { background-color: hsla(240,80%,93%,0.95); }
div.alert-content {
    padding: 5%;
    max-width: 100%;
}
.alert-control  { top: 0; right: -25px; }
.alert-control:not(:hover):not(:focus-within) :not(:first-child) { display: none; }
button.alert-action, button.alert-control-action {
    background-color: transparent;
    padding: 0;
    border: none;
    font-weight: unset;
    /*max-width: unset;*/
}
button.alert-action:focus, button.alert-control-action:focus {
    background-color: hsla(45, 100%, 75%, 1);
}
button.alert-action {
    position: absolute;
    width: 28px;
    height: 28px;
    font-size: 125%;
}
button.alert-control-action {
    font-size: 75%;
    height: 16px;
    color: var(--black-w);
}
button.alert-action::before {
    position: absolute;
}
button.alert-control-action::before, button.alert-control-action::after {
    position: relative;
}
.alert-control-action.alert-persistent::after {
    content: "!";
}
.alert-control-action.alert-collapse::before {
    opacity: 0;
}
button.alert-close    { top: 0; right: 0; }
button.alert-reply    { right: 0; bottom: 0; }

.alert-panel:not(.persistent-ann)   .alert-ann.alert-ready-fade:not(:hover):not(:focus-within),
.alert-panel:not(.persistent-corr)  .alert-corr.alert-ready-fade:not(:hover):not(:focus-within),
.alert-panel:not(.persistent-err)   .alert-err.alert-ready-fade:not(:hover):not(:focus-within),
.alert-panel:not(.persistent-msg)   .alert-msg.alert-ready-fade:not(:hover):not(:focus-within),
.alert-panel:not(.persistent-solve) .alert-solve.alert-ready-fade:not(:hover):not(:focus-within),
.alert-panel:not(.persistent-team)  .alert-team.alert-ready-fade:not(:hover):not(:focus-within),
.alert-panel:not(.persistent-unl)   .alert-unl.alert-ready-fade:not(:hover):not(:focus-within) {
    opacity: 0;
    transition: opacity 6s;
}
body > .reply-msgteam { display: none; }
.alert-panel.collapse-ann   .alert-body.alert-ann,
.alert-panel.collapse-corr  .alert-body.alert-corr,
.alert-panel.collapse-err   .alert-body.alert-err,
.alert-panel.collapse-msg   .alert-body.alert-msg,
.alert-panel.collapse-solve .alert-body.alert-solve,
.alert-panel.collapse-team  .alert-body.alert-team,
.alert-panel.collapse-unl   .alert-body.alert-unl  {
    height: 0;
    overflow: hidden;
}

.alert-persistent
{ font-weight: bold !important; }

body .title { font-size: 8vw; }
body:lang(zh) .title { letter-spacing: 5vw; margin-right: -5vw;}
body:lang(en) *[data-ben]::before { content: attr(data-ben); }
body:lang(zh) *[data-bzh]::before { content: attr(data-bzh); }
body:lang(en) *[data-aen]::after { content: attr(data-aen); }
body:lang(zh) *[data-azh]::after { content: attr(data-azh); }
:hover > .parent-nonhover, :not(:hover) > .parent-hover { display: none !important; }
body:lang(en) :lang(zh), body:lang(zh) :lang(en) { display: none !important; }

.mw30 {
    min-width: 30%;
}