*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    color: black;
    background-color: #9cb7d6;
    font-family: Arial, sans-serif;
    
}
h2{
  color: black;
 
}
#loginPage{
  background: black;
}
.navbar{
    background: rgb(21, 27, 46);
    width: 100%;
    height: auto;
    padding: 0 1rem;
    top: 0px;
}
.nav-container-1{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 auto;
    max-width: 1200px; 
}
.nav-container-2::before{
    content: '';
    position: absolute;
    background: rgb(92, 137, 169);
    width: 100%;
    height: 1px;
    padding: 0;
    margin: 0 -1.1%;   
}
.nav-container-2{
    display: flex;
    margin:  auto;
    color: black;
    justify-content: space-between;
}
.nav-container-2 h3{
  color: white;
  font-size: 20px;
  display: none;
}
option{
  display: flex;
  margin: auto;
  overflow-y: visible;
}
select{
  outline: none;
  width: 12rem;
  height: 1.5rem;
  border-radius: 0.2rem;
  margin: 0.4rem;
  overflow-y: visible;
display: none;
}
.link{
    color: white;
    text-decoration: none;
    display: block;
    text-align: center;
    padding: 0.2rem 1.5rem;
}

.logo{
    text-decoration: none;
    font-size: 1.8rem;
    font-weight: bold;
    color: whitesmoke;
}
.logo:hover{
    color: orangered;
    transition: 0.3s;
}
.web-icon{
    width: 70px;
}

.page-theme{
    color: orangered;
    background-color: none;
    font-weight: bold;
    padding: 0.8rem 1.2rem;
    margin: 0 auto;
    text-decoration: none;
    display: block;
    font-size: 18px;
    cursor: pointer;
}
.page-theme:hover{
    opacity: 0.7;
    transition: 0.3s;
}
.nav-menu{
    display: flex;
    list-style: none;
}
.nav-link{
    color: white;
    padding: 0.5rem 1rem;
    margin: 0 auto;
    text-decoration: none;
    display: block;
    font-size: 20px;
    cursor: pointer;
    font-family: arial, sans-serif;
    border-radius: 0.5rem;
    transition: background-color 0.2s linear;
}
.nav-link:hover{
    opacity: 0.7;
    color: whitesmoke;
}
.link{
    text-decoration: none;
    font-size: 18px;
    color: white;
    margin: 5px 12px ;
    text-align: center;
    cursor: pointer;
}
.account-link:hover{
    text-decoration: underline 1.5px rgb(177, 156, 156);
}
/*.......................................Nav links---------------------*/
.link-1::after, .link-2::after{
    content: '';
    position: absolute;
    width: 55px;
    height: 5px;
    background: orangered;
    top: 10%;
    left:52.5%;
    display: block;
}
 .link-2::after{
    content: '';
    position: absolute;
    width: 60px;
    height: 5px;
    background: orangered;
    top: 10%;
    left:59%;
    display: none;
}
.link-3::after{
    content: '';
    position: absolute;
    width: 60px;
    height: 5px;
    background: orangered;
    top: 10%;
    left:66.6%;
    display: none;
}
.link-4::after{
    content: '';
    position: absolute;
    width: 60px;
    height: 5px;
    background: orangered;
    top: 10%;
    left:74%;
    display: none;
}
.link-5::after{
    content: '';
    position: absolute;
    width: 60px;
    height: 5px;
    background: orangered;
    top: 10%;
    left:81%;
    display: none;
}

.link-1:hover::after, .link-2:hover::after, .link-3:hover::after, .link-4:hover::after,
.link-5:hover::after{
    display: block;
    transition: 0.3s;
}
/*........................... Home section....................*/
.home{
    text-align: center;
    margin: 1.5rem auto;
}
 .home h1{
    font-size: 2.5rem;
    font-weight: 800;
 }
 h1{
  font-size: 2.5rem;
  font-weight: 800;
}
 p{
    font-size: 1.5rem;
    font-weight: 500;
 }

 .column-wrapper{
    width: 100%;
    display: flex;
  justify-content: center;
   top: 45%;
 }
 .column{
    margin: auto 2rem;
 }
 .column-1{
    
    padding: 1rem;
    margin: 1.4rem;
    height: auto;
    width: 24%;
    border-radius: 4px;
    background: radial-gradient(#fff, #ffd6d6);
 }
 .column-2{
    background: radial-gradient(#fff, #ffd6d6);
    padding: 1rem;
    margin: 1.4rem;
    height: auto;
    width: 70%;
    border-radius: 4px;
 }
.row{
    text-align: left;
    margin: 10px auto;
    cursor: pointer;
    padding: 10px 12px;
    border-radius: 4px;
}
.row:hover{
    background: rgb(95, 148, 234);
    
}
.sidebar-links{
    text-decoration: none;
    color: black;
    font-weight: 600;
    font-size: 18px; 
}
.row p{
    font-size: 14px;
   margin: 0 2rem;
   color: black;
}

.active, .row:hover {
    background: rgb(95, 148, 234);
    transition: background 0.1s;
  }
.main-row:hover{
    opacity: 0.7;
    transition: 0.3s;
}
.fa-solid{
    padding: 0 8px 0 0;
    font-size: 1rem;
}
.text-blue-500{
  cursor: pointer;
}
  /*.............................................Toggler................................*/
/* Light Theme */
body.light-theme {
 
  color: #000000;
    background-color: #9cb7d6;
}

/* Dark Theme */
body.dark-theme {
  background-color: #121212;
  color: #ffffff;
}

/* Optional styles for smooth transition */
body {
  transition: background-color 0.2s, color 0.2s;
}

.ui-switch {
    /* switch */
    --switch-bg: rgb(135, 150, 165);
    --switch-width: 48px;
    --switch-height: 20px;
    /* circle */
    --circle-diameter: 32px;
    --circle-bg: rgb(0, 56, 146);
    --circle-inset: calc((var(--circle-diameter) - var(--switch-height)) / 2);
  }
  
  .ui-switch input {
    display: none;
  }
  
  .slider {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: var(--switch-width);
    height: var(--switch-height);
    background: var(--switch-bg);
    border-radius: 999px;
    position: relative;
    cursor: pointer;
  }

  .slider .circle {
    top: calc(var(--circle-inset) * -1);
    left: 0;
    width: var(--circle-diameter);
    height: var(--circle-diameter);
    position: absolute;
    background: var(--circle-bg);
    border-radius: inherit;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjAiIHdpZHRoPSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIj4KICAgIDxwYXRoIGZpbGw9IiNmZmYiCiAgICAgICAgZD0iTTkuMzA1IDEuNjY3VjMuNzVoMS4zODlWMS42NjdoLTEuMzl6bS00LjcwNyAxLjk1bC0uOTgyLjk4Mkw1LjA5IDYuMDcybC45ODItLjk4Mi0xLjQ3My0xLjQ3M3ptMTAuODAyIDBMMTMuOTI3IDUuMDlsLjk4Mi45ODIgMS40NzMtMS40NzMtLjk4Mi0uOTgyek0xMCA1LjEzOWE0Ljg3MiA0Ljg3MiAwIDAwLTQuODYyIDQuODZBNC44NzIgNC44NzIgMCAwMDEwIDE0Ljg2MiA0Ljg3MiA0Ljg3MiAwIDAwMTQuODYgMTAgNC44NzIgNC44NzIgMCAwMDEwIDUuMTM5em0wIDEuMzg5QTMuNDYyIDMuNDYyIDAgMDExMy40NzEgMTBhMy40NjIgMy40NjIgMCAwMS0zLjQ3MyAzLjQ3MkEzLjQ2MiAzLjQ2MiAwIDAxNi41MjcgMTAgMy40NjIgMy40NjIgMCAwMTEwIDYuNTI4ek0xLjY2NSA5LjMwNXYxLjM5aDIuMDgzdi0xLjM5SDEuNjY2em0xNC41ODMgMHYxLjM5aDIuMDg0di0xLjM5aC0yLjA4NHpNNS4wOSAxMy45MjhMMy42MTYgMTUuNGwuOTgyLjk4MiAxLjQ3My0xLjQ3My0uOTgyLS45ODJ6bTkuODIgMGwtLjk4Mi45ODIgMS40NzMgMS40NzMuOTgyLS45ODItMS40NzMtMS40NzN6TTkuMzA1IDE2LjI1djIuMDgzaDEuMzg5VjE2LjI1aC0xLjM5eiIgLz4KPC9zdmc+");
    background-repeat: no-repeat;
    background-position: center center;
    -webkit-transition: left 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, -webkit-transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
    -o-transition: left 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
    transition: left 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, -webkit-transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    box-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2), 0px 1px 1px 0px rgba(0,0,0,0.14), 0px 1px 3px 0px rgba(0,0,0,0.12);
    ;
  }
  
  .slider .circle::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.75);
    border-radius: inherit;
    -webkit-transition: all 500ms;
    -o-transition: all 500ms;
    transition: all 500ms;
    opacity: 0;
  }
  
  /*-------------------------- actions------------------- */
  
  .ui-switch input:checked+.slider .circle {
    left: calc(100% - var(--circle-diameter));
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjAiIHdpZHRoPSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIj4KICAgIDxwYXRoIGZpbGw9IiNmZmYiCiAgICAgICAgZD0iTTQuMiAyLjVsLS43IDEuOC0xLjguNyAxLjguNy43IDEuOC42LTEuOEw2LjcgNWwtMS45LS43LS42LTEuOHptMTUgOC4zYTYuNyA2LjcgMCAxMS02LjYtNi42IDUuOCA1LjggMCAwMDYuNiA2LjZ6IiAvPgo8L3N2Zz4=");
  }
  
  .ui-switch input:active+.slider .circle::before {
    -webkit-transition: 0s;
    -o-transition: 0s;
    transition: 0s;
    opacity: 1;
    width: 0;
    height: 0;
  }
  
 /*...............................................................*/ 
  .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin:50px auto;
    height: 75vh;
  }
  
  .heading {
    margin-bottom: 20px;
    font-size: 3rem;
    color: black;
  }
  
  .header {
    display: flex;
    align-items: center;
  }
  
  .timer, .errors,
  .accuracy, .cpm, .wpm {
    background: rgb(95, 148, 234);
    height: 70px;
    width: 100px;
    text-align: center;
    margin: 8px;
    padding: 12px;
    border-radius: 20%;
    box-shadow: black 5px 8px 5px;
  }
  
  .cpm, .wpm  {
    display: non;
  }
  
  .header_text {
    text-transform: uppercase;
    font-size: 0.6rem;
    font-weight: 600;
  }
  
  .curr_time, .curr_errors,
  .curr_accuracy, .curr_cpm,
  .curr_wpm {
    font-size: 2.2rem;
  }
  
  .quote {
    background-color: #769bc5;
    font-size: 1.5rem;
    margin: 15px auto;
    padding: 20px;
    width: 100%;
    border-radius: 4px;
    box-shadow: black 2px 2px 2px;
  }
  
  .input_area {
    background-color: #adc9e9;
   font-family: arial, sans-serif;
    height: 80px;
    overflow: hidden;
    width: 100%;
    font-size: 20px;
    margin: 15px auto;
    padding: 20px;
    border: 0px;
    border-radius: 4px;
    box-shadow: black 1px 2px 1px;
  }
  ::placeholder{
    margin: auto 20px ;
    padding: 10px;
   
  }
  .input_area:focus{
    outline: 1px solid black;
  }
  .incorrect_char {
color: orangered;
  }
  
  .correct_char {
color: green;

  }
  .hidden{
    display: none;
  }
  .inputs{
    margin: 50% auto;
  }
  input{
 height: 3rem;
 width: 20rem;
  }
  ::placeholder{
    padding: 2rem 0;
    margin: 0 5px ;
  }
  /*........................................................./*
  .restart_btn {
    display: none;
    background-color: #326765;
    font-size: 1.5rem;
    padding: 10px;
    border: 0px;
    border-radius: 4px;
    cursor: pointer;
    margin: auto;
    box-shadow: black 2px 2px 2px;
  }
  .restart_btn:hover{
    opacity: 0.7;
    transition: 0.3s;
  }
    /*............................................*/
    
  /*-------------- From Uiverse.io by cssbuttons-io---------------------- */ 
button {
  position: relative;
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  outline-offset: 4px;
  transition: filter 250ms;
  user-select: none;
  touch-action: manipulation;
 }
 
 .shadow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  background: hsl(0deg 0% 0% / 0.25);
  will-change: transform;
  transform: translateY(2px);
  transition: transform
     600ms
     cubic-bezier(.3, .7, .4, 1);
 }
 
 .edge {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  background: linear-gradient(
     to left,
     hsl(340deg 100% 16%) 0%,
     hsl(340deg 100% 32%) 8%,
     hsl(340deg 100% 32%) 92%,
     hsl(340deg 100% 16%) 100%
   );
 }
 
 .front {
  display: block;
  position: relative;
  padding: 12px 27px;
  border-radius: 12px;
  font-size: 1.1rem;
  color: white;
  background: hsl(345deg 100% 47%);
  will-change: transform;
  transform: translateY(-4px);
  transition: transform
     600ms
     cubic-bezier(.3, .7, .4, 1);
 }
 
 button:hover {
  filter: brightness(110%);
 }
 
 button:hover .front {
  transform: translateY(-6px);
  transition: transform
     250ms
     cubic-bezier(.3, .7, .4, 1.5);
 }
 
 button:active .front {
  transform: translateY(-2px);
  transition: transform 34ms;
 }
 
 button:hover .shadow {
  transform: translateY(4px);
  transition: transform
     250ms
     cubic-bezier(.3, .7, .4, 1.5);
 }
 
 button:active .shadow {
  transform: translateY(1px);
  transition: transform 34ms;
 }
 
 button:focus:not(:focus-visible) {
  outline: none;
 }
/* From Uiverse.io by satyamchaudharydev */ 
.loader {
  display: block;
  --height-of-loader: 4px;
  --loader-color: orangered;
  width: 50%;
  height: var(--height-of-loader);
  border-radius: 30px;
  background-color: rgba(0,0,0,0.2);
  position: absolute;
  margin-left: -6%;
}

.loader::before {
  content: "";
  position: absolute;
  background: var(--loader-color);
  top: 0;
  left: 0;
  width: 0%;
  height: 100%;
  border-radius: 30px;
  animation: moving 1s ease-in-out infinite;
  ;
}

@keyframes moving {
  50% {
    width: 100%;
  }

  100% {
    width: 0;
    right: 0;
    left: unset;
  }
}


/* From Uiverse.io by Fujitawa */ 
.loader-3 {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 400px;
  width: 400px;
  margin: 2% 20%;
  border-radius: 50%;
  box-shadow: inset -10px -10px 15px rgba(255, 255, 255, 1),
    inset 10px 10px 10px rgba(0, 0, 0, 0.1);
}

.loader-3::before {
  content: "";
  position: absolute;
  height: 200px;
  width: 200px;
  border-radius: 50%;
  box-shadow: -10px -10px 15px rgba(255, 255, 255, 1),
    10px 10px 10px rgba(0, 0, 0, 0.1);
}

.blue {
  height: 186px;
  width: 220px;
  position: absolute;
  animation: rotate 5s linear infinite;
}

@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}

.blue::before {
  content: "";
  position: absolute;
  height: 30px;
  border-radius: 50%;
  width: 30px;
  background: linear-gradient(45deg, #336dff, #5c89ff);
  box-shadow: 0 5px 10px rgb(0 0 0 / 30%);
}

/* From Uiverse.io by vinodjangid07 */ 
.fa-cookie{
  font-size: 1.5rem;
  color: rgb(196, 148, 57);
}
.loader-4 {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  margin-bottom: 5%;
  margin-top: -10%;
}
.panWrapper {
  width: 30rem;
  height: 20rem;
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  flex-direction: column;
  gap: 20px;
}

.pan {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  width: 100%;
  height: fit-content;
  animation: cooking 1.7s infinite;
}
@keyframes cooking {
  0% {
    transform: rotate(0deg);
    transform-origin: top right;
  }
  10% {
    transform: rotate(-4deg);
    transform-origin: top right;
  }
  50% {
    transform: rotate(20deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

.food {
  position: absolute;
  width: 40%;
  height: 6px;
  background: linear-gradient(to bottom, rgb(82, 33, 33), rgb(200, 106, 106));
  left: 10px;
  border-radius: 50%;
  animation: flip 1.7s infinite;
  z-index: 2;
}
@keyframes flip {
  0% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-100px) rotate(180deg);
  }
  100% {
    transform: translateY(0px) rotate(360deg);
  }
}
.panBase {
  z-index: 3;
  width: 50%;
  height: 22px;
  border-bottom-left-radius: 40px;
  border-bottom-right-radius: 40px;
  background: linear-gradient(to top, rgb(3, 156, 156), rgb(10, 191, 191));
}
.panHandle {
  width: 40%;
  background: linear-gradient(to bottom, rgb(18, 18, 18), rgb(74, 74, 74));
  height: 10px;
  border-radius: 10px;
}
.panShadow {
  width: 70px;
  height: 8px;
  background-color: rgba(0, 0, 0, 0.21);
  margin-left: 15px;
  border-radius: 10px;
  animation: shadow 1.7s infinite;
  filter: blur(5px);
}
@keyframes shadow {
  0% {
    transform: scaleX(0.7);
  }
  50% {
    transform: scaleX(1);
  }
  100% {
    transform: scaleX(0.7);
  }
}
@layer base {
  :root {
    --background: 0 0% 100%;
--foreground: 240 10% 3.9%;
--card: 0 0% 100%;
--card-foreground: 240 10% 3.9%;
--popover: 0 0% 100%;
--popover-foreground: 240 10% 3.9%;
--primary: 142.1 76.2% 36.3%;
--primary-foreground: 355.7 100% 97.3%;
--secondary: 240 4.8% 95.9%;
--secondary-foreground: 240 5.9% 10%;
--muted: 240 4.8% 95.9%;
--muted-foreground: 240 3.8% 46.1%;
--accent: 240 4.8% 95.9%;
--accent-foreground: 240 5.9% 10%;
--destructive: 0 84.2% 60.2%;
--destructive-foreground: 0 0% 98%;
--border: 240 5.9% 90%;
--input: 240 5.9% 90%;
--ring: 142.1 76.2% 36.3%;
  }
  .dark {
    --background: 20 14.3% 4.1%;
--foreground: 0 0% 95%;
--popover: 0 0% 9%;
--popover-foreground: 0 0% 95%;
--card: 24 9.8% 10%;
--card-foreground: 0 0% 95%;
--primary: 142.1 70.6% 45.3%;
--primary-foreground: 144.9 80.4% 10%;
--secondary: 240 3.7% 15.9%;
--secondary-foreground: 0 0% 98%;
--muted: 0 0% 15%;
--muted-foreground: 240 5% 64.9%;
--accent: 12 6.5% 15.1%;
--accent-foreground: 0 0% 98%;
--destructive: 0 62.8% 30.6%;
--destructive-foreground: 0 85.7% 97.3%;
--border: 240 3.7% 15.9%;
--input: 240 3.7% 15.9%;
--ring: 142.4 71.8% 29.2%;
  }
}


  /*......................................................Footer....................  ...........*/
  footer{
    height: auto;
    margin: auto;
    text-align: center;
    padding: 5px 0;
    opacity: 0.6;
    box-shadow: 1px 1px 1px 1px black;
  }
  footer:hover{
    opacity: 1;
    transition: 0.3s;
  }
  .developer{
    color: orangered;
    text-decoration: none;
  }







  /*-----------------------------------------------------------------------------------------------------------*/
  /* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
 .navbar{
  display:inline-block;
  width: 140%;
 }
 .nav-menu{
  display: none;
 }
 .page-theme{
  display: none;
 }
 .logo{
  font-size: 20px;
  color: orangered;
  font-weight: 800;
 }
 .web-icon{
  width: 50px;
 }
 .text h1{
font-size: 24px;
 }
 .text p{
  font-size: 18px;
   }
 .column-1{
  width: 25%;
  margin: 0;
  padding: 0 2px; 
 }
 .column-1 p{
  display: none;
 }
 .column-1 h2{
  display: inline-block;
  font-size: 14px;
 }
 .column-2{
  display: flexbox;
  padding: 4px;
  height: 100vh;
  margin: 0 0 10px 10px;
 
 }
 .header{
  display: inline-block;
 }
 .header_text{
  width:auto;
  display: flex;
 }
 .loader-3{
  display:none;
 }
 .loader{
  margin: 30% 5%;
  width: 50%;
 }
 .page-2 h1{
  font-size: 20px;
 }
 .page-4{
  display: inline-block;
  padding: 0;
  width: auto;
  margin: auto;
  text-align: center;
 }
 .page-4 h2{
  font-size: 13px;
  font-weight: 800;
  margin: auto;
  display: flex;
 }.page-4 p{
  font-size: 14px;
 }
 :input{
  margin: 0 -30%;
  width: 50px;
 }

 .loader-4{
  display: none;
 }
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
 
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
  .example {background: blue;}
} 

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
  .example {background: orange;}
} 

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
  .example {background: pink;}
}