html,
body {
  background-color: #111;
}

:root {
  --title-font-size: 96px;
  --title-height: 100px;
  --tagline-font-size: 32px;
  --image-height: 100px;
}

.brand {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: calc(50vh - var(--title-height));
  font-family: Jost, sans-serif;
  font-size: var(--title-font-size);
  font-weight: 500;
  height: var(--title-height);
  color: lightslategray;
}

.tagline {
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
  font-size: var(--tagline-font-size);
  color: salmon;
}

.brand img {
  height: var(--image-height);
  animation-duration: 10s;
  animation-name: rock;
  animation-iteration-count: infinite;
}

@media only screen and (max-width: 750px) {
  :root {
    --title-font-size: 72px;
    --title-height: 80px;
    --tagline-font-size: 24px;
    --image-height: 80px;
  }
}

@media only screen and (max-width: 600px) {
  :root {
    --title-font-size: 36px;
    --title-height: 60px;
    --tagline-font-size: 18px;
    --image-height: 40px;
  }
}

@media only screen and (max-width: 300px) {
  :root {
    --title-font-size: 24px;
    --title-height: 40px;
    --tagline-font-size: 14px;
    --image-height: 32px;
  }
}

@keyframes rock {
  0% {
    transform: none;
  }
  33% {
    transform: rotate3d(1, -0.5, 0.1, 30deg);
  }
  66% {
    transform: rotate3d(0, 0, 1, -6deg);
  }
  100% {
    transform: none;
  }
}