@import url('https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@1,400;1,700&display=swap');

:root {
  --anomaly-text-size: 3em;
  --primary-text-size: 2em;
  --secondary-text-size: 1.25em;
  --small-text-size: .75em;
}

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #0000;
}

::-webkit-scrollbar-thumb {
  border: 1px solid;
  border-radius: 1em;
  background-color: #0000;
}

*, *::before, *::after {
  box-sizing: border-box;
  -webkit-tap-highlight-color:  #0000; 
}

*:focus {
  outline: 0;
}

body {
  margin: 0;
  background-color: #333;
  overflow: hidden;
}

h1, h2, h3, h4, h5, h6, p, pre, ul {
  margin: 0;
  padding: 0;
}

input, button {
  border: 0;
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  background-color: #0000;
}

input::-webkit-calendar-picker-indicator {
  opacity: 100;
}

button, input {
  padding: .25em .75em;
  border: 1px solid;
  border-radius: 1em;
  cursor: pointer;
}

.dragging {
  background-color: #222b;
}

.page {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  max-width: 720px;
  height: 100svh;
  margin: 0 auto;
  padding: 2em;
  text-align: center;
  font-family: 'Space Mono', monospace;
  color: #fff;
}

@media (max-width: 720px) {
  .page {
    padding: .5em;
  }
}

.word-right {
  color: lightgreen;
}

.word-wrong {
  color: red;
}

/* page home */
.page.home {
  gap: 5em;
}

.page.home .heading-wrapper h1 {
  margin-bottom: .5em;
  font-size: var(--primary-text-size);
}

.page.home .heading-wrapper p {
  font-size: var(--secondary-text-size);
}

.page.home .level {
  font-size: var(--anomaly-text-size);
}
/* /page home */

/* page memorize */
.page.memorize {
  justify-content: space-between;
}

.page.memorize .level {
  font-size: var(--primary-text-size);
}

#word-var {
  font-size: var(--anomaly-text-size);
}

.page.memorize .position {
  font-size: var(--secondary-text-size);
}
/* /page memorize */

/* page search-words */
.page.search-words {
  justify-content: start;
}

.page.search-words .memo-list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-bottom: 1em;
}

@media (max-width: 720px) {
  .memo-list-header h3 {
    display: none;
  }
}

#memo-list {
  flex-grow: 1;
  width: 100%;
  padding: 1em;
  text-align: left;
  list-style: none;
  border: 1px solid;
  border-radius: 1em;
  overflow: auto;
  user-select: none;
}

#memo-list .memo-list-item {
  display: inline-block;
  margin-right: .5em;
  margin-bottom: .5em;
  padding: .25em .25em .25em .75em;
  border: 1px solid;
  border-radius: .5em;
  cursor: pointer;
}
/* /page search-words */

/* page game-results */
.page.game-results {
  gap: 5em;
}

.page.game-results .scores {
  font-size: var(--secondary-text-size);
}

.page.game-results .message-var {
  font-size: var(--primary-text-size);
}
/* / page game-results */

/* custom datalist */
#search-container {
  position: relative;
  margin-bottom: 5em;
  text-align: left;
}

@media (max-width: 720px) {
  #search-container {
    margin-bottom: 2em;  
  }
}

#search-results {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  max-height: 15em;
  margin-top: .5em;
  padding: 1em .5em;
  list-style: none;
  border: 1px solid;
  border-radius: 1em;
  background-color: #333;
  overflow: auto;
}

#search-results.active {
  display: block;
}

#search-results li {
  padding: .25em 1em;
  border: 1px solid;
  border-radius: 1em;
  cursor: pointer;
}

#search-results li:not(:last-of-type) {
  margin-bottom: .25em;
}
/* / custom datalist */