body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 16px;
  color: rgba(238, 238, 238, 0.779);
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}

/* Headers, Simplified/Traditional Styling */

@media (max-width: 680px) {
  .redirects {
    text-decoration: none; 
    margin: 0px 3px; 
    justify-content: center; 
    font-weight: 800; 
    font-size: 3.9vmin; 
    color: rgb(39, 59, 111);
    white-space: nowrap;
  }
  
  .redirect-arrows {
    font-weight: 800; 
    font-size: 4.1vmin; 
    white-space: nowrap;
  }
}

@media (min-width: 680px) {
  .redirects {
    text-decoration: none; 
    margin: 0px 5px; 
    justify-content: center; 
    font-weight: 800; 
    font-size: 3.5vmin; 
    color: rgb(39, 59, 111);
    white-space: nowrap;
  }
  
  .redirect-arrows {
    justify-content: center; 
    font-weight: 800; 
    font-size: 3.7vmin; 
    color: rgb(39, 59, 111); 
    white-space: nowrap;
  }
}

.simp-or-trad {
  color: rgb(121, 207, 242); 
}

.not-simp-or-trad {
  color: white;
}

#traditionalLabel {
  padding: 0px 5px 0px 0px;
}

#simplifiedLabel {
  padding: 0px 0px 0px 5px;
}

.btn-convert {
  display: inline-block;
  margin-top: 2px;
  top:15px;
  width:40px;
  height:20px;
  background: grey;
  border-radius:15px;
  transition:all 100ms ease-in-out;
}

.btn-convert > .inner-circle {
  width:20px;
  height:20px;
  background:#fff;
  border-radius:50%;
  transition:all 100ms ease-in-out;
}

.btn-convert.active > .inner-circle {
  margin-left:20px;
}

/* Fill in the Blank Styling */

.check-or-x { 
  height: 25px; 
  width: 50px;
  display: inline;
  font-size:1em;
  display: flex;
  flex-wrap: wrap;
  margin-left: 15px;
}

.right {
  color: green;
}

.wrong {
  color: red;
}

.trad-num, .simp-num {
  font-size: 2em; 
  line-height: 34px;
  width: 175px;
}

.navbar-left {
  line-height: 2em; 
  height: 2em; 
  margin-left: 15px; 
  margin-right: 30px; 
}

.correctAns {
  height: 25px; 
  width: 210px; 
  display: flex;
  flex-wrap: row-wrap;
}

.char-display {
  display: flex; 
  flex-flow: row wrap; 
  justify-content: center;
  margin: 5px;
}

button {
  padding: 10px 20px;
}

@media (max-width: 680px) {
  #score, .score {
    font-size: 4.5vmin; 
    color: rgb(26, 190, 187); 
    font-weight: bold; 
    display: inline-block; 
    vertical-align: bottom;
  }
  
  .bottomText {
    color: rgb(26, 190, 187); 
    display:inline-block; 
    text-align:center; 
    font-size:4.5vmin; 
    margin-bottom: 10px;
  }
  
  #time {
    color: rgb(26, 190, 187); 
    display:inline-block; 
    text-align:center; 
    font-size:4.5vmin; 
    margin-bottom: 10px;
  }

  #lower-container {
    margin: 5%; 
    display: flex; 
    flex-flow:column-reverse; 
    justify-content: space-between; 
    align-items: flex-start; 
    width: 85%;
  }
}

@media (max-width: 1335px) and (min-width:680px) {
  #score, .score {
    font-size: 3vmin; 
    color: rgb(26, 190, 187); 
    font-weight: bold; 
    display: inline-block; 
    vertical-align: bottom;
  }
  
  .bottomText {
    color: rgb(26, 190, 187); 
    display:inline-block; 
    text-align:center; 
    font-size:3vmin; 
    margin-bottom: 10px;
  }
  
  #time {
    color: rgb(26, 190, 187); 
    display:inline-block; 
    text-align:center; 
    font-size:3vmin; 
    margin-bottom: 10px;
  }

  #lower-container {
    margin: 5%; 
    display: flex; 
    flex-flow: row wrap; 
    justify-content: space-between; 
    align-items: flex-start; 
    width: 85%;
  }
}

@media (min-width: 1335px) {
  #score, .score {
    font-size: 50px; 
    color: rgb(26, 190, 187); 
    font-weight: bold; 
    display: inline-block; 
    vertical-align: bottom;
  }
  
  .bottomText {
    color: rgb(26, 190, 187); 
    display:inline-block; 
    text-align:center; 
    font-size:2em; 
    margin-bottom: 10px;
  }
  
  #time {
    color: rgb(26, 190, 187); 
    display:inline-block; 
    text-align:center; 
    font-size:2em; 
    margin-bottom: 10px;
  }

  #lower-container {
    margin: 5%; 
    display: flex; 
    flex-flow:row wrap; 
    justify-content: space-between; 
    align-items: flex-start; 
    width: 85%;
  }
}

/* Hamburger icon/group display styling */

#menu_toggle {
  opacity: 0;
}

#menu_toggle:checked + .menu_btn > span {
  transform: rotate(45deg);
}

#menu_toggle:checked + .menu_btn > span::before {
  top: 0;
  transform: rotate(0deg);
}

#menu_toggle:checked + .menu_btn > span::after {
  top: 0;
  transform: rotate(90deg);
}

#menu_toggle:checked ~ .group_selector {
  left: 0 !important;
}

.menu_btn {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 26px;
  height: 26px;
  cursor: pointer;
  z-index: 1;
}

.menu_btn > span,
.menu_btn > span::before,
.menu_btn > span::after {
  display: block;
  position: absolute;
  width: 100%;
  height: 2px;
  background-color: #616161;
  transition-duration: .1s;
}

.menu_btn > span::before {
  content: '';
  top: -8px;
}

.menu_btn > span::after {
  content: '';
  top: 8px;
}

.group_selector {
  display: block;
  position: fixed;
  top: 0;
  left: -100%;
  width: 150px;
  margin: 0;
  height: 100%;
  padding: 40px 0;
  list-style: none;
  background-color: #ECEFF1;
  box-shadow: 2px 2px 6px rgba(0, 0, 0, .4);
  transition-duration: .1s;
  overflow-y: auto;
}

.group_name {
  display: block;
  padding: 12px 24px;
  color: #333;
  font-family: 'Roboto', sans-serif;
  font-weight: 600;
  text-decoration: none;
  transition-duration: .2s;
  cursor: pointer;
}

.group_name:hover {
  background-color: #CFD8DC;
}

@media (max-width: 390px) {
  .prac_1, .prac_2, .prac_3, .prac_4, .prac_5 {
    font-size: 18px !important;
  }
}

.practice-redirect {
  cursor: pointer;
}

/* Multiple Choice CSS */

.choices {
  text-align:justify; 
  display:flex; 
  flex-direction: row;
  align-items: center; 
  justify-content: center; 
}

.multipleChoice {
  font-size: 22px; 
  text-align: left; 
  justify-content: center;
  cursor: pointer;
}

/* Sentences Multiple Choice CSS*/

@media(max-width: 396px) {
  .sentMultipleChoice {
    font-size: 1.75em !important;
  }
}

#sentenceMC > ol {
  list-style-position: inside;
  padding: 0;
}

.sentMultipleChoice {
  font-size: 30px; 
  cursor: pointer;
  margin-bottom: 5px;
  width: auto;
  text-align: center;
}

.sentence-display {
  width: auto; 
  margin-top: 20px;
}

@media (max-width: 680px) {
  .user-eng-defn, .word-table, .question-num {
    font-size: 18px !important;
  }
  .table {
    width: 120%;
  }
}

@media (min-width: 680px) {
  .user-eng-defn, .word-table, .question-num {
    font-size: 24px !important;
  }
}

/* Index Page*/

.vocab-container {
  min-width: 300px;
}

.vocab-container > .row {
  justify-content: center;
 }
 
.card {
  background-color: rgba(13, 97, 223, 0.468);
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  margin: 15px;
  white-space:nowrap
}

.card > .container {
  background-color: rgba(13, 97, 223, 0.468);
  padding-top: 1%;
  margin-left: 0;
  margin-right: 0;
  font-size: 1.25em;
  font-weight: bold;
}

.card > .container > p {
  font-size: 1.25em;
  font-weight: bold;
  text-align: center;
}

.lower-card {
  background-color: rgba(60, 122, 216, 0.263) !important;
  padding: 1% 3%;
}

.lower-card > p {
  cursor: pointer;
  font-size: 1.25em;
  margin-bottom: 1%;
}

/* Vocabulary/Flashcards Page */

.vocabCard {
  border-radius: 25px;
  border: 2px solid black;
  background-color: rgb(232, 237, 255);
  padding: 20px;
  height:112px;
  display: flex;
  text-align: center;
  min-width: auto;
}

.vocabCard div {
  margin: auto;
}

.vocabCard a {
  color: black !important;
  text-decoration: none !important;
  cursor: pointer;
}

.vocabList {
  text-align: left;
  font-size: 2em;
}

.vocab {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin: 20px;
}

#myCarousel {
  margin-left: 100px;
  margin-right: 100px;
}

.carousel-control-prev-icon, .carousel-control-next-icon {
  color: black;
  font-size: 40px;
}

.vocabList > .trad-num, .vocabList > .simp-num, .vocabList > p, .vocabList > strong, .carousel-box > h1 {
  width: auto !important;
  word-wrap: break-word;
}

.carousel-box > .trad-num, .carousel-box > .simp-num {
  text-align: center; 
  padding: 20px 0; 
  font-size: 48px; 
  font-weight: bolder;
  line-height: 50px;
}

.carousel-box {
  background-color: #f2f3f4; 
  padding: 20px; 
} 

@media (max-width: 680px) {
  .carousel-box {
    width: 82%;
  }

  .carousel-box > ul {
    padding: 0;
  }

  .carousel-control-next {
    justify-content: right !important;
  }

  .carousel-control-prev {
    justify-content: left !important;
  }

  #trad-content-0, #trad-content-1, #trad-content-2, #trad-content-3, #trad-content-4,
  #trad-content-5, #trad-content-6, #trad-content-7, #trad-content-8, #trad-content-9,
  #simp-content-0, #simp-content-1, #simp-content-2,#simp-content-3, #simp-content-4,
  #simp-content-5, #simp-content-6, #simp-content-7, #simp-content-8, #simp-content-9  {
    display: none !important;
    font-size: 24px !important;  
  }

  #eng-content-0, #eng-content-1, #eng-content-2, #eng-content-3, #eng-content-4,
  #eng-content-5, #eng-content-6, #eng-content-7, #eng-content-8, #eng-content-9,
  #pinyin-content-0, #pinyin-content-1, #pinyin-content-2, #pinyin-content-3, #pinyin-content-4,
  #pinyin-content-5, #pinyin-content-6, #pinyin-content-7, #pinyin-content-8, #pinyin-content-9 {
    font-size: 20px;
  }
}

@media (max-width: 1400px) and (min-width:680px) {
  .carousel-box {
    width: 55%;
  }

  .carousel-control-next {
    justify-content: left !important;
    transform: translateX(-25%);
  }

  .carousel-control-prev {
    justify-content: right !important;
    transform: translateX(25%);
  }
  #trad-content-0, #trad-content-1, #trad-content-2, #trad-content-3, #trad-content-4,
  #trad-content-5, #trad-content-6, #trad-content-7, #trad-content-8, #trad-content-9,
  #simp-content-0, #simp-content-1, #simp-content-2,#simp-content-3, #simp-content-4,
  #simp-content-5, #simp-content-6, #simp-content-7, #simp-content-8, #simp-content-9  {
    display: none !important;
    font-size: 30px !important;  
  }
}

@media (min-width:1400px)  {
  .carousel-box {
    width: 45%;
  }

  .carousel-control-next {
    justify-content: left !important;
    transform: translateX(-50%);
  }

  .carousel-control-prev {
    justify-content: right !important;
    transform: translateX(50%);
  }

  #trad-content-0, #trad-content-1, #trad-content-2, #trad-content-3, #trad-content-4,
  #trad-content-5, #trad-content-6, #trad-content-7, #trad-content-8, #trad-content-9,
  #simp-content-0, #simp-content-1, #simp-content-2,#simp-content-3, #simp-content-4,
  #simp-content-5, #simp-content-6, #simp-content-7, #simp-content-8, #simp-content-9  {
    display: none !important;
    font-size: 30px !important;  
  }
}

#groupdisplayname {
  cursor: pointer;
}

#less-eng-0, #less-eng-1, #less-eng-2, #less-eng-3, #less-eng-4, 
#less-eng-5, #less-eng-6, #less-eng-7, #less-eng-8, #less-eng-9,
#less-pinyin-0, #less-pinyin-1, #less-pinyin-2, #less-pinyin-3, #less-pinyin-4, 
#less-pinyin-5, #less-pinyin-6, #less-pinyin-7, #less-pinyin-8, #less-pinyin-9,
#less-sent-0, #less-sent-1, #less-sent-2, #less-sent-3, #less-sent-4,
#less-sent-5, #less-sent-6, #less-sent-7, #less-sent-8, #less-sent-9,
#eng-content-0, #eng-content-1, #eng-content-2, #eng-content-3, #eng-content-4,
#eng-content-5, #eng-content-6, #eng-content-7, #eng-content-8, #eng-content-9,
#pinyin-content-0, #pinyin-content-1, #pinyin-content-2, #pinyin-content-3, #pinyin-content-4,
#pinyin-content-5, #pinyin-content-6, #pinyin-content-7, #pinyin-content-8, #pinyin-content-9 {
  display: none;
}

.vocabList > b {
  font-size: 18px;
}

/* Chars Fill in the Blank*/

.charBlank {
  display: inline; 
  margin: 0px 4px;
  height: 2.25rem; 
  width: 2.25rem;
  padding: 0;
  font-size: 1.75rem;
}

.results-answers, #userAnswer, .innerquiz, .table-results, .table {
  font-size: 0;
}

.results-answers span {
  font-size: 32px;
}

.innerquiz span {
  font-size: 36px;
}

.table span, .table-results span {
  font-size: 32px;
}

.table th {
  font-size: 16px;
}

.checkmark {
  color: green;
  width:30px;
  font-size: 32px;
}

.xmark {
  color:red; 
  width:30px;
  font-size: 32px;
}

th {
  padding: 0px 0px 0px 50px;
}

table.table-fit {
  width: auto !important;
  table-layout: auto !important;
}
table.table-fit thead th, table.table-fit tfoot th {
  width: auto !important;
}
table.table-fit tbody td, table.table-fit tfoot td {
  width: auto !important;
}

/* Exercise 1 - Crossword Puzzle */
#defn-to-find {
  border: 1px solid; 
  width:fit-content;  
  text-align: center; 
  padding: 0px 5px;
  font-size:1.5em;
}

.crossword-box {
  border: 1px solid black;
  line-height: 45px;
  padding: 5px;
  cursor: pointer;
}

.selected-box {
  background-color: rgb(3, 252, 107);
}

.used-box {
  background-color: rgb(150, 150, 150);
}

@media (max-width: 390px) {
  .crossword-phrase-result, .table-timer {
    font-size: 26px !important;
  }
}
/* Results Pages */
#results {
  padding: 0;
}