@charset "UTF-8";
@import url(reset.css);
/* ---------------------- VARIABLES ---------------------- */
/* ---------------------- FONT-FACES ---------------------- */
@font-face {
  font-family: 'ocr';
  src: url("../fonts/deja-vu/DejaVuSansMono.ttf"); }

@font-face {
  font-family: 'substitut';
  src: url("../fonts/substitut/substitut.ttf"); }

/* ---------------------- GLOBAL ---------------------- */
html {
  font-size: 14px; }

body {
  font-family: 'ocr', 'substitut';
  line-height: 1.5rem; }
  body * {
    box-sizing: border-box; }
  body .errors {
    color: red;
    margin: 0 0 2rem 0; }
  body .messages {
    margin: 0 0 1.5rem 15%; }
  body .clear {
    clear: both; }
  body a {
    text-decoration: none;
    color: inherit; }
    body a:hover {
      color: red; }
  body input {
    border: 0; }
  body .sign {
    font-family: monospace; }

/* ---------------------- NAV ---------------------- */
body {
  padding: 1rem 0 4.5rem 0; }
  body > header {
    position: fixed;
    width: 15%;
    left: 0;
    top: 0;
    padding: 1.5rem 3rem 1rem 1.5rem;
    height: 100vh; }
    body > header .tester {
      position: fixed;
      right: 1.5rem;
      width: 15%;
      top: 0;
      padding: 2rem 1.5rem 1.5rem 1.5rem;
      height: 100vh; }
      body > header .tester input {
        background-color: #fff; }
    body > header h1 {
      margin: 0 0 3rem 0;
      width: 100%;
      text-transform: uppercase;
      font-size: 1.5rem;
      line-height: 2rem;
      padding: 0 25% 0 0; }
    body > header h2 {
      text-transform: uppercase; }
    body > header .font-nav {
      counter-reset: parts; }
      body > header .font-nav h2::before {
        counter-increment: parts;
        content: counter(parts, upper-roman) ".\a"; }
      body > header .font-nav h2:hover {
        color: red;
        cursor: pointer; }
    body > header .tester ul {
      margin: 1.5rem 0 0 0; }
    body > header .font-nav {
      margin: 1rem 0 1.5rem 0; }
      body > header .font-nav .tagLists {
        margin: 0 0 0.5rem 0; }
        body > header .font-nav .tagLists .tagList.open h4:hover::after {
          content: "-";
          float: right; }
        body > header .font-nav .tagLists .tagList.open h4 {
          color: red; }
        body > header .font-nav .tagLists .tagList.open > ul {
          display: block; }
        body > header .font-nav .tagLists .tagList h4::before {
          content: "⤷ "; }
        body > header .font-nav .tagLists .tagList h4:hover {
          color: red;
          cursor: pointer; }
        body > header .font-nav .tagLists .tagList h4:hover::after {
          content: "+";
          float: right; }
        body > header .font-nav .tagLists .tagList > ul {
          display: none;
          margin: 0 0 0.5rem 0; }
          body > header .font-nav .tagLists .tagList > ul li {
            display: flex; }
          body > header .font-nav .tagLists .tagList > ul li:hover {
            cursor: pointer;
            color: red; }
          body > header .font-nav .tagLists .tagList > ul li::before {
            content: "◯ ";
            font-size: 0.8rem;
            padding: 0 1rem 0 0; }
          body > header .font-nav .tagLists .tagList > ul li.on:hover::before {
            color: #000; }
          body > header .font-nav .tagLists .tagList > ul li.on::before,
          body > header .font-nav .tagLists .tagList > ul li:hover::before {
            color: red;
            content: "◉ "; }
    body > header .tester {
      margin: 0 0 3rem 0; }
      body > header .tester > ul li > span {
        display: inline-block; }
      body > header .tester > ul li > span:first-of-type {
        margin: 0 1.5rem 0 0; }
      body > header .tester > ul li .active {
        color: red; }
      body > header .tester > ul li input {
        display: inline;
        width: 3rem;
        height: 1rem;
        color: red; }
      body > header .tester > ul li input[name="font-size"] {
        width: 5rem; }
      body > header .tester > ul li input#search_query {
        width: 6rem;
        color: black; }
  body nav .links > ul, body nav .links > div {
    padding: 0 1.5rem 0 0; }
  body nav h4:hover::after {
    float: right;
    content: "+"; }
  body nav .accounts ul,
  body nav .fonts ul {
    display: none; }
    body nav .accounts ul li::before,
    body nav .fonts ul li::before {
      content: "- "; }
  body nav .accounts:hover,
  body nav .fonts:hover {
    cursor: pointer; }
    body nav .accounts:hover ul,
    body nav .fonts:hover ul {
      display: block; }
  body nav #search {
    margin: 1.5rem 0 0 0; }
  body main {
    width: 100%;
    padding: 0 0 0 15%; }

/* ---------------------- SPECNAV ---------------------- */
#specNav {
  position: fixed;
  top: 50px;
  left: 0;
  right: 0;
  margin-left: 16%;
  height: 20px;
  border-bottom: 1px solid black; }
  #specNav li {
    padding: 0 10px;
    cursor: pointer; }
    #specNav li:hover, #specNav li.current {
      text-decoration: red; }

/* ---------------------- HOME ---------------------- */
.home main {
  padding: 0 20% 0 15%;
  counter-reset: parts; }
  .home main section > h2 {
    width: 100%;
    margin: 0 0 1.5rem 0;
    padding: 1rem 0 0 0;
    text-transform: uppercase; }
  .home main h2::before {
    counter-increment: parts;
    content: counter(parts, upper-roman) ". ";
    display: inline-block;
    margin: 0 1.5rem 0 0; }
  .home main > section {
    margin: 0 0 4.5rem 0; }
  .home main #index {
    display: flex;
    flex-wrap: wrap; }
    .home main #index .font-preview {
      width: 25%; }
      .home main #index .font-preview h3 {
        margin: 0 0 1.5rem 0; }
      .home main #index .font-preview ul {
        font-size: 1.5rem;
        line-height: 2rem;
        color: #000000; }
  .home main > #fonts .font.hidden {
    display: none; }
  .home main > #fonts .font {
    z-index: 1;
    margin: 0 0 6rem 0; }
    .home main > #fonts .font header {
      width: 100%;
      margin: 0 0 1.5rem 0;
      display: flex;
      flex-wrap: wrap; }
      .home main > #fonts .font header h3 {
        font-size: 1.5rem;
        line-height: 2rem;
        width: 25%;
        color: #000; }
        .home main > #fonts .font header h3 form {
          display: inline; }
          .home main > #fonts .font header h3 form input {
            display: inline-block;
            background-color: white;
            font-size: 1.5rem;
            transform: rotate(90deg); }
          .home main > #fonts .font header h3 form input:hover {
            color: red;
            cursor: pointer; }
      .home main > #fonts .font header ul {
        width: 75%;
        padding: 0.5rem 0 0 0;
        display: flex;
        flex-wrap: wrap; }
        .home main > #fonts .font header ul li {
          width: calc(100% / 3); }
        .home main > #fonts .font header ul .styles span {
          display: block; }
        .home main > #fonts .font header ul .styles .title {
          color: red; }
    .home main > #fonts .font .infos {
      width: 100%;
      margin: 0 0 1.5rem 0;
      display: flex;
      flex-wrap: wrap; }
      .home main > #fonts .font .infos .name {
        margin: 0 0 3rem 0; }
      .home main > #fonts .font .infos .designer {
        margin: 0 0 3rem 0; }
      .home main > #fonts .font .infos li {
        width: 25%; }
        .home main > #fonts .font .infos li .title, .home main > #fonts .font .infos li .value {
          display: block; }
        .home main > #fonts .font .infos li .title {
          color: red; }
    .home main > #fonts .font .moreFonts {
      display: none; }
    .home main > #fonts .font .moreFonts.open {
      display: block; }
    .home main > #fonts .font .showMoreFonts {
      display: inline-block;
      text-transform: uppercase; }
      .home main > #fonts .font .showMoreFonts .sign {
        display: inline-block;
        margin: 0 1.5rem 0 0;
        padding: 0 0.25rem 0 0.25rem;
        line-height: 1.25rem;
        border-radius: 5rem;
        border: solid 1px; }
    .home main > #fonts .font .showMoreFonts:hover {
      color: red;
      cursor: pointer; }
    .home main > #fonts .font .moreFonts,
    .home main > #fonts .font .regular {
      width: 100%; }
      .home main > #fonts .font .moreFonts h4,
      .home main > #fonts .font .regular h4 {
        color: red;
        margin: 0 0 0.5rem 0; }
      .home main > #fonts .font .moreFonts > input,
      .home main > #fonts .font .regular > input {
        width: 100%;
        border: 0;
        white-space: nowrap;
        font-family: inherit;
        font-size: 100px;
        margin: 0 0 0.5rem 0; }
  .home main #about #credits {
    margin: 1.5rem 0 0 0; }
    .home main #about #credits h3 {
      margin: 0 0 1.5rem 0; }
    .home main #about #credits p {
      margin: 0 0 1.5rem 0; }
    .home main #about #credits ul .title {
      color: red; }

/* ---------------------- FONT INFOS (SPECIMEN) ---------------------- */
#fontInfos {
  position: fixed;
  top: 0;
  bottom: 0;
  padding-top: 75px;
  width: 15%;
  border-right: 1px solid black;
  line-height: 1.4em; }
  #fontInfos ul, #fontInfos li {
    display: block; }
  #fontInfos li {
    margin-left: 9px; }
  #fontInfos h1 {
    padding-bottom: 10px; }

/* ---------------------- SPECIMEN ---------------------- */
body.specimen {
  width: 85%;
  margin-top: 75px;
  padding-left: 20px;
  text-align: left; }
  body.specimen p input {
    background: transparent;
    width: 100%;
    border: 0;
    white-space: nowrap;
    font-family: inherit; }
  body.specimen .part h2 {
    margin-top: 15px; }
  body.specimen .part h2, body.specimen .part .size {
    font-family: 'ocr';
    margin-bottom: 15px; }
  body.specimen .waterfall input {
    text-align: left; }
  body.specimen .layout h3 {
    font-size: 100px; }
  body.specimen .layout h3, body.specimen .layout p {
    margin: 0;
    padding: 10px;
    line-height: 1.15em; }
  body.specimen .layout .headline {
    font-size: 50px; }
  body.specimen .layout .col {
    font-size: 20px;
    padding: 10px;
    width: calc(50% - 40px); }
  body.specimen .az {
    white-space: normal !important;
    text-align: center;
    font-size: 100px;
    margin: 0;
    padding-right: 20px;
    line-height: 1.3em; }
  body.specimen .approche {
    font-size: 30px; }
  body.specimen .charMap canvas {
    margin-top: 200px; }

/* ---------------------- ABOUT ---------------------- */
/* ---------------------- BACK ACCESS PAGES ---------------------- */
.check-font > header h1,
.about > header h1,
.modify-font > header h1,
.upload > header h1,
.new-account > header h1,
.login > header h1,
.account > header h1,
.home > header h1 {
  width: 100%; }

.check-font .invisible,
.about .invisible,
.modify-font .invisible,
.upload .invisible,
.new-account .invisible,
.login .invisible,
.account .invisible,
.home .invisible {
  display: none; }

.check-font .message,
.about .message,
.modify-font .message,
.upload .message,
.new-account .message,
.login .message,
.account .message,
.home .message {
  margin: 0 0 3rem 0; }
  .check-font .message p,
  .about .message p,
  .modify-font .message p,
  .upload .message p,
  .new-account .message p,
  .login .message p,
  .account .message p,
  .home .message p {
    margin: 0 0 2.75rem 0;
    width: 50%; }

.check-font .buttonContent,
.about .buttonContent,
.modify-font .buttonContent,
.upload .buttonContent,
.new-account .buttonContent,
.login .buttonContent,
.account .buttonContent,
.home .buttonContent {
  width: 80%; }

.check-font main h2,
.about main h2,
.modify-font main h2,
.upload main h2,
.new-account main h2,
.login main h2,
.account main h2,
.home main h2 {
  width: 100%;
  font-size: 1.5rem;
  margin: 0 0 3rem 0; }

.check-font main form,
.about main form,
.modify-font main form,
.upload main form,
.new-account main form,
.login main form,
.account main form,
.home main form {
  display: flex;
  flex-wrap: wrap; }
  .check-font main form h3,
  .about main form h3,
  .modify-font main form h3,
  .upload main form h3,
  .new-account main form h3,
  .login main form h3,
  .account main form h3,
  .home main form h3 {
    margin: 1rem 0 2rem 0;
    padding: 0 0 0.25rem 0;
    width: 80%;
    border-bottom: solid 1px;
    color: red; }
  .check-font main form > div:not(.submit):not(.family),
  .about main form > div:not(.submit):not(.family),
  .modify-font main form > div:not(.submit):not(.family),
  .upload main form > div:not(.submit):not(.family),
  .new-account main form > div:not(.submit):not(.family),
  .login main form > div:not(.submit):not(.family),
  .account main form > div:not(.submit):not(.family),
  .home main form > div:not(.submit):not(.family) {
    width: 50%;
    display: flex;
    flex-wrap: wrap;
    margin: 0 0 6rem 0; }
  .check-font main form > div.family,
  .about main form > div.family,
  .modify-font main form > div.family,
  .upload main form > div.family,
  .new-account main form > div.family,
  .login main form > div.family,
  .account main form > div.family,
  .home main form > div.family {
    width: 100%; }
  .check-font main form > div:not(.submit) label,
  .check-font main form > div:not(.submit) h4,
  .about main form > div:not(.submit) label,
  .about main form > div:not(.submit) h4,
  .modify-font main form > div:not(.submit) label,
  .modify-font main form > div:not(.submit) h4,
  .upload main form > div:not(.submit) label,
  .upload main form > div:not(.submit) h4,
  .new-account main form > div:not(.submit) label,
  .new-account main form > div:not(.submit) h4,
  .login main form > div:not(.submit) label,
  .login main form > div:not(.submit) h4,
  .account main form > div:not(.submit) label,
  .account main form > div:not(.submit) h4,
  .home main form > div:not(.submit) label,
  .home main form > div:not(.submit) h4 {
    display: inline-block;
    width: 30%;
    color: #03658f; }
  .check-font main form > div:not(.submit) .radio,
  .about main form > div:not(.submit) .radio,
  .modify-font main form > div:not(.submit) .radio,
  .upload main form > div:not(.submit) .radio,
  .new-account main form > div:not(.submit) .radio,
  .login main form > div:not(.submit) .radio,
  .account main form > div:not(.submit) .radio,
  .home main form > div:not(.submit) .radio {
    margin: 0 0 1.5rem 0; }
    .check-font main form > div:not(.submit) .radio label.title,
    .about main form > div:not(.submit) .radio label.title,
    .modify-font main form > div:not(.submit) .radio label.title,
    .upload main form > div:not(.submit) .radio label.title,
    .new-account main form > div:not(.submit) .radio label.title,
    .login main form > div:not(.submit) .radio label.title,
    .account main form > div:not(.submit) .radio label.title,
    .home main form > div:not(.submit) .radio label.title {
      width: 100%;
      padding: 0 0 0.5rem 0; }
    .check-font main form > div:not(.submit) .radio label:not(.title),
    .check-font main form > div:not(.submit) .radio input,
    .about main form > div:not(.submit) .radio label:not(.title),
    .about main form > div:not(.submit) .radio input,
    .modify-font main form > div:not(.submit) .radio label:not(.title),
    .modify-font main form > div:not(.submit) .radio input,
    .upload main form > div:not(.submit) .radio label:not(.title),
    .upload main form > div:not(.submit) .radio input,
    .new-account main form > div:not(.submit) .radio label:not(.title),
    .new-account main form > div:not(.submit) .radio input,
    .login main form > div:not(.submit) .radio label:not(.title),
    .login main form > div:not(.submit) .radio input,
    .account main form > div:not(.submit) .radio label:not(.title),
    .account main form > div:not(.submit) .radio input,
    .home main form > div:not(.submit) .radio label:not(.title),
    .home main form > div:not(.submit) .radio input {
      width: inherit;
      margin: 0 1.5rem 0 1px; }
  .check-font main form > div:not(.submit) label[data-multiple="true"],
  .about main form > div:not(.submit) label[data-multiple="true"],
  .modify-font main form > div:not(.submit) label[data-multiple="true"],
  .upload main form > div:not(.submit) label[data-multiple="true"],
  .new-account main form > div:not(.submit) label[data-multiple="true"],
  .login main form > div:not(.submit) label[data-multiple="true"],
  .account main form > div:not(.submit) label[data-multiple="true"],
  .home main form > div:not(.submit) label[data-multiple="true"] {
    margin: 0 0 1rem 0; }
  .check-font main form > div:not(.submit) #addButt,
  .about main form > div:not(.submit) #addButt,
  .modify-font main form > div:not(.submit) #addButt,
  .upload main form > div:not(.submit) #addButt,
  .new-account main form > div:not(.submit) #addButt,
  .login main form > div:not(.submit) #addButt,
  .account main form > div:not(.submit) #addButt,
  .home main form > div:not(.submit) #addButt {
    margin: 0 0 1rem 37.5%; }
  .check-font main form > div:not(.submit) .subfield,
  .about main form > div:not(.submit) .subfield,
  .modify-font main form > div:not(.submit) .subfield,
  .upload main form > div:not(.submit) .subfield,
  .new-account main form > div:not(.submit) .subfield,
  .login main form > div:not(.submit) .subfield,
  .account main form > div:not(.submit) .subfield,
  .home main form > div:not(.submit) .subfield {
    background-color: #f2f3f4;
    width: calc(80% + 0.75rem);
    padding: 1rem;
    margin: 0 0 1rem 0; }
    .check-font main form > div:not(.submit) .subfield label,
    .about main form > div:not(.submit) .subfield label,
    .modify-font main form > div:not(.submit) .subfield label,
    .upload main form > div:not(.submit) .subfield label,
    .new-account main form > div:not(.submit) .subfield label,
    .login main form > div:not(.submit) .subfield label,
    .account main form > div:not(.submit) .subfield label,
    .home main form > div:not(.submit) .subfield label {
      width: 37.5%; }
    .check-font main form > div:not(.submit) .subfield button,
    .about main form > div:not(.submit) .subfield button,
    .modify-font main form > div:not(.submit) .subfield button,
    .upload main form > div:not(.submit) .subfield button,
    .new-account main form > div:not(.submit) .subfield button,
    .login main form > div:not(.submit) .subfield button,
    .account main form > div:not(.submit) .subfield button,
    .home main form > div:not(.submit) .subfield button {
      margin: 0 0 0 37.5%; }
  .check-font main form > div:not(.submit) input, .check-font main form > div:not(.submit) textarea,
  .about main form > div:not(.submit) input,
  .about main form > div:not(.submit) textarea,
  .modify-font main form > div:not(.submit) input,
  .modify-font main form > div:not(.submit) textarea,
  .upload main form > div:not(.submit) input,
  .upload main form > div:not(.submit) textarea,
  .new-account main form > div:not(.submit) input,
  .new-account main form > div:not(.submit) textarea,
  .login main form > div:not(.submit) input,
  .login main form > div:not(.submit) textarea,
  .account main form > div:not(.submit) input,
  .account main form > div:not(.submit) textarea,
  .home main form > div:not(.submit) input,
  .home main form > div:not(.submit) textarea {
    width: 50%;
    margin: 0 0 1rem 0;
    font-family: "ocr";
    font-size: 1rem; }
  .check-font main form > div:not(.submit) input,
  .about main form > div:not(.submit) input,
  .modify-font main form > div:not(.submit) input,
  .upload main form > div:not(.submit) input,
  .new-account main form > div:not(.submit) input,
  .login main form > div:not(.submit) input,
  .account main form > div:not(.submit) input,
  .home main form > div:not(.submit) input {
    height: 1.5rem; }
  .check-font main form > div:not(.submit) textarea,
  .about main form > div:not(.submit) textarea,
  .modify-font main form > div:not(.submit) textarea,
  .upload main form > div:not(.submit) textarea,
  .new-account main form > div:not(.submit) textarea,
  .login main form > div:not(.submit) textarea,
  .account main form > div:not(.submit) textarea,
  .home main form > div:not(.submit) textarea {
    height: 6rem; }
  .check-font main form > div:not(.submit) select,
  .about main form > div:not(.submit) select,
  .modify-font main form > div:not(.submit) select,
  .upload main form > div:not(.submit) select,
  .new-account main form > div:not(.submit) select,
  .login main form > div:not(.submit) select,
  .account main form > div:not(.submit) select,
  .home main form > div:not(.submit) select {
    display: inline-block; }
  .check-font main form > div:not(.submit) input.hidden,
  .about main form > div:not(.submit) input.hidden,
  .modify-font main form > div:not(.submit) input.hidden,
  .upload main form > div:not(.submit) input.hidden,
  .new-account main form > div:not(.submit) input.hidden,
  .login main form > div:not(.submit) input.hidden,
  .account main form > div:not(.submit) input.hidden,
  .home main form > div:not(.submit) input.hidden {
    display: none; }
  .check-font main form > div:not(.submit) textarea,
  .check-font main form > div:not(.submit) input:not([readonly]):not([type="file"]),
  .about main form > div:not(.submit) textarea,
  .about main form > div:not(.submit) input:not([readonly]):not([type="file"]),
  .modify-font main form > div:not(.submit) textarea,
  .modify-font main form > div:not(.submit) input:not([readonly]):not([type="file"]),
  .upload main form > div:not(.submit) textarea,
  .upload main form > div:not(.submit) input:not([readonly]):not([type="file"]),
  .new-account main form > div:not(.submit) textarea,
  .new-account main form > div:not(.submit) input:not([readonly]):not([type="file"]),
  .login main form > div:not(.submit) textarea,
  .login main form > div:not(.submit) input:not([readonly]):not([type="file"]),
  .account main form > div:not(.submit) textarea,
  .account main form > div:not(.submit) input:not([readonly]):not([type="file"]),
  .home main form > div:not(.submit) textarea,
  .home main form > div:not(.submit) input:not([readonly]):not([type="file"]) {
    background-color: #f2f3f4;
    border: none; }
  .check-font main form > div:not(.submit) .subfield textarea,
  .check-font main form > div:not(.submit) .subfield input:not([readonly]),
  .about main form > div:not(.submit) .subfield textarea,
  .about main form > div:not(.submit) .subfield input:not([readonly]),
  .modify-font main form > div:not(.submit) .subfield textarea,
  .modify-font main form > div:not(.submit) .subfield input:not([readonly]),
  .upload main form > div:not(.submit) .subfield textarea,
  .upload main form > div:not(.submit) .subfield input:not([readonly]),
  .new-account main form > div:not(.submit) .subfield textarea,
  .new-account main form > div:not(.submit) .subfield input:not([readonly]),
  .login main form > div:not(.submit) .subfield textarea,
  .login main form > div:not(.submit) .subfield input:not([readonly]),
  .account main form > div:not(.submit) .subfield textarea,
  .account main form > div:not(.submit) .subfield input:not([readonly]),
  .home main form > div:not(.submit) .subfield textarea,
  .home main form > div:not(.submit) .subfield input:not([readonly]) {
    background-color: #ffffff; }
  .check-font main form > div:not(.submit) input.wrong,
  .about main form > div:not(.submit) input.wrong,
  .modify-font main form > div:not(.submit) input.wrong,
  .upload main form > div:not(.submit) input.wrong,
  .new-account main form > div:not(.submit) input.wrong,
  .login main form > div:not(.submit) input.wrong,
  .account main form > div:not(.submit) input.wrong,
  .home main form > div:not(.submit) input.wrong {
    background-color: red;
    color: #ffffff; }
  .check-font main form > div:not(.submit) label.required::after,
  .about main form > div:not(.submit) label.required::after,
  .modify-font main form > div:not(.submit) label.required::after,
  .upload main form > div:not(.submit) label.required::after,
  .new-account main form > div:not(.submit) label.required::after,
  .login main form > div:not(.submit) label.required::after,
  .account main form > div:not(.submit) label.required::after,
  .home main form > div:not(.submit) label.required::after {
    content: "*";
    color: red; }
  .check-font main form > div:not(.submit) label.tags::after,
  .about main form > div:not(.submit) label.tags::after,
  .modify-font main form > div:not(.submit) label.tags::after,
  .upload main form > div:not(.submit) label.tags::after,
  .new-account main form > div:not(.submit) label.tags::after,
  .login main form > div:not(.submit) label.tags::after,
  .account main form > div:not(.submit) label.tags::after,
  .home main form > div:not(.submit) label.tags::after {
    content: "[]";
    color: red; }
  .check-font main form > div:not(.submit) .charset,
  .about main form > div:not(.submit) .charset,
  .modify-font main form > div:not(.submit) .charset,
  .upload main form > div:not(.submit) .charset,
  .new-account main form > div:not(.submit) .charset,
  .login main form > div:not(.submit) .charset,
  .account main form > div:not(.submit) .charset,
  .home main form > div:not(.submit) .charset {
    word-break: break-all;
    padding: 1rem;
    font-size: 2rem;
    line-height: 3rem;
    margin: 0 0 2rem 0;
    width: 85%;
    background-color: #f2f3f4; }
    .check-font main form > div:not(.submit) .charset span,
    .about main form > div:not(.submit) .charset span,
    .modify-font main form > div:not(.submit) .charset span,
    .upload main form > div:not(.submit) .charset span,
    .new-account main form > div:not(.submit) .charset span,
    .login main form > div:not(.submit) .charset span,
    .account main form > div:not(.submit) .charset span,
    .home main form > div:not(.submit) .charset span {
      width: 2rem;
      display: inline-block;
      text-align: center; }
  .check-font main form > div:not(.submit) .tag,
  .about main form > div:not(.submit) .tag,
  .modify-font main form > div:not(.submit) .tag,
  .upload main form > div:not(.submit) .tag,
  .new-account main form > div:not(.submit) .tag,
  .login main form > div:not(.submit) .tag,
  .account main form > div:not(.submit) .tag,
  .home main form > div:not(.submit) .tag {
    display: inline-block;
    margin: 0 1rem 0 0;
    background-color: red;
    color: #ffffff; }
  .check-font main form .submit,
  .about main form .submit,
  .modify-font main form .submit,
  .upload main form .submit,
  .new-account main form .submit,
  .login main form .submit,
  .account main form .submit,
  .home main form .submit {
    width: 100%; }
    .check-font main form .submit input[type="submit"],
    .about main form .submit input[type="submit"],
    .modify-font main form .submit input[type="submit"],
    .upload main form .submit input[type="submit"],
    .new-account main form .submit input[type="submit"],
    .login main form .submit input[type="submit"],
    .account main form .submit input[type="submit"],
    .home main form .submit input[type="submit"] {
      background-color: red;
      color: white;
      height: 3rem;
      width: 12rem;
      margin: 0 0 1.5rem 0;
      font-size: 1rem;
      font-family: "ocr"; }

@media only screen and (max-width: 1300px) {
  html {
    font-size: 12px; } }