@font-face {
  font-family: "Microsoft YaHei";
  src: url("./Microsoft Yahei.ttf");
  font-weight: 300;
  font-style: sans-serif;
}

@font-face {
  font-family: "Microsoft YaHei";
  src: url("./Microsoft Yahei Bold.ttf");
  font-weight: bold;
  font-style: sans-serif;
}

@font-face {
  font-family: "Sapota";
  src: url("./Sapota.woff");
  font-weight: 300;
  font-style: sans-serif;
}

body {
  --font-family: "Sapota", "Pretendard", "Microsoft YaHei", sans-serif;

  --background-color: #2c2c2c;
  --color: #f7f7f9;
  --word-color: #ffcf00;
  --pronunciation-color: grey;
  --pos-name-color: #fdde59;
  --example-bar-color: #666;
  --example-color: #aaa;

  margin: 0;
  font-family: var(--font-family);
  min-height: 100vh;
  background-color: var(--background-color);
  color: var(--color);
}

textarea {
  font-family: var(--font-family);
  width: calc(100% - 20px);
}
input,
textarea {
  background-color: #202020;
  border-radius: 5px;
  border: none;
  padding: 10px;
  display: block;
  margin-bottom: 10px;
  color: #f7f7f9;
  font-family: var(--font-family);
}
input {
  width: calc(540px - 20px);
}
input:focus,
textarea:focus {
  outline: none;
}
input[type="submit"] {
  width: 100%;
  color: #f7f7f9;
}
input[type="color"] {
  padding: 4px;
  height: 30px;
}

.small-logo {
  width: 2rem;
  margin: auto;
  display: block;
}

.input-label {
  margin-bottom: 0.8rem;
  font-size: 0.8rem;
}

.colors {
  display: flex;
}
.color-selection {
  flex: 1;
}

.outer-container {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}
.horizontal-container {
  display: flex;
}
.horizontal-whitespace,
.vertical-whitespace {
  flex-grow: 1;
}
.word-container {
  padding: 16px;
  max-width: 540px;
}

.word {
  color: var(--word-color);
  display: inline;
}
.pronunciation {
  color: var(--pronunciation-color);
}
.pos-name {
  color: var(--pos-name-color);
}

.item-example {
  border-left: 2px solid var(--example-bar-color);
  color: var(--example-color);
  padding-left: 1rem;
  /* font-style: italic; */
}
.item-example-sentence {
  margin-bottom: 4px;
}
.item-example-meaning {
  margin-top: 4px;
}

.footer {
  text-align: center;
  font-size: 8px;
}
.footer a {
  color: gray;
  text-decoration: none;
}