.content {
  min-height: 82vh;
  /* display: grid; */
  /* grid-template-rows: auto 1fr auto; */
}

/* ============ Selectors ============ */

.difficultyLevelSelectorBtn {
  display: inline-block;
  padding: 10px;
  margin: 20px;
  border-radius: 10px;
  cursor: pointer;
}

.difficultyLevelSelectorBtn label:hover,
.difficultyLevelSelectorBtn input:hover {
  cursor: pointer;
}

#easy:hover {
  background-color: rgb(0, 198, 139);
}

#intermed:hover {
  background-color: rgb(255, 216, 44);
}

#hard:hover {
  background-color: rgb(255, 144, 52);
}

.bxl-github:before {
  content: "\e93a";
}

.container {
  width: 70vw;
  margin: auto;
  padding: 20px;
}

.heading {
  width: max-content;
  margin: auto;
  margin-bottom: 20px;
}

h2.subtitle {
  text-align: center;
  margin-bottom: 5px;
}

/* ============ Quote box ============ */

.dynamic-text-box {
  width: 100%;
  margin: 15px 0;
  background-color: rgb(210, 247, 213);
  padding: 10px;
  border-radius: 14px;
}

#quote {
  font-family: 'Inconsolata', monospace;
  font-size: larger;
  font-weight: 600;
  text-align: center;
  line-height: 2;
  letter-spacing: 1.1px;
  color: rgb(61, 61, 61);
}

/* ============ Buttons ============ */

.start-btn {
  width: max-content;
  margin: auto;
}

.start-btn>button {
  border-radius: 5px;
  padding: 10px;
  color: white;
  border: none;
  font-weight: bold;
  letter-spacing: 2px;
  font-size: medium;
  cursor: pointer;
  margin: auto;
}

#startBtn {
  background-color: green;
}

#resetBtn {
  background-color: red;
}

/* ============ Messages and Result ============ */

#message,
#speed {
  font-size: larger;
  font-weight: bold;
  text-align: center;
}

#speed {
  color: green;
}

/* ============ Typing input box ============ */

.user-input-box {
  width: 70vw;
  margin: 10px auto;
  padding: 14px;
  text-align: center;
  border-radius: 14px;
  background-color: antiquewhite;
}

#userInput {
  font-family: 'Inconsolata', monospace;
  font-weight: bold;
  font-size: medium;
  text-align: center;
  padding: 5px;
  min-width: 50%;
}

.highlight {
  background-color: yellow;
  color: black;
}

.error {
  background-color: lightcoral;
  border: red;
}

#greetUser {
  text-align: center;
  font-weight: bold;
  color: green;
  margin: 10px;
}

#levelSelector {
  text-align: center;
}

/* ============ Name Modal ============ */

.nameModal {
  background-color: antiquewhite;
  width: 50%;
  text-align: center;
  border-radius: 10px;
  margin: auto;
  padding: 15px;
  margin-bottom: 10px;
}

.nameModal input[type="text"] {
  border: 2px solid grey;
  border-radius: 15px;
  padding: 10px;
  margin: 0 auto;
  width: 80%;
}

.nameModal input[type="submit"] {
  display: block;
  background-color: green;
  font-size: 15px;
  font-weight: bold;
  color: white;
  padding: 12px;
  outline: none;
  border-radius: 15px;
  border: none;
  margin: 10px auto;
  border: 1px solid green;
}

.nameModal input[type="submit"]:hover {
  background-color: rgba(0, 128, 0, 0.829);
  cursor: pointer;
  border: 1px solid black;
}

/* ============ Footer ============ */
footer {
  padding: 20px 0px;
  font-weight: 500;
  bottom: 0;
  width: 100%;
  font-size: 18px;
  color: white;
  display: flex;
  justify-content: center;
  background: #ffffff;
  /* background: linear-gradient(279deg, rgba(2, 0, 36, 1) 0%, rgba(5, 5, 85, 1) 52%, rgba(0, 212, 255, 1) 100%); */
}
/*
.startIns {
  animation: Blink 1s linear infinite;
  color: rgb(4, 211, 14);
}

@keyframes Blink {
  0% {
    opacity: 0.2;
  }

  50% {
    opacity: 0.8;
  }

  100% {
    opacity: 0.5;
  }
} */

/* ============ Session Timimg  ============ */
#timingSessionChoose{
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding:30px 10px ;
  margin: 20px;
  border-radius: 10px;
  cursor: pointer;
  background-color: antiquewhite;
  color: #000;
  flex-wrap: wrap;
}

.timerListUL{
  list-style: none;
  color: #000;
}

.timerSelector{
  border-radius: 10px;
  background-color: rgba(0, 198, 139,0.8);
  margin: 10px;
  padding: 15px 20px;
  font-size: 1.1em;
  cursor: pointer;
  float: left;
}

.text-center{
  text-align: center;
}

/* When the checkbox is checked, add a blue background */
.timerSelector input:checked{
  background-color: #2196F3;
}

/* Create the radio-label/indicator (hidden when not checked) */
.radio-label:after {
  content: "";
  position: absolute;
  display: none;
}

/* Media Query for Footer Section  */

/* @media screen and (max-width : 670px) {
  footer {
    font-size: 12px;
  }
} */