kfish.css

@font-face {
    font-family: 'pixel';
    src: url(data:application/font-ttf;charset=utf-8;base64,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) format('woff');
    font-weight: normal;
    font-style: normal;
}
.box,
.box p,
.box .button,
.shoalscore,
.score,
.box.win input,
.mute {
  color: mediumslateblue;
  text-align: center;
  font-family: 'pixel', monospace;
  white-space: nowrap;
}
html, body {
  overflow: hidden;
  margin: 0;
  background: #333;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  height: 100%;
}

#ui {
  position: absolute;
  margin: auto;
  top: 10vh;
  left: 0; right: 0;
  overflow: hidden;
  width: 90vw; height: 60vw;
  max-width: 120vh; max-height: 80vh;
  background-image: radial-gradient(50vmin at 50% 0% , white 0%, #ccc 100%);
  background-color: #ccc;
  -ms-user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  user-select: none;
  transition: all 0.4s, opacity 0.2s;
  border-radius: 1vmin;
}
#ui.resize {
  opacity: 0;
}

#sea {
  overflow: hidden;
  display: block;
  border-radius: 1vmin;
}

.box {
  position: absolute;
  margin: auto;
  top:0; bottom: 0;
  left: 0; right: 0;
  padding: 1vmin;
  width: 45%; height: 60%;
  background: rgba(255,255,255,0.4);
  border-radius: 2vmin;
  border: 3px solid rgba(0,0,0,0);
  box-shadow: 0 0 0 2px white,
              0 0 0 2vmin rgba(255,255,255,0.4),
        inset 0 0 0 2px white;
  opacity: 1;
  transition: all 0.4s, font-size 0.01s;
}
.box.down {
  top: 200vh;
  opacity: 0;
}
.box.up {
  top: -200vh;
  opacity: 0;
}
.box .button {
  white-space: nowrap;
  color: white;
  line-height: 110%;
  font-size: 150%;
  width: 60%; height: 10%;
  padding: 5% 10%;
  background: lightsteelblue;
  text-align: center;
  position: static;
  margin: 2.5% auto;
  border-radius: 1vmin;
}
.box .button:hover {
  cursor: pointer;
  background: lightblue;
}
.box.welcome h1 {
  margin: 0;
  font-size: 600%;
  line-height: 260%;
}
.box.help p,
.box.high p {
  font-size: 120%;
  line-height: 25%;
}
.box.tuto p {
  white-space: nowrap;
  font-size: 140%;
  line-height: 100%;
}
.box.win h1 {
  margin: 2%;
  font-size: 300%;
  line-height: 120%;
}
.box.win h2 {
  margin: 6%;
  font-size: 240%;
  line-height: 80%;
}
.box.win p {
  font-size: 120%;
  line-height: 120%;
  margin: 2%;
}
.box.win input {
  font-size: 140%;
  width: 50%;
  height: 10%;
  border-radius: 0.5vmin;
  margin: 2%;
  border: 0.25vmin solid lightsteelblue;
}
.box.over h2 {
  margin: 0;
  font-size: 260%;
  line-height: 160%;
  color: #999;
}
.box.over p {
  font-size: 160%;
  line-height: 100%;
  margin: 2%;
  color: #999;
}
.box.over .button {
  background: #bbb;
}
.box.over .button:hover {
  background: #ccc;
}
.shoalscore {
  pointer-events: none;
  position: absolute;
  bottom: 1.5%;
  left: 6%;
  width: 10%;
  font-weight: bold;
}
.score {
  pointer-events: none;
  position: absolute;
  top: 1%;
  left: 2%;
  color: white;
  font-weight: bold;
}
.mute {
  cursor: pointer;
  position: absolute;
  top: 1%;
  right: 2%;
  color: white;
}
.mute:hover {
  text-decoration: underline;
}