:root {
  --max-width: 1200px;
  --side-padding: 80px;
  --font-large: 22px;
  --line-height-large: 36px;
  --font-em: 28px;
  --dark-color-weak: hsl(0 0% 25%);
}

@font-face { font-family: 'Inter'; src: url("fonts/Inter_28pt-Regular.ttf") format("opentype"); font-style: normal; font-weight: normal; }
@font-face { font-family: 'Inter'; src: url("fonts/Inter_28pt-ExtraBold.ttf") format("opentype"); font-style: normal; font-weight: bold; }
@font-face { font-family: 'Montserrat'; src: url("fonts/Montserrat-ExtraBold.ttf") format("opentype"); font-style: normal; font-weight: bold; }

*, *:before, *:after { margin: 0; padding: 0; box-sizing: border-box; }
a { text-decoration: none; color: hsl(240 90% 40% / 1); }
.dark-theme a { color: hsl(246 77% 56% / 1); }
a:hover { text-decoration: underline; }
.hide { display: none !important; }
.invert { padding: 0 7px; font-weight: bold; color: hsl(0 0% 100%); background: hsl(0 0% 0%); border: 10px solid hsl(0 0% 0%); }
.weak { color: hsl(0 0% 86%); }
.dark-theme .weak { color: var(--dark-color-weak); }
.default-font-style { font-family: 'Inter', 'helvetica', 'arial', 'sans-serif'; }
.font-super-header { font-family: 'Montserrat', 'helvetica', 'arial', 'sans-serif'; font-size: 60px; line-height: 70px; font-weight: bold; text-transform: uppercase; }
.font-large-points { font-size: var(--font-large); line-height: var(--line-height-large); }
.font-large-points em { font-style: normal; font-weight: bold; font-size: var(--font-em); }
.dark-theme { background: hsl(0 0% 0%); color: hsl(0 0% 100%); }
#bg-pattern { position: fixed; left: 0; top: 0; width: 100%; height: 100%; background-image: url("patterns/grid-noise.png"); background-repeat: repeat; background-size: auto auto; filter: brightness(0.75); }

.content-body { max-width: var(--max-width); margin: 0 auto; padding: 54px 0 80px; }
.main-header { position: relative; margin: 0 0 42px; padding: 0 var(--side-padding); }

.main-header .weak { padding: 0 8px; color: hsl(0 0% 100%); border: 11px solid hsl(0 0% 100%); border-radius: 8px; }
.main-points { padding: 0 var(--side-padding); }
.main-points ol { display: grid; grid-template-columns: 1fr 1fr; }
.main-points ol li:nth-child(even) { transform: rotate(0.8deg); }
.main-points ol li:nth-child(odd)  { transform: rotate(-0.8deg); }
.main-points li { list-style-position: inside; list-style-type: none; margin: 16px 0; }
.main-points li::marker { color: hsl(0 0% 80%); }
.main-points li a { font-size: var(--font-em); font-weight: bold; }
.dark-theme li a { color: inherit; text-decoration: underline; }

.point-prefix { font-size: 16px; }
.point-prefix:after { content: ".."; }
.point-prefix .weak { color: inherit; position: relative; top: -6px; margin: 0 3px; border-bottom: 4px solid hsl(0 0% 93%); }

.point-content { padding: 12px 16px; border: 1px solid hsl(0 0% 80%); }
.dark-theme .point-content { color: hsl(0 0% 0%); background: hsl(0 0% 100%); border: 8px solid hsl(0 0% 0%); border-radius: 8px; outline: 2px solid hsl(0 0% 100%); }

@media (max-width: 800px) {
  :root { --side-padding: 32px; }
  .font-super-header { font-family: 'Montserrat', 'helvetica', 'arial', 'sans-serif'; font-size: 40px; line-height: 50px; }
  .main-header { margin-bottom: 24px; }
  .main-header .weak { padding: 0; border: none; }
  .main-points ol { grid-template-columns: 1fr; }
  .main-points li { margin: 20px 0; }
  .main-points ol li:nth-child(even) { transform: rotate(0.4deg); }
  .main-points ol li:nth-child(odd)  { transform: rotate(-0.4deg); }
}