@font-face {
    font-family: "Gelda";
    src: url("fonts/too-broke-to-afford-full-font.woff2") format(woff);
    font-weight: 600;
}
.colours {
    color: #f4cdd6;
}
.glow {
    text-shadow: 0 0 16px #f7a6be;

}

.gelda-pf {
    font-family: "Gelda";
    font-optical-sizing: auto;
}
p, summary, details {
    font-family: "Times New Roman", serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
    font-variation-settings:
        "wdth" 100;
}
.header {
    display: block; 
    margin-left: auto; 
    margin-right: auto; 
    width: 100%; 
    max-width: 800px;
}
.vert-align {
    display: flex;
    align-items: center;
    justify-content: center;
}

.i-swear-to-god {
    padding-bottom: 10px;
    padding-left: 10px;
    padding-right: 10px;
    display: inline-block;
    white-space: nowrap;
    margin-bottom: 20px;
    margin-top: 5px;

}

.hor-align {
    display: flex;
    align-items: center;
    justify-content: left;
}
.image {
    display: flex;
    align-items: center;
}

h1 {
    text-align: left;
    font-family: 'Times New Roman';
}
a:link, a:hover, a:active, a:visited {
    color: #eba0ac;
}

* {
    box-sizing: border-box;
}


body {
    --space: 0.5rem;
    background-color: #0d0103;
    gap: var(--space);

}

.marquee {
    --duration: 25s;
    --gap: var(--space);

    display: flex;
    overflow: hidden;
    user-select: none;
    gap: var(--gap);

}

.marquee__group {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: var(--gap);
    min-width: 100%;
    animation: scroll var(--duration) linear infinite;
}



.marquee--reverse .marquee__group {
    animation-direction: reverse;
    animation-delay: calc(var(--duration) / -2);
}

@keyframes scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(calc(-100% - var(--gap)));
    }
}
summary {
  background-color: #38040e;
  color: #f7a6be;
  padding: 18px;
  width: 100%;
  text-align: left;
  font-size: 15px;
  border-radius: 7px;

}

.dumbshark {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.image-flexbox {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: center;
    gap: 16px;
}
.imagelogo {
    width: 30%; 
    max-width: 150px; 
    height: auto;
    max-height: auto;
}
.site-list {
    list-style-type: none
}
.imageglow {
    animation-name: glowing;
    animation-duration: 6s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: linear;
    filter: drop-shadow(0 0 0.75rem);
}
.imagegrey {
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
      -o-filter: grayscale(100%);
     -ms-filter: grayscale(100%);
         filter: grayscale(100%); 
}

@keyframes glowing {
    0% {color: #f5c2e7;}
    10% {color: #f38ba8;}
    20% {color: #fab387}
    30% {color: #f9e2af;}
    40% {color: #a6e3a1;}
    50% {color: #89dceb;}
    60% {color: #74c7ec;}
    70% {color: #89b4fa;}
    80% {color: #b4befe;}
    90% {color: #f5e0dc;}
    100% {color: #f2cdcd;}
  }