www-irc/style.css

body { margin: 0; padding: 0; overflow-x: hidden; font-family: "Roboto", sans-serif; }
h1,h2,h3 { font-family: "Rubik Mono One", sans-serif; color: rgb(132, 132, 132); }
h3 { margin-top: 2em; }
header { position: fixed; text-align: center; top: 0; left: 0; right: 0; transition: background .5s; z-index: 50; }
header ul { display: flex; margin: 0 auto; padding: .75em 0; list-style-type: none; max-width: 600px; }
header li { flex: 1; display: inline-block; }
header li a { color: white; text-decoration: none; }
.body { display: inline-flex; margin: 0 auto; padding: 0 12%; width: 100vw; min-height: 100vh; box-sizing: border-box; background-repeat: no-repeat; background-position: center 82%; background-size: cover; }
.body { text-align: center; justify-content: center; }
.link-target { position: absolute; margin-top:-2.5em; padding-top: 2.5em; }
.body.body-centered > .container { display: flex; text-align: center; align-items: center; width: 100%; }
.body.body-centered > .container > * { width: 100%; max-width: 300px; margin: auto; text-align: center; }
.body.body-fixed { overflow: auto; max-height: 1vh; }
.body.body-fixed > .container { padding-top: 1.5rem; }
.body.body-fixed > .container > div{ padding-top: 1.5rem; background: rgba(255, 255, 255, .3); display: block; }
.joinform { background: rgba(0, 0, 0, 0.5); padding: 1em; border-radius: 20px; color: rgb(132, 132, 132); }
.joinform .logo { margin: 0 auto; }
.joinform h1 { margin-top: 0.5em; }
.joinform button { margin-top: 1em; }
.joinform label { display: block; margin-bottom: 1em; text-align: left; }
.joinform * { width: 100%; }
.container { width: 100%; font-size: 0; }
.container > div { display: inline-block; vertical-align: top; font-size: 1rem; padding: 1em; box-sizing: border-box; text-align: left; }
a { text-decoration: none; color: rgb(132, 132, 132); }
ul.chancategory { padding: 0; list-style: none; }
ul.chancategory > li { text-decoration: underline; }
ul.chanlist { list-style: none; margin-bottom: 1em; }
ul.serverconfig { list-style: none; }
code { margin: 0.75em 0; padding: 0 0.75em; display: block; font-family: "Roboto Mono", monospace; }

.body.body-fixed > .container > div.quizz-header { background: none; text-align: center; }
.quizz-header .logo { height: 75px; vertical-align: -50%; }

.body.quizz .container .period { display: flex; }
.body.quizz .container .period .prev { flex: 1; text-align: left; }
.body.quizz .container .period .current { flex: 1; text-align: center; }
.body.quizz .container .period .next { flex: 1; text-align: right; }
.body.quizz .score-table table { margin: auto; }
.body.quizz .score-table table input { width: 100%; }
.body.quizz .score-table .rank { text-align: right; padding-right: 15px; }
.body.quizz .score-table .pseudo::before { content: ' '; display: inline-block; width: 0.8em; height: 0.8em; border-radius: 0.4em; vertical-align: -0.15em; margin-right: .5em; z-index: 2; position: relative; }
.body.quizz .score-table .score { text-align: left; padding-left: 15px; }
.body.quizz .score-table .pseudo { border-bottom: solid #d3d3d345 1px; font-family: "Roboto Mono", monospace; position: relative; }
.body.quizz .score-table .rank-1 .pseudo::before { background-color: yellow; }
.body.quizz .score-table .rank-2 .pseudo::before { background-color: grey; }
.body.quizz .score-table .rank-3 .pseudo::before { background-color: brown; }
.body.quizz .score-table .rank-1 .pseudo::after, .body.quizz .score-table .rank-2 .pseudo::after, .body.quizz .score-table .rank-3 .pseudo::after { position: absolute; left: 3px; top: 2px; width: 0.4em; height: 0.4em; transform: rotate(45deg); content: ' '; border: 3px solid blue; border-top: none; border-left: none; z-index: 1; }

.block-1f1{ width: 100%; }
.block-1f2 { width: 50%; }
.block-1f3 { width: 33.333%; }
.block-2f3 { width: 66.666%; }
.block-1f4 { width: 25%; }
.block-3f4 { width: 75%; }
.block-1f5 { width: 20%; }
.block-2f5 { width: 40%; }
.block-3f5 { width: 60%; }
.block-4f5 { width: 80%; }
.block-1f6 { width: 16.666%; }
.block-5f6 { width: 83.333%; }
.block-0f { display: none !important; }

@media screen and (max-width: 720px) {
  .body { margin: 0; padding: 0; }
  .block-1s1{ width: 100%; }
  .block-1s2 { width: 50%; }
  .block-1s3 { width: 33.333%; }
  .block-2s3 { width: 66.666%; }
  .block-1s4 { width: 25%; }
  .block-3s4 { width: 75%; }
  .block-1s5 { width: 20%; }
  .block-2s5 { width: 40%; }
  .block-3s5 { width: 60%; }
  .block-4s5 { width: 80%; }
  .block-1s6 { width: 16.666%; }
  .block-5s6 { width: 83.333%; }
  .block-0s { display: none !important; }
}