@font-face {
 font-family: 'Sour Gummy';
 src: url(fonts/SourGummy-VariableFont_wdth\,wght.ttf) format('TrueType');
}

@font-face {
  font-family: 'Cherry Bomb One';
  src: url(fonts/CherryBombOne-Regular.ttf) format('TrueType');
}

* {
  box-sizing: border-box;
}

html {
  height: 100%;
  font-family: "Sour Gummy", system-ui;
  font-size: 1.5em;
  font-weight: 300;
}

body {
  margin: 0 auto;
  padding: 0 1rem;
  width: min(1000px, 100vw);
  background-color: #ace;
  color: #334D66;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Cherry Bomb One', sans-serif;
  color: white;
  -webkit-text-stroke: 1px black;
  text-shadow: 3px 3px 0 black, -1px -1px 0 black, 1px -1px 0 black, 1px 1px 0 black;
}

h1 img {
  height: 1.5em;
  vertical-align: middle;
  margin-right: 1rem;
}

a:link, a:visited {
  color: #68a;
}

a:active, a:hover {
  color: #334D66;
}

img {
  max-width: 100%;
}

figure {
  text-align: center;
}

figure figcaption {
  font-size: .9rem;
  font-weight: 200;
}

figure figcaption b {
  font-weight: 500;
}

main, article, footer {
  position: relative;
  border: 2px solid #334D66;
  background-color: #ffffff;
  border-radius: 1rem;
  padding: 1rem;
  margin: -1rem 0;
  transition: .6s all;
  left: 0;
  z-index: 0;
}

main {
    rotate: -1deg;
}
article:hover {
  scale: 102%;
  z-index: 1;
}
article:nth-child(4n) {
  rotate: -1deg;
  left: 40px;
}
article:nth-child(4n+2), footer {
  rotate: 1deg;
  left: -35px;
}

footer {
  font-size: .75rem;
  color: #333;
}