* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
  }
  
  body {
    width: 100vw;
    min-height: 100vh;
    position: relative;
    display: grid;
    place-items: center;
  }
  
  .countdown {
    width: 100%;
    height: 100%;
    display: none;
    place-items: center;
    color: rgb(194, 3, 3);
    font-size: 10rem;
    font-weight: 900;
    background-color: rgba(0, 0, 0, 0.5);
    position: absolute;
    inset: 0 0 0 0;
    z-index: 10000;
  }
  
  .screen-recorder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, #6e7bff, #61c4f2, #ff6b8e, #38c7f9);
    background-size: 400% 400%;
    animation: gradientBackground 15s ease infinite;

    
  
    /* h1 {
      text-transform: capitalize;
      font-size: 4rem;
      font-weight: bold;
      color: #202020;
    } */
  
    h1 {
      text-transform: capitalize;
      font-size: 4rem;
      font-weight: bold;
      color: #202020;
      text-shadow: 
        2px 2px 0 #ccc,
        4px 4px 0 #ccc,
        6px 6px 0 #ccc;
      perspective: 1000px;
    }
    
    h1:hover {
      transform: translateZ(20px);
    }

    h1::after {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 2px;
      background-color: #202020;
      transform: scaleX(0);
      transition: transform 0.3s ease-in-out;
    }
    
    h1:hover::after {
      transform: scaleX(1);
    }

    /* h2 {
      text-transform: inherit;
      font-size: 2rem;
      font-weight: bold;
      color: #202020;
      transform-style: preserve-3d;
      transform-origin: center;
      animation: flipIn 1.5s ease-out;
    } */

    /* @keyframes flipIn {
      0% {
        transform: rotateX(90deg);
        opacity: 0;
      }
      100% {
        transform: rotateX(0deg);
        opacity: 1;
      }
    }
     */
    
     h2 {
      font-size: 1.5em;
      font-weight: bold;
      text-align: center; 
      line-height: 1.2; 
    }
    
    h2 a.shine {
      position: relative;
      display: inline-block;
      color: #202020; 
      text-decoration: none;
      overflow: hidden;
      vertical-align: middle; 
    }
    
    h2 a.shine::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.8), transparent);
      transition: left 0.5s ease;
    }
    
    h2 a.shine:hover::before {
      left: 100%;
    }
    
    h2 a.shine:hover {
      animation: shine 2s infinite;
      background: linear-gradient(135deg, #009639 33.33%, #FFD100 33.33%, #FFD100 66.66%, #EF4135 66.66%);
      color: #ffffff; 
      box-shadow: 0 0 10px rgba(255,255,255,0.5);
    }
    
    @keyframes shine {
      0% {
        background-position: 0% 50%;
      }
      50% {
        background-position: 100% 50%;
      }
      100% {
        background-position: 0% 50%;
      }
    }
    
        
    
    video {
      width: 982px;
      max-height: 680px;
      box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.2),
        -4px -4px 10px rgba(0, 0, 0, 0.2);
    }
    .play-button {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 80px;
      height: 80px;
      border: 2px solid white;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      background: rgba(0, 0, 0, 0.5);
      transition: all 0.3s ease;
    }
    
    .play-button::before {
      content: '▶';
      color: white;
      font-size: 30px;
      transform: translateX(2px);
      transition: all 0.3s ease;
    }
    
    .play-button:hover {
      transform: translate(-50%, -50%) scale(1.1);
    }
    
    .play-button:hover::before {
      transform: translateX(4px);
    }
    .progress-bar {
      height: 5px;
      background: rgba(255, 255, 255, 0.5);
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      cursor: pointer;
    }
    
    .progress-filled {
      width: 0%;
      height: 100%;
      background: #ff0000;
      transition: width 0.1s linear;
    }
    
  }
  
  .btn {
    background-color: #428bca; 
    color: #fff;
    font-weight: bold;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.08);
    transition: background-color 0.3s ease;
    border: 1px solid #428bca;
    cursor: pointer;
    text-transform: capitalize;
    font-weight: 900;
  }
  
  .btn:hover {
    background: linear-gradient(135deg, #009639 33.33%, #FFD100 33.33%, #FFD100 66.66%, #EF4135 66.66%);
    /* background-size: 100% 100%;
    background-attachment: fixed;
    background-position: center center; */
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.15); 
  }
  
  
  a {
    text-decoration: none;
    margin-inline-start: 20px;
  }