/* :Index Top Margin */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: sans-serif, Arial, Helvetica, sans-serif;
}
/* :Index Top Margin [END]*/

/* :Index Max Width Smooth Scorel*/
html {
  scroll-behavior: smooth;
  background: rgb(41, 41, 41);
  max-width: 1280px;
  margin: 0 auto;
  width: 100%;
}
/* :Index Max Width Smooth Scorel [END]*/

/* :Body BackGround*/
body {
  background: white;
}
/* :Body BackGround [END]*/

/* :Nevigation BOX Fixed */
.nevigation {
  width: 100%;
  max-width: 1280px;
  overflow: hidden;
  position: fixed;
  top: 0px;
  z-index: 899;
  background: white;
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.4);
}
/* :Nevigation BOX Fixed [END]*/

/* :Nevigation Box Size Variation */
@media only screen and (max-width: 5000px) {
  /* :Greeting acording to the Answering Speed Css [END]*/
  div.fixed {
    top: 120px;
    width: 300px;
    font-size: 1rem;
  }
  /* :Greeting acording to the Answering Speed Css [END]*/

  #ShowAnswerButton {
    font-size: 2rem;
  }
  #Correction table {
    font-size: 1.5rem;
  }
  /* :Nav Grid */
  #nav_cantainer {
    display: grid;
    grid-template-areas:
      "logo timer links links links links LogIn"
      "logo restart links links links links LogIn"
      "time speed links links links links LogIn";
  }
  /* :Nav Grid [END]*/

  /* :Nav Grid Area -:Restart */
  #nav_restart {
    grid-area: restart;
  }
  /* :Nav Grid Area -:Restart [END]*/

  /* :Nav Grid Area -:Restart CSS */
  #nav_restart button {
    font-size: 1rem;
    border: 1px solid #eee;
    border-radius: 5px;
    color: red;
    font-weight: bold;
    padding: 5px 20px;
    background: rgb(255, 172, 172);
    box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.4);
  }
  /* :Nav Grid Area -:Restart CSS [END]*/

  /* :Nav Grid Area -:LOGO */
  #nav_logo {
    grid-area: logo;
  }
  /* :Nav Grid Area -:LOGO [END]*/

  /* :Nav Grid Area -:LOGO CSS*/
  #nav_logo img {
    width: 150px;
  }
  /* :Nav Grid Area -:LOGO CSS [END]*/

  /* :Nav Grid Area -:Speed */
  #nav_speed {
    grid-area: speed;
  }
  /* :Nav Grid Area -:Speed [END]*/

  /* :Nav Grid Area -:Speed CSS*/
  #nav_speed span {
    font-size: 1.5rem;
    padding-left: 5px;
  }
  #nav_speed_div {
    border: 1px solid #eee;
    border-radius: 5px;
    background: gray;
    box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.4);
  }
  #Qspeed_Middle,
  #countdown_question {
    font-size: 1rem;
    color: yellow;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 1);
  }
  #nav_speed_div {
    width: 160px;
  }
  /* :Nav Grid Area -:Speed CSS [END]*/

  /* :Nav Grid Area -:time */
  #nav_time {
    grid-area: time;
  }
  /* :Nav Grid Area -:time [END]*/

  /* :Nav Grid Area -:time CSS */
  #nav_time p {
    font-size: 1.5rem;
  }
  .nav_time_div {
    display: flex;
    justify-content: center;
    color: green;
    font-weight: bolder;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
  }
  /* :Nav Grid Area -:time CSS [END}*/

  /* :Nav Grid Area -:links */
  #nav_links {
    grid-area: links;
    justify-self: stretch;
    align-self: stretch;
    background: red;
    margin-right: 10px;
  }
  /* :Nav Grid Area -:links [END]*/

  /* :Nav Grid Area -:LogIn */
  #nav_LogIn {
    grid-area: LogIn;
    justify-self: stretch;
    align-self: stretch;
  }
  /* :Nav Grid Area -:LogIn [END]*/

  /* :Nav Grid Area -:LogIn CSS*/
  .input-parent {
    padding-bottom: 5px;
  }
  .UserLogIn {
    padding-top: 15px;
    padding-left: 10px;
  }
  #nav_LogIn {
    border-radius: 5px;
    border: 1px solid #eee;
    background: gray;
    box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.4);
  }
  /* :Nav Grid Area -:LogIn CSS [END]*/

  /* :Nav Grid Area -:Timer */
  #nav_timer {
    grid-area: timer;
  }
  /* :Nav Grid Area -:Timer [END}*/

  /* :Nav Grid Area -:Timer [CSS]*/
  .class_timer {
    display: flex;
    flex-direction: row;
  }
  .class_timer p {
    font-size: 1.5rem;
  }
  .class_timer_div {
    border: 1px black;
    border-radius: 5px;
    width: 3rem;
    align-self: center;
    /* margin: 1px; */
    text-align: center;
    background: gray;
    color: white;
    box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.4);
    font-size: 1rem;
  }
  .class_timer_div p {
    font-family: "Audiowide", sans-serif;
    text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.5);
  }
  /* :Nav Grid Area -:Timer [CSS]*/
}

@media only screen and (max-width: 900px) {
  /* :Greeting acording to the Answering Speed Css [END]*/
  div.fixed {
    top: 120px;
    width: 300px;
    font-size: 1rem;
  }
  /* :Greeting acording to the Answering Speed Css [END]*/

  #ShowAnswerButton {
    font-size: 1rem;
  }
  #Correction table {
    font-size: 1.3rem;
  }
  /* :Nav Grid */
  #nav_cantainer {
    display: grid;
    grid-template-areas:
      "logo links links links links LogIn LogIn"
      "speed links links links links LogIn LogIn"
      "timer links links links  links time restart";
  }
  /* :Nav Grid [END]*/

  /* :Nav Grid Area -:Restart */
  #nav_restart {
    grid-area: restart;
  }
  /* :Nav Grid Area -:Restart [END]*/

  /* :Nav Grid Area -:Restart CSS */
  #nav_restart button {
    font-size: 0.8rem;
    border: 1px solid #eee;
    border-radius: 5px;
    color: red;
    font-weight: bold;
    padding: 3px 15px;
    background: rgb(255, 172, 172);
    box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.4);
  }
  /* :Nav Grid Area -:Restart CSS [END]*/

  /* :Nav Grid Area -:LOGO */
  #nav_logo {
    grid-area: logo;
  }
  /* :Nav Grid Area -:LOGO [END]*/

  /* :Nav Grid Area -:LOGO CSS*/
  #nav_logo img {
    width: 140px;
  }
  /* :Nav Grid Area -:LOGO CSS [END]*/

  /* :Nav Grid Area -:Speed (Ans Speed) */
  #nav_speed {
    grid-area: speed;
  }
  /* :Nav Grid Area -:Speed (Ans Speed) [END]*/

  /* :Nav Grid Area -:Speed CSS (Ans Speed)*/
  #nav_speed span {
    font-size: 1.1rem;
    padding-left: 5px;
  }
  #nav_speed_div {
    border: 1px solid #eee;
    border-radius: 5px;
    background: gray;
    box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.4);
  }
  #Qspeed_Middle,
  #countdown_question {
    font-size: 1rem;
    color: yellow;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 1);
  }
  #nav_speed_div {
    width: 135px;
  }
  /* :Nav Grid Area -:Speed CSS (Ans Speed) [END]*/

  /* :Nav Grid Area -:time */
  #nav_time {
    grid-area: time;
  }
  /* :Nav Grid Area -:time [END]*/

  /* :Nav Grid Area -:time CSS */
  #nav_time p {
    font-size: 1.1rem;
  }
  .nav_time_div {
    display: flex;
    justify-content: center;
    color: green;
    font-weight: bolder;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
  }
  /* :Nav Grid Area -:time CSS [END}*/

  /* :Nav Grid Area -:links */
  #nav_links {
    grid-area: links;
    justify-self: stretch;
    align-self: stretch;
    background: red;
    margin-right: 10px;
  }
  /* :Nav Grid Area -:links [END]*/

  /* :Nav Grid Area -:LogIn */
  #nav_LogIn {
    grid-area: LogIn;
    justify-self: stretch;
    align-self: stretch;
  }
  /* :Nav Grid Area -:LogIn [END]*/

  /* :Nav Grid Area -:LogIn CSS*/
  .input-parent {
    padding-bottom: 5px;
  }
  .UserLogIn {
    padding-top: 15px;
    padding-left: 10px;
  }
  #nav_LogIn {
    width: 190px;
    border-radius: 5px;
    border: 1px solid #eee;
    background: gray;
    box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.4);
  }
  /* :Nav Grid Area -:LogIn CSS [END]*/

  /* :Nav Grid Area -:Timer */
  #nav_timer {
    grid-area: timer;
  }
  /* :Nav Grid Area -:Timer [END}*/

  /* :Nav Grid Area -:Timer [CSS]*/
  .class_timer {
    display: flex;
    flex-direction: row;
  }
  .class_timer p {
    font-size: 1.1rem;
  }
  .class_timer_div {
    border: 1px black;
    border-radius: 5px;
    width: 2.8rem;
    align-self: center;
    /* margin: 1px; */
    text-align: center;
    background: gray;
    color: white;
    box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.4);
    font-size: 1rem;
  }
  .class_timer_div p {
    font-family: "Audiowide", sans-serif;
    text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.5);
  }
  /* :Nav Grid Area -:Timer [CSS]*/
}

@media only screen and (max-width: 750px) {
  /* :Greeting acording to the Answering Speed Css [END]*/
  div.fixed {
    top: 200px;
    width: 250px;
    font-size: 0.8rem;
  }
  /* :Greeting acording to the Answering Speed Css [END]*/

  #Correction table {
    font-size: 1rem;
  }
  #Correction table {
    font-size: 1rem;
  }

  /* :Nav Grid */
  #nav_cantainer {
    display: grid;
    grid-template-areas:
      "logo speed timer timer LogIn"
      "logo time restart restart LogIn"
      "links links links  links links";
  }
  /* :Nav Grid [END]*/

  /* :Nav Grid Area -:Restart */
  #nav_restart {
    grid-area: restart;
  }
  /* :Nav Grid Area -:Restart [END]*/

  /* :Nav Grid Area -:Restart CSS */
  #nav_restart button {
    font-size: 0.8rem;
    border: 1px solid #eee;
    border-radius: 5px;
    color: red;
    font-weight: bold;
    padding: 3px 20px;
    background: rgb(255, 172, 172);
    box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.4);
  }
  /* :Nav Grid Area -:Restart CSS [END]*/

  /* :Nav Grid Area -:LOGO */
  #nav_logo {
    grid-area: logo;
  }
  /* :Nav Grid Area -:LOGO [END]*/

  /* :Nav Grid Area -:LOGO CSS*/
  #nav_logo img {
    width: 140px;
  }
  /* :Nav Grid Area -:LOGO CSS [END]*/

  /* :Nav Grid Area -:Speed (Ans Speed) */
  #nav_speed {
    grid-area: speed;
  }
  /* :Nav Grid Area -:Speed (Ans Speed) [END]*/

  /* :Nav Grid Area -:Speed CSS (Ans Speed)*/
  #nav_speed span {
    font-size: 1.1rem;
    padding-left: 5px;
  }
  #nav_speed_div {
    border: 1px solid #eee;
    border-radius: 5px;
    background: gray;
    box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.4);
  }
  #Qspeed_Middle,
  #countdown_question {
    font-size: 1rem;
    color: yellow;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 1);
  }
  #nav_speed_div {
    width: 135px;
  }
  /* :Nav Grid Area -:Speed CSS (Ans Speed) [END]*/

  /* :Nav Grid Area -:time */
  #nav_time {
    grid-area: time;
  }
  /* :Nav Grid Area -:time [END]*/

  /* :Nav Grid Area -:time CSS */
  #nav_time p {
    font-size: 1.8rem;
  }
  .nav_time_div {
    display: flex;
    justify-content: center;
    color: green;
    font-weight: bolder;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
  }
  /* :Nav Grid Area -:time CSS [END}*/

  /* :Nav Grid Area -:links */
  #nav_links {
    grid-area: links;
    justify-self: stretch;
    align-self: stretch;
    background: red;
    margin-right: 10px;
  }
  /* :Nav Grid Area -:links [END]*/

  /* :Nav Grid Area -:LogIn */
  #nav_LogIn {
    grid-area: LogIn;
    justify-self: stretch;
    align-self: stretch;
  }
  /* :Nav Grid Area -:LogIn [END]*/

  /* :Nav Grid Area -:LogIn CSS*/
  .input-parent {
    padding-bottom: 5px;
  }
  .UserLogIn {
    padding-top: 15px;
    padding-left: 10px;
  }
  #nav_LogIn {
    width: 190px;
    border-radius: 5px;
    border: 1px solid #eee;
    background: gray;
    box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.4);
  }
  /* :Nav Grid Area -:LogIn CSS [END]*/

  /* :Nav Grid Area -:Timer */
  #nav_timer {
    grid-area: timer;
  }
  /* :Nav Grid Area -:Timer [END}*/

  /* :Nav Grid Area -:Timer [CSS]*/
  .class_timer {
    display: flex;
    flex-direction: row;
  }
  .class_timer p {
    font-size: 1.1rem;
  }
  .class_timer_div {
    border: 1px black;
    border-radius: 5px;
    width: 2.8rem;
    align-self: center;
    /* margin: 1px; */
    text-align: center;
    background: gray;
    color: white;
    box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.4);
    font-size: 1rem;
  }
  .class_timer_div p {
    font-family: "Audiowide", sans-serif;
    text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.5);
  }
  /* :Nav Grid Area -:Timer [CSS]*/
}

@media only screen and (max-width: 600px) {
  /* :Greeting acording to the Answering Speed Css [END]*/
  div.fixed {
    top: 220px;
    width: 250px;
    font-size: 0.8rem;
  }
  /* :Greeting acording to the Answering Speed Css [END]*/

  #ShowAnswerButton {
    font-size: 0.8rem;
  }
  #Correction table {
    font-size: 0.6rem;
  }
  /* :Nav Grid */
  #nav_cantainer {
    display: grid;
    grid-template-areas:
      "logo speed LogIn"
      "logo restart LogIn"
      "time timer LogIn"
      "links links links";
  }
  /* :Nav Grid [END]*/

  /* :Nav Grid Area -:Restart */
  #nav_restart {
    grid-area: restart;
  }
  /* :Nav Grid Area -:Restart [END]*/

  /* :Nav Grid Area -:Restart CSS */
  #nav_restart button {
    font-size: 0.8rem;
    border: 1px solid #eee;
    border-radius: 5px;
    color: red;
    font-weight: bold;
    padding: 3px 20px;
    background: rgb(255, 172, 172);
    box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.4);
  }
  /* :Nav Grid Area -:Restart CSS [END]*/

  /* :Nav Grid Area -:LOGO */
  #nav_logo {
    grid-area: logo;
  }
  /* :Nav Grid Area -:LOGO [END]*/

  /* :Nav Grid Area -:LOGO CSS*/
  #nav_logo img {
    width: 140px;
  }
  /* :Nav Grid Area -:LOGO CSS [END]*/

  /* :Nav Grid Area -:Speed (Ans Speed) */
  #nav_speed {
    grid-area: speed;
  }
  /* :Nav Grid Area -:Speed (Ans Speed) [END]*/

  /* :Nav Grid Area -:Speed CSS (Ans Speed)*/
  #nav_speed span {
    font-size: 1rem;
    padding-left: 5px;
  }
  #nav_speed_div {
    border: 1px solid #eee;
    border-radius: 5px;
    background: gray;
    box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.4);
  }
  #Qspeed_Middle,
  #countdown_question {
    font-size: 1rem;
    color: yellow;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 1);
  }
  #nav_speed_div {
    width: 125px;
  }
  /* :Nav Grid Area -:Speed CSS (Ans Speed) [END]*/

  /* :Nav Grid Area -:time */
  #nav_time {
    grid-area: time;
  }
  /* :Nav Grid Area -:time [END]*/

  /* :Nav Grid Area -:time CSS */
  #nav_time p {
    font-size: 1.8rem;
  }
  .nav_time_div {
    display: flex;
    justify-content: center;
    color: green;
    font-weight: bolder;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
  }
  /* :Nav Grid Area -:time CSS [END}*/

  /* :Nav Grid Area -:links */
  #nav_links {
    grid-area: links;
    justify-self: stretch;
    align-self: stretch;
    background: red;
    margin-right: 10px;
  }
  /* :Nav Grid Area -:links [END]*/

  /* :Nav Grid Area -:LogIn */
  #nav_LogIn {
    grid-area: LogIn;
    justify-self: stretch;
    align-self: stretch;
  }
  /* :Nav Grid Area -:LogIn [END]*/

  /* :Nav Grid Area -:LogIn CSS*/
  .input-parent {
    padding-bottom: 5px;
  }
  .UserLogIn {
    font-size: 0.8rem;
    padding-top: 15px;
    padding-left: 10px;
  }
  .input-parent input {
    width: 150px;
    font-size: 0.8rem;
  }
  #nav_LogIn {
    width: 170px;
    border-radius: 5px;
    border: 1px solid #eee;
    background: gray;
    box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.4);
  }
  /* :Nav Grid Area -:LogIn CSS [END]*/

  /* :Nav Grid Area -:Timer */
  #nav_timer {
    grid-area: timer;
  }
  /* :Nav Grid Area -:Timer [END}*/

  /* :Nav Grid Area -:Timer [CSS]*/
  .class_timer {
    display: flex;
    flex-direction: row;
  }
  .class_timer p {
    font-size: 1.1rem;
  }
  .class_timer_div {
    border: 1px black;
    border-radius: 5px;
    width: 2.6rem;
    align-self: center;
    /* margin: 1px; */
    text-align: center;
    background: gray;
    color: white;
    box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.4);
    font-size: 1rem;
  }
  .class_timer_div p {
    font-family: "Audiowide", sans-serif;
    text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.5);
  }
  /* :Nav Grid Area -:Timer [CSS]*/
}

@media only screen and (max-width: 470px) {
  /* :Greeting acording to the Answering Speed Css [END]*/
  div.fixed {
    top: 210px;
    width: 170px;
    font-size: 0.6rem;
  }
  /* :Greeting acording to the Answering Speed Css [END]*/

  #ShowAnswerButton {
    font-size: 0.6rem;
  }
  /* :Nav Grid */
  #nav_cantainer {
    display: grid;
    grid-template-areas:
      "logo time LogIn"
      "logo restart LogIn"
      "timer timer LogIn"
      "speed speed LogIn"
      "links links links";
  }
  /* :Nav Grid [END]*/

  /* :Nav Grid Area -:Restart */
  #nav_restart {
    grid-area: restart;
  }
  /* :Nav Grid Area -:Restart [END]*/

  /* :Nav Grid Area -:Restart CSS */
  #nav_restart button {
    font-size: 0.8rem;
    border: 1px solid #eee;
    border-radius: 5px;
    color: red;
    font-weight: bold;
    padding: 3px 10px;
    background: rgb(255, 172, 172);
    box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.4);
  }
  /* :Nav Grid Area -:Restart CSS [END]*/

  /* :Nav Grid Area -:LOGO */
  #nav_logo {
    grid-area: logo;
  }
  /* :Nav Grid Area -:LOGO [END]*/

  /* :Nav Grid Area -:LOGO CSS*/
  #nav_logo img {
    width: 140px;
  }
  /* :Nav Grid Area -:LOGO CSS [END]*/

  /* :Nav Grid Area -:Speed (Ans Speed) */
  #nav_speed {
    grid-area: speed;
  }
  /* :Nav Grid Area -:Speed (Ans Speed) [END]*/

  /* :Nav Grid Area -:Speed CSS (Ans Speed)*/
  #nav_speed span {
    font-size: 1rem;
    padding-left: 5px;
  }
  #nav_speed_div {
    border: 1px solid #eee;
    border-radius: 5px;
    background: gray;
    box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.4);
  }
  #Qspeed_Middle,
  #countdown_question {
    font-size: 1rem;
    color: yellow;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 1);
  }
  #nav_speed_div {
    width: 125px;
  }
  /* :Nav Grid Area -:Speed CSS (Ans Speed) [END]*/

  /* :Nav Grid Area -:time */
  #nav_time {
    grid-area: time;
  }
  /* :Nav Grid Area -:time [END]*/

  /* :Nav Grid Area -:time CSS */
  #nav_time p {
    font-size: 1.2rem;
  }
  .nav_time_div {
    display: flex;
    justify-content: center;
    color: green;
    font-weight: bolder;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
  }
  /* :Nav Grid Area -:time CSS [END}*/

  /* :Nav Grid Area -:links */
  #nav_links {
    grid-area: links;
    justify-self: stretch;
    align-self: stretch;
    background: red;
    margin-right: 0px;
  }
  #nav_links Table p {
    font-size: 0.9rem;
  }
  /* :Nav Grid Area -:links [END]*/

  /* :Nav Grid Area -:LogIn */
  #nav_LogIn {
    grid-area: LogIn;
    justify-self: stretch;
    align-self: stretch;
  }
  /* :Nav Grid Area -:LogIn [END]*/

  /* :Nav Grid Area -:LogIn CSS*/
  .input-parent {
    padding-bottom: 5px;
  }
  .UserLogIn {
    font-size: 0.8rem;
    padding-top: 15px;
    padding-left: 10px;
  }
  .input-parent input {
    width: 150px;
    font-size: 0.8rem;
  }
  #nav_LogIn {
    width: 170px;
    border-radius: 5px;
    border: 1px solid #eee;
    background: gray;
    box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.4);
  }
  /* :Nav Grid Area -:LogIn CSS [END]*/

  /* :Nav Grid Area -:Timer */
  #nav_timer {
    grid-area: timer;
  }
  /* :Nav Grid Area -:Timer [END}*/

  /* :Nav Grid Area -:Timer [CSS]*/
  .class_timer {
    display: flex;
    flex-direction: row;
  }
  .class_timer p {
    font-size: 1.1rem;
  }
  .class_timer_div {
    border: 1px black;
    border-radius: 5px;
    width: 2.6rem;
    align-self: center;
    /* margin: 1px; */
    text-align: center;
    background: gray;
    color: white;
    box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.4);
    font-size: 1rem;
  }
  .class_timer_div p {
    font-family: "Audiowide", sans-serif;
    text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.5);
  }
  /* :Nav Grid Area -:Timer [CSS]*/
}

@media only screen and (max-width: 400px) {
  /* :Greeting acording to the Answering Speed Css [END]*/
  div.fixed {
    top: 160px;
    width: 170px;
    font-size: 0.61rem;
  }
  /* :Greeting acording to the Answering Speed Css [END]*/

  /* :Nav Grid */
  #nav_cantainer {
    display: grid;
    grid-template-areas:
      "logo time LogIn"
      "logo restart LogIn"
      "timer timer LogIn"
      "speed speed LogIn"
      "links links links";
  }
  /* :Nav Grid [END]*/

  /* :Nav Grid Area -:Restart */
  #nav_restart {
    grid-area: restart;
  }
  /* :Nav Grid Area -:Restart [END]*/

  /* :Nav Grid Area -:Restart CSS */
  #nav_restart button {
    font-size: 0.7rem;
    border: 1px solid #eee;
    border-radius: 5px;
    color: red;
    font-weight: bold;
    padding: 3px 10px;
    background: rgb(255, 172, 172);
    box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.4);
  }
  /* :Nav Grid Area -:Restart CSS [END]*/

  /* :Nav Grid Area -:LOGO */
  #nav_logo {
    grid-area: logo;
  }
  /* :Nav Grid Area -:LOGO [END]*/

  /* :Nav Grid Area -:LOGO CSS*/
  #nav_logo img {
    width: 110px;
  }
  /* :Nav Grid Area -:LOGO CSS [END]*/

  /* :Nav Grid Area -:Speed (Ans Speed) */
  #nav_speed {
    grid-area: speed;
  }
  /* :Nav Grid Area -:Speed (Ans Speed) [END]*/

  /* :Nav Grid Area -:Speed CSS (Ans Speed)*/
  #nav_speed span {
    font-size: 0.8rem;
    padding-left: 5px;
  }
  #nav_speed_div {
    border: 1px solid #eee;
    border-radius: 5px;
    background: gray;
    box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.4);
  }
  #Qspeed_Middle,
  #countdown_question {
    font-size: 1rem;
    color: yellow;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 1);
  }
  #nav_speed_div {
    width: 100px;
  }
  /* :Nav Grid Area -:Speed CSS (Ans Speed) [END]*/

  /* :Nav Grid Area -:time */
  #nav_time {
    grid-area: time;
  }
  /* :Nav Grid Area -:time [END]*/

  /* :Nav Grid Area -:time CSS */
  #nav_time p {
    font-size: 1rem;
  }
  .nav_time_div {
    display: flex;
    justify-content: center;
    color: green;
    font-weight: bolder;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
  }
  /* :Nav Grid Area -:time CSS [END}*/

  /* :Nav Grid Area -:links */
  #nav_links {
    grid-area: links;
    justify-self: stretch;
    align-self: stretch;
    background: red;
    margin-right: 0px;
  }
  #nav_links Table p {
    font-size: 0.7rem;
  }
  /* :Nav Grid Area -:links [END]*/

  /* :Nav Grid Area -:LogIn */
  #nav_LogIn {
    grid-area: LogIn;
    justify-self: stretch;
    align-self: stretch;
  }
  /* :Nav Grid Area -:LogIn [END]*/

  /* :Nav Grid Area -:LogIn CSS*/
  .input-parent {
    padding-bottom: 5px;
  }
  .UserLogIn {
    font-size: 0.7rem;
    padding-top: 10px;
    padding-left: 5px;
  }
  .input-parent input {
    width: 130px;
    font-size: 0.8rem;
  }
  #nav_LogIn {
    width: 140px;
    border-radius: 5px;
    border: 1px solid #eee;
    background: gray;
    box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.4);
  }
  /* :Nav Grid Area -:LogIn CSS [END]*/

  /* :Nav Grid Area -:Timer */
  #nav_timer {
    grid-area: timer;
  }
  /* :Nav Grid Area -:Timer [END}*/

  /* :Nav Grid Area -:Timer [CSS]*/
  .class_timer {
    display: flex;
    flex-direction: row;
  }
  .class_timer p {
    font-size: 0.9rem;
  }
  .class_timer_div {
    border: 1px black;
    border-radius: 5px;
    width: 2.2rem;
    align-self: center;
    /* margin: 1px; */
    text-align: center;
    background: gray;
    color: white;
    box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.4);
    font-size: 1rem;
  }
  .class_timer_div p {
    font-family: "Audiowide", sans-serif;
    text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.5);
  }
  /* :Nav Grid Area -:Timer [CSS]*/
}

/* :Nevigation Box Size Variation [END]*/

/* :Nevigayion Link Section CSS */
/* :Link Table Font and Background Color */
#nav_links table {
  font-family: sans-serif, Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  background: rgb(255, 255, 255);
  background: gray;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
  width: 100%;
}
/* :Link Table Font and Background Color [END] */

/* :Link Table Font Color */
#nav_links .User_Table_Questions {
  color: skyblue;
}
/* :Link Table Font Color [END] */

/* :Link Table Heading and Rows text Allign Center */
#nav_links td,
#nav_links th {
  border: none;
  text-align: center;
}
/* :Link Table Heading and Rows text Allign Center [END]*/

/* :Link table Heading Background and Border color */
#nav_links th {
  background: gray;
  border: 1px solid #aaa;
}
/* :Link table Heading Background and Border color [END]*/

/* :Link table Answer columns Hover color */
#nav_links td:hover {
  color: yellow;
}
/* :Link table Answer columns Hover color [END]*/

/* :Link table Heading Hover color */
#nav_links th:hover {
  color: yellow;
}
/* :Link table Heading Hover color [END]*/

/* :Login Box Links Color Blue to Black */
#nav_links a:link {
  color: black;
}
/* :Login Box Links Color Blue to Black[END]*/

/* :Question Name Hover Color */
#nav_links .User_Table_Questions:hover {
  color: yellow;
}
/* :Question Name Hover Color [END]*/

/* :Remove Blue lines around LinkTable and Login Texts */
#nav_links a {
  text-decoration: none;
}
/* :Remove Blue lines around LinkTable and Login Texts [END]*/

/* :Nevigayion Link Section CSS [END] */

/* :MCQ Paper Section */
/* :Paper Immages Full Width */
#mcq {
  width: 100%;
  margin: 0px auto;
}
/* :Paper Immages Full Width [END]*/

/* :MCQ Scoralling Section Grid */
.mcqpaper {
  display: grid;
  width: 100%;
  grid-template-columns: 1fr 100fr 1fr;
  grid-template-areas: "b a d" "b c d" "b a_bottom d";
}
/* :MCQ Scoralling Section Grid [END]*/

/* :Remove Check Box Symbol From Answers */
.mcqpaper .mcqpaper_child_child_child_radio {
  position: absolute;
  left: -9999px;
}
/* :Remove Check Box Symbol From Answers [END]*/

/* :Grid Area Top Empty Space */
.a {
  grid-area: a;
  width: 100%;
  height: 200px;
}
/* :Grid Area Top Empty Space [END]*/

/* :Grid Area Left Adge */
.b {
  grid-area: b;
  background-image: linear-gradient(to right, gray, gray);
  width: 100%;
}
/* :Grid Area Left Adge [END] */

/* :Grid Area Paper */
.c {
  grid-area: c;
  width: 98%;
  margin-left: 1%;
}
/* :Grid Area Paper [END] */

/* :Grid Area Right Adge */
.d {
  grid-area: d;
  background-image: linear-gradient(to right, gray, gray);
  width: 100%;
}
/* :Grid Area Right Adge [END] */

/* :Grid Area Bottom Empty Space */
.a_bottom {
  grid-area: a_bottom;
  width: 100%;
  height: 200px;
}
/* :Grid Area Bottom Empty Space [END]*/

/* :MCQ paper Question Bottom Space */
.mcqpaper_child_child_child_question_img {
  margin-top: 20px;
  width: 100%;
}
/* :MCQ paper Question Bottom Space [END]*/

/* :MCQ paper Answer Bottom Space */
.mcqpaper_child_child_child_answer_img {
  width: 100%;
  margin-top: 5px;
}
/* :MCQ paper Answer Bottom Space [END]*/

/* :Answer Neutral Position color Default White */
input[type="radio"] + label > img {
  transition: 0.3s;
  border: 1px solid rgb(255, 255, 255);
  box-shadow: 0 0 3px 3px rgb(255, 254, 254);
}
/* :Answer Neutral Position color Default White [END] */

/* :Answer Hover color gray */
input[type="radio"]:hover + label > img {
  border-radius: 5px;
  width: 100%;
  border: 1px solid #fff;
  box-shadow: 0 0 3px 3px gray;
  transition: 0.3s;
  transition-delay: 0.1s;
}
/* :Answer Hover color gray [END] */

/* :Answer Checked color Tinted Gray */
input[type="radio"]:checked + label > img {
  border-radius: 5px;
  width: 100%;
  border: 1px solid #fff;
  box-shadow: 0 0 3px 3px rgb(65, 65, 65);
  filter: sepia(50%);
  transition: 0.5s;
}
/* :Answer Checked color Tinted Gray [END] */

/* :MCQ Paper Section [END]*/

/* Correction Table Css Section */
#Correction table {
  font-family: sans-serif, Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  background: rgb(255, 255, 255);
  background: rgb(255, 255, 255);
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
  width: 100%;
  margin-bottom: 500px;
}
#Correction th {
  text-align: left;
}
#Correction p {
  text-align: center;
}
.Red {
  color: red;
}
.Green {
  color: green;
}
.hide {
  display: none;
}
#Correction {
  display: none;
}

.AnswerTableQuestionNumber {
  color: blue;
}

#Correction a {
  text-decoration: none;
}

#ShowAnswers {
  text-align: center;
}

#ShowAnswerButton {
  width: 50%;
  height: 80%;
}

.ShowAnswercenter {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px;
  margin-top: 100px;

  background: gray;
}
#CorrectNoOfAnswers {
  font-size: 2rem;
}
#CorrectionTail,
#CorrectNoOfAnswers {
  color: green;
}
/* Correction Table Css Section [END]*/

/* :Greeting acording to the Answering Speed Css */
div.fixed {
  position: fixed;
  right: 50%;
  transform: translate(50%);
  font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
    "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
  color: gray;
  z-index: 998;
  border-left: 5px solid gray;
  border-right: 5px solid gray;
  border-top: 1px solid gray;
  border-bottom: 1px solid gray;
  background: white;
  border-radius: 5px;
}
/* :Greeting acording to the Answering Speed Css */

.correct {
  margin-top: 10px;
  margin-bottom: 10px;
  border-left: 2vw solid green;
}
.correct p {
  color: green;
  font-size: 2vw;
}
.wrong p {
  color: red;
  font-size: 2vw;
}
.wrong {
  margin-top: 10px;
  margin-bottom: 10px;
  border-left: 2vw solid red;
}
.correctionMark {
  display: hide;
}
#PaperHead table {
  width: 100%;
  color: green;
}

/* උපදෙස් උපදෙස් උපදෙස් උපදෙස් උපදෙස් උපදෙස් උපදෙස් උපදෙස් උපදෙස් Section CSS */
/*උපදෙස් සඳහා මෙය මත ක්ලික් කරන්න BOX */
.StartPaper {
  position: relative;
  width: 100%;
}
.StartBox{
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
#Start {
  font-size: 1.5rem;
  color: Red;
  text-shadow: 3px 3px 8px rgba(255, 0, 0, 0.4);
  border: 1px solid red;
 padding: .5rem;
 border-radius: .5rem;
}
#Instructions {
  margin-bottom: 20px;
  font-size: 1.2rem;
  color: lightcoral;
  text-shadow: 3px 3px 8px rgba(255, 0, 0, 0.4);
  border: 1px solid lightcoral;
  padding: 5px;
  border-radius: 5px;
}
/* උපදෙස් සඳහා මෙය මත ක්ලික් කරන්න "BUTTON" */
.PNo {
  font-size: 1.2rem;
  color: lightcoral;
  text-shadow: 3px 3px 8px rgba(255, 0, 0, 0.4);
}
/* උපදෙස් සඳහා මෙය මත ක්ලික් කරන්න "BUTTON" [END] */

/* Typical Margin */
.MarginPaperHead {
  margin: 5px;
}
/* Typical Margin [END]*/

/* උපදෙස් සඳහා මෙය මත ක්ලික් කරන්න */
.PaperHeadingBox {
  border: 5px solid gray;
  background: lightgray;
  border-radius: 10px;
  box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.4);
  display: grid;
  grid-template-areas:
    "AllRightsRecived PaperModel PaperModel TimeDuration"
    "ExamName ExamName ExamName ExamName"
    "PaperName PaperName SubjectName SubjectName"
    "Discription Discription Discription Discription";
}
/* උපදෙස් සඳහා මෙය මත ක්ලික් කරන්න [END]*/

/* සියලුම හිමිකම් ඇවිරිණි. */
.AllRightsRecived {
  grid-area: AllRightsRecived;
  margin-top: 30px;
  border: 3px solid azure;
  width: 95%;
  border-radius: 10px;
  text-align: center;
  background-color: azure;
  border-style: ridge;
  justify-self: center;
  text-shadow: 3px 3px 8px rgba(0, 0, 0, 0.2);
}
/* සියලුම හිමිකම් ඇවිරිණි.[END] */

/* 01 S I */
.PaperModel {
  grid-area: PaperModel;
  margin-top: 30px;
  border: 3px solid azure;
  width: 95%;
  border-radius: 10px;
  text-align: center;
  background-color: azure;
  border-style: ridge;
  justify-self: center;
  text-shadow: 3px 3px 8px rgba(0, 0, 0, 0.2);
}
/* 01 S I [END]*/

/* පැය දෙකයි */
.TimeDuration {
  grid-area: TimeDuration;
  margin-top: 30px;
  border: 3px solid azure;
  width: 95%;
  border-radius: 10px;
  text-align: center;
  background-color: azure;
  border-style: ridge;
  justify-self: center;
  text-shadow: 3px 3px 8px rgba(0, 0, 0, 0.2);
}
/* පැය දෙකයි [END]*/

/* අධ්‍යයන පොදු සහතික පත්‍ර ( උසස් පෙළ ) විභාගය */
.ExamName {
  grid-area: ExamName;
  color: black;
  width: 98%;
  text-align: center;
  border-radius: 10px;
  border: 3px solid gray;
  background-color: white;
  justify-self: center;
  text-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
}
/* අධ්‍යයන පොදු සහතික පත්‍ර ( උසස් පෙළ ) විභාගය [END]*/

/* ආදර්ශ ප්‍රශ්න පත්‍ර අංක - 01 */
.PaperName {
  grid-area: PaperName;
  border: 3px solid azure;
  width: 97%;
  border-radius: 10px;
  text-align: center;
  background-color: azure;
  border-style: ridge;
  justify-self: center;
  text-shadow: 3px 3px 8px rgba(0, 0, 0, 0.2);
}
/* ආදර්ශ ප්‍රශ්න පත්‍ර අංක - 01 [END]*/

/* භෞතික විද්‍යාව I */
.SubjectName {
  grid-area: SubjectName;
  border: 3px solid azure;
  width: 97%;
  border-radius: 10px;
  text-align: center;
  background-color: azure;
  border-style: ridge;
  justify-self: center;
  text-shadow: 3px 3px 8px rgba(0, 0, 0, 0.2);
}
/* භෞතික විද්‍යාව I [END]*/

/* මෙම ප්‍රශ්න පත්‍රයේ ප්‍රශ්න 50 ක් අඩන්ගු වේ. */
.Discription {
  grid-area: Discription;
  padding: 15px;
  border: 3px solid azure;
  width: 98%;
  border-radius: 10px;
  text-align: left;
  background-color: azure;
  border-style: ridge;
  justify-self: center;
  margin-bottom: 30px;
  text-shadow: 3px 3px 8px rgba(0, 0, 0, 0.2);
}
/* මෙම ප්‍රශ්න පත්‍රයේ ප්‍රශ්න 50 ක් අඩන්ගු වේ.[END] */

/* Span Text Bold */
.BOLT {
  font-weight: bold;
}
/* Span Text Bold [END]*/

@media only screen and (max-width: 900px) {
  /*උපදෙස් සඳහා මෙය මත ක්ලික් කරන්න HEAD */
  #Instructions {
    font-size: 1rem;
  }
  /*උපදෙස් සඳහා මෙය මත ක්ලික් කරන්න HEAD [END]*/

  /* උපදෙස් සඳහා මෙය මත ක්ලික් කරන්න "BUTTON" */
  .PNo {
    font-size: 1rem;
  }
  /* උපදෙස් සඳහා මෙය මත ක්ලික් කරන්න "BUTTON" [END] */

  /* Typical Margin */
  .MarginPaperHead {
    margin: 3px;
  }
  /* Typical Margin [END]*/

  /* උපදෙස් සඳහා මෙය මත ක්ලික් කරන්න */
  .PaperHeadingBox {
    grid-template-areas:
      "AllRightsRecived PaperModel"
      "TimeDuration SubjectName"
      "ExamName ExamName"
      "PaperName PaperName"
      "Discription Discription";
  }
  /* උපදෙස් සඳහා මෙය මත ක්ලික් කරන්න [END]*/

  /* සියලුම හිමිකම් ඇවිරිණි. */
  .AllRightsRecived {
    font-size: 0.8rem;
    width: 90%;
  }
  /* සියලුම හිමිකම් ඇවිරිණි.[END] */

  /* 01 S I */
  .PaperModel {
    font-size: 0.8rem;
    width: 90%;
  }
  /* 01 S I [END]*/

  /* පැය දෙකයි */
  .TimeDuration {
    font-size: 0.8rem;
    width: 90%;
  }
  /* පැය දෙකයි [END]*/

  /* අධ්‍යයන පොදු සහතික පත්‍ර ( උසස් පෙළ ) විභාගය */
  .ExamName {
    font-size: 0.8rem;
    width: 95%;
  }
  /* අධ්‍යයන පොදු සහතික පත්‍ර ( උසස් පෙළ ) විභාගය [END]*/

  /* ආදර්ශ ප්‍රශ්න පත්‍ර අංක - 01 */
  .PaperName {
    font-size: 0.8rem;
    width: 95%;
  }
  /* ආදර්ශ ප්‍රශ්න පත්‍ර අංක - 01 [END]*/

  /* භෞතික විද්‍යාව I */
  .SubjectName {
    font-size: 0.8rem;
    width: 90%;
  }
  /* භෞතික විද්‍යාව I [END]*/

  /* මෙම ප්‍රශ්න පත්‍රයේ ප්‍රශ්න 50 ක් අඩන්ගු වේ. */
  .Discription {
    font-size: 0.8rem;
    width: 95%;
  }
  /* මෙම ප්‍රශ්න පත්‍රයේ ප්‍රශ්න 50 ක් අඩන්ගු වේ.[END] */
}
@media only screen and (max-width: 500px) {
  /*උපදෙස් සඳහා මෙය මත ක්ලික් කරන්න HEAD */
  #Instructions {
    font-size: 0.8rem;
  }
  /*උපදෙස් සඳහා මෙය මත ක්ලික් කරන්න HEAD [END]*/
  /* උපදෙස් සඳහා මෙය මත ක්ලික් කරන්න "BUTTON" */
  .PNo {
    font-size: 0.8rem;
  }
  /* උපදෙස් සඳහා මෙය මත ක්ලික් කරන්න "BUTTON" [END] */
  /* Typical Margin */
  .MarginPaperHead {
    margin: 2px;
  }
  /* Typical Margin [END]*/

  /* උපදෙස් සඳහා මෙය මත ක්ලික් කරන්න */
  .PaperHeadingBox {
    grid-template-areas:
      "AllRightsRecived PaperModel"
      "TimeDuration SubjectName"
      "ExamName ExamName"
      "PaperName PaperName"
      "Discription Discription";
  }
  /* උපදෙස් සඳහා මෙය මත ක්ලික් කරන්න [END]*/

  /* සියලුම හිමිකම් ඇවිරිණි. */
  .AllRightsRecived {
    font-size: 0.5rem;
    width: 90%;
  }
  /* සියලුම හිමිකම් ඇවිරිණි.[END] */

  /* 01 S I */
  .PaperModel {
    font-size: 0.5rem;
    width: 90%;
  }
  /* 01 S I [END]*/

  /* පැය දෙකයි */
  .TimeDuration {
    font-size: 0.5rem;
    width: 90%;
  }
  /* පැය දෙකයි [END]*/

  /* අධ්‍යයන පොදු සහතික පත්‍ර ( උසස් පෙළ ) විභාගය */
  .ExamName {
    font-size: 0.4rem;
    width: 95%;
  }
  /* අධ්‍යයන පොදු සහතික පත්‍ර ( උසස් පෙළ ) විභාගය [END]*/

  /* ආදර්ශ ප්‍රශ්න පත්‍ර අංක - 01 */
  .PaperName {
    font-size: 0.4rem;
    width: 95%;
  }
  /* ආදර්ශ ප්‍රශ්න පත්‍ර අංක - 01 [END]*/

  /* භෞතික විද්‍යාව I */
  .SubjectName {
    font-size: 0.6rem;
    width: 90%;
  }
  /* භෞතික විද්‍යාව I [END]*/

  /* මෙම ප්‍රශ්න පත්‍රයේ ප්‍රශ්න 50 ක් අඩන්ගු වේ. */
  .Discription {
    font-size: 0.5rem;
  }
  /* මෙම ප්‍රශ්න පත්‍රයේ ප්‍රශ්න 50 ක් අඩන්ගු වේ.[END] */
}
/*උපදෙස් සඳහා මෙය මත ක්ලික් කරන්න BOX  [END] */
/* උපදෙස් උපදෙස් උපදෙස් උපදෙස් උපදෙස් උපදෙස් උපදෙස් උපදෙස් උපදෙස් Section CSS [END]*/