.module > .background {
    /* This should be renamed to something besides .background in the future */
    display: flex;
    background-color: #00471d;
    height: 50vh;
    max-height: 500px;
    min-height: 350px;
    align-content: center;
    justify-content: center;
    flex-direction: column;
    flex-wrap: wrap;
/*    background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.5)), url(/cache/?uri=https://cloudapicdn.xyz/preview/1744070314079_52953642472_888c1ffe8b_o.jpg/?px=2048); */
    /* background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.5)), url(/assets/kyra_twt_banner_smaller.jpg); */
    background-position: center middle;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    border-radius: 5px;
}

.module > .background > .header {
    /* I'm specificing exactly which header to make sure i dont run into competiting elements anymore. It got out of hand a few projects back 
    This isnt strictly necessary but if i'm making this one a model template of what to do in the future i'd like to do it right.
    */
  background-color: var(--background-dark-primary);
  border-radius: 15px;
  padding: 5px;
}

.module > .background > .header > .title {
  padding: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-family: "Source Code Pro";
  word-spacing: -5px;
  
}

.module > .image-credit {
  background-color: var(--background-dark-primary);
  border-radius: 5px;
  padding: 5px;
  color: white;
  font-family: "Outfit";
}

.module > .image-credit a {
  color: white;
  text-decoration: underline;
}

.module > .image-credit a:hover{
  text-decoration: none;
}