:root {
  --color-cyan: #05f9ff;
  --color-graphite: #1e222a;
  --color-charcoal: #050506;
  --color-yellow: #d9ff40;
  --color-gray: #1e222a;
  --color-gray-l: #bbbbbb;
  --dark-blue: hsl(213, 92%, 15%);
  --logo-red: hsla(11, 92%, 43%, 0.884);
  --white-sand: 		hsl(40, 7%, 92%);
  --black: 	hsl(234, 14%, 14%);
  --gold-sp-color: hsl(18, 22%, 61%);

  --font-monserrat: "Montserrat", sans-serif;
  --font-oswald: "Oswald", sans-serif;
}

body {
  display: block;
  position: relative;
  margin: 0;
  padding: 80px 0;
  overflow-x: clip;
  background-color: var(--dark-blue);
  font-family: var(--font-monserrat);
  font-size: 24px;
  font-weight: 500;
}

body::before,
body::after {
  content: "";
  display: block;
  position: absolute;
  width: 47%;
  max-height: 100%;
  background-size: 100%;
  background-position: center center;
  background-repeat: no-repeat;
  pointer-events: none;
}

body::before {
  aspect-ratio: 1813 / 1748;
  background-image: url("https://bato-web-agency.github.io/bato-shared/img/shape-1.png");
  left: 0;
  bottom: 0;
}

body::after {
  aspect-ratio: 1818 / 1682;
  background-image: url("https://bato-web-agency.github.io/bato-shared/img/shape-2.png");
  right: 0;
  top: 0;
}