:root {
  --width: 800px;
  --colour-aa: #f755ff;
  --colour-ba: #ad7000;
}
html {
  margin: 0;
  height: 100%;
  width: 100%;
  background: linear-gradient(var(--colour-aa), var(--colour-ba));
  background-repeat: no-repeat;
  background-attachment: fixed;
}

body {
  background: unset;
  background: url('/assets/clouds.png');

}

header {
  max-width: var(--width);
  margin: auto;
}

header h1 {
  text-align: center;
  font-size: clamp(2rem, 3rem, 5vw);
  -webkit-text-stroke: 2px var(--color-a);
}

header p {
  background: black;
  padding: 0.15rem 1rem 0.15rem 1rem;
  display: flex;
}

h2 {
  font-size: 3rem;
  color: white;
  -webkit-text-stroke: 2px var(--colour-aa);
  text-align: center;
}

section h2 {
  width: 100%;
}

main#zines {
  display: flex;
  margin: auto;
  flex-flow: row;
  flex-wrap: wrap;
  width: 100%;
  height: auto;
  min-height: 100%;
  padding-bottom: 1rem;
  margin-bottom: 100px;
}

main#zines a.card {
  max-width: 360px; 
  margin: 1rem;
  text-decoration: none;
  color: unset;
  padding: 1em;
  border-radius: 10px;
  display: flex;
  flex-flow: column;
  align-items: center;
  text-align: center;
}

main#zines a#mitt ,
main#zines a#emeet {
  background: hsl(228, 29.4%, 3.3%);
  color: hsl(187, 100%, 95.1%);
}

main#zines a#mitt strong ,
main#zines a#emeet {
 color: hsl(247, 100%, 80%);
}

main#zines a#emeet p {
  color: #fffefb;
}

main#zines a#web-zine-01 {
  background: #FFFEFB;
 color: black;
}

main#zines a#draw-with-code {
  color: hsl(0, 70%, 63%);
  background-color: hsl(322, 10%, 84%);
}
main#zines a#draw-with-code strong {
  color: hsl(200, 33%, 65%);
}

main#zines a#curly-braces {
  background: #FDF6E3;
  color: #073642;
}

main#zines a#web-zine-01 {
  background: #white;
  color: #black;
}

main#zines a#enchanting {
  background: #F08080;
  color: white;
}


main#zines a#enchanting strong {
  color: black;
}




a figure {
  margin: 0;
  padding: 0;
  margin-bottom: 2rem;
}

img {
  max-width: 100%;
}

.hidden {
  display: none;
}