:root {
  --blue: #1e90ff;
  --black: #1a1a1a;
  --white: #ffffff;
  --grid-line-colour: #1f1f1f;

  --container-width: 1136px;
  --gutter-width: calc((100vw - var(--container-width)) / 2);
  --gutter-width-negative: calc(var(--gutter-width) * -1);

  @media screen and (width < 1200px) {
    --container-width: 928px;
  }

  @media screen and (width < 992px) {
    --container-width: 704px;
  }

  @media screen and (width < 768px) {
    --container-width: calc(100vw - 64px);
  }

  @media screen and (width < 480px) {
    --container-width: calc(100vw - 40px);
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
}

html {
  font-family: "Lora", serif;
}

body {
  -webkit-font-smoothing: antialiased;
  background-color: var(--black);
  color: var(--white);
  height: 100lvh;
}

svg {
  display: block;
  max-width: 100%;
}

.container {
  height: 100%;
  display: grid;
  grid-template-rows: 100px repeat(4, 1fr) 100px;
  align-items: end;
  border-left: 1px solid var(--grid-line-colour);
  border-right: 1px solid var(--grid-line-colour);
  max-width: var(--container-width);
  margin: 0 auto;
}

#logo,
#headline,
#connect {
  border-bottom: 1px solid var(--grid-line-colour);
  width: 100vw;
  margin-left: var(--gutter-width-negative);
  padding-left: var(--gutter-width);
}

#headline,
#connect {
  border-top: 1px solid var(--grid-line-colour);
}

#logo {
  text-box: trim-both cap alphabetic;

  svg {
    fill: var(--blue);
    display: inline-block;
    margin-right: 20px;

    @media screen and (width < 768px) {
      height: 42px;
      margin-right: 4px;
    }
  }

  span {
    font-size: 40px;
    display: inline-block;
    text-box: trim-both cap alphabetic;

    @media screen and (width < 768px) {
      font-size: 28px;
    }
  }
}

#headline {
  grid-row-start: 3;
  font-size: 40px;
  text-box: trim-both cap alphabetic;
  height: 100%;
  align-content: end;

  @media screen and (width < 768px) {
    font-size: 24px;
    line-height: 38px;
  }

  #highlight {
    position: relative;
    display: inline-block;

    svg {
      position: absolute;

      @media screen and (width < 768px) {
        bottom: -10px;
      }
    }
  }
}

#connect {
  grid-row-start: 5;
  text-box: trim-both cap alphabetic;
  height: 100%;
  align-content: end;
  font-size: 24px;

  @media screen and (width < 768px) {
    font-size: 18px;
  }

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