@import "https://fonts.googleapis.com/css2?family=Fredoka:wght@300;400;500;600;700&display=swap";

@import "https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;700&display=swap";

* {
margin:0;
padding:0;
overflow:hidden
}

@keyframes marquee {
0% {
left:-0
}

9.7% {
left:-0
}

11.2% {
left:-100vw
}

20.9% {
left:-100vw
}

22.4% {
left:-200vw
}

32.6% {
left:-200vw
}

34.1% {
left:-300vw
}

43.1% {
left:-300vw
}

45.8% {
left:-400vw
}

55.5% {
left:-400vw
}

57% {
left:-300vw
}

66.7% {
left:-300vw
}

68.2% {
left:-200vw
}

77.9% {
left:-200vw
}

79.4% {
left:-100vw
}

95% {
left:-100vw
}

100% {
left:-0
}
}

@keyframes feed {
0% {
left:-200vw
}

100% {
left:200vw
}
}

.body {
width:100vw;
height:100vh;
display:flex
}

.barcont {
position:absolute;
bottom:0;
left:0;
display:flex;
width:200vw;
height:3vh;
background-image:linear-gradient(to right,#434343 0%,black 100%)
}

.bar {
font-family:'Poppins',sans-serif;
color:rgba(255,255,255,0.5);
position:absolute;
bottom:0;
left:0;
display:flex;
width:200vw;
height:3vh;
animation:feed 90s linear infinite
}

.wound {
width:100vw;
height:100vh;
overflow:hidden
}

.wounded {
width:100vw;
height:100vh;
overflow:hidden;
display:flex;
justify-content:center;
align-items:center
}

.feed {
width:100vw;
height:3vh
}

.f2 {
width:100vw;
height:3vh;
animation-delay:30s
}

.dpslogo {
width:12vw;
height:auto;
position:absolute;
right:20px;
bottom:5vh;
filter:opacity(.5)
}

.lgbox {
position:absolute;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
top:76vh;
left:-5px;
width:13vw;
height:27vh;
background-color:#f0f0f0;
border:5px ridge #afafaf;
border-radius:0 20px 0 0
}

.time {
display:flex;
align-content:center;
justify-content:center;
width:240px;
height:80px;
background:rgba(0,0,0,0)!important;
font-family:'Poppins',sans-serif;
font-weight:500;
font-size:50px;
color:rgba(0,0,0,.8);
filter:drop-shadow(3px 2px 1px whitesmoke)
}

.lgbright {
padding-top:1vh;
overflow:visible
}

.lg {
filter:drop-shadow(3px 2px 1px rgba(0,0,0,.6))
}

.viewport {
will-change: transform;
height:97vh;
width:500vw;
position:absolute;
display:flex;
top:0;
left:0;
animation:marquee 140s linear infinite;
pointer-events:none
}

.table {
margin-top:-10vh;
transform:scale(0.8);
display:flex;
justify-content:center;
align-items:center;
background-color:#f8f8f8;
font-family:'Poppins',sans-serif;
padding:60px;
width:100%;
height:100%
}

.table th,.table td {
padding:10px
}

.viewsection {
display:flex;
justify-content:center;
align-items:center;
height:97vh;
width:100vw
}

.one {
width:100vw;
background-image:linear-gradient(to top,#d5d4d0 0%,#d5d4d0 1%,#eeeeec 31%,#efeeec 75%,#e9e9e7 100%);
content-visibility:auto
}

.two {
width:100vw;
background-image:linear-gradient(to right,#434343 0%,black 100%);
content-visibility:auto
}

.three {
width:100vw;
background-image:linear-gradient(to right,black 0%,#434343 100%);
content-visibility:auto
}

.four {
width:100vw;
background-image:linear-gradient(to right,#434343 0%,black 100%);
content-visibility:auto
}

.five {
width:100vw;
background-image:linear-gradient(to right,black 0%,#434343 100%);
content-visibility:auto
}

.magic {
color:rgba(0,0,0,0)
}

.forecast {
margin-top:-10vh;
width:96vw;
height:60vh;
filter:drop-shadow(0px 0px 6px black)
}

.openingcont {
margin-top:-10vh;
width:70vw;
height:60vh;
overflow:visible;
filter:drop-shadow(0px 0px 6px black)
}

.weekly {
margin-top:-10vh;
transform:scale(0.7);
overflow:hidden;
width:80vw;
height:80vh;
display:flex;
justify-content:center;
align-items:center;
background-image:linear-gradient(to top,#d5d4d0 0%,#d5d4d0 1%,#eeeeec 31%,#efeeec 75%,#e9e9e7 100%)
}

.weather {
margin-top:-1vh;
margin-left:3vw;
filter:invert(100%),hue-rotate(40degrees)
}

.qr {
position:absolute;
top:0;
left:1vw;
width:13vw;
height:18vw
}

.lock {
position:absolute;
top:0;
left:0;
width:100vw;
height:100vh
}