@font-face {
    font-family: Rondal;
    src: url("webfont.woff") format("woff"), /* Modern Browsers */
         url("webfont.ttf")  format("truetype");
  }
  body {
    margin: 0;
    padding: 0;
    font-family: Rondal, sans-serif;
    color: #ffffff;
    background-image: url('background.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
  }
  .content {
    text-align: center;
    padding: 50px;
  }

  .content h1 {
    font-size: clamp(3.5rem, 7vw, 6rem); /* Min: 3.5rem, Normal: 7vw, Max: 6rem */
    margin-top: clamp(5rem, 9vw, 8rem); /* Min: 5rem, Normal: 9vw, Max: 8rem */
	/* margin-top: clamp(5.5rem, 9.5vw, 8.5rem); */ /* Min: 5rem, Normal: 9vw, Max: 8rem */
    background: linear-gradient(transparent, transparent), url('background.jpg');
    background-position: bottom;
    -webkit-background-clip: text;
    background-clip: text;
    background-repeat: no-repeat;
    background-size: cover;
    color: transparent;
  }
  
/*
 @media (max-width: 1280px) {
    .content h1 {
      font-size: 7vw;
      margin-top: 6.5rem;
    }
  }
  
  @media (max-width: 1024px) {
    .content h1 {
      font-size: 7vw;
      margin-top: 6rem;
    }
  }
  
  @media (max-width: 768px) {
    .content h1 {
      font-size: 7vw;
      margin-top: 5rem;
    }
  }

  @media (max-width: 480px) {
    .content h1 {
      font-size: 12vw;
      margin-top: 5rem;
    }
  }
*/