body {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: white;
}

.container {
    text-align: center;
}

.logo {
    max-width: 200px;
    height: auto;
}

.text {
    font-family: 'Barlow', sans-serif;
    font-size: 24px;
    margin-top: 30px;
    color: #333;
}

/* Random images styling */
.random-image {
    position: absolute;
    height: auto;
}

.random1 {
    max-width: 300px;
    top: 10%;
    left: 15%;
}

.random2 {
    max-width: 450px;
    top: 2%;
    right: 10%;
}

.random3 {
    max-width: 200px;
    bottom: 2%;
    left: 2%;
}

.random4 {
    max-width: 250px;
    bottom: 20%;
    right: 10%;
}

/* Responsive images */
@media (max-width: 768px) {
    .logo {
        max-width: 50%;
    }

    .random1, .random2, .random3, .random4 {
        max-width: 20vw; /* Make the images smaller on medium-sized screens */
    }

    .text {
        font-size: 4vw; /* Make the text smaller on medium-sized screens */
    }
}

@media (max-width: 200px) {
    .logo {
        max-width: 40%;
    }

    .random1, .random2, .random3, .random4 {
        max-width: 25vw; /* Make the images smaller on small-sized screens */
    }

    .text {
        font-size: 6vw; /* Make the text smaller on small-sized screens */
    }
}