<main class="post">
  <h1>Learn about CSS</h1>

  <img src="https://picsum.photos/id/10/2500/1667" alt="wood forest landscape">

  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eget pulvinar lectus, at venenatis diam. Mauris volutpat dapibus scelerisque. Sed vestibulum tortor eget ultricies lacinia. Sed scelerisque lectus id sem vestibulum, nec varius mi consectetur. In vitae mi nibh. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </p>

  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eget pulvinar lectus, at venenatis diam. Mauris volutpat dapibus scelerisque. Sed vestibulum tortor eget ultricies lacinia. Sed scelerisque lectus id sem vestibulum, nec varius mi consectetur. In vitae mi nibh. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </p>

  <p class="note">

    Nulla vulputate arcu at euismod ultricies. In volutpat, diam in malesuada hendrerit, elit mauris congue nunc, vitae suscipit tortor sapien a quam. Curabitur gravida, orci vitae tempor facilisis, mi ipsum lacinia leo, blandit ornare felis risus vitae dolor. Fusce purus nunc, hendrerit eu orci nec, ultrices varius ex. Aenean tristique tortor lectus. Nulla non accumsan dui. Pellentesque commodo dignissim pulvinar. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae;

    <span class="footnote">
      Wow, this is interesting
    </span>
  </p>

  <h2>Subtitle</h2>

  <p>

    Maecenas maximus accumsan scelerisque. Quisque consectetur eros porttitor quam iaculis condimentum. Quisque et scelerisque ante. Vestibulum ut tincidunt tellus. Sed imperdiet eu nunc quis semper. Donec id eleifend mauris. Nam eu porta lectus. Maecenas ac lorem nunc. Maecenas vitae facilisis justo, quis dapibus nisi. Mauris sed bibendum libero.

    Nam vestibulum elit non sem aliquet condimentum. Donec urna magna, condime</p>

  <p>

    ultricies. In volutpat, diam in malesuada hendrerit, elit mauris congue nunc, vitae suscipit tortor sapien a quam. Curabitur gravida, orci vitae tempor facilisis, mi ipsum lacinia leo, blandit ornare felis risus vitae dolor. Fusce purus nunc, hendrerit eu orci nec, ultrices varius ex. Aenean tristique tortor lectus. Nulla non accumsan dui. Pellentesque commodo dignissim pulvinar. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae;
  </p>

  <p class="note">

    Nulla vulputate arcu at euismod ultricies. In volutpat, diam in malesuada hendrerit, elit mauris congue nunc, vitae suscipit tortor sapien a quam. Curabitur gravida, orci vitae tempor facilisis, mi ipsum lacinia leo, blandit ornare felis risus vitae dolor. Fusce purus nunc, hendrerit eu orci nec, ultrices varius ex. Aenean tristique tortor lectus. Nulla non accumsan dui. Pellentesque commodo dignissim pulvinar. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae;

    <span class="footnote">Lorem Impsum is 2000 years old
    </span>
  </p>

  <h2>Subtitle</h2>

  <p>

    ultricies. In volutpat, diam in malesuada hendrerit, elit mauris congue nunc, vitae suscipit tortor sapien a quam. Curabitur gravida, orci vitae tempor facilisis, mi ipsum lacinia leo, blandit ornare felis risus vitae dolor. Fusce purus nunc, hendrerit eu orci nec, ultrices varius ex. Aenean tristique tortor lectus. Nulla non accumsan dui. Pellentesque commodo dignissim pulvinar. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae;
  </p>
</main>

:root {
  --spacing: 30px;
  --border-radius: 20px;
  --post-background-color: #fff;
  --note-highlight-color: #fce6c2;
  --post-max-width: clamp(600px, 50vw, 800px);
}

/* You can start writing from here */

.footnote {
	display: flex;
	gap: 10px;

	border-radius: 20px;
	padding: 20px;

	background-color: #fce6c2;

	&::before {
		content: "Note:";
		font-weight: 600;
	}
}

@media (width > 1000px) {
	.post {
	anchor-name: --post;
}

.footnote {
	position: absolute;
	position-anchor: --post;
  
  animation: pop-up linear;
	animation-timeline: view();
	animation-range: cover 0% cover 40%;

	/* Aesthetic Changes */
	padding: 20px;
	border-radius: 20px;
  margin: 0px 20px;
	background-color: #fff;
  
  	&::before {
		content: "";
  }
}

.note:nth-of-type(odd) .footnote {
	left: anchor(right);
}

.note:nth-of-type(even) .footnote {
	right: anchor(left);
}

@keyframes pop-up {
	from {
		opacity: 0;
		transform: scale(0.5);
	}

	to {
		opacity: 1;
	}
}


}


/* to here */


* {
  padding: 0px;
  margin: 0px;
  box-sizing: border-box;
}

html {
  font-family: Helvetica, sans-serif;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;

  padding: var(--spacing);

  background-color: #2f3e46;
}

main {
  flex: 0 1 var(--post-max-width);

  display: flex;
  flex-flow: column;
  gap: var(--spacing);

  padding: calc(var(--spacing) * 2);
  border-radius: var(--border-radius);

  line-height: 2rem;
  text-align: justify;

  background-color: var(--post-background-color);

  h1 {
    font-size: 3rem;
    line-height: 4rem;
  }

  img {
    width: 100%;
    aspect-ratio: 16/9;

    border-radius: var(--border-radius);
  }

  p {
    display: flex;
    flex-flow: column;
    gap: var(--spacing);
    color: #333;
  }
}

.not-supported {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 100vw;
  height: 40px;

  font-weight: 600;

  background-color: #ffbd59aa;
}