/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
   .crt::before {
  content: " ";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
  z-index: 2;
  background-size: 100% 2px, 3px 100%;
  pointer-events: none;
}

@keyframes flicker {
  20% {
  opacity: 0.87861;
  }
  5% {
  opacity: 0.74769;
  }
  10% {
  opacity: 0.43604;
  }
  15% {
  opacity: 0.30626;
  }
  20% {
  opacity: 0.38128;
  }
  25% {
  opacity: 0.30626;
  }
  30% {
  opacity: 0.38128;
  }
  35% {
  opacity: 0.33604;
  }
}

.crt::after {
  content: " ";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(18, 16, 16, 0.1);
  opacity: 0;
  z-index: 2;
  pointer-events: none;
  animation: flicker 0.15s infinite;
}

p {
    font-size: 20px; /* Increases paragraph text size */
}
a {
    font-size: 20px; /* Increases paragraph text size */
}
h1 {
    font-size: 34px; /* Increases heading size */
}
h2 {
    font-size: 34px; /* Increases paragraph text size */
}
body {
   background-image: url('water.gif'); /* Replace with your GIF path or URL */
  
  background-size: auto;; /* Optional: Default value, maintains the original size of the background image */
  background-repeat: repeat; 
  background-position: center; /* Optional: Center the background image */
  margin: 0;
  padding: 0;
  background-color: Crimson;
  color: LemonChiffon;
  font-family: 'Nouveau IBM', sans-serif;

}
.box {    justify-content: center; /* Horizontally center text */

    width: 60%; /* Adjust width as needed */
    height: 60%; /* Adjust height as needed */
  background-image: url('pattern 548.gif'); /* Replace with your image path */
  background-repeat: repeat; /* Sets the image to repeat both horizontally and vertically */
    border: 4px solid #B4237B; /* Border style */
    padding: 5px; /* Padding inside the box */
    margin: 20px; /* Margin around the box */
    text-align: center; /* Align text horizontally */
    line-height: center; /* Center text vertically */
}

.navbar {
            display: flex;
    justify-content: center; /* Horizontally center text */
            font-size: 17px;
            line-height: 2;
    width: center; /* Adjust width as needed */
    height: center; /* Adjust height as needed */
       padding: 1px; /* Padding inside the box */
    margin: 20px; /* Margin around the box */
    text-align: center; /* Align text horizontally */
    line-height: center; /* Center text vertically */
}
.caption {    justify-content: center; /* Horizontally center text */

  width: center; /* Adjust width as needed */
    height: center; /* Adjust height as needed */
     background-image: url('064.gif'); /* Replace with your image path */
  background-repeat: repeat; /* Sets the image to repeat both horizontally and vertically */
    border: 4px solid #B4237B; /* Border style */
    padding: 9px; /* Padding inside the box */
    margin: 20px; /* Margin around the box */
    text-align: center; /* Align text horizontally */
    line-height: center; /* Center text vertically */
}
@media (max-width: 600px) {
    .box {
        width: 355px; /* Full width on smaller screens */
        padding: 15px; /* Adjust padding for smaller screens */
        font-size: 14px; /* Decrease font size for smaller screens */
         margin: 0px; /* Margin around the box */
    }
    @media (max-width: 600px) {
    .caption {
        width: 305px; /* Full width on smaller screens */
        padding: 15px; /* Adjust padding for smaller screens */
        font-size: 14px; /* Decrease font size for smaller screens */
         margin: 5px; /* Margin around the box */
    }
    @media (max-width: 600px) {
    .navbar {
        width: 355px; /* Full width on smaller screens */
        padding: 15px; /* Adjust padding for smaller screens */
        font-size: 14px; /* Decrease font size for smaller screens */
         margin: 0px; /* Margin around the box */
    }
    }