:root {
  --accent: #078fb1;
}

html {
  background-color: #0a1517;
  min-height: 100vh;
  font-family: sans-serif;
}

body {
  margin: 0;
}

@font-face {
  font-family: "AlfaSlabOne";
  font-weight: bold;
  font-style: normal;
  src: url("AlfaSlabOne-Regular.woff2") format("woff2");
}

header {
  box-sizing: border-box;
  padding: 1em;
  background-image: linear-gradient(to bottom, transparent 70%, #0a1517 100%),
  url("foto.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  min-height: 80vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

h1 {
  /*font-family: Bahnschrift, 'DIN Alternate', 'Franklin Gothic Medium', 'Nimbus Sans Narrow', sans-serif-condensed, sans-serif;*/
  font-family: AlfaSlabOne;
  font-size: 3.5em;
  font-weight: bold;
  text-transform: uppercase;
  /* padding-top: 1em; */
  text-align: center;
  text-align: pretty;
  color: var(--accent);
  /* Dit werkt op meeste browers, liever gebruik je text-shadow of SVG maar dit is voor het idee */
  -webkit-text-stroke: 1px #0a1517;
}

@media (max-width: 600px) {
  h1 {
    font-size: 2.5em;
   }
}

main {
  padding: 2.5em;
  font-size: 1em;
  color: white;
  max-width: 35em;
  margin: 0 auto;
}

h2 {
  font-size: 1.2em;
  margin-top: 2em;
  margin-bottom: 0;
  color: var(--accent);
  &:first-child {
    margin-top: 1em;
  }
}

p {
  margin-top: 1em;
  /* Is op oude browsers minder mooi */
  hyphens: auto;
  text-align: justify;
  text-wrap: pretty;
}

hr {
  border: none;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent 0%,
    rgba(128, 128, 128, 0.1) 10%,
    rgba(128, 128, 128, 0.6) 50%,
    rgba(128, 128, 128, 0.1) 90%,
    transparent 100%
  );
}

table {
  width: 100%;
  td {
    vertical-align: baseline;

    &:nth-child(1) {
      width: 0;
      white-space: nowrap;
    }
    &:nth-child(2) {
      padding-left: 1em;
      text-align: left;
    }
    &:nth-child(3) {
      white-space: nowrap;
      text-align: right;
      color: gray;
    }
  }

  tr:not(:last-child) td {
    border-bottom: 1px solid gray;
    padding-bottom: 1em;
  }

  border-spacing: 0em 1em;
}

table + h2 {
  margin-top: 1em;
}

/* Subscription form */
.embeddable-buttondown-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-sizing: border-box;
  /*max-width: 384px;*/
  padding: 16px;
  /*border: 1px solid #e4e4e7;*/
  border-radius: 6px;
  /*background: #fff;*/
  color: #fff;
  font: 1em system-ui, sans-serif;

}
.embeddable-buttondown-form label,
.embeddable-buttondown-form legend {
 font-weight: 500;
}
.embeddable-buttondown-form input[type="email"],
.embeddable-buttondown-form input[type="text"],
.embeddable-buttondown-form select {
  box-sizing: border-box;
  width: 100%;
  padding: 6px 8px;
  border: 1px solid #2e3739;
  border-radius: 8px;
  background: #172224;
  color: inherit;
  font: inherit;
}
.embeddable-buttondown-form fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}
.embeddable-buttondown-form fieldset label {
  display: block;
  font-weight: 400;
}
.embeddable-buttondown-form input[type="submit"] {
  padding: 8px 12px;
  border: 0;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  font: inherit;
  font-weight: 500;
  cursor: pointer;
}
.embeddable-buttondown-form p {
  margin: 0;
  font-size: 12px;
  text-align: center;
}
.embeddable-buttondown-form p a {
  color: #71717a;
}