h1::before {  
    transform: scaleX(0);
    transform-origin: bottom right;
  }
  
  h1:hover::before {
    transform: scaleX(1);
    transform-origin: bottom left;
  }
  
  h1::before {
    content: " ";
    display: block;
    position: absolute;
    top: 0; 
    right: 0;
    inset: 0 0 0 0;
    background: rgb(255, 42, 42);
    z-index: -1;
    transition: transform .3s ease-in-out;
  }
  
  h1 {
    position: relative;
    font-size: 4rem;
    text-align: center;
    color: rgb(0, 255, 170);
    cursor: pointer;
  }
  
  html {
    block-size: 100%;
    inline-size: 100%;
  }
  
  body {
    min-block-size: 100%;
    min-inline-size: 100%;
    margin: 0;
    box-sizing: border-box;
    display: grid;
    place-content: center;
    font-family: system-ui, sans-serif;
    background-color: rgb(0, 255, 170);
    -webkit-user-select: none; /* Safari */        
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+/Edge */
    user-select: none; /* Standard */
  }
  
  @media (orientation: landscape) {
    body {
      grid-auto-flow: column;
    }
  }