* {
  box-sizing: border-box;
}
@font-face {
  font-family: "Sora";
  src: url("./assets/fonts/Sora/static/Sora-Regular.ttf");
  font: normal;
  font-display: swap;
}
@font-face {
  font-family: "Sora";
  src: url("./assets/fonts/Sora/static/Sora-Bold.ttf");
  font-weight: 500;
  font-display: swap;
}

:root {
  --Neutral-1: hsl(0, 0%, 7%);
  --Neutral-2: hsl(0, 0%, 15%);
  --Neutral-3: hsl(240, 3%, 46%);
  --Neutral-4: hsl(240, 1%, 59%);
  --Neutral-5: hsl(0, 0%, 100%);
  --Blue-600: hsl(214, 100%, 55%);
  --Blue-400: hsl(210, 100%, 65%);
  --Red-500: hsl(354, 63%, 57%);
  --Green-500: hsl(140, 63%, 57%);
  --Yellow-400: hsl(49, 85%, 70%);
  --Fontsize: 16px;
}

body {
  margin: 0;
  padding: 0;
  background-color: var(--Neutral-1);
  color: var(--Neutral-3);
  font-family: "Sora";
  appearance: none;
  -webkit-appearance: none;
}
button {
  background: none;
  color: inherit;
  border: none;
  padding: 0;
  cursor: pointer;
  outline: invert;
  overflow: hidden;
}
.container {
  padding: 15px;
  margin: 15px;
}

header,
header div {
  display: flex;
  justify-content: space-between;
  align-content: center;
}
header div img {
  width: 13px;
  margin: 5px;
  padding-top: 5px;
}

header .First-img {
  width: 200px;
}
@media (max-width:720px) {
  header div {
    justify-content: center;
  }
  header {
    flex-direction: column;
  }
  header .First-img {
    width: 220px;
  }
}

/* Start the Nav bar  */

nav {
  display: flex;
  justify-content: space-between;
  align-content: center;
  font-size: 10px;
}

nav button {
  color: var(--Neutral-5);
  border: 2px var(--Neutral-2) solid;
  width: auto;
  padding: 0px 6px;
  height: 30px;
  font-size: 12px;
}
@media (max-width:720px) {
  nav  {
    display: flex;
    flex-wrap: wrap;

  }
    nav p{
      width: 29%;
    }

}
nav p span{
    color: var(--Neutral-5);
    font-weight: 500;
}
.buttonclick {
  color: var(--Blue-400);
  border: 2px var(--Blue-600) solid;
}
/* Start Main  */
main {
  font-size: 14px;
}

.blur {
position: relative;
  width: 100%;
  height: 100%;
  filter: blur(3px);
  z-index: -1;
}
main .startpage{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    filter: blur(0);
}
main .startpage button{
    position: absolute;
    left: 50%;
    top: -20px;
    transform: translateX(-50%);
    background-color: var(--Blue-600);
    color: var(--Neutral-5);
    width: auto;
    padding: 8px 8px;
    border-radius: 15px;
}
@media (max-width:720px) {
    .startpage{
      top: 50%;
    }
    .startpage .start{
      width: 160px;
    }
    .startpage .start+p{
      margin-top: 20px;
      text-align: center;
    }
}
.corect{
  color: var(--Green-500);
  border-bottom: var(--Green-500) 1px solid;
}

.uncorect{
  color: var(--Red-500);
  border-bottom: var(--Red-500) 1px solid;
}

/* the section Highh Score Smached */
section main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
@media (max-width:720px) {
  section main h1{
    font-size: 20px;
  }
   .textone{
    font-size: 10px;
  }
  .Complete{
    top: 10px;
    width: 400px;
  }
}
section main h1{
  color: var(--Neutral-5);

}
section main .compon{
  display: flex;
  justify-content: space-between;
  gap: 70px;
}
.compon div {
  text-align: center;
}
/* two section*/
@media (max-width:720px) {
  .new-pb  img{
    margin-top: 20px;
    width: 60px;
  }
  .Complete2{
    display: none;
  }
}