Where to put CSS? Stylesheet messing up my page

[SamiBaydani]

Hi all! 

I've added a moving logo slide.

However my CSS keeps messing up my page and it won't scroll down anymore (like on the page now).
I've created a new custom.css asset with the CSS, which I've then added to my theme.liquid. 
I've added it like this, shown in this picture under my other custom CSS (the others work fine though).

Anyone knows what I'm doing wrong here? Below's the CSS code!

My CSS: 

:root {
--color-text: navy;
--color-bg: papayawhip;
--color-bg-accent: #ecdcc0;
--size: clamp(10rem, 1rem + 40vmin, 30rem);
--gap: calc(var(--size) / 14);
--duration: 60s;
--scroll-start: 0;
--scroll-end: calc(-100% - var(--gap));
}

@media (prefers-color-scheme: dark) {
:root {
--color-text: papayawhip;
--color-bg: navy;
--color-bg-accent: #2626a0;
}
}

* {
box-sizing: border-box;
}

body {
display: grid;
align-content: center;
overflow: hidden;
gap: var(--gap);
width: 100%;
min-height: 100vh;
font-family: system-ui, sans-serif;
font-size: 1rem;
line-height: 1.5;
color: var(--color-text);
background-color: var(--color-bg);
}

.marquee {
display: flex;
overflow: hidden;
user-select: none;
gap: var(--gap);
mask-image: linear-gradient(
var(--mask-direction, to right),
hsl(0 0% 0% / 0),
hsl(0 0% 0% / 1) 20%,
hsl(0 0% 0% / 1) 80%,
hsl(0 0% 0% / 0)
);
}

.marquee__group {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: space-around;
gap: var(--gap);
min-width: 100%;
animation: scroll-x var(--duration) linear infinite;
}

@media (prefers-reduced-motion: reduce) {
.marquee__group {
animation-play-state: paused;
}
}

.marquee--vertical {
--mask-direction: to bottom;
}

.marquee--vertical,
.marquee--vertical .marquee__group {
flex-direction: column;
}

.marquee--vertical .marquee__group {
animation-name: scroll-y;
}

.marquee--reverse .marquee__group {
animation-direction: reverse;
animation-delay: -3s;
}

@keyframes scroll-x {
from {
transform: translateX(var(--scroll-start));
}
to {
transform: translateX(var(--scroll-end));
}
}

@keyframes scroll-y {
from {
transform: translateY(var(--scroll-start));
}
to {
transform: translateY(var(--scroll-end));
}
}

/* Element styles */
.marquee svg {
display: grid;
place-items: center;
width: var(--size);
fill: var(--color-text);
background: var(--color-bg-accent);
aspect-ratio: 16/9;
padding: calc(var(--size) / 10);
border-radius: 0.5rem;
}

.marquee--vertical svg {
aspect-ratio: 1;
width: calc(var(--size) / 1.5);
padding: calc(var(--size) / 6);
}

/* Parent wrapper */
.wrapper {
display: flex;
flex-direction: column;
gap: var(--gap);
margin: auto;
max-width: 100vw;
}

.wrapper--vertical {
flex-direction: row;
height: 100vh;
}

/* Toggle direction button */
.toggle {
--size: 3rem;
position: relative;
position: fixed;
top: 1rem;
left: 1rem;
width: var(--size);
height: var(--size);
font: inherit;
text-align: center;
cursor: pointer;
outline: none;
border: none;
border-radius: 50%;
color: inherit;
background-color: var(--color-bg-accent);
z-index: 1;
}

.toggle:focus-visible {
box-shadow: 0 0 0 2px var(--color-text);
}

.toggle span {
position: absolute;
display: inline-block;
top: 50%;
left: calc(100% + 0.4em);
width: fit-content;
white-space: nowrap;
transform: translateY(-50%);
animation: fade 400ms 4s ease-out forwards;
user-select: none;
}

.toggle svg {
--size: 1.5rem;
position: absolute;
top: 50%;
left: 50%;
width: var(--size);
height: var(--size);
fill: currentcolor;
transform: translate(-50%, -50%);
transition: transform 300ms cubic-bezier(0.25, 1, 0.5, 1);
}

.toggle--vertical svg {
transform: translate(-50%, -50%) rotate(-90deg);
}

@keyframes fade {
to {
opacity: 0;
visibility: hidden;
}
}

 

[EBOOST · Accepted solution]

Hi @SamiBaydani 

May I suggest you remove code like the screenshot below

[SamiBaydani]

This worked, thank you very much!