/* --- Variables --- */

:root {
    /* Colours */
    --color-a-white: #FCFBF4;
    --color-a-dark: #3D1473;
    --color-a-text-a: #3DC8FF;
    --color-a-text-b: #26ED72;
    --color-a-text-c: #FB98F0;
    --color-a-text-d: #FFD738;

    --color-b-white: #FCFBF4;
    --color-b-dark: #2a0a65;
    --color-b-text-a: #34f8ff;
    --color-b-text-b: #2aff78;
    --color-b-text-c: #FF668C;
    --color-b-text-d: #ffbc1f;

	/* Sizes */
	--max-width-large: 52rem;
	--max-width: 40rem;

	/* White spaces */
	--space-tiny: 0.25rem;
	--space-small: 0.5rem;
	--space-medium: 1rem;
	--space-large: 2rem;
	--space-huge: 3rem;

	/* Misc values */
	--border-radius: 0.25rem;
	--border-round: 3rem;
}

/* Set fluid base font size */
html {
	--mult: clamp(0px, calc((100vw - 360px) / (1280 - 360)), 1px);
	font-size: clamp(1rem, calc(1rem + 4 * var(--mult)), 20px);
}

/* Global */

body {
	position: relative;
    color: var(--color-a-dark);
    background: var(--color-a-white);
}

input[type="email"] {
    border: 2px solid;
    box-shadow: 0.2rem 0.2rem inset rgba(21, 0, 158, 0.15);
    padding-inline: 0.5rem;
}

input[type="submit"],
button,
.button,
a {
    cursor: pointer;
    color: currentColor;
    text-decoration: underline;
    text-decoration-thickness: 0.075em;
    text-underline-offset: 0.125em;
}

input[type="submit"],
button,
.button {
    position: relative;
    padding: calc(var(--space-small) - 0.05rem) var(--space-medium) calc(var(--space-small) - 0.15rem);
    font-family: var(--font-body);
    background: transparent;
    border: 0.1rem solid transparent;
    border-radius: var(--border-radius);
    font-weight: bold;
}

.button {
  display: inline-block;
}

.button > img {
    vertical-align: middle;
    margin-inline-start: 0.25rem;
    margin-block-start: -0.2rem;
}

.center {
    text-align: center;
}

.controls {
    display: flex;
    gap: 1rem;
    padding: 0.25rem 0.5rem 0.25rem;
    margin: 0;
    background: #222;
    color: white;
    font-size: 0.875rem;
    font-family: sans-serif;
    letter-spacing: 0;
}

legend {
    display: contents;
}

.controls fieldset {
    display: flex;
    gap: 0.75rem;
    padding: 0rem 0.75rem 0 0.25rem;
    border: none;
    border-right: 1px solid white;
}

h1,
h2,
h3,
h4,
p,
ul,
ol,
dl,
menu,
figcaption,
address,
pre {
	--baselines: 1.5;
	--beneath: 1;
	--baseline-shift: calc(calc(calc(var(--baselines) * 1rem) - 1cap) / 2);
	--baseline-push: calc(calc(var(--beneath) * 1rem) - var(--baseline-shift));
  
	line-height: calc(var(--baselines) * 1rem);
	padding-block-start: var(--baseline-shift);
	padding-block-end: var(--baseline-push);
    margin-block: 0;
    letter-spacing: 0;
}

h1 {
    --baselines: 2;
    font-size: 1.75rem;
    line-height: 2.25rem;
    hyphens: none;
    text-wrap: balance;
}

h2 {
    font-size: 1.375rem;
    hyphens: none;
    text-wrap: balance;
}

h3 {
    font-size: 1.2rem;
}

input {
    color: currentColor;
}

.pixel {
    image-rendering: pixelated;
}

.logo {
    display: inline-block;
    height: 2.5rem;
    width: 14rem;
    vertical-align: middle;
}

.main-nav {
    background: var(--color-a-white);
}

.main-nav .wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 2rem;
}

.main-menu {
    display: flex;
    list-style: none;
    gap: 0.5rem;
}

.main-menu a {
    padding: 0.5rem 0.5rem;
    text-decoration-thickness: 0.075em;
    text-underline-offset: 0.125em;
}

.main-menu a:hover,
.main-menu a:focus-visible {
    text-decoration: none;
}

main {
    position: relative;
}

.intro {
    max-width: 62rem;
    position: relative;
    padding: 2rem;
    margin-inline: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.intro > h1 {
    max-width: 36rem;
}

.stamp {
    position: absolute;
    display: grid;
    align-items: center;
    top: 26%;
    right: 3rem;
    background-repeat: no-repeat;
    background-size: contain;
    width: 6rem;
    height: 6rem;
    padding-inline-end: 0.2rem;
    font-size: 0.875rem;
    text-align: center;
    line-height: 1;
    text-transform: uppercase;
    font-weight: bold;
    transform: rotate(4deg);
    background-image: url("/images/stamp-a-2.svg");
}

.window {
    background-repeat: no-repeat;
    background-size: contain;
    width: 13rem;
    height: 9rem;
    background-image: url("/images/window.svg");
}

.ascii {
    font-family: 'Courier New', Courier, monospace;
    text-wrap: nowrap;
    font-weight: bold;
    line-height: 1;
}

.ascii-band {
    overflow: hidden;
}

.text-a,
.text-b,
.text-c {
    padding: 0.1em 0.2em;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

.split {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    padding-block: 3rem;
}

.split > * {
    grid-column-start: 2;
    padding-inline: 2rem;
}

.split b {
    padding: 0.1em 0.2em;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

.split::before {
    content: " ";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 50%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.sticker-emac,
.sticker-cd {
    position: absolute;
    padding: 0;
    background-size: contain;
    background-repeat: no-repeat;
}

.sticker-emac {
    grid-column-start: 1;
    top: -2rem;
    left: 10%;
    width: 7rem;
    height: 7rem;
}

.sticker-cd {
    grid-column-start: 2;
    bottom: -3.5rem;
    left: -1.5rem;
    width: 6rem;
    height: 6rem;
}

.bits {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    margin-block-start: 3rem;
    padding-inline: 2rem;
}

.bits-item {
    position: relative;
    padding-block-end: 0.5rem;
}

.bits-item > * {
    padding-inline: 1.5rem;
}

.bits-item > h2 {
    padding-block-start: 0.75rem;
    margin-block-end: 0.5rem;
}

.bits-item > h2::first-letter {
    padding-inline-start: 1.5rem;
}

.bits-item > h2::before {
    content: "";
    display: block;
    position: absolute;
    top: -1rem;
    left: -0.5rem;
    height: 3rem;
    width: 3rem;
    background: url("/images/globe.png");
    background-size: contain;
}

.bits-item.bits-item:nth-child(2) > h2::before {
    background-image: url("/images/actions.png");
}

.bits-item.bits-item:nth-child(3) > h2::before {
    background-image: url("/images/intersectionality.png");
}

footer .wrapper {
    display: flex;
    gap: 3rem;
    justify-content: center;
    padding: 1.5rem 2rem;
    margin-block-start: 1rem;
}

.form {
    position: relative;
    max-width: 28rem;
    margin-block: 2rem;
    margin-inline: auto;
    text-align: center;
}

.form > h3::before {
    content: "";
    display: block;
    height: 3rem;
    width: 3rem;
    margin-inline: auto;
    background: url("/images/newsletter.png");
    background-size: contain;
}

.form > p {
    font-size: 0.875rem;
}

.form > label {
    margin-block-start: 0.5rem;
    text-align: left;
}

.form-combine {
    display: flex;
}

.form-combine [type="submit"] {
    flex-grow: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

footer ul {
    list-style: none;
    padding: 0;
    max-width: 22.5rem;
}

footer li {
    margin-top: 0.5rem;
}

footer small {
    padding: 0.55rem 1rem 0.45rem;
}

footer .small {
    padding-block-end: 2rem;
}

form .button {
    border: 2px solid var(--color-a-text-b);
    background-color: var(--color-a-text-b);
}

/* ----- COLOUR A ----- */

.main-menu a:hover,
.main-menu a:focus-visible {
    background-color: var(--color-a-text-d);
}

.ascii-band {
    background: var(--color-a-text-c);
}

.text-a {
    background: var(--color-a-text-c);
}

.split b {
    background: var(--color-a-text-d);
}

.split b {
    color: var(--color-a-dark);
}

.text-b {
    color: var(--color-a-white);
    background: var(--color-a-dark);
}

.text-c {
    background: var(--color-a-text-b);
}

.split {
    color: var(--color-a-white);
    background: var(--color-a-dark);
}

.split ::marker {
    color: var(--color-a-text-d);
}

.split::before {
    background-image: url("/images/dither-a-2.png");
}

.button {
    background: var(--color-a-text-b);
    color: var(--color-a-dark);
}

button:hover,
button:focus-visible,
[type="submit"]:hover,
[type="submit"]:focus-visible,
.button:hover,
.button:focus-visible {
  color: var(--color-a-dark);
  background: var(--color-a-white);
  border-color: var(--color-a-dark);
  outline-color: var(--color-a-text-b);
}

.button-dark:hover,
.button-dark:focus-visible {
    border-color: var(--color-a-text-d);
    background-color: var(--color-a-text-d);
}

.sticker-emac {
    background-image: url("/images/emac-women-a-2.svg");
}

.sticker-cd {
    background-image: url("/images/cd-nonbinary-a-2.svg");
}

.bits-item {
    background-color: var(--color-a-dark);
    color: var(--color-a-white);
}

.bits-item > h2 {
    color: var(--color-a-dark);
}

.bits-item:nth-child(1) h2 {
    background-color: var(--color-a-text-b);
}

.bits-item:nth-child(2) h2 {
    background-color: var(--color-a-text-a);
}

.bits-item:nth-child(3) h2 {
    background-color: var(--color-a-text-d);
}

footer {
    color: var(--color-a-dark);
    background: var(--color-a-white);
}

footer .wrapper h3 {
    background: var(--color-a-text-c);
    color: var(--color-a-dark);
    padding: 0.5rem;
}

footer .wrapper,
footer .small {
    color: var(--color-a-white);
    background: var(--color-a-dark);
}

footer small {
    color: var(--color-a-dark);
    background: var(--color-a-text-d);
}

/* ----- COLOUR B ----- */

.colours-b {
    background-color: var(--color-b-white);
    color: var(--color-b-dark);
}

.colours-b .main-menu a:hover,
.colours-b .main-menu a:focus-visible {
    background-color: var(--color-b-text-d);
}

.colours-b .ascii-band {
    background: var(--color-b-text-c);
}

.colours-b .stamp {
    background-image: url("/images/stamp-b-3.svg");
}

.colours-b .window {
    background-image: url("/images/window-b.svg");
}

.colours-b .text-a {
    background: var(--color-b-text-c);
}

.colours-b .split b {
    background: var(--color-b-text-d);
}

.colours-b .split b {
    color: var(--color-b-dark);
}

.colours-b .text-b {
    color: var(--color-b-white);
    background: var(--color-b-dark);
}

.colours-b .text-c {
    background: var(--color-b-text-b);
}

.colours-b .split {
    color: var(--color-b-white);
    background: var(--color-b-dark);
}

.colours-b .split ::marker {
    color: var(--color-b-text-d);
}

.colours-b .split::before {
    background-image: url("/images/dither-b-3.png");
}

.colours-b .button {
    background: var(--color-b-text-b);
    color: var(--color-b-dark);
}

.colours-b button:hover,
.colours-b button:focus-visible,
.colours-b [type="submit"]:hover,
.colours-b [type="submit"]:focus-visible,
.colours-b .button:hover,
.colours-b .button:focus-visible {
  color: var(--color-b-dark);
  background: var(--color-b-white);
  border-color: var(--color-b-dark);
  outline-color: var(--color-b-text-b);
}

.colours-b .button-dark:hover,
.colours-b .button-dark:focus-visible {
    border-color: var(--color-b-text-d);
    background-color: var(--color-b-text-d);
}

.colours-b .sticker-emac {
    background-image: url("/images/emac-women-b-3.svg");
}

.colours-b .sticker-cd {
    background-image: url("/images/cd-nonbinary-b-3.svg");
}

.colours-b .bits-item {
    background-color: var(--color-b-dark);
    color: var(--color-b-white);
}

.colours-b .bits-item > h2 {
    color: var(--color-b-dark);
}

.colours-b .bits-item:nth-child(1) h2 {
    background-color: var(--color-b-text-b);
}

.colours-b .bits-item:nth-child(2) h2 {
    background-color: var(--color-b-text-a);
}

.colours-b .bits-item:nth-child(3) h2 {
    background-color: var(--color-b-text-d);
}

.colours-b footer {
    color: var(--color-b-dark);
    background: var(--color-b-white);
}

.colours-b footer .wrapper h3 {
    background: var(--color-b-text-c);
    color: var(--color-b-dark);
    padding: 0.5rem;
}

.colours-b footer .wrapper,
.colours-b footer .small {
    color: var(--color-b-white);
    background: var(--color-b-dark);
}

.colours-b footer small {
    color: var(--color-b-dark);
    background: var(--color-b-text-d);
}

/* ----- FONTS ----- */

.fonts-two {
    font-family: "Inclusive Sans web", serif;
}

.fonts-one {
    font-family: "Livvic Sans web", serif;
    letter-spacing: 0.01em;
}

h1,
h2,
h3 {
    font-family: "Unbounded web", serif;
}

.colours-a.logo-x .logo {
    background: url("/logos/logo-x-a.png") no-repeat center;
    background-size: contain;
}

.colours-a.logo-y .logo {
    background: url("/logos/logo-y-a.png") no-repeat center;
    background-size: contain;
}

.colours-b.logo-x .logo {
    background: url("/logos/logo-x-b.png") no-repeat center;
    background-size: contain;
}

.colours-b.logo-y .logo {
    background: url("/logos/logo-y-b.png") no-repeat center;
    background-size: contain;
}