html, body {
    height: 100%;
    margin: 0; 
-webkit-text-size-adjust: 100%;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.grid-container {
/* min-height: 100vh; */
display: grid;
grid-gap: 10px;
/* background-color: #2196F3; */
/* padding: 10px; */
}

.grid-item {
background-color: rgba(109, 37, 37, 0.8);
text-align: center;
padding: 20px;
font-size: 30px;
}

.item1 {
grid-column: 1 / span 2;
grid-row: 1;
height: 10vh;
}

.item2 {
grid-column: 3 / span 2;
grid-row: 1;
}
.item3 {
grid-column: 1 / span 2;
grid-row: 2 / span 3;
height: 67vh;
}
.item4 {
grid-column: 3 / span 2;
grid-row: 2 / span 3;
}
.item5 {
grid-column: 1 / span 4;
grid-row: 5;
}

.rowa {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.rowb {
    display: block;
}

.containers {
    height: 400px;
    overflow: hidden;
}

.containers .slider {
    position: relative;
}

.containers .slider table tr td {
    /* border-top: 1px solid #444; */
    /* color: #fff; */
    -webkit-text-stroke: 0.5px black;
    /* font-size: 20px; */
    /* padding: 9px; */
}

.marquee-container {
    /* width: 100vw; */
    overflow: hidden;
    white-space: nowrap;
}

.marquee {
    padding-left: 100vw;
    display: inline-block;
    animation: marquee 15s linear infinite;
    animation-play-state: running;
}

.marquee.paused,
.marquee-container:hover .marquee {
    animation-play-state: paused;
}

@keyframes marquee {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-100%);
    }
}

h7 {
    text-align: center;
    font-size: 32px;
    margin-bottom: 0;
    margin-top: 0;
    line-height: 1;
    text-decoration: none;
    color: #fff;
    /* font-family: Monoton; */
    /* animation: neon1 5s ease-in-out infinite alternate; */
}

.cardia {
    /* background: #eef7fe; */
    /* background: rgba(255, 255, 255, 0.8);
    padding: 30px;
    width: 100%;
    justify-content: center;
    display: flex;
    border-radius: 1rem;
    gap: 30px;
    text-overflow: clip;
    align-items: center; */
    /* color: #fff; */
    /* margin-right: 20px; */
    /* font-weight: 700;
    font-size: 6rem;
    font-family: monospace;
    user-select: none; */
}
.clock {
    display: flex;
 padding: 29px;
 justify-content: center;
 border-radius: 1rem;
}
.clock .meridian {
 font-size: 2rem;
 align-self: flex-end;
}
.clock .separator {
 animation: blink 1s linear infinite;
 opacity: 1;
}
.clock div:not(:last-child) {
 margin-right: 0.5rem;
}
@keyframes blink {
 30% {
     opacity: 1;
}
 50% {
     opacity: 0;
}
 80% {
     opacity: 1;
}
}

.crossfade > figure {
animation: imageAnimation 300s linear infinite 0s;
backface-visibility: hidden;
background-size: cover;
background-position: center center;
color: transparent;
height: 100%;
left: 0px;
opacity: 0;
position: absolute;
top: 0px;
width: 100%;
z-index: 0;
}
.crossfade > figure:nth-child(1) { background-image: url("../bg1.png"); }

.crossfade > figure:nth-child(2) {
animation-delay: 60s;
background-image: url('../bg7.jpg');
}

.crossfade > figure:nth-child(3) {
animation-delay: 120s;
background-image: url('../bg3.jpg');
}

.crossfade > figure:nth-child(4) {
animation-delay: 180s;
background-image: url('../bg8.jpg');
}

.crossfade > figure:nth-child(5) {
animation-delay: 240s;
background-image: url('../bg9.jpg');
}
@keyframes 
imageAnimation {  0% {
animation-timing-function: ease-in;
opacity: 0;
}
8% {
animation-timing-function: ease-out;
opacity: 1;
}
17% {
opacity: 1
}
25% {
opacity: 0
}
100% {
opacity: 0
}
}