* { box-sizing: border-box; }
html, body {
  min-height: 100%;
  position: relative;
}

html {
  font-family: "Urbanist", sans-serif;
  font-optical-sizing: auto;
  font-weight: normal;
  font-style: normal;
}

body {
  background-image: linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%);
}

textarea {
  display: block;
  width: calc(100vw - 25px);
  max-width: 500px;
  height: 250px;
  font-size: 14px;
}

#suggestion {
  cursor: pointer;
  color: white;
  font-style: italic;
  border-radius: 5px;
  background: cornflowerblue;
  display: inline-block;
  padding: 5px 10px;
  margin-bottom: 5px;
}

#suggestion.color-good { 
  background: rgb(187, 246, 187); 
  color: darkgreen;
}
#suggestion.color-better { background: #00cc00; }
#suggestion.color-best { background: darkgreen; }
#suggestion.color-idle { background: cornflowerblue; }
#suggestion.color-inside_prediction { background: #EEEEEE; }

#suggestion.two_word {
  background: teal;
}

#suggestion.three_word {
  background: lightgreen;
  color: black;
}

.color_box {
  display: inline-block;
  height: 14px;
  width: 14px;
}

.loading {
  font-style: italic;
}

.loaded .loading {
  opacity: 0;
}

.title {
  font-family: "Orelega One", serif;
  font-weight: 400;
  font-style: normal;
  font-size: 50px;
  color: rgb(91, 33, 91);
}

.box { 
  padding: 15px;
  border: none;
  max-width: 600px;
  border-radius: 15px;
  background: rgba(255,255,255,0.25);
}

.entry-holder {
  display: block;
  max-width: 600px;
  min-height: 350px;
  padding-top: 15px;
  border: none;
  font-size: 20px;
}

.entry {
  opacity: 0.5;
  display: inline;
  outline: none;
}

.entry-holder .ghost {
  color: white;
}

.loaded .entry {
  opacity: 1;
}

.other-suggestions {
  display: inline-block;
}

.secondary-suggestion {
  padding: 3px 5px;
  background: #EEE;
  border-radius: 5px;
  margin-right: 5px;
}

.quality-score {
  display: inline-block;
  padding: 3px 5px;
  background: transparent;
  border-radius: 3px;
  cursor: pointer;
}

label {
  display: block;
  margin-top: 10px;
}

.quality-score.terrible {
  background: darkred;
  color: white;
}

.quality-score.bad {
  background: #ff0000;
  color: white;
}

.quality-score.good {
  background: #edbd1f;
  color: black;
}

.quality-score.better {
  background: #d9e803;
  color: black;
}

.quality-score.best {
  background: green;
  color: white;
} 

/* Dark mode */
@media (prefers-color-scheme: dark) {
  body {
    background: #333;
    color: white;
    background-image: linear-gradient(to top, #09203f 0%, #537895 100%);
  }

  .title { color: rgb(135, 193, 246); }

  .box { 
    border: none;
    background: rgba(0,0,0,0.2);
  }

  .loaded .entry {
    background: transparent;
  }

  .entry-holder .ghost {
    color: #b8b8b8;
  }

  .quality-score {
    background: #555;
  }

  .quality-score.terrible {
    background: darkred;
    color: white;
  }

  a[href] {
    color: white;
    text-decoration: underline;
  }
}

@media screen and (min-width: 720px) {
  body {
    max-width: 650px;
    padding: 25px 50px;
  }
}