body {font-size:16px; font-family:'Segoe UI Bold', sans-serif; background-color:purple;}

a {color:#006699;}

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
.main {border:3px solid #000000; width:330px; padding:auto; margin:auto; background-color:white;}
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
.main {border:3px solid #000000; width:750px; padding:auto; margin:auto; background-color:white;}
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
.main {border:3px solid #000000; width:1030px; padding:auto; margin:auto; background-color:white;}
}

.main2 {padding:10px;}

.yellowbg {background:#f6fd87; padding:10px;}

.floatleft {float:left;}
.floatright {float:right;}

img {max-width:100%}

.leftalign {text-align:left;}
.centered {text-align:center;}
.rightalign {text-align:right;}

.clr {clear:both;}

.smallfont {font-size:11px;}

.redtext {color:#f41313;}

.circle1 {
  width: 30px;
  height: 30px;
  background-color: red;
  border-radius: 50%;
  opacity: 0; /* Initially hidden */
  animation: fade 4s infinite; /* Apply the fade animation */
}

.circle2 {
  width: 20px;
  height: 20px;
  background-color: red;
  border-radius: 50%;
  opacity: 0; /* Initially hidden */
  animation: fade 6s infinite; /* Apply the fade animation */
}

@keyframes fade {
  0%, 100% {
    opacity: 0; /* Start and end with opacity 0 */
  }
  50% {
    opacity: 1; /* Fade in at 50% */
  }
}

.video-container {
        position: relative;
        padding-bottom: 56.25%; /* 16:9 aspect ratio */
        height: 0;
        overflow: hidden;
    }

.video-container iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

/* Adjust width for smaller screens */
    @media (max-width: 768px) {
        .video-container iframe {
            width: 90%; /* Adjust this value as needed */
        }
    }
	
	@keyframes gradientBG {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}