/*
  Josh's Custom CSS Reset
  https://www.joshwcomeau.com/css/custom-css-reset/
  with slight edits made by Me!
*/
*,
*::before,
*::after {
  box-sizing: border-box;
}
:root {
  font-family: system-ui, Helvetica, Arial, sans-serif;
}
*:not(dialog) {
  margin: 0;
}

body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  min-block-size: 100svh;
}
img {
  max-width: 100%;
  font-style: italic;
  background-repeat: no-repeat;
  background-size: cover;
  height: auto;
  vertical-align: middle;
  shape-margin: 1rem;
}
input,
button,
textarea,
select {
  font: inherit;
}
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}
p {
  text-wrap: pretty;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  text-wrap: balance;
}
ul,
li {
  padding: 0;
  margin: 0;
}
li {
  list-style: none;
}
a {
  position: relative;

  &:link {
    color: rgb(255, 168, 168);
  }

  &:visited {
    color: rgb(155, 230, 174);
  }

  &:hover {
    color: rgb(255, 228, 193);
  }

  &[target="_blank"]::after {
    content: "(new tab)";
    display: inline-block;
    position: absolute;
    font-size: 0.6rem;
    top: -9px;
    right: -12px;
  }
}
.stack {
  display: flex;
  flex-direction: column;
  gap: var(--default-gap, 1rem);
}
:root {
  /* COLORS */
  --dark-purple: #241a39;
  --light-purple: #6024c0;
  --dark-pink: #7d1c3b;
  --pink: #e56086;
  --light-pink: #fa7cb9;
  --pink-border: #c82d64;
  --black: #12050a;
}
h2,
h3 {
  border-bottom: var(--pink) solid 1px;
  margin-bottom: 0.35em;
}
body {
  background: linear-gradient(
    var(--light-pink),
    var(--dark-pink),
    var(--black)
  );
  color: white;
  display: grid;
  max-width: clamp(400px, 95%, 400rem);
  min-height: 100vh;
  margin-inline: auto;
  gap: 1rem;
  grid-template-rows: minmax(6.25rem, fit-content) minmax(calc(100dvh - 6.25rem), 1fr) minmax(6.25rem, fit-content);
}
header,
main,
footer {
  > h1 {
    text-align: center;
  }
  padding: 1rem;
}

header,
main,
footer {
  background-color: var(--pink-border);
  border-left: solid #f5c8babd 2px;
}
header {
  border-bottom-right-radius: 25px;
  border-bottom: 2px solid var(--pink);
  border-right: 2px solid var(--pink);
}
main {
  border-bottom-right-radius: 25px;
  border-top-right-radius: 25px;
  border-left: solid #f5c8babd 2px;
  border-bottom: 2px solid var(--pink);
  border-right: 2px solid var(--pink);
  border-top: 2px solid var(--pink);
}
footer {
  border-top-right-radius: 25px;
  border-top: 2px solid var(--pink);
  border-right: 2px solid var(--pink);
}
main {
  gap: 1rem;
}
section {
  padding: 1rem;
  border: var(--light-pink) 2px dotted;
}
.creepy {
  text-decoration: underline wavy var(--light-purple);
  color: var(--light-pink);
  text-shadow: black 2px -2px 2px;
}
.emphasis {
  font-weight: 800;
  font-size: 2em;
  color: var(--light-pink);
  animation-name: emphasisAnimation;
  animation-direction: alternate-reverse;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
.blinkies {
    justify-content:center;
 display: flex;
 gap: 1rem;
 align-items: center;
 flex-wrap: wrap;
}
@keyframes emphasisAnimation {
  0% {
    text-shadow: 10px 10px 0 purple;
  }
  100% {
    text-shadow: -10px -10px 0 blue;
    color: white;
  }
}