@import url("https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap");

body, .strapline {
  font-family: "Work Sans", sans-serif;
  background: linear-gradient(225deg, #16cd9f, #e4a54c, #e42da5, #b815e9);
  background-size: 800% 800%;

  -webkit-animation: bodyGrad 15s ease infinite;
  -moz-animation: bodyGrad 15s ease infinite;
  animation: bodyGrad 15s ease infinite;
}

@-webkit-keyframes bodyGrad {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@-moz-keyframes bodyGrad {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@keyframes bodyGrad {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.cover-container {
  background-color: #212529;
}

.card::after {
  content: "";
  border-left: 2px solid #40c057;
  position: absolute;
  height: 0;
  left: 0;
  top: 0;
}

header .logo a {
    text-decoration: none;
    color: white;
  }
  header .logo a.logo-image {
    position: relative;
    width: 200px;
    height: 75px;
    max-width: 100%;
    display: inline-block;
  }
  header .logo a.logo-image:hover .image-hover {
    opacity: 1;
  }
  header .logo a.logo-image img {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    object-fit: contain;
  }
  header .logo a.logo-image img.image-hover {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    object-fit: contain;
    opacity: 0;
    transition: opacity 0.2s;
  }
  
  main a, header a:not(.logo-image) {
    color: white;
    background-image: linear-gradient(#f6c09e 100%, #f6c09e 0);
    background-position: 50% 100%, bottom;
    background-repeat: no-repeat;
    background-size: 100% 0;
    border-bottom: 0.2rem inset #f1823d;
    padding: 0.2rem 0.3rem;
    text-decoration: none;
    transform-origin: bottom;
    transition: background-size 0.4s cubic-bezier(0.19, 1, 0.5, 1), border-color 0.2s cubic-bezier(0.19, 1, 0.5, 1) 0.05s, color 0.2s cubic-bezier(0.19, 1, 0.5, 1) 0.05s;
  }
  main a:hover, header a:not(.logo-image):hover {
    background-size: 100% 100%;
    border-bottom-color: #333;
    color: black;
  }

  .strapline {
    color: #212529;
  }