@import url("https://fonts.googleapis.com/css2?family=Sora:wght@100..800&display=swap");

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

:root {
  --neutral-900: hsl(0, 0%, 7%);
  --neutral-800: hsl(0, 0%, 15%);
  --neutral-500: hsl(240, 3%, 46%);
  --neutral-400: hsl(240, 1%, 59%);
  --neutral-0: hsl(0, 0%, 100%);
  --blue-600: hsl(214, 100%, 55%);
  --blue-400: hsl(210, 100%, 65%);
  --red500: hsl(354, 63%, 57%);
  --green-500: hsl(140, 63%, 57%);
  --yellow400: hsl(49, 85%, 70%);
  --primary-font: "Sora", sans-serif;
  --fw400: 400;
  --fw600: 600;
  --fw700: 700;
  --radius8: 0.5rem;
  --radius10: 0.625rem;
  --transition: all 0.4s ease;
  --line-height: 3.25rem;
  --letter-spacing: 1.4%;
  --border07: hsla(240, 3%, 46%, 0.7);
}

body {
  font-size: 16px;
  font-family: var(--primary-font);
  font-weight: var(--fw400);
  color: var(--neutral-0);
  background-color: var(--neutral-900);
  width: 100%;
  max-width: 100vw;
  height: 100%;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
align-items: center;
  margin: 2.5rem auto;

}

.confetti {
  background: url("./assets/images/pattern-confetti.svg"), var(--neutral-900);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: bottom left;
  animation: sparkle 4s infinite ease-in-out alternate;
}

@keyframes sparkle {
  0%{
    background-position: bottom left;
  }50%{
    background-position: bottom 2.5rem left;
  } 100%{
    background-position: bottom left;
  }
}

main {
  width: 90vw;
  max-width: 75rem;
  min-height: 100vh;
  height: 100%;
}

/* === header === */

.score-img {
  width: 1.5rem;
  height: 1.5rem;
  background-image: url("./assets/images/icon-personal-best.svg");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

.score-title {
  color: var(--neutral-400);
  margin-right: 0.125rem;
}

.score-title-mobile {
  display: none;
  color: var(--neutral-400);
  margin-right: 0.125rem;
}

.title-wpm {
  display: flex;
  align-items: center;
  gap: 0.125rem;
}

.header-score {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  width: 100%;
}

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 4rem;
}

.header-logo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* === main tab menu === */

.section__menu-container {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
  padding-bottom: 1rem;
  border-bottom: 0.0469rem solid var(--border07);
}
.menu-section {
  display: flex;
  gap: 1rem;
  justify-content: start;
}

.menu-left {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}

.menu-right {
  align-items: end;
}

.tab-title {
  color: var(--neutral-400);
  font-size: 1.125rem;
}

.tab-score {
  color: var(--neutral-0);
  font-weight: var(--fw700);
  font-size: 1.25rem;
}

.menu-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-right: 0.0313rem solid var(--border07);
}

.pad-right {
  padding-right: 1rem;
  position:relative;
}

.last-tab {
  border: none;
  position: relative;
}

.tab-title-small {
  color: var(--neutral-400);
  font-size: 1rem;
}

.chips-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.chip-item {
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius8);
  border: 0.0469rem solid var(--neutral-0);
  cursor: pointer;
  position: relative;
}
.selected {
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius8);
  color: var(--blue-400);
  border: 0.0469rem solid var(--blue-400);
}

.chip-item:hover {
  border: 0.0469rem solid var(--blue-400);
  color: var(--blue-400);
}

.chip-item:active {
  outline-offset: 0.125rem;
  outline: 0.0625rem solid var(--blue-400);
}

.mobile-title {
  width: 100%;
  border-radius: var(--radius8);
  border: 0.0469rem solid var(--neutral-0);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  cursor: pointer;
  background-image: url("./assets/images/icon-down-arrow.svg");
  background-repeat: no-repeat;
  background-position: center right 1.5rem;
}
.mobile-title:hover {
  border: 0.0469rem solid var(--blue-400);
  color: var(--blue-400);
  background-image: url("./assets/images/icon-blue-arrow.svg");
}

/* === mobile menu bar=== */

#mobile-menu{
  display: none;
}


.hide {
  display: none;
}

.flex {
  display: flex;
}


/* === typing section === */

.section__typing {
  position: relative;
  padding: 2.5rem 0;
  border-top: 0.0313rem solid var(--border07);
}

.start-btn {
  border: none;
  font-family: var(--primary-font);
  font-size: 1.25rem;
  background-color: var(--blue-600);
  color: var(--neutral-0);
  border-radius: var(--radius10);
  padding: 1rem 1.5rem;
  cursor: pointer;
  font-weight: var(--fw600);
  transition: var(--transition);
}

.start-btn:hover {
  background-color: var(--blue-400);
}

.start-btn:focus {
  outline-offset: 0.1875rem;
  outline: 0.0938rem solid var(--blue-400);
}

.start-text {
  font-size: 1.25rem;
  font-weight: var(--fw600);
}

.btn-text {
  /* display: flex; */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  width: 100%;
  /* height: 100vh; */
  margin: 6.25rem auto;
  z-index: 20;
  position: absolute;
}

.typing-text {
  font-size: 2.375rem;
  line-height: var(--line-height);
  letter-spacing: var(--letter-spacing);
  color: var(--neutral-400);
  width: 100%;
  height: 100%;
  position: relative;
}

.input-container {
  position: absolute;
  top: 2.5rem;
  left: 0;
  width: 100%;
  height: 100%;
  background: none;
  border: none;
  font-family: var(--primary-font);
  font-size: 2.375rem;
  line-height: var(--line-height);
  letter-spacing: var(--letter-spacing);
  color: var(--green-500);
  padding-top: 0;
  overflow-wrap: break-word;
  text-wrap: wrap;
  resize: none;
  opacity: 0;
}

.input-container:focus {
  outline: none;
}

.blur-text {
  filter: blur(0.5rem);
}

.yellow-text {
  color: var(--yellow400);
}

.success-text {
  color: var(--green-500);
  position: relative;
}

.error-text {
  color: var(--red500);
  text-decoration: underline;
}

.default-text {
  color: var(--neutral-400);
}

.text-cursor {
  position: relative;
}

.text-cursor:after {
  content: "";
  position: absolute;
  width: 1.25rem;
  height: 2.5rem;
  top: 0.125rem;
  left: 0.0625rem;
  border-radius: 0.25rem;
  background: var(--border07);
  opacity: 0.2;
  mix-blend-mode: luminosity;
  animation: blink 2s step-start infinite;
}

@keyframes blink {
  50% {
    opacity: 0.3;
  }
}

.error-modal {
  background: var(--neutral-800);
  border-radius: var(--radius10);
  padding: 1.5rem;
  text-align: center;
  width: 50vw;
  margin: 0 auto;
  box-shadow: 0.5rem 0.5rem 0.625rem rgba(3, 2, 12, 0.3);
  position: absolute;
  transform: translate(-50%, -50%);
  top: 40%;
  left: 50%;
  z-index: 20;
}

.error-close {
  width: 1.5rem;
  height: 1.5rem;
  background-image: url("./assets/images/close.svg");
  background-repeat: no-repeat;
  background-size: contain;
  cursor: pointer;
  margin: -0.625rem -0.625rem -0.375rem auto;
}

hr {
  border: none;
  border-top: 0.0313rem solid var(--border07);
}

.restart-btn {
  border: none;
  font-family: var(--primary-font);
  font-size: 1.25rem;
  background-color: var(--neutral-800);
  color: var(--neutral-0);
  border-radius: var(--radius10);
  padding: 1rem 1.5rem;
  cursor: pointer;
  font-weight: var(--fw600);
  transition: var(--transition);
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  /* margin: 2rem auto; */
}

.restart-btn:hover {
  background-color: var(--neutral-500);
}

.restart-btn:focus {
  outline-offset: 0.1875rem;
  outline: 0.0938rem solid var(--neutral-800);
}

.stop-timer {
  border: none;
  font-family: var(--primary-font);
  font-size: 1.25rem;
  background-color: transparent;
  border: 0.0625rem solid var(--neutral-0);
  color: var(--neutral-0);
  border-radius: var(--radius10);
  padding: 1rem 1.5rem;
  cursor: pointer;
  font-weight: var(--fw600);
  transition: var(--transition);
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
}

.stop-timer:hover {
  color: var(--neutral-400);
  border: 0.0625rem solid var(--neutral-400);
}

.stop-timer:focus {
  outline-offset: 0.1875rem;
  outline: 0.0938rem solid var(--neutral-0);
}

.btns {
  /* display: flex; */
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  margin: 1.5rem auto;
}

/* === test complete === */

.section__complete {
  padding: 2.5rem 0;
  background: url("./assets/images/pattern-star-2.svg"),
    url("./assets/images/pattern-star-1.svg");
  background-repeat: no-repeat;
  background-size: 1.5rem, 5rem;
  background-position: top 6.25rem left, top 74% right;
}

.section__high-score {
  background: none;
}

.check-circle {
  width: 5.5rem;
  height: 5.5rem;
  border-radius: 6.25rem;
  background-color: hsla(140, 63%, 57%, 0.3);
  outline: 0.75rem solid hsla(140, 63%, 57%, 0.1);
  position: relative;
  margin: 0 auto;
}

.check-circle::after {
  content: "";
  position: absolute;
  width: 4rem;
  height: 4rem;
  background: url("./assets/images/icon-completed.svg");
  background-repeat: no-repeat;
  background-size: 100%;
  border-radius: 100%;
  background-position: center;
  z-index: 10;
  top: 0.75rem;
  left: 0.75rem;
}

.high-score-mark {
  width: 4rem;
  height: 4rem;
  background: url("./assets/images/icon-new-pb.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  margin: 0 auto;
}

h1 {
  text-align: center;
  margin-top: 2rem;
  font-size: 2.5rem;
}
h2 {
  color: var(--neutral-400);
  font-weight: var(--fw400);
  font-size: 1.125rem;
  text-align: center;
  margin: 1.5rem auto 3.5rem auto;
}

.card-title {
  font-size: 1.125rem;
  color: var(--neutral-400);
}

.card-score {
  font-size: 1.5rem;
  font-weight: var(--fw700);
}

.card-accuracy-score {
  color: var(--red500);
}

.card-characters-score {
  color: var(--green-500);
}

.span-gray {
  color: var(--neutral-400);
}

.span-red {
  color: var(--red500);
}

.card {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: column;
  height: 100%;
  padding: 1rem;
  border-radius: var(--radius8);
  border: 0.0469rem solid var(--border07);
  gap: 0.5rem;
}

.score-cards {
  display: grid;
  grid-template-columns: repeat(3, 9.375rem);
  align-items: center;
  justify-content: center;
  gap: 1rem;
  width: 50vw;
  max-width: 50rem;
  margin: 0 auto;
}

.variable-btn {
  border: none;
  font-family: var(--primary-font);
  font-size: 1.25rem;
  background-color: var(--neutral-0);
  color: var(--neutral-900);
  border-radius: var(--radius10);
  padding: 1rem 1.5rem;
  cursor: pointer;
  font-weight: var(--fw600);
  transition: var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  margin: 5rem auto 12.5rem auto;
}

.variable-btn:hover {
  background-color: var(--neutral-400);
}

.variable-btn:focus {
  outline-offset: 0.1875rem;
  outline: 0.0938rem solid var(--neutral-0);
}

/* footer {
  font-size: 0.75rem;
  opacity: 0.4;
  margin: 6.25rem auto;
} */


/* === responsive === */


@media screen and (max-width: 77.5rem) {
  .menu-tab {
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .tab-score {
    font-size: 1.75rem;
  }
}

@media screen and (max-width: 59.375rem) {
  header {
    margin-bottom: 2.5rem;
  }
  .score-title {
    display: none;
  }
  .score-title-mobile {
    display: block;
  }
  .section__menu-container {
    border: none;
    flex-direction: column;
    gap: 1.5rem;
  }

  .tab-title-small {
    display: none;
  }
  .menu-section {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: start;
    justify-content: space-between;
  }

  #desktop-menu{
    display: none;
  }
  #mobile-menu{
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    align-items: start;
    justify-content: space-between;
  }
  .mobile-title{
    display: flex;
  }
  .chips-container {
    flex-direction: column;
    width: 100%;
    gap: 0;
    background-color: var(--neutral-800);
    border-radius: var(--radius8);
position: absolute;
top: 3rem;
z-index: 20;
  }
  #difficulty-menu, #time-menu{
    opacity: 0;
  }
  .chip-item {
    width: 100%;
    border: none;
    padding: 0.625rem 2.375rem;
  }

  .chip-item:hover {
    border: none;
  }

  .chip-item:active {
    outline-offset: none;
    outline: none;
  }

  .chip-item::before {
    content: "";
    width: 1rem;
    height: 1rem;
    border-radius: 100%;
    border: 0.0625rem solid var(--neutral-0);
    position: absolute;
    top: 50%;
    left: 0.5rem;
    transform: translateY(-50%);
  }

  .chip-item:active::before {
    width: 0.5rem;
    height: 0.5rem;
    border: 0.375rem solid var(--blue-400);
  }

  #medium {
    border-top: 0.0469rem solid var(--border07);
    border-bottom: 0.0469rem solid var(--border07);
    border-radius: 0;
  }

  #passage {
    border-top: 0.0469rem solid var(--border07);
    border-radius: 0;
  }

  /* .menu-right {
    grid-template-columns: 1fr 1fr;
    width: 100%;
    align-items: start;
    justify-content: space-between;
  } */

}

@media screen and (max-width: 40rem) {
  .typing-text {
    font-size: 2rem;
    line-height: 1.4;
  }
  .section__complete {
    background: url("./assets/images/pattern-star-2.svg"),
      url("./assets/images/pattern-star-1.svg");
    background-repeat: no-repeat;
    background-size: 1.5rem, 2.5rem;
    background-position: top 6.25rem left, bottom right;
  }

  .score-cards {
    grid-template-columns: 1fr;
    width: 100%;
  }
  .variable-btn {
    margin-bottom: 0rem;
  }
  .btns {
    flex-direction: column;
  }
  .stop-timer,
  .restart-btn {
    width: 100%;
  }
}