/* Default style that will be overridden by media queries */
* {
    
  }
  
  /* 
  ==================================================
   Ultra-Wide Screens (Full HD TVs)
  --------------------------------------------------
   Devices:
   - Full HD Television (1920x1080, DPR: 1) - Works
  ==================================================
  */
  @media (min-width: 1920px) {
    :root {
        --title-font-size: 1cm;
        --hello-font-size: 8rem;
        --you-font-size: 8rem;
        --intro-font-size: 1vw;
    }

    span.hello {
        margin-bottom:-4.5% !important;
        clip-path: inset(2.0vw 0 1.7vw 0);
      }
  
      span.you {
        clip-path: inset(2.3vw 0 1.5vw 0);
      }
  }

    /* 
  ==================================================
   Ultra-Wide Screens (4K)
  --------------------------------------------------
   Devices:
   - 4K Ultra HD Television (3840x2160, DPR: 1) - Works
  ==================================================
  */
  @media (min-width: 1921px) {
    :root {
        --title-font-size: 2cm;
        --hello-font-size: 16rem;
        --you-font-size: 16rem;
        --intro-font-size: 1.5vw;
    }

    span.hello {
      margin-bottom:-2.5% !important;
    }
  }
  
  /* 
  ==================================================
   HD & Laptop Screens (1280px - 1440px)
  --------------------------------------------------
   Devices:
   - 720p HD Television (1280x720, DPR: 1) - Works
   - Laptop with HiDPI screen (1440x900, DPR: 2) - Works
   - Laptop with MDPI screen (1280x800, DPR: 1) - Works
   - Laptop with touch (1280x950, DPR: 1) - Works
  ==================================================
  */
  @media (min-width: 1280px) and (max-width: 1919px) {
    :root {
        --title-font-size: 1cm;
        --hello-font-size: 8rem;
        --you-font-size: 8rem;
        --intro-font-size: 1.5vw;
    }

    span.hello {
      margin-bottom:-6% !important;
      clip-path: inset(2.0vw 0 1.6vw 0);
    }

    span.you {
      clip-path: inset(2.3vw 0 1.5vw 0);
    }

  }
  
  /* 
  ==================================================
   Tablets & Small Laptops (768px - 1280px)
  --------------------------------------------------
   Devices:
   - iPad iPadOS 14.7.1 (810x1080, DPR: 2) - Works
   - iPad Mini iPadOS 14.7.1 (768x1024, DPR: 2) - Works
   - Kindle Fire HDX Linux (800x1280, DPR: 2) - Works
  ==================================================
  */
  @media (min-width: 768px) and (max-width: 1279px) {
    :root {
        --title-font-size: 1cm;
        --hello-font-size: 8rem;
        --you-font-size: 8rem;
        --intro-font-size: 2vw;
    }

    span.hello {
      margin-bottom:-8% !important;
    }
  }
  
  /* 
  ==================================================
   Small to Medium Screens (429px - 767px)
  --------------------------------------------------
   Devices:
   - Desktop browsers resized to smaller dimensions - Works
   - Other devices in this size range - Works
  ==================================================
  */
  @media (min-width: 429px) and (max-width: 767px) {
    :root {
        --title-font-size: 1cm;
        --hello-font-size: 8rem;
        --you-font-size: 8rem;
        --intro-font-size: 3vw;
    }

    span.hello {
        margin-bottom:-16% !important;
    }

    span.you {
      clip-path: inset(6.0vw 0 3.9vw 0);
    }

  }
  
  /* 
  ==================================================
   Large Phones & Phablets (390px - 428px)
  --------------------------------------------------
   Devices:
   - Galaxy Note 20 Android 11 (412x915, DPR: 2.625) - Works
   - Galaxy Note 20 Ultra Android 11 (412x883, DPR: 3.5) - Works
   - Galaxy S20 Ultra Android 11 (412x915, DPR: 3.5) - Works
   - Pixel 5 Android 11 (393x851, DPR: 2.75) - Works
   - Nexus 6P Android 8 (412x732, DPR: 3.5) - Works
  ==================================================
  */
  @media (min-width: 390px) and (max-width: 428px) {
    :root {
        --title-font-size: 1cm;
        --hello-font-size: 5rem;
        --you-font-size: 5rem;
        --intro-font-size: 3vw;
    }

    span.hello {
        margin-bottom:-16% !important;
    }
  }
  
  /* 
  ==================================================
   Mid-Size Phones (360px - 389px, Tall Screens, Very High DPI)
  --------------------------------------------------
   Devices:
   - Galaxy S10/S10+ Android 11 (360x760, DPR: 4) - Works
   - Galaxy S20 Android 11 (360x800, DPR: 4) - Works
   - Galaxy S20+ Android 11 (384x854, DPR: 3.75) - Works
   - iPhone 11 Pro iOS 14.6 (375x812, DPR: 3) - Works
   - iPhone 12/13 mini iOS 14.6 (375x812, DPR: 3) - Works
  ==================================================
  */
  @media (min-width: 360px) and (max-width: 389px) and (min-resolution: 3dppx) {
    :root {
        --title-font-size: 0.7cm;
        --hello-font-size: 5rem;
        --you-font-size: 5rem;
        --intro-font-size: 3vw;
    }

    span.hello {
        margin-bottom:-16% !important;
    }
  }
  
  /* 
  ==================================================
   Small Phones (360px - 389px, Older or Budget Devices)
  --------------------------------------------------
   Devices:
   - iPhone SE 2nd gen iOS 14.6 (375x667, DPR: 2) - Works
   - LG Optimus L70 Android 4.4.2 (384x640, DPR: 1.25) - Works
  ==================================================
  */
  @media (min-width: 360px) and (max-width: 389px) and (max-resolution: 2.9dppx) {
    :root {
        --title-font-size: 0.7cm;
        --hello-font-size: 5rem;
        --you-font-size: 5rem;
        --intro-font-size: 3vw;
    }

    span.hello {
        margin-bottom:-16% !important;
    }

    .title {
      line-height: 0.7cm;
      margin-bottom: -0.05cm;
    }

    .first-letter {
      line-height: 0.7cm;
    }
  }
  
  /* 
  ==================================================
   Extra Small Devices (< 360px)
  --------------------------------------------------
   Devices:
   - Feature phones and very small screens, like the iPhone5/SE iOS 10.3.1 - Works
  ==================================================
  */
  @media (max-width: 359px) {
    :root {
        --title-font-size: 0.6cm;
        --hello-font-size: 5rem;
        --you-font-size: 5rem;
        --intro-font-size: 3vw;
    }

    span.hello {
        margin-bottom:-19% !important;
    }

    .title {
      line-height: 0.6cm;
      margin-bottom: -0.04cm;
    }

    .first-letter {
      line-height: 0.6cm;
    }
  }


  /*
  ==================================================
  Special cases
 --------------------------------------------------
    Devices:
    - iPhone 12/13 Pro - Works
  */
  @media (min-width: 390px) and (max-width: 390px) and (min-resolution: 2.9dppx) {
    :root {
        --title-font-size: 0.7cm;
        --hello-font-size: 5rem;
        --you-font-size: 5rem;
        --intro-font-size: 3vw;
    }

    span.hello {
        margin-bottom:-16% !important;
    }
  }
  
  /*
  iPhone 11 Pro Max which was falling through the cracks - Works
  */
  @media (min-width: 414px) and (max-width: 428px) and (min-resolution: 2.5dppx) {
    :root {
        --title-font-size: 0.7cm;
        --hello-font-size: 5rem;
        --you-font-size: 5rem;
        --intro-font-size: 3vw;
    }

    span.hello {
        margin-bottom:-15% !important;
    }

    .title {
      line-height: 0.7cm;
      margin-bottom: -0.06cm;
    }

    .first-letter {
      line-height: 0.7cm;
    }
  }