@import url('https://fonts.googleapis.com/css2?family=Balsamiq+Sans:wght@400;700&family=MuseoModerno:wght@400;600&display=swap');

body{
    user-select: none;
    background-color: whitesmoke;
    font-family: 'Balsamiq Sans', cursive;
    letter-spacing: 2px;
}

:root {
  --grid-cols: 2;
  --grid-rows: 2;
}

#container {
  display: grid;
  grid-gap: 0;
  grid-template-rows: repeat(var(--grid-rows), 1fr);
  grid-template-columns: repeat(var(--grid-cols), 1fr);
  border: 1px solid #ddd;
  font-size: larger;
  overflow-y: hidden;
  background: rgb(192,150,198);
  background: linear-gradient(90deg, rgba(192,150,198,1) 0%, rgba(167,134,184,1) 100%);
}

.grid-item {
  padding: 0.5em;
  text-align: center;
  text-transform: uppercase;
  color: black;
}

#container .selected {
  color:white;
  text-transform: uppercase;
  font-weight: 600;
    transition: 100ms ease-out;

}

#container .found {
  color:white;
  font-weight: 800;
  transition: color 2000ms ease-in;
}

#container .complete {
  background-color: lightgray;
}
.wordFound {
  text-decoration: line-through;
  color: #9b4193;
  font-weight: 600;
  transition: color 2000ms ease-in;
}

.uk-text-danger{
    margin-top: 25px
}

#wordList {
    background-color: whitesmoke;
    padding: 10px 10px 10px 10px;
    font-size: large;
}

#timeElement {
    padding-left: 20px;
}

#wordListHeading, .words {
    color:  #9b4193 ;
}

.uk-progress {
    border: 3px solid rgb(218,104,235) ;
}

.uk-progress.progress-purple::-webkit-progress-value {
   
    background: rgb(218,104,235);
    background: radial-gradient(circle, rgba(218,104,235,1) 0%, rgba(155,62,177,1) 61%, rgba(154,45,186,1) 100%);
}

.uk-progress.progress-purple::-moz-progress-bar {
    background: rgb(218,104,235);
    background: radial-gradient(circle, rgba(218,104,235,1) 0%, rgba(155,62,177,1) 61%, rgba(154,45,186,1) 100%);
}

.uk-progress.progress-purple::-ms-fill {
    background: rgb(218,104,235);
    background: radial-gradient(circle, rgba(218,104,235,1) 0%, rgba(155,62,177,1) 61%, rgba(154,45,186,1) 100%);
}

#progressBarHeading {
    color: #9b4193;
}

#newGame , #playAgain, .category{
    background-color:#9b4193 ;
}

.category:hover, #playAgain:hover, #newGame:hover{
background-color:#853a7e ;
}

#scoreElement, #timeElement{
    color: #853a7e;
    padding-top: 30px;
}

.uk-list li{
    font-weight: 600;
}

.uk-list span{
    font-weight: 400;
}

i{
    font-size:12px;
}

@media only screen and (max-width: 450px) {
  #container {
    font-size: small;
    padding: 0;
  }
  #wordList {
    font-size: small;
    padding: 10px 10px 10px 10px;
  }
}

@media only screen and (min-width: 500px) and (max-width: 765px) {
  #container {
    font-size: small;
    padding: 0;
  }
  #wordList {
    font-size: small;
    padding: 10px 10px 10px 10px;
  }
}
/* 
@media only screen and (min-width: 1450px) and (max-width: 4500px) {
  #container {
    font-size: large;
    margin-left:250px;
    margin-right: 250px;

  }
} 

@media only screen and (min-width: 1000px) and (max-width: 1439px) {
  #container {
    font-size: large;
    margin-left: 125px;
    margin-right: 125px;

  }
}


@media only screen and (min-width: 766px) and (max-width: 999px) {
  #container {
    font-size: large;
    margin-left: 75px;
    margin-right: 75px;

  }
} */