@import url('https://fonts.googleapis.com/css2?family=Red+Hat+Display:ital,wght@0,300..900;1,300..900&display=swap');

* {box-sizing: border-box;}

body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: vislble;
    background-color: #f0f0f0;
    position: relative;
    font-family: "Red Hat Display", sans-serif;
    font-size: 18px;
}

h1 {font-size: 2em; padding: 0; margin: 0;}
h3 {padding: 0; margin: 0;}

p {border-top: 1px solid darkgray; padding-top: 15px;}

.logo-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.logo-row {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    width: 200%; /* Double the width to allow smooth scrolling */
    height: 20vh; /* Adjust the height of each row */
    animation: scroll 120s linear infinite; /* Adjust this duration */
}


.logo-container img {
    height: 100%; /* Logo fills the row height */
    margin-right: 20px;
    width: auto;
}

.logo-container img {
    height: 100%;
    margin-right: 20px;
    width: auto;
    filter: grayscale(100%);
    transition: filter 0.3s ease; /* Smooth transition to color */
}

.logo-container img:hover {
    filter: none; /* Remove grayscale on hover */
}


@keyframes scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%); /* Scroll left to right */
    }
}

/* Offset rows using staggered animation delays */
.logo-row:nth-child(even) {
    animation-delay: -15s; /* Offset for every other row */
}


.container {
    display: block;
    max-width: 80%;
    margin: 0 auto;
    border-radius: 10px;
    position: relative; /* Use relative positioning if possible */
    top: 20%; /* Adjust as needed */
    z-index: 1; /* A moderate z-index value */
    overflow: auto;
}

.logo {
    min-height: 50px;
    text-align: center;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 10px 10px 0 0;
    padding: 15px 0;
    border-bottom: 1px solid #919191;
}

.logo img {
    width: 150px;
}

section.main {
    display:flex;
    flex-direction: row;
    flex-wrap: wrap;

}

.textinfo {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 50%;
    background: rgba(184, 184, 184, 0.95);
    padding: 25px 25px 25px 200px;
    
}

.embedcode{
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 50%;
    background: rgba(184, 184, 184, 0.95);
    padding: 25px 25px 25px 200px;
}


/* Small Screen Rules */
@media screen and (min-width: 150px) and (max-width: 500px) {

    .container {
        display: block;
        max-width: 100%;
        margin: 0 auto;
        border-radius: 10px;
        position: relative; /* Use relative positioning if possible */
        top: 0%; /* Adjust as needed */
        z-index: 1; /* A moderate z-index value */
        min-height: 100vh;
    }

    .textinfo {
        flex-grow: 1;
        flex-shrink: 1;
        flex-basis: 100%;
        background: rgba(184, 184, 184, 0.95);
        padding: 15px;
        text-align: center;
    }

    .embedcode{
        flex-grow: 1;
        flex-shrink: 1;
        flex-basis: 100%;
        background: rgba(184, 184, 184, 0.95);
        padding: 15px;
    }

    .container {
        min-height: 100vh; /* Full viewport height */
        padding: 0;
    }

    .textinfo, .embedcode {
        padding: 15px;
        text-align: center;
    }

}