/* Nullify margins, paddings */
body, h3, p {
    margin: 0;
}

/* Set rem font size */
html {
    font-size: 24px;
}

/* dear fucking lord */
body {
    font-family: 'Comic Sans MS', 'Chalkboard SE', 'Open Sans', sans-serif;
    font-weight: 400;
    transition: all 5s;
}


#background {
    position: fixed;
    width: 100%;
    height: 100%;
    /* lord this is awful */
    /* background: url(/Estradiol.svg.png); */
    background-size: 300px 250px;
    z-index: -999;
}

.container {
    padding: 50px;
    overflow: hidden;
}

header {
    margin: 0 -999px;
    margin-bottom: 50px;
    padding: 50px 0;
    transform: rotate(3deg);
    background-color: #ffb9ec;
    text-align: center;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

header h1, header h2 {
    text-shadow: 2px 2px 2px #000;
    color: #b04eb1;
}

header h1 {
    font-weight: 700;
    font-size: 3rem;
    margin: 0;
    font-style: italic;
}

header h2 {
    font-size: 1rem;
    margin: 0;
    font-weight: 600;
    font-style: italic;
    display: inline-block;
    text-transform: uppercase;
}

section {
    margin-bottom: 25px;
    /* A E S T H E T I C */
    text-transform: lowercase;
}

section h3 {
    margin-bottom: 5px;
}

/* Dark theme */
@media (prefers-color-scheme: dark) {
    body {
        background-color: #000;
        color: #FFF;
    }
    
    #background {
        filter: invert(100%) brightness(0.2);
    }
    
    a {
        color: #ffc0cb;
    }
    
    a:hover {
        /* add color */
    }
}

/* Mobile changes */
@media (max-width : 768px) {
    html, body {
        font-size: 16px;
    }
}

/* GDPR */
.cc-window {
    color: black;
    padding: 20px;
    font-family: "Open Sans", sans-serif;
}

.cc-compliance {
    margin-top: 15px;
}

.cc-banner .cc-message {
    width: auto;
}

.cc-link,
.cc-link:visited {
    color: red;
}

.cc-btn {
    background: #0000ff;
    color: red;
    padding: 5px;
}

.cc-btn:hover {
    background: #99007c;
    -webkit-animation: none;
    -moz-animation: none;
    animation: none;
}

.cc-invisible {
    transition: all 3s ease-in-out;
    transform: translateY(-500px);
}

/* gay */
:root {
    --h: 96px;
    --container: 768px;
    --g-red: #d04b36;
    --g-orange: #e36511;
    --g-yellow: #ffba00;
    --g-green: #00b180;
    --g-blue: #147aab;
    --g-indigo: #675997;
    
    --t-blue: #4fa5c2;
    --t-pink: #f587ac;
    --t-white: #f9fbfc;
    
    --b-pink: #c1357e;
    --b-purple: #675997;
    --b-blue: #0655a9;
    
    --p-magenta: #fa5e5b;
    --p-yellow: #ffba00;
    --p-blue: #4fa5c2;
    
    --a-black: #222222;
    --a-grey: #a2a2a2;
    --a-white: #f9fbfc;
    --a-purple: #a148a2;
    
    --nb-black: #222222;
    --nb-yellow: #f7e45a;
    --nb-white: #f9fbfc;
    --nb-purple: #675997;
}

.gay {
    background-image: linear-gradient(
    var(--g-red) 0%,
    var(--g-red) 16.6666%,
    var(--g-orange) 16.6666%,
    var(--g-orange) 33.333%,
    var(--g-yellow) 33.333%,
    var(--g-yellow) 50%,
    var(--g-green) 50%,
    var(--g-green) 66.6666%,
    var(--g-blue) 66.6666%,
    var(--g-blue) 83.3333%,
    var(--g-indigo) 83.3333%,
    var(--g-indigo) 100%
    );
}

.trans {
    background-image: linear-gradient(
    var(--t-blue) 0%,
    var(--t-blue) 20%,
    var(--t-pink) 20%,
    var(--t-pink) 40%,
    var(--t-white) 40%,
    var(--t-white) 60%,
    var(--t-pink) 60%,
    var(--t-pink) 80%,
    var(--t-blue) 80%,
    var(--t-blue) 100%
    );
}

.bi {
    background-image: linear-gradient(
    var(--b-pink) 0%,
    var(--b-pink) 40%,
    var(--b-purple) 40%,
    var(--b-purple) 60%,
    var(--b-blue) 60%,
    var(--b-blue) 100%
    );
}

.pan {
    background-image: linear-gradient(
    var(--p-magenta) 0%,
    var(--p-magenta) 33.332%,
    var(--p-yellow) 33.332%,
    var(--p-yellow) 66.667%,
    var(--p-blue) 66.667%,
    var(--p-blue) 100%
    );
}

.asex {
    background-image: linear-gradient(
    var(--a-black) 0%,
    var(--a-black) 20%,
    var(--a-grey) 20%,
    var(--a-grey) 40%,
    var(--a-white) 40%,
    var(--a-white) 60%,
    var(--a-purple) 60%,
    var(--a-purple) 80%,
    var(--a-black) 80%,
    var(--a-black) 100%
    );
}

.nonb {
    background-image: linear-gradient(
    var(--nb-black) 0%,
    var(--nb-black) 20%,
    var(--nb-yellow) 20%,
    var(--nb-yellow) 40%,
    var(--nb-white) 40%,
    var(--nb-white) 60%,
    var(--nb-purple) 60%,
    var(--nb-purple) 80%,
    var(--nb-black) 80%,
    var(--nb-black) 100%
    );
}