body {
    margin: 0;
    padding: 0;
    height: 100vh;
    font-family: Arial, sans-serif;
    overflow: hidden;
    color: black;
}

.bg-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.bg-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
}

.bg-image:nth-child(1) {
    background-image: url('https://gautham-sabhahit.github.io/images/R136.png');
    animation: fadeInOut1 60s infinite;
}

.bg-image:nth-child(2) {
    background-image: url('https://gautham-sabhahit.github.io/images/R136a1_compare.png');
    animation: fadeInOut2 60s infinite;
}

.bg-image:nth-child(3) {
    background-image: url('https://gautham-sabhahit.github.io/images/OB.png');
    animation: fadeInOut3 60s infinite;
}

@keyframes fadeInOut1 {
    0% {opacity: 0;}
    5% { opacity: 0.3; }
    60% { opacity: 0.3; }
    63.33% { opacity: 0; }
    100% { opacity: 0; }
}

@keyframes fadeInOut2 {
    0%, 63.33% { opacity: 0; }
    63.34% { opacity: 0.3; }
    83% { opacity: 0.3; }
    86.66% { opacity: 0; }
    100% { opacity: 0; }
}

@keyframes fadeInOut3 {
    0%, 86.66% { opacity: 0; }
    86.67% { opacity: 0.3; }
    96% { opacity: 0.3; }
    100% { opacity: 0; }
}

.content {
    position: relative;
    z-index: 1;
    padding: 20px;
    color: black;
}