html {
  --dark-grey: #161f1d;
  --light-grey: #8f9097;
  --orange: #fa8145;
  --light-orange: #f19a60;
  --light-brown: #a38673;
  --light-brown-2: #927b66;
  --dark-brown: #42383a;
  --brown: #6d574e;
  --off-white: #e4e4e4;
  --column-width-main: 100%;
  --column-width-secondary: 100%;
  --column-width-tertiary: 2em;
  --background: #333;
  --highlight-colour: var(--light-brown);
  --accent-colour: var(--orange);
  --secondary-colour: var(--light-orange);
}

body {
  background: var(--background);
  color: var(--off-white);
  font: 400 14px/1.4 'Source Code Pro',monospace;
  margin: 0 auto;
  max-width: 48em;
}

h1, h2, h3, h4 {
  color: var(--off-white);
  font-family: 'Lora', serif;
  font-weight: 500;
  margin-bottom: .1rem;
}

header {
  display: flex;
  flex-direction: column;
  gap: 1em;
  width: 100%;
}

h1 {
  color: var(--off-white);
  flex: 1 1 60%;
  font-size: 4rem;
  font-style: italic;
  letter-spacing: .2rem;
  line-height: 3rem;
  margin-bottom: .25rem;
  text-align: right;
}

h2 {
  font-size: 2rem;
}

h3 {
  color: var(--off-white);
  font-size: 1.2rem;
}

.subtitle {
  align-self: flex-end;
  color: var(--secondary-colour);
  flex: 1 1 40%;
  font-size: 1.3em;
  letter-spacing: 0.4rem;
  line-height: 1.4rem;
  padding-inline-start: 0;
  text-align: left;
}

a {
  color: var(--secondary-colour);
}

main {
  padding: 0;
}

.main {
  border: 1px solid var(--light-grey);
  margin: 3em 0.5em 1em 1em;
  padding: 1em 1em 4em;
  position: relative;
}

.main:before {
  border: 1px solid var(--dark-grey);
  content: '';
  display: block;
  height: calc(100% - 4em);
  left: -1em;
  padding: 2em;
  position: absolute;
  top: -1em;
  width: calc(100% - 4em);
  z-index: -1;
}

section:before {
  background: linear-gradient(to left,
      var(--background) 10%,
      var(--orange) 80%,
      var(--background) 100%);
  content: '';
  display: block;
  height: 1px;
  width: 50%;
  max-width: 1000px;
  z-index: -1;
  transform: rotate(5deg) translate(50%, 19px);
}

.subsection {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-inline-start: var(--column-width-tertiary);
  max-width: var(--column-width-main);
}

.intro {
  max-width: var(--column-width-main);
}

.desc {
  flex: 1 1 var(--column-width-main);
}

.subsection .desc p {
  margin-block-start: 0;
}

.subsection h3:before {
  color: var(--light-orange);
  content: '//';
  display: inline-block;
  font-size: 2rem;
  line-height: 1em;
  margin-inline-start: -2.4rem;
  padding-inline-end: .25rem;
}

.subsection .image {
  flex: 1 0 var(--column-width-secondary);
  align-self: stretch;
}

.image-placeholder {
  background: var(--light-grey);
  background-repeat: no-repeat;
  border-radius: 8px;
  display: block;
  height: 10rem;
  min-height: 5rem;
  width: 100%;
}

.image-placeholder.productivity {
  background-image: url(images/1x/productivity.png);
}
.image-placeholder.permissions {
  background-image: url(images/1x/permissions.png);
}
.image-placeholder.interstitials {
  background-image: url(images/1x/interstitials.png);
}


footer {
  text-align: right;
  margin: 2em 0 ;
}

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

.inline-list li {
  display: inline-flex;
  margin: 0;
  padding-right: 4px;
}

.inline-list li:after {
  content: '·';
  display: inline-flex;
  padding-left: 8px;
}

.inline-list li:last-child:after {
  display: none;
}


@media (min-width: 32em) {
  html {
    --column-width-main: 75%;
    --column-width-secondary: 100%;
    --column-width-tertiary: 15%;
  }
  
  .main {
    /*margin-block-start: 0;*/
    padding: 0 2em;
    margin: 4em 0 2em 2em;
    padding: 2em 2em 4em;
  }

  .main:before {
    left: -2em;
    top: -2em;
  }

  header {
    flex-direction: column;
    width: 100%;
  }

  .subtitle {
    padding-inline-start: 16px;
  }

  .subsection {
    margin-inline-start: var(--column-width-tertiary);
  }

  section:before {
    display: block;
    transform: rotate(8deg) translate(1.5em, 19px);
    width: 100%;
  }
}

@media (min-width: 60em) {
  section:before {
    width: 99vw;
  }

  section:nth-child(1):before {
    transform: rotate(13deg) translate(-15%, 90px);
  }

  section:nth-child(2):before {
    transform: rotate(-8deg) translate(-15%, -30px);
  }

  section:nth-child(3):before {
    transform: rotate(17deg) translate(-15%, 120px);
  }
}

@media (min-resolution:120dpi) {
  .image-placeholder {
    background-size: 440px;
  }

  .image-placeholder.productivity {
    background-image: url(images/2x/productivity.png);
  }
  .image-placeholder.permissions {
    background-image: url(images/2x/permissions.png);
  }
  .image-placeholder.interstitials {
    background-image: url(images/2x/interstitials.png);
  }
}