body {
  background-attachment: fixed;
  margin: 100px auto;

  background-image: var(--bg-img);
  background-color: var(--bg-color);
  background-size: var(--bg-size);

  font-family: var(--font), 'Courier New', Courier, monospace;
}

a {
  color: var(--main-color);
}

::selection, .highlight {
  background-color: var(--accent-color);
  color: var(--main-color);
}

.logo {
  background-image: var(--logo-img), var(--logo-texture);
  background-size: contain;
  background-repeat: no-repeat, repeat;
  background-blend-mode: overlay;

  mask-image: var(--logo-img);
  mask-size: contain;
  mask-repeat: no-repeat;

  position: absolute;
  top: 5%;
  left: 3%;

  height: 200px;
  width: 20%;
}

.main {
  display: flex;
  flex-flow: column nowrap;
  row-gap: 50px;

  position: relative;
  z-index: 3;
}

.row {
  display: grid; 
  grid-template-columns: 1fr 2fr 1fr;
}

.side {
  display: grid;
  z-index: 1;
}

.side img, .side div {
  position: relative;
  width: 100%;
  
  filter: drop-shadow(5px 8px 5px #0006);
}

.left.side {
  justify-items: end;
}

article {
  z-index: 2;

  background-color: var(--section-color);
  background-image: var(--section-texture);
  background-size: var(--section-texture-size);

  -webkit-mask-image: var(--section-mask);
  mask-image: var(--section-mask);
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
}

.content {
  overflow-y: auto;
  max-height: 800px;
  padding: 30px;
}

.footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background-repeat: repeat-x;
  z-index: 5;

  background-image: var(--footer-img);
  height: var(--footer-size);
}