/* ==========================================================
   GARSOLVE CSS RESET
   File: reset.css
   ========================================================== */


/* ==========================================================
   BOX SIZING
   ========================================================== */

   *,
   *::before,
   *::after {
       box-sizing: border-box;
   }
   
   
   /* ==========================================================
      DOCUMENT
      ========================================================== */
   
   html {
       margin: 0;
       padding: 0;
   
       font-size: 16px;
   
       scroll-behavior: smooth;
   
       -webkit-text-size-adjust: 100%;
       text-size-adjust: 100%;
   }
   
   
   body {
       margin: 0;
       padding: 0;
   
       min-height: 100vh;
   
       background:
           var(--color-background);
   
       color:
           var(--color-text-primary);
   
       font-family:
           var(--font-primary);
   
       font-weight:
           var(--font-weight-regular);
   
       line-height:
           var(--line-height-normal);
   
       text-rendering:
           optimizeLegibility;
   
       -webkit-font-smoothing:
           antialiased;
   
       -moz-osx-font-smoothing:
           grayscale;
   }
   
   
   /* ==========================================================
      TYPOGRAPHY RESET
      ========================================================== */
   
   h1,
   h2,
   h3,
   h4,
   h5,
   h6,
   p {
       margin: 0;
   }
   
   
   h1,
   h2,
   h3,
   h4,
   h5,
   h6 {
       font-weight:
           var(--font-weight-semibold);
   }
   
   
   p {
       color:
           var(--color-text-secondary);
   }
   
   
   /* ==========================================================
      LINKS
      ========================================================== */
   
   a {
       color: inherit;
   
       text-decoration: none;
   }
   
   
   a:focus-visible,
   button:focus-visible,
   input:focus-visible,
   textarea:focus-visible,
   select:focus-visible {
       outline: 2px solid var(--color-primary);
   
       outline-offset: 4px;
   }
   
   
   /* ==========================================================
      BUTTONS
      ========================================================== */
   
   button,
   input,
   textarea,
   select {
       font: inherit;
   }
   
   
   button {
       border: 0;
   
       padding: 0;
   
       background: none;
   
       color: inherit;
   
       cursor: pointer;
   }
   
   
   /* ==========================================================
      LISTS
      ========================================================== */
   
   ul,
   ol {
       margin: 0;
       padding: 0;
   
       list-style: none;
   }
   
   
   /* ==========================================================
      IMAGES
      ========================================================== */
   
   img,
   picture,
   svg,
   canvas {
       display: block;
   
       max-width: 100%;
   }
   
   
   img {
       height: auto;
   }
   
   
   /* ==========================================================
      TABLES
      ========================================================== */
   
   table {
       border-collapse: collapse;
   
       border-spacing: 0;
   }
   
   
   /* ==========================================================
      FORMS
      ========================================================== */
   
   input,
   textarea,
   select {
       width: 100%;
   
       border: 0;
   
       background: none;
   
       color: inherit;
   }
   
   
   textarea {
       resize: vertical;
   }
   
   
   /* ==========================================================
      SELECTION
      ========================================================== */
   
   ::selection {
       background:
           rgba(0, 214, 214, 0.28);
   
       color:
           var(--color-text-primary);
   }
   
   
   /* ==========================================================
      SCROLLBAR
      ========================================================== */
   
   html {
       scrollbar-width: thin;
   
       scrollbar-color:
           rgba(0, 214, 214, 0.45)
           var(--color-background);
   }
   
   
   ::-webkit-scrollbar {
       width: 10px;
   }
   
   
   ::-webkit-scrollbar-track {
       background:
           var(--color-background);
   }
   
   
   ::-webkit-scrollbar-thumb {
       background:
           linear-gradient(
               var(--color-primary),
               var(--color-accent)
           );
   
       border-radius:
           var(--radius-full);
   
       border:
           3px solid
           var(--color-background);
   }
   
   
   /* ==========================================================
      REDUCED MOTION
      ========================================================== */
   
   @media (prefers-reduced-motion: reduce) {
   
       html {
           scroll-behavior: auto;
       }
   
       *,
       *::before,
       *::after {
           animation-duration: 0.01ms !important;
           animation-iteration-count: 1 !important;
           transition-duration: 0.01ms !important;
           scroll-behavior: auto !important;
       }
   
   }