body {
  font-family: 'Roboto', Arial, 'Helvetica Neue', Helvetica, sans-serif;
  margin: 0 auto;
}

h1 {
  font-size: 22px;
  /*line-height: 25px;*/
}

h2 {
  font-size: 18px;
  /*line-height: 25px;*/
}

#home {
  margin-top: 10px;
}

.menu {
  /*margin-bottom: 15px;*/
}

ul.main-index {
  margin: 5px auto;
  column-count: auto;
  column-width: 300px;
  column-gap: 50px;
  max-width: 1800px;
}

ul.main-index li {
  padding: 5px 0;
}

.center {
  margin-right: auto;
  margin-left: auto;
}

.t-a-center {
  text-align: center;
}

.controls-wrap {
  margin: 0 auto;
}

.menu,
.controls-wrap {
  width: 100vw;
  max-width: 900px;
}

td.left {
  text-align: left;
}

td.center {
  text-align: center;
}

td.right {
  text-align: right;
}

.c1 {
  width: 8.333333%;
}

.c2 {
  width: 16.666666%;
}

.c3 {
  width: 25%;
}

.c4 {
  width: 33.333333%;
}

.c6 {
  width: 50%;
}

.c8 {
  width: 66.666666%;
}

.c12 {
  width: 100%;
}

.f-left {
  float: left;
}

#listening-test-wrap {
  width: 100%;
}

img#picture,
.controls-wrap1 {
  /*width: 900px;*/
  max-width: 900px;
  max-height: 800px;
}

@media screen and (max-width: 900px) {
  img#picture {
    width: 100vw;
  }
}

a {
  text-decoration: none;
}

.controls-wrap {
  text-align: center;
}

.control-wrap {
  margin-top: 5px;
}

.hide {
  display: none !important;
}

.hidden {
  visibility: hidden;
}

.score {
  margin: 0 15px;
}

#hint-wrap {
  margin-top: 15px;
}

.clear {
  clear: both;
}

@media screen and (max-width: 900px) and (orientation: landscape),
  (max-height: 800px) and (orientation: landscape) {
  .controls {
    margin-top: 0;
  }

  .control-wrap {
    margin-top: 0;
  }

  .score {
    position: fixed;
    left: 10px;
    bottom: 45px;
    margin: 0;
  }

  #skip,
  #hint {
    position: fixed;
    left: 10px;
    bottom: 15px;
  }

  #replay,
  #check {
    position: fixed;
    right: 10px;
    bottom: 15px;
  }

  #home {
    position: fixed;
    left: 10px;
    top: 15px;
  }

  #skill {
    position: fixed;
    right: 10px;
    top: 15px;
  }

  #mode {
    position: fixed;
    right: 10px;
    top: 45px;
  }

  .menu {
    margin-bottom: 0;
  }
}

.set-link,
.skill-link,
.mode-link {
  padding: 5px 10px;
}

.set-link.active,
.skill-link.active,
.mode-link.active {
  background-color: #c0ffc0;
}

label.settings {
  font-weight: bold;
  margin: 10px;
}

.button {
  display: inline-block;
  padding: 10px 15px;
  /*margin: 10px;*/
  background-color: #e8e8e8;
  border: 1px solid #999999;
}

.writing-text {
  padding: 10px;
  background-color: #005c00;
  border-radius: 20px;
  color: #ffffff;
  display: inline-table;
}

.writing-text:empty {
  background-color: transparent;
}

/* utility classes */
.df {
  display: flex;
}
.fdc {
  flex-direction: column;
}
.jc-sb {
  justify-content: space-between;
}
/* justify-content (main-axis) */
.jcc {
  justify-content: center;
}
.jcsb {
  justify-content: space-between;
}
.jc-fs {
  justify-content: flex-start;
}
.jc-fe {
  justify-content: flex-end;
}

/* Item Alignment (cross-axis) */
/* align-items - default behavior for flex items */
.aib {
  align-items: baseline;
}
.aic {
  align-items: center;
}
.aifs {
  align-items: flex-start;
}
.aife {
  align-items: flex-end;
}
/*align-self - to override for individual flex item*/
.as-fs {
  align-self: flex-start;
}
.as-c {
  align-self: center;
}
.as-fe {
  align-self: flex-end;
}
.as-st {
  align-self: stretch;
}

/* align-content */
/* This property only takes effect on multi-line flexible containers, */
/* where flex-wrap is set to either wrap or wrap-reverse. */
/* (cross-axis) */

.gap10 {
  gap: 10px;
}

.dg {
  display: grid;
}

.gt-min-auto {
  grid-template-columns: min-content auto;
}

.rgap10 {
  row-gap: 10px;
}

.cgap10 {
  column-gap: 10px;
}

.m0 {
  margin: 0;
}
.m-t-0 {
  margin-top: 0;
}
.m-b-0 {
  margin-bottom: 0;
}
.mb-5 {
  margin-bottom: 5px;
}
.m15 {
  margin: 15px;
}

.p-l-0 {
  padding-left: 0;
}
.p-10 {
  padding: 10px;
}

.red {
  color: red;
}

.hover-bg-green1:hover {
  background-color: #d3f0cc;
}
.bg-green2 {
  background-color: #e9ff84;
}

/* Position */
.absolute {
  position: absolute;
}

.relative {
  position: relative;
}

.fixed {
  position: fixed;
}

.w100p {
  width: 100%;
}
.max-w768 {
  max-width: 768px;
}

.h100vh {
  height: 100vh;
}
.h100p {
  height: 100%;
}
.h360 {
  height: 360px;
}

/*font-size: 21px;*/
/*  line-height: 28px;*/
/*  height: 500px;*/
/*  overflow-y: scroll;*/
/*  background-color: #fff;*/

.fs21 {
  font-size: 21px;
}
.lh28 {
  line-height: 28px;
}
.o-y-s {
  overflow-y: scroll;
}
.cursor-p {
  cursor: pointer;
}