.background-container {
    background-image: url('img1.png');
    background-size: cover; /* Scales the image to cover the entire container */
    background-position: center; /* Centers the image */
    width: 100vw;
    height: 100vh;
}

.responsive-img {
    max-width: 100%;
    height: auto; /* Maintains the aspect ratio */
}

.fullscreen-img {
    width: 100vw;  /* 100% of the viewport width */
    height: 100vh; /* 100% of the viewport height */
    object-fit: contain; /* Retains aspect ratio and fills the area, cropping excess */
    position: fixed; /* Optional: fixes the image to the background */
    top: 0;
    left: 0;
}

.full-img {
    width: 100vw;  /* 100% of the viewport width */
    height: 100vh; /* 100% of the viewport height */
    object-fit: contain; /* Retains aspect ratio and fills the area, cropping excess */
}


html, body {
    height: 100vh; /* Ensure the body and html elements use the full page height */
    margin: 0;
    padding: 0;
}

table {
    width: 100%; /* Table takes the full width of its container */
    height: 100vh; /* Table takes the full height of its container */
    border-collapse: collapse; /* Optional: for cleaner borders */
}

td {
    padding: 0; /* Remove default cell padding for a tight fit */
    height: 100vh; /* Ensure cells can take full height if needed */
}

img {
    width: 100%;  /* Image fills the width of its cell */
    height: 100vh; /* Image fills the height of its cell */
    display: block; /* Helps remove mysterious white space below images */
    object-fit: contain; /* Resizes the image to fill the given dimensions while preserving its aspect ratio, cropping if necessary */
}