.H {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: calc(var(--navheight) + 0.5rem);
    min-height: 100vh;
    width: 100%;
  }

  .H h1,
  .H h2 {
    text-align: center;
    text-transform:capitalize
  }
  
  .quote-me-box {
    width: 50%;
    padding: 2rem;
    min-height: 30vh;
    border-radius: 10px;
    text-align: center;
    box-shadow: 
    0px 0px 0px 4px rgb(255, 0, 0),   /* red */
    0px 0px 0px 6px rgba(0, 255, 0, 0.5), /* semi-transparent green */
    0px 0px 0px 8px rgb(0, 0, 255),  /* blue */
    0px 0px 0px 10px rgb(255, 255, 0),  /* yellow */
    0px 0px 0px 12px rgb(255, 165, 0),  /* orange */
    0px 0px 0px 14px rgb(128, 0, 128),  /* purple */
    0px 0px 0px 16px rgb(255, 192, 203); /* pink */
    margin: clamp(4rem, 10vw, 5rem);
}
  
  .quote-me-box .quote-button {
    background: var(--background);
    font: 500 clamp(12px, 4vw, 20px) 'Roboto';
    height: auto;
    padding: 10px 10px;
    text-transform: uppercase;
    user-select: none;
    color: var(--text);
    border-radius: 25px;
    border: none;
    cursor: pointer;
    display: inline-block;
    text-decoration: none;
  }
  
  .quote-me-box .quote-button:hover {
    background: var(--hoverColor);
  }
  
  @keyframes blink-animation {
    50% {
      opacity: 0;
    }
  }

  @media screen and (max-width: 768px) {
  
    .quote-me-box {
      width: 70%;
    }
  }

  @media screen and (max-width: 480px) {

    .H {
      margin-top: 0;
    }

      .quote-me-box {
        width: 95%;        
      }
    
  }