:root {
  --first-color: #adbcdf;
  --second-color: #dfadbc;
  --third-color: #bcdfad;
  --fourth-color: #add5df;
  --fifth-color: #dfd0ad;
  --sixth-color: ;
  --seventh-color: ;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

header {
  width: 100%;
}

body {
  width: 100%;
  max-width: 100%;
  font-family: serif;
  color: #333;
  margin: 0;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.035) 0 2px,
      rgba(255, 255, 255, 0) 2px 18px
    ),
    repeating-linear-gradient(
      0deg,
      rgba(51, 58, 51, 0.02) 0 1px,
      rgba(51, 58, 51, 0) 1px 20px
    ),
    linear-gradient(180deg, #f5f3ee 0%, #efeae2 100%);
}

.bg-001,
.bg-002,
.bg-003,
.bg-004,
.bg-005 {
  background:
    radial-gradient(
      circle at 12% 18%,
      rgb(var(--bg-spot-1) / 0.9) 0,
      rgb(var(--bg-spot-1) / 0.72) 12%,
      transparent 30%
    ),
    radial-gradient(
      circle at 86% 14%,
      rgb(var(--bg-spot-2) / 0.82) 0,
      rgb(var(--bg-spot-2) / 0.58) 14%,
      transparent 32%
    ),
    radial-gradient(
      circle at 22% 74%,
      rgb(var(--bg-spot-3) / 0.72) 0,
      rgb(var(--bg-spot-3) / 0.48) 16%,
      transparent 34%
    ),
    radial-gradient(
      circle at 76% 72%,
      rgb(var(--bg-spot-4) / 0.58) 0,
      rgb(var(--bg-spot-4) / 0.36) 18%,
      transparent 36%
    ),
    linear-gradient(
      180deg,
      rgb(var(--bg-base-top) / 0.92) 0%,
      rgb(var(--bg-base-mid) / 0.96) 46%,
      rgb(var(--bg-base-bottom) / 0.98) 100%
    );
  position: relative;
  overflow: hidden;
}

.bg-001::before,
.bg-002::before,
.bg-003::before,
.bg-004::before,
.bg-005::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      115deg,
      rgba(255, 255, 255, 0.12) 0,
      rgba(255, 255, 255, 0.02) 22%,
      rgba(255, 255, 255, 0.08) 44%,
      rgba(255, 255, 255, 0.02) 66%,
      rgba(255, 255, 255, 0.1) 100%
    ),
    radial-gradient(
      circle at 50% 38%,
      rgba(255, 255, 255, 0.1),
      transparent 42%
    );
  pointer-events: none;
  opacity: 0.9;
}

.bg-001::after,
.bg-002::after,
.bg-003::after,
.bg-004::after,
.bg-005::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.04) 0 2px,
      rgba(255, 255, 255, 0) 2px 16px
    ),
    repeating-linear-gradient(
      0deg,
      rgb(var(--bg-ink) / 0.025) 0 1px,
      rgb(var(--bg-ink) / 0) 1px 18px
    ),
    radial-gradient(
      circle at 20% 20%,
      rgba(255, 255, 255, 0.18) 0 1.2px,
      transparent 1.3px 100%
    ),
    radial-gradient(
      circle at 72% 34%,
      rgb(var(--bg-ink) / 0.12) 0 1.15px,
      transparent 1.25px 100%
    ),
    radial-gradient(
      circle at 38% 78%,
      rgba(255, 255, 255, 0.14) 0 1px,
      transparent 1.1px 100%
    ),
    radial-gradient(
      circle at 84% 68%,
      rgb(var(--bg-ink) / 0.1) 0 1.1px,
      transparent 1.2px 100%
    ),
    radial-gradient(
      circle at 14% 64%,
      rgba(255, 255, 255, 0.12) 0 1.1px,
      transparent 1.2px 100%
    ),
    radial-gradient(
      circle at 58% 16%,
      rgb(var(--bg-ink) / 0.09) 0 1px,
      transparent 1.1px 100%
    );
  background-size:
    100% 100%,
    100% 100%,
    12px 12px,
    16px 16px,
    11px 11px,
    15px 15px,
    13px 13px,
    17px 17px;
  background-position:
    0 0,
    0 0,
    0 0,
    7px 11px,
    3px 5px,
    11px 2px,
    5px 9px,
    13px 6px;
  mix-blend-mode: multiply;
  opacity: 0.63;
  pointer-events: none;
}

.bg-001 {
  --bg-spot-1: 198 208 230;
  --bg-spot-2: 186 198 223;
  --bg-spot-3: 176 189 214;
  --bg-spot-4: 166 179 205;
  --bg-base-top: 205 215 234;
  --bg-base-mid: 190 202 223;
  --bg-base-bottom: 178 192 214;
  --bg-ink: 58 74 102;
}

.bg-002 {
  --bg-spot-1: 224 194 204;
  --bg-spot-2: 218 185 197;
  --bg-spot-3: 208 174 187;
  --bg-spot-4: 196 163 176;
  --bg-base-top: 229 200 209;
  --bg-base-mid: 214 184 196;
  --bg-base-bottom: 202 171 184;
  --bg-ink: 92 60 73;
}

.bg-003 {
  --bg-spot-1: 203 224 191;
  --bg-spot-2: 193 216 180;
  --bg-spot-3: 181 205 169;
  --bg-spot-4: 169 193 156;
  --bg-base-top: 209 227 197;
  --bg-base-mid: 193 214 183;
  --bg-base-bottom: 179 201 169;
  --bg-ink: 60 84 52;
}

.bg-004 {
  --bg-spot-1: 193 221 229;
  --bg-spot-2: 182 213 223;
  --bg-spot-3: 171 203 214;
  --bg-spot-4: 159 191 203;
  --bg-base-top: 199 225 232;
  --bg-base-mid: 183 212 222;
  --bg-base-bottom: 169 200 212;
  --bg-ink: 51 81 92;
}

.bg-005 {
  --bg-spot-1: 228 216 187;
  --bg-spot-2: 221 207 176;
  --bg-spot-3: 210 196 164;
  --bg-spot-4: 199 184 151;
  --bg-base-top: 232 220 192;
  --bg-base-mid: 218 205 176;
  --bg-base-bottom: 205 192 164;
  --bg-ink: 98 82 55;
}

@media all and (max-width: 510px) {
  html,
  body {
    max-width: 100vw;
    overflow-x: clip;
  }
}

ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

a {
  text-decoration: none;
  color: #333;
}

h1,
h2,
h3,
h4 {
  font-family: "Aladin";
  font-weight: 300;
  line-height: 1.2;
  margin: 10px 0;
}

p {
  margin: 10px 0;
  font-size: 20px;
}

.lorem {
  color: white;
  background-color: red;
}

.element-text {
  padding: 20px;
  font-size: 18px;
  color: #333;
}

img {
  width: 100%;
}

.element-elemental-img img {
  width: 35%;
}