html {
  scroll-behavior: smooth;
  color: black;
  background-color: white;

  /*colors*/
  --accent-red-color: #5B0000;
  --contrast-color: black;

  /*modifiers*/
  .gradient-border {
    border-image: linear-gradient(to bottom, var(--contrast-color), var(--accent-red-color)) 1;
    border-width: 2px;
    border-style: solid;
  }

  .border-bottom {
    border-bottom-color: var(--accent-red-color);
    border-bottom-width: min(calc(100vw / 160), 5px);
    border-bottom-style: solid;
  }

  .gradient-text {
    background: linear-gradient(to bottom, var(--contrast-color), var(--accent-red-color));
    background-clip: text;
    color: transparent;
  }

  p {
    margin: 0;
    font-family: Antonio, serif;
    font-weight: 100;
    font-size: 32px;
    text-align: justify;

    @media (max-width: 430px) {
      font-size: 20px;
    }
  }

  a {
    text-decoration: none;
  }

  .read-more-button {
    padding: 10px 20px;
    font-family: Antonio, serif;
    font-size: min(4vw, 26px);
    font-weight: 100;
    color: white;
    background: var(--accent-red-color);
    border: none;
  }

  .keyword-list {
    position: absolute;
    bottom: 0;
    right: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--contrast-color);
    text-transform: uppercase;
    font-family: 'Antonio', sans-serif;
    font-weight: 100;
    font-size: min(4vw, 34px);
    text-align: right;
    line-height: 1.7;

    li:not(:last-child) {
      border-bottom: 1px solid var(--accent-red-color);
    }
  }

  .section-title {
    text-transform: uppercase;

    h2 {
      position: relative;
      margin-top: max(-5vw, -80px);
      font-family: "Patua One", serif;
      font-weight: 100;
      font-size: min(4vw, 30px);
    }

    h3 {
      margin: 0;
      font-family: Antonio, sans-serif;
      font-weight: bold;
      font-size: min(12vw, 125px);
      background: linear-gradient(to bottom, var(--accent-red-color) 40%, transparent 70%);
      background-clip: text;
      color: transparent;
      opacity: 60%;
    }
  }

  /*body*/
  body {
    /*max-width: 1440px;*/
    margin: 0 auto;

    main {
      max-width: 1200px;
      margin: 0 auto;

      @media (max-width: 430px) {
        padding: 0;
      }

      /*headers*/
      h1 {
        margin: 0;
        font-family: "Alfa Slab One", serif;
        font-weight: 100;
        font-size: 40px;
        color: black;
      }

      h4 {
        margin: 0;
        font-family: "Alfa Slab One", serif;
        font-weight: 100;
        font-size: min(6vw, 26px);
        color: black;
      }
    }
  }
}