/* ==========================================================
   TheHourlyNews Design System v1.0
   Base Styles
   ========================================================== */

/* ==========================================================
   GOOGLE FONTS
   ========================================================== */

   @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Newsreader:wght@400;600;700&display=swap');

   /* ==========================================================
      RESET
      ========================================================== */
   
   *,
   *::before,
   *::after{
       margin:0;
       padding:0;
       box-sizing:border-box;
   }
   
   html{
       scroll-behavior:smooth;
       -webkit-text-size-adjust:100%;
   }
   
   body{
   
       font-family:var(--font-body);
   
       font-size:var(--fs-md);
   
       font-weight:400;
   
       line-height:1.7;
   
       color:var(--color-text);
   
       background:var(--color-background);
   
       text-rendering:optimizeLegibility;
   
       -webkit-font-smoothing:antialiased;
   
       -moz-osx-font-smoothing:grayscale;
   
   }
   
   /* ==========================================================
      IMAGES
      ========================================================== */
   
   img{
   
       display:block;
   
       max-width:100%;
   
       height:auto;
   
   }
   
   /* ==========================================================
      LINKS
      ========================================================== */
   
   a{
   
       color:inherit;
   
       text-decoration:none;
   
       transition:var(--transition);
   
   }
   
   a:hover{
   
       color:var(--color-primary);
   
   }
   
   /* ==========================================================
      LISTS
      ========================================================== */
   
   ul,
   ol{
   
       list-style:none;
   
   }
   
   /* ==========================================================
      BUTTONS
      ========================================================== */
   
   button{
   
       border:none;
   
       outline:none;
   
       background:none;
   
       cursor:pointer;
   
       font:inherit;
   
   }
   
   /* ==========================================================
      INPUTS
      ========================================================== */
   
   input,
   textarea,
   select{
   
       font:inherit;
   
   }
   
   /* ==========================================================
      HEADINGS
      ========================================================== */
   
   h1,
   h2,
   h3,
   h4,
   h5,
   h6{
   
       font-family:var(--font-heading);
   
       font-weight:600;
   
       line-height:1.15;
   
       letter-spacing:-0.02em;
   
       color:var(--color-text);
   
   }
   
   h1{
   
       font-size:clamp(2.8rem,6vw,4.5rem);
   
   }
   
   h2{
   
       font-size:clamp(2rem,4vw,3rem);
   
   }
   
   h3{
   
       font-size:clamp(1.5rem,3vw,2rem);
   
   }
   
   h4{
   
       font-size:1.4rem;
   
   }
   
   p{
   
       color:var(--color-text-secondary);
   
       margin-bottom:1.4rem;
   
   }
   
   strong{
   
       color:var(--color-text);
   
   }
   
   ::selection{
   
       background:var(--color-primary);
   
       color:#fff;
   
   }