:root {
  --background-color: #C39888;
  --default-yellow: #F3BD37;
  --font-color: #50413C;
  --dark-font-color: #403430;
  --dark-dark-font-color: #2c2422;
}

html, body {
  width: 100%;
  min-height: 100%;

  user-select: none;
  overscroll-behavior: contain;
  overflow-x: hidden;
  z-index: 100;

  margin: 0;
  padding: 0;

  font-weight: bold;

  color: var(--font-color);
  background-color: var(--background-color);
  font-family: Arial, sans-serif;
}

a, .link {
  text-decoration: none;
  color: var(--font-color);

  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Link */

.link {
  color: var(--font-color);
  cursor: pointer;
}

.link:hover {
  color: var(--dark-font-color);
}

/* Back Button */

.back-button {
  position: fixed;
  z-index: 600;
  top: 0.3rem;
  left: 1.5rem;
  font-size: 1.1rem;
}

@media (max-width: 600px) {
  .back-button {
    top: 0.5vw;
    left: 4vw;
    font-size: 3.9vw;
  }
}

/* Card View Button */

.card-view-button {
  position: fixed;
  z-index: 101;
  top: 0.3rem;
  right: 1.5rem;
  font-size: 1.1rem;
}

@media (max-width: 600px) {
  .card-view-button {
    top: 0.5vw;
    right: 4vw;
    font-size: 3.9vw;
  }
}

.word-list {
  position: fixed;
  overflow: auto;
  z-index: 200;

  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;

  width: 100%;
  height: 100%;

  background-color: var(--background-color);
  display: none;
}

.tile-container {
  width: 100%;
  min-height: 100%;

  display: flex;
  flex-direction: column;
  align-items: center;
}

.margin-bottom {
  margin-bottom: 1.5rem;
}

.margin-top {
  margin-top: 5rem;
}

@media (max-width: 600px) {
  .margin-bottom {
    margin-bottom: 6.5vw;
  }

  .margin-top {
    margin-top: 21.5vw;
  }
}

.tile {
  width: 87vw;
  max-width: 45rem;
  min-height: 4rem;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 1.5rem;
  border-radius: 1rem;
  padding: 1rem;
  background-color: var(--default-yellow);
  box-shadow:
    0 2px 2px 0 rgba(0, 0, 0, 0.14),
    0 3px 1px -2px rgba(0, 0, 0, 0.12),
    0 1px 5px 0 rgba(0, 0, 0, 0.2);
}

@media (max-width: 600px) {
  .tile {
    min-height: 17.35vw;

    font-size: 5vw;
    border-radius: 5vw;
    padding: 3vw;
  }
}

.card-container {
  position: fixed;
  z-index: 500;

  width: 100%;
  height: 100%;

  display: grid;
  justify-items: center;
  align-items: center;
  grid-template-columns: 100%;
  grid-template-rows: 60% minmax(85px, 10%) 30%;
}

.card-view {
  width: 100%;
  height: 100%;

  position: fixed;
  z-index: 200;
  overflow: auto;

  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;

  background-color: var(--background-color);
  display: none;
}

.card {
  font-size: 3.5rem;
  text-align: center;
  padding: 1rem;
}

.card-control-wrapper {
  width: 100%;
  height: 100%;

  display: flex;
  justify-content: center;

  background-color: #e9bca9;
  border: 0.2rem solid var(--default-yellow);
}

@media (max-width: 600px) {
  .card {
    font-size: 9vw;
    padding: 3vw;
  }
}

.card-control {
  width: 80%;
  max-width: 1000px;

  display: flex;
  justify-content: space-between;
  align-items: center;
}

.english-word {
  opacity: .4;
}

/* 

  Target

*/

#main {
  display: none;
}

#main:target {
  display: block;
}

#Qe87bf3bd-card-view:target {
  display: block;
}

#Qe87bf3bd:target {
  display: block;
}

#Q9f63878d-card-view:target {
  display: block;
}

#Q9f63878d:target {
  display: block;
}

#Q8ded2eae-card-view:target {
  display: block;
}

#Q8ded2eae:target {
  display: block;
}

#Q5d5c67f2-card-view:target {
  display: block;
}

#Q5d5c67f2:target {
  display: block;
}

#Q5e1038c2-card-view:target {
  display: block;
}

#Q5e1038c2:target {
  display: block;
}

#Q934c0ad8-card-view:target {
  display: block;
}

#Q934c0ad8:target {
  display: block;
}

#Q7dc13b29-card-view:target {
  display: block;
}

#Q7dc13b29:target {
  display: block;
}

#Qbe2eb0dc-card-view:target {
  display: block;
}

#Qbe2eb0dc:target {
  display: block;
}

#Q061da0aa-card-view:target {
  display: block;
}

#Q061da0aa:target {
  display: block;
}

#Q0691172e-card-view:target {
  display: block;
}

#Q0691172e:target {
  display: block;
}

#Q545931d3-card-view:target {
  display: block;
}

#Q545931d3:target {
  display: block;
}

#Q5b534609-card-view:target {
  display: block;
}

#Q5b534609:target {
  display: block;
}

#Qd63b6314-card-view:target {
  display: block;
}

#Qd63b6314:target {
  display: block;
}

#Q64402315-card-view:target {
  display: block;
}

#Q64402315:target {
  display: block;
}

#Q4998b91a-card-view:target {
  display: block;
}

#Q4998b91a:target {
  display: block;
}

#Qcf57212c-card-view:target {
  display: block;
}

#Qcf57212c:target {
  display: block;
}

#Q9999955f-card-view:target {
  display: block;
}

#Q9999955f:target {
  display: block;
}

#Qfe870d91-card-view:target {
  display: block;
}

#Qfe870d91:target {
  display: block;
}

#Qc2200998-card-view:target {
  display: block;
}

#Qc2200998:target {
  display: block;
}

#Qcc44c182-card-view:target {
  display: block;
}

#Qcc44c182:target {
  display: block;
}

#Qcb873b05-card-view:target {
  display: block;
}

#Qcb873b05:target {
  display: block;
}

#Q14a878d0-card-view:target {
  display: block;
}

#Q14a878d0:target {
  display: block;
}

#Qd37fd8f8-card-view:target {
  display: block;
}

#Qd37fd8f8:target {
  display: block;
}

#Qc6d290ed-card-view:target {
  display: block;
}

#Qc6d290ed:target {
  display: block;
}

#Q9a36b437-card-view:target {
  display: block;
}

#Q9a36b437:target {
  display: block;
}

#Q4339a615-card-view:target {
  display: block;
}

#Q4339a615:target {
  display: block;
}

#Qf1af37f8-card-view:target {
  display: block;
}

#Qf1af37f8:target {
  display: block;
}

#Q8732cd2b-card-view:target {
  display: block;
}

#Q8732cd2b:target {
  display: block;
}

#Qa26f9502-card-view:target {
  display: block;
}

#Qa26f9502:target {
  display: block;
}

#Qc4a0c943-card-view:target {
  display: block;
}

#Qc4a0c943:target {
  display: block;
}

#Qcbc53586-card-view:target {
  display: block;
}

#Qcbc53586:target {
  display: block;
}

#Qf5e78052-card-view:target {
  display: block;
}

#Qf5e78052:target {
  display: block;
}

#Q790a3023-card-view:target {
  display: block;
}

#Q790a3023:target {
  display: block;
}

#Qcd42cf2e-card-view:target {
  display: block;
}

#Qcd42cf2e:target {
  display: block;
}

#Q9f6abc8d-card-view:target {
  display: block;
}

#Q9f6abc8d:target {
  display: block;
}

#Q5f6abc8b-card-view:target {
  display: block;
}

#Q5f6abc8b:target {
  display: block;
}