.vhs-effect {
    position: relative;
    overflow: hidden;
     background: repeating-linear-gradient(
        to bottom,
        rgba(255, 255, 255, 1) 2px,
        rgba(255, 255, 255, 0.1) 1px,
        transparent 1px,
        transparent 4px
    );
    filter: contrast(80%) brightness(90%);
    animation: vhs 5s infinite linear, flicker 1s infinite;
}

.vhs-effect::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: repeating-linear-gradient(
        to bottom,
        rgba(255, 255, 255, 1) 2px,
        rgba(255, 255, 255, 0.1) 1px,
        transparent 1px,
        transparent 4px
    );
    pointer-events: none;
    z-index: 2;
}

@keyframes vhs {
    0%, 100% {
        filter: contrast(90%) brightness(100%) hue-rotate(0deg) saturate(100%);
    }
    50% {
        filter: contrast(120%) brightness(120%) hue-rotate(10deg) saturate(120%);
    }
}

@keyframes flicker {
    10%, 19.999%, 22%, 62.999%, 64%, 64.999%, 70% { opacity: 0.9; }
    20%, 21.999%, 63%, 63.999%, 65%, 69.999% { opacity: 0.8; }
    95%, 100% { opacity: 0.7; }
}

    .banding-container {
            width: auto; 
    max-width: 100%; 
    position: relative;
    overflow: hidden;
    display: inline-block; 
 
       
       
        }


.vhs-effect-2 {
    position: relative;
    overflow: hidden;
     background: repeating-linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.3) 2px,
        rgba(255, 255, 255, 0.1) 1px,
        transparent 1px,
        transparent 4px
    );
    filter: contrast(80%) brightness(50%);
    animation: vhs 5s infinite linear, flicker-2 1s infinite;
}

.vhs-effect-2::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: repeating-linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.2) 2px,
        rgba(255, 255, 255, 0.1) 1px,
        transparent 1px,
        transparent 4px
    );
    pointer-events: none;
    z-index: 2;
}

@keyframes vhs {
    0%, 100% {
        filter: contrast(90%) brightness(100%) hue-rotate(0deg) saturate(100%);
    }
    50% {
        filter: contrast(100%) brightness(100%) hue-rotate(10deg) saturate(120%);
    }
}

@keyframes flicker-2 {
    10%, 19.999%, 22%, 62.999%, 64%, 64.999%, 70% { opacity: 0.9; }
    20%, 21.999%, 63%, 63.999%, 65%, 69.999% { opacity: 0.8; }
    95%, 100% { opacity: 0.9; }
}


















        .banding-container img {
            width: 100%;
            height: auto;
            display: block; 
        }

        .banding-container::after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: repeating-linear-gradient(
                to bottom,
                rgba(255, 255, 255, 0.3) 0px,
                rgba(255, 255, 255, 0.3) 1px,
                transparent 2px,
                transparent 4px
            );
            pointer-events: none;
            z-index: 2; 
            
        }
        
            .banding-container2 {
            width: auto; 
     
    position: relative;
    overflow: hidden;
    display: inline-block; 
    max-width: 300px;
            
            }
            
            
             .banding-container2 img {
            width: 100%;
            height: auto;
            display: block; 
        }

        .banding-container2::after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: repeating-linear-gradient(
                to bottom,
                rgba(255, 255, 255, 0.3) 0px,
                rgba(255, 255, 255, 0.3) 1px,
                transparent 2px,
                transparent 4px
            );
            pointer-events: none;
            z-index: 2; 
            
        }
            
                    .banding-container3 {
            width: auto; 
     
    position: relative;
    overflow: hidden;
    display: inline-block; 
   
            
            }
            
            
             .banding-container3 img {
           
            height: auto;
            display: block; 
        }

        .banding-container3::after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: repeating-linear-gradient(
                to bottom,
                rgba(255, 255, 255, 0.3) 0px,
                rgba(255, 255, 255, 0.3) 1px,
                transparent 2px,
                transparent 4px
            );
            pointer-events: none;
            z-index: 2; 
            
        }
            
            

 
 body {
    height: auto;
    background: linear-gradient(
        160deg,
        rgba(4, 59, 92, 0.9), 
        rgba(205, 209, 228, 0.7),
        rgba(249, 180, 45, 1)
    );
    background-size: 100% 101%; 
    background-attachment: scroll;
    background-repeat: no-repeat;
    transition: background-position 0.2s ease;
    font-family: ms pgothic;
}

      
      main {
        width: 600px;
        margin: auto;  
        z-index: 2;
        
      }
      
      section {
         width: 100%;
         background: white;
         border: 1px grey solid;
         margin-top: 33px;
         
      }
      letter {
         font-family: "EB Garamond", "Georgia", serif;
  display: block;     
  width: 100%;
 background: #fff9db;
  border: 1px solid grey;
  margin-top: 33px;
  padding: 1rem;
}

 letter {
         font-family: "EB Garamond", "Georgia", serif;
  display: block;     
  width: 100%;
 background: #fff9db;
  border: 1px solid grey;
  margin-top: 33px;
  padding: 1rem;
}

 angelspeak {
  display: block;     
  width: 100%;
  background: white;
  border: 1px solid grey;
  margin-top: 33px;
  padding: 1rem;

  font-family: "Cormorant Garamond", "EB Garamond", serif;
  font-weight: 400;
  color: #8A70A6;   

  text-shadow: 
    0 0 1px #6B5B95,  
    0 0 4px rgba(138,112,166,0.5);
}
/* iris start */
iris {
  display: block;
  width: 100%;
  background: linear-gradient(
    135deg,
    #ffffff,
    #e0e0e0,
    #cce6ff,
    #ffd6f9,
    #e6ffe6
  );
  background-size: 300% 300%;
  animation: shimmer 10s ease infinite;

  border: 1px solid #ccc;
  border-radius: 6px;
  margin-top: 3px;
  padding: 1rem;

  font-family: "Playfair Display", serif;
  font-weight: 300;
  color: #444;
  line-height: 1.7;
}

@keyframes shimmer {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}


/* iris end */
      h1 {
          width: 100%;
          background: #000;
          color: #fff;
          margin: 0px;
          box-sizing: border-box;
          padding: 4px 10px;
          font-size: 18px; 
      }
      
       h2 {
          width: 40%;
          background: #000;
          color: #fff;
          margin-left: 0px;
          box-sizing: border-box;
          padding: 4px 10px;
          font-size: 18px; 
       }
      
      bubble-2 {
          width: 40%;
          background: #820000;
          color: #fff;
        position:relative;
         margin-left: 103px;
          box-sizing: border-box;
          padding: 4px 10px;
          font-size: 18px; 
      }
      
      
      article {
          box-sizing: border-box;
          padding: 8px;
      }
      
      
   
    nav {
      background: #000000;
      color: #ffffff;
      position: fixed;
      top: 0px;
      left: 0px;
      min-height: 100vh;
      width: 212px;
    }
      
      img {
          max-width: 100%;
      }
      
      .side {
          box-sizing: border-box;
          padding: 8px;
          font-size: 14px;
      }
      
      .side a {
          color: red;
      }
    article p[style*="color: blue"] {
  background-color: #d6ecff;
  padding: 10px;
  border-radius: 8px;
}