/* static background*/
 
  /*tv static background*/
  .tv-static {
    width: 100%;
    height: 350px;
    
    background-image: repeating-radial-gradient(white, black 0.00085%);
    animation: radial 25s linear infinite;
  }
  
  @keyframes radial {
      from {
      background-size: 100% 100%;
    }
    to {
      background-size: 200% 200%;
    }
  }
  
  /* static second layer */
  .tv-static-two {
    width: 100%;
    height: 400px;
    
    background-image: repeating-conic-gradient(white, black 0.00100%);
    animation: back 25s linear infinite;
  }
  
  @keyframes back {
      from {
      background-size: 100% 100%;
    }
    to {
      background-size: 200% 200%;
    }
  }
  
  

/*Text Overlay*/
/*centre*/
  .centre{
    z-index: 1;
    position: absolute;
    top: 300px;
    left: 220px;
    color: rgb(246, 240, 240);
    font-family: 'Courier New', Courier, monospace;
    font-size: 49px;
    cursor: pointer;
    opacity: 1.5;
  }
      
    .centre-hide {
        display: none;
      }
      
  .centre:hover + .centre-hide {
    display: block;
    color: red;
    position: absolute;
    top: 320px;
    left: 240px;
    color: rgb(246, 240, 240);
    font-family: 'Courier New', Courier, monospace;
    font-size: 20px;
    cursor: pointer;
    opacity: 1.5;

  }

  /*topLeft*/
  .topLeft{
    z-index: 1;
    position: absolute;
    top: 0px;
    left: 0px;
    color: rgb(246, 240, 240);
    font-family: 'Courier New', Courier, monospace;
    font-size: 49px;
    cursor: pointer;
    opacity: 1.5;
  }
      
    .topLeft-hide {
        display: none;
      }
      
  .topLeft:hover + .topLeft-hide {
    display: block;
    color: red;
    position: absolute;
    top: 30px;
    left: 20px;
    color: rgb(246, 240, 240);
    font-family: 'Courier New', Courier, monospace;
    font-size: 20px;
    cursor: pointer;
    opacity: 1.5;

  }

  /*topRight*/
  .topRight{
    z-index: 1;
    position: absolute;
    top: 50px;
    right: 20px;
    color: rgb(246, 240, 240);
    font-family: 'Courier New', Courier, monospace;
    font-size: 49px;
    cursor: pointer;
    opacity: 1.5;
  }
      
    .topRight-hide {
        display: none;
      }
      
  .topRight:hover + .topRight-hide {
    display: block;
    color: red;
    position: absolute;
    top: 80px;
    right: 50px;
    color: rgb(246, 240, 240);
    font-family: 'Courier New', Courier, monospace;
    font-size: 20px;
    cursor: pointer;
    opacity: 1.5;

  }

  /*bottomLeft*/
  .bottomLeft{
    z-index: 1;
    position: absolute;
    bottom: 0px;
    left: 0px;
    color: rgb(246, 240, 240);
    font-family: 'Courier New', Courier, monospace;
    font-size: 49px;
    cursor: pointer;
    opacity: 1.5;
  }
      
    .bottomLeft-hide {
        display: none;
      }
      
  .bottomLeft:hover + .bottomLeft-hide {
    display: block;
    color: red;
    position: absolute;
    bottom: 30px;
    left: 30px;
    color: rgb(246, 240, 240);
    font-family: 'Courier New', Courier, monospace;
    font-size: 20px;
    cursor: pointer;
    opacity: 1.5;

  }

/*bottomRight*/
  .bottomRight{
    z-index: 1;
    position: absolute;
    bottom: 0px;
    right: 0px;
    color: rgb(246, 240, 240);
    font-family: 'Courier New', Courier, monospace;
    font-size: 49px;
    cursor: pointer;
    opacity: 1.5;
  }
      
    .bottomRight-hide {
        display: none;
      }
      
  .bottomRight:hover + .bottomRight-hide {
    display: block;
    color: red;
    position: absolute;
    bottom: 30px;
    right: 20px;
    color: rgb(246, 240, 240);
    font-family: 'Courier New', Courier, monospace;
    font-size: 20px;
    cursor: pointer;
    opacity: 1.5;

  }


/*CSS:

    .cursor-container: The parent container remains relative, which allows the overlay container 
    to be positioned absolutely within it.
    .overlay-container: Positioned absolutely to cover the entire cursor-container. This ensures 
    it overlays all its contents.
    .overlay-container > div: Ensures text elements are positioned absolutely within the overlay-container 
    and styled appropriately.*/

    .audio-container {
      width: 100%;
      height: 350px;
      background-color: #333;
      position: relative;
      cursor: pointer;
  }