#banner {
  display: flex;
  align-items: center;
  justify-content: center;
}

#banner img {
  width: 800px;
  max-width: 100%;
  left: 0;
  top: 0;
}

:root {
	color-scheme: light dark;

	--color-body-background: #edffed;
	--color-banner-background: #5bed55;
	--color-menu-background: #a5ffa1;
	--color-content-background: var(--color-level1);
	--color-footer-background: var(--color-body-background);
	--color-menu-text: black;
	--color-content-text: black;
	--color-footer-text: black;
	--color-hamburger: black;
	--color-link: black;

	--swiper-theme-color: #e21110 !important;

	--color-level1: white;
	--color-level2: #efefef;
	--color-level3: #dfdfdf;
	--color-level4: #cfcfcf;

	--border: 1px solid rgba(0, 0, 0, 0.3);
	--border-shadow: 1px 0px 20px 1px rgba(0, 0, 0, 0.15);
	--divider: 1px solid rgba(0, 0, 0, 0.2);
	--border-radius: 20px;
}

@media (prefers-color-scheme: dark) {
	:root {
    --color-body-background: #edffed;
    --color-banner-background: #5bed55;
    --color-menu-background: #a5ffa1;
    --color-content-background: var(--color-level1);
    --color-footer-background: var(--color-body-background);
    --color-menu-text: black;
    --color-content-text: black;
    --color-footer-text: black;
    --color-hamburger: black;
    --color-link: black;
  
    --swiper-theme-color: #e21110 !important;
  
    --color-level1: white;
    --color-level2: #efefef;
    --color-level3: #dfdfdf;
    --color-level4: #cfcfcf;
  
    --border: 1px solid rgba(0, 0, 0, 0.3);
    --border-shadow: 1px 0px 20px 1px rgba(0, 0, 0, 0.15);
    --divider: 1px solid rgba(0, 0, 0, 0.2);
  }
}