:root {
  --color-purple: #5C5187;
  --color-purple-light: #736A99;
  --color-purple-lighter: #ebe9f3;
  --color-purple-bright: #574991;
  --color-light: #f7f7f7;
  --color-darker-light: #dbdbdd;
  --color-accent: #518769;
  --color-correct: rgb(0, 105, 14);
  --color-letter: rgb(196, 184, 19);
  --color-incorrect: rgb(75, 75, 75);
}

body {
  font-family: 'Inter', arial, sans-serif !important;
  
  background-repeat: no-repeat;
  background-size: cover;
}

h1 {
  color: var(--color-purple-bright);
  font-weight: 900 !important;
  font-size: 2em;
}

h2, h3, h4, h5 {
  color: var(--color-purple-bright);
  font-weight: 700 !important;
}



#page-container {
  position: relative;
  min-height: 100vh;
}

#content-wrap {
  padding-bottom: 2.5rem;    /* Footer height */
}

#footer {
  padding: 32px 0 48px 0;
  background-color: var(--color-darker-light);
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 2.5rem;            /* Footer height */
}

#footer a {
  color: black;
}
#footer a:hover {
  color: var(--color-purple);
}

#left-button:hover, #right-button:hover {
  cursor: pointer;
  filter: invert(54%) sepia(97%) saturate(4%) hue-rotate(18deg) brightness(103%) contrast(97%);
}

.for-sure {
  width: 50px !important;
  margin-bottom: 6px;
}

.correct {
  position: relative;
  background-color: var(--color-correct);
  color: white;
  width: 50px;
  height: 50px;
}

.letter {
  position: relative;
  background-color: var(--color-letter);
  color: white;
  width: 50px;
  height: 50px;
}

.incorrect {
  position: relative;
  background-color: var(--color-incorrect);
  color: white;
  width: 50px;
  height: 50px;
}
.guessedContent {
  font-size: 24px;
  line-height: 50px;
  text-align: center;
}

#results {
  font-size: 24px;
  color: rgba(0, 0, 0, .5);
}

.hint {
  font-size: 24px;
  color: rgba(0, 0, 0, .5);
}

section {
  padding:15px 0;
}

.navbar {
  background-color: var(--color-purple-lighter) !important;
}

span.navbar-brand.nav-title {
  color: var(--color-purple);
  font-weight: 900;
  font-size: 2em;
}
span.navbar-brand.nav-title:hover {
  color: var(--color-purple);
  font-weight: 900;
  font-size: 2em;
}

span.navbar-brand.nav-title span.sub-nav-text {
  font-weight: 300;
  font-size: .75em;
}



.form-check-input:checked.radio-correct {
  background-color: var(--color-correct) !important;
  border-color: var(--color-correct) !important;
}

.form-check-input:checked.radio-letter {
  background-color: var(--color-letter) !important;
  border-color: var(--color-letter) !important;
}

.form-check-input:checked.radio-incorrect {
  background-color: var(--color-incorrect) !important;
  border-color: var(--color-incorrect) !important;
}



.form-check-label {
  font-weight: 300;
  font-size: 1.2em;
}

.btn-primary {
  background-color: var(--color-purple) !important;
  border-color: var(--color-purple) !important;
  font-size: 1.2em !important;
  font-weight: 500 !important;
  width: 200px !important;
}

.btn-primary:hover {
  background-color: var(--color-purple-light) !important;
  border-color: var(--color-purple-light) !important;
  box-shadow: 3px 3px 5px rgba(0, 0, 0, .2);
}

#past-guess-section {
  /*background: linear-gradient(var(--color-purple-lighter), #fff 75%);*/
  background-color: var(--color-light);
  
}

form input[type=text] {
  color: var(--color-purple-bright);
  font-size: 2em;
  background-color: var(--color-light);
}

form input[type=text]::placeholder {
  color: rgba(0, 0, 0, .1)
}

.button-descript {
  padding-top: 76px;
}

.button-descript p {
  font-weight: 700;
  line-height: .6em;
  color: var(--color-purple)
}

#current-guess-section {
  background-color: #fff;
}

#results-section {
  background-color: var(--color-light);
}

.accent-header {
  color: var(--color-incorrect);
}

.results-header {
  color: var(--color-correct)
}

.list-possibles {
  cursor: pointer;
}