:root {
  --light-pink: #ffe0fa;
  --pink: hsl(299, 70%, 75%);
  --purple: #B388EB;
  --blue: #8093F1;
  --light-blue: #72DDF7;
  --light-gray: #efefef;
}

html {
  background-color: var(--blue);
}

body {
  padding: 0;
  color: rgb(50, 50, 50);
  overscroll-behavior-y: none;

  font-family: "Nunito", sans-serif;
  font-size: calc(1em + 0.8vw);

  overflow-x: hidden;
}

/* Fancy view transition animations */

@media not (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: auto;
  }
}

::view-transition-old(*),
::view-transition-new(*) {
  mix-blend-mode: normal;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
}

::view-transition-new(.post-title), ::view-transition-old(.post-title) {
  animation-duration: 0.3s;
  mix-blend-mode: multiply;
}

/* Core blog styles */

#main {
  display: flex;
  position: relative;
  flex-direction: column;
  min-height: 100vh;

  padding-bottom: 4em;

  background-color: white;
}

a, a:visited {
  color: var(--pink);
  text-decoration: underline;
}

hr {
  width: 250px;
  margin-inline-start: 0;
  border: 2px dashed var(--light-gray);
}

h2 {
  padding-top: 1.6rem;
  border-bottom: 2px dashed var(--light-gray);
  width: fit-content;
}

h4 {
  text-align: center;
}

pre {
  overflow: scroll;
  font-size: smaller;
}

code {
  font-size: smaller;
}

blockquote {
  padding-left: 1.5rem;
  font-style: italic;
  position: relative;
}

blockquote:before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  border-radius: 10px;
  width: 5px;

  background-color: var(--pink);
}

/* Elements */

.title {
  display: flex;
  justify-content: space-between;
  align-items: baseline;

  background-color: var(--blue);
  width: 100vw;
  padding: 0.5rem 2rem 3rem 2rem;

  view-transition-name: masthead;


  /* https://css-generators.com/wavy-shapes/ */
  mask:
    radial-gradient(56.6px at 50% calc(100% - 78px),#000 99%,#0000 101%) calc(50% - 60px) 0/120px 100%,
    radial-gradient(56.6px at 50% calc(100% + 48px),#0000 99%,#000 101%) 50% calc(100% - 30px)/120px 100% repeat-x;

  a {
    color: white;
    text-decoration: none;
  }

  .masthead-title {
    font-size: 160%;
    font-family: "Pacifico", cursive;
    margin: 0;
  }
}


#footer {
  position: absolute;
  bottom: 0;

  height: 4rem;
  width: 100vw;
  /* https://css-generators.com/wavy-shapes/ */
  mask:
    radial-gradient(56.6px at 50% 78px,#000 99%,#0000 101%) calc(50% - 60px) 0/120px 100%,
    radial-gradient(56.6px at 50% -48px,#0000 99%,#000 101%) 50% 30px/120px 100% repeat-x;

  background-color: var(--pink);
}

.content {
  max-width: 50ch;
  min-width: 20ch;
  padding: 0 1.2em 0em 1.2em;
  margin: auto;
}

.links {
  display: flex;
  gap: 1.5rem;
  font-weight: 600;
}

/* Posts */

.post-date {
  font-size: 1rem;
  color: rgb(140, 140, 140);
}

p {
  padding: 1rem 0rem;
}

.post-container {
  display: flex;
  justify-content: center;
}

.post-title {
  view-transition-class: post-title;
  width: fit-content;
}

.posts {
  view-transition-name: posts;
}

.post {
  width: 100%;
}