body {
    background-color: powderblue;
}

/* Center the black box */
.centered-box {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: black;
    border-radius: 3px;
    width: auto;
    height: auto;
    text-align: justify;
}

.centered-text {
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 30px;
    padding-right: 30px; /* Adjust this value to control the space around the text */
    color: rgb(239, 239, 234);
    font-family: 'DM Sans', sans-serif;
    font-size: 10px;
}

.centered-text:hover {
    color: whitesmoke;
}

/* Style the email address link */
.centered-text h1 a {
    color: white; /* Set the email address to white */
    text-decoration: none; /* Remove underline initially */
}

.centered-text h1 a:hover {
    text-decoration: underline; /* Add underline on hover */
}

/* Style the image row */
.image-row {
    display: flex; /* Make the image containers flex items */
    justify-content: center; /* Center the image row horizontally */
}

.image-container {
    margin: 0 10px; /* Add spacing between images */
}

.image-hover {
    display: none; /* Hide the hover image initially */
}

.image-container:hover .image-normal {
    display: none; /* Hide the normal image on hover */
}

.image-container:hover .image-hover {
    display: inline; /* Show the hover image on hover */
}


.bg {
    position: fixed;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
}

.bg video {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    min-width: 50%;
    min-height: 50%;
}

#video1 {
    display: block; /* Show this video initially */
}

#video2 {
    display: none; /* Hide this video initially */
}

@media screen and (max-device-width: 767px) {
    #video1 {
        display: none; /* Hide video 1 on phones */
    }

    #video2 {
        display: block; /* Show video 2 on phones */
    }

    /* Increase the font size and other properties for phones */
    .centered-text {
        font-size: 16px; /* Adjust the font size as needed for phones */
    }
}

@media screen and (max-width: 1000px) {
    #video1 {
        display: none; /* Hide video 1 on screens smaller than 1000px */
    }

    #video2 {
        display: block; /* Show video 2 on screens smaller than 1000px */
    }
}