body {
    margin: 0; padding-top: 1px;
    font-family: Dyslexie, OpenDyslexic, 'Atkinson Hyperlegible', Verdana, Ubuntu, roboto, noto, Arial, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, -apple-system, BlinkMacSystemFont, Sans-Serif;
    font-size: 1em;
    line-height: 1.5em;
    color: var(--text);
    /* background gradient and fallback */
    background-color: var(--background-fallback);
    background: var(--background-gradient);
    padding-bottom: 2em;
    
}

/* This is the background texture, which has to be separate from the
background gradient for both to show. We use a pseudo-element to avoid
unnecessary div use- clean HTML is good! */
body::before {
    content: "";
    position: absolute;
    background-image: var(--pattern);
    pointer-events: none;
    z-index: 2; /* handles overlay with gradient */
    width: 100vw;
    padding-bottom: 2em;
    padding-top: 1em;
}

/* Ensures the background covers the screen entirely */
body::before, body {min-height: calc(100vh - 1px);}

main {
    position: relative; /* so z-index works to overlay over bg */
    max-width: var(--box-width);
    margin: auto auto;
    margin-top: 1em;
    padding: 1em;
    padding-bottom: 0;
    background: var(--main-box);
    z-index: 3;
    overflow-y: scroll;
    overflow-x: clip;
}

/* backgrounds */
.box {background: var(--overlay-color);}
.bg-pattern {background-image: var(--pattern);}

#pfp {
    padding: 0; 
    padding-top: 1em;
    padding-right: 1em;
    margin: 0 auto 0 auto; 
    display: block;
    max-width: 100%;
}

dl {
    text-align: center; 
    border-bottom: 2px solid var(--accent);
    border-top: 2px solid var(--accent);
    padding-bottom: 1em;
}

p ~ h2 {margin-top: 1.5em;}

.group {flex-direction: column;}

@media only screen and (min-width: 850px) {
    #pfp {padding: 1em 1em 0.5em 1em; margin-top: 0.3em;}
    dl {border-bottom: none; border-top: none; text-align: left;}
    main {max-height: calc(100vh - 5em); overflow-y: scroll;}
    body {overflow: clip;}
}

/* header tweaks */
h1, h2 {
    font-family: Dyslexie, OpenDyslexic, "HeaderFont", sans-serif;
    line-height: 1em;
}

h1 {
    font-size: 4em; 
    font-family: Dyslexie, OpenDyslexic, "NameFont", sans-serif;
    font-weight: bold;
    filter: brightness(var(--brightness-filter));
}

/*#name {margin-top: 150px;} /* Pass the floated image */

/* boxes should look nice */

.box {border: 2px solid var(--accent); min-height: max-content;}

.box, main {
    padding: 1em;
    border-radius: 10px;
}
/* exceptions for non-main boxes */
.box:not(main.box) {
    padding: 0 1em; 
    margin-bottom: 0.5em;
}

/* Flexbox container setup. */
.flex {
    display: flex; flex-wrap: wrap;
    padding-bottom: 0; margin-bottom: 1em;
}

/* Default to each element taking up half the space */
.flex :is(h1, .headline) {flex-basis: 50%;}

/* Allow h1 to grow so the spacing looks right; aim to be twice
as large as the text next to it. */
h1 {margin: 0.2em 0.2em 0em 0.2em; flex-grow: 2;}

/* Spacing of box headers and text beneath them */
h2 {margin-bottom: 0;}
h2 ~ p {margin-top: 0.5em;} /* Paragraphs directly after h2 elements */

/* Give class="right" to any text you'd like to right-align */
.right {text-align: right;}

/* Lists */
dt {font-weight: bold; margin-top: 1.5em;}
dt:not(dt:first-child) {margin-top: 0.5em;}
dd {margin: 0; margin-left: 1em; margin-bottom: 0.5em;}
#trivia {line-height: 1em;}

#trivia ~ p:first-of-type {margin-top: 1em;}

.meme {
    backdrop-filter: brightness(90%); 
    padding: 0.14em !important;
    margin: 1em auto;
    display: block;
}
img {max-width: 100%;}

/* Ditto for class="underline" and a bottom border */
.underline {border-bottom: 1px solid var(--accent);}

/* Make the horizontal rules prettier */
hr {border: 2px solid var(--accent);}

/* The custom socials list */
.flexlist {
    display: flex; flex-wrap: wrap;
    justify-content: center; 
    row-gap: 0.5em; /* space things out a bit if it wraps */
    column-gap: 0.25em; /* also space out side-by-side items */
    padding-left: 0;
}
.flexlist li {
    flex-basis: calc(20% - 1em); /* 1em is the total horizontal padding */
    flex-grow: 1; /* makes buttons fill space if wrapped */
    border: 1px solid var(--accent); 
    margin-left: 0; /* lists have default left margins */
    padding: 0.5em 0.5em;
    text-align: center;
    border-radius: 5px; /* round corners go bbrrrr */
}
/* Hide the social list bullets... accessibly! */
.flexlist li::marker {color: transparent;}
/* Hover effect on list items */
.flexlist li:hover {backdrop-filter: brightness(110%);}

/* The custom title font. Replace if you'd like. */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'HeaderFont';
    font-style: normal;
    font-weight: 400;
    src: local("Gluten Regular"),
    url('./resources/fonts/Gluten-Regular.ttf') format('truetype');
  }

/* The custom title font. Replace if you'd like. */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'NameFont';
    font-style: normal;
    font-weight: 400;
    src: local("Pecita"),
    url('./resources/fonts/Pecita.otf') format('opentype');
  }

  /* Remove box rounding to be nice to mobile */
  @media only screen and (max-width: 60ch) {
    main {border-radius: 0;}
}

body:after {
    display: block;
    content: "";
    width: 50vw;
    height: 50vw;
    /*border-radius: 50vw;*/
    aspect-ratio: cos(30deg);
    clip-path: polygon(-50% 50%,50% 100%,150% 50%,50% 0);
    z-index: 0;
    background: var(--background-circle);
    margin-top: -50vh;
    margin: -47vw auto 0 5vw;
    margin: -49vw auto 0 5vw;
}

/* Wrap code text */
code {
    max-width: 100%;
    white-space: pre-wrap; white-space: -moz-pre-wrap;
    overflow-wrap: break-word;
}

p, li, dd {text-transform: lowercase;}

#kinky-overview li {
    --spacing: 1em;
    margin-bottom: 0.5em;
    text-indent: -1em;
    margin-left: var(--spacing);
    padding-left: var(--spacing);
}
#kinky-overview {
    padding-left: 0em;
    max-width: 60ch;
    margin: 1em auto 0 auto;
    padding-bottom: 1.5em;
}
#kinky-overview li::marker {margin-left: 0;}

#trivia {
    max-width: 50%;
    overflow-wrap: break-word;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

@media only screen and (max-width: 850px) {
    #trivia {
        line-height: 1.25em;
        text-align: left;
        max-width: 100%;
        flex-direction: column;
    }
    #pfp {
        border-radius: 15%;
    }
}

@media only screen and (max-width: 685px) {
    #tagline {
        margin-top: 0;
        margin-left: 3em;
    }
}

#centers {text-align: left;} /* Sorry */

.group {
    display: flex;
    /*flex-wrap: wrap;*/
    margin-bottom: 0.1em;
    overflow:scroll;
    max-width: 100%;
}
.group #pfp {
    aspect-ratio: 1/1 !important; 
    flex-wrap: wrap;
    height: auto; width: auto;
    padding-left: 0;
}

@media only screen and (min-width: 900px) {
    .group {flex-direction: row;}
}