*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: Arial, Helvetica, sans-serif;
}

html,
body {
  height: 100%;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

html {
  scroll-behavior: smooth;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

input,
button,
textarea,
select {
  font: inherit;
}

hr {
  border-style: dashed;
  border-width: 2px;
  margin-block: 1em;
}

header {
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  justify-content: space-between;
  padding: 0.2em 2em;
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), transparent);
}

header img {
  width: 100px;
}

header nav ol {
  display: flex;
  height: 100%;
  gap: 1.5em;
  align-items: center;
  list-style-type: none;
}

header nav a {
  display: block;
  text-decoration: none;
  color: black;
  font-size: 1.5em;
  font-weight: bolder;
  transition: all 0.2s;
}

header nav a:hover {
  color: darkred;
  transform: scale(1.5) rotate(2deg);
  text-decoration: underline;
  text-decoration-style: dashed;
  text-underline-offset: 2px;
}

div.container {
  display: flow-root;
  background-color: gold;
  /* background-image: radial-gradient(rgba(0,0,0,.2) 5%, transparent 6%); */
  background-image: linear-gradient(
      to right,
      rgba(0, 0, 0, 0.2) 5px,
      transparent 5px
    ),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 5px, transparent 5px);
  background-size: 100px 100px;
  min-height: 200vh;
}

div.container2 {
  width: 90%;
  margin: 60px auto;
  padding: 1em;
  background-color: antiquewhite;
  border-radius: 10px;
  box-shadow: 0.8em 0.8em 0 0 black, 1em 1em 5px 5px rgba(0, 0, 0, 0.2),
    0 0 5px 5px rgba(0, 0, 0, 0.2);
}

div.container2:first-of-type {
  margin-top: 120px;
}

div.container2 h1 {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

div.container2 h1::after {
  content: "";
  width: 32px;
  aspect-ratio: 1/1;
  display: inline-block;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath d='M416.9 85.2L372 130.1L509.9 268L554.8 223.1C568.4 209.6 576 191.2 576 172C576 152.8 568.4 134.4 554.8 120.9L519.1 85.2C505.6 71.6 487.2 64 468 64C448.8 64 430.4 71.6 416.9 85.2zM338.1 164L122.9 379.1C112.2 389.8 104.4 403.2 100.3 417.8L64.9 545.6C62.6 553.9 64.9 562.9 71.1 569C77.3 575.1 86.2 577.5 94.5 575.2L222.3 539.7C236.9 535.6 250.2 527.9 261 517.1L476 301.9L338.1 164z'/%3E%3C/svg%3E")
    no-repeat center;
  background-size: contain;
}

div.container2 p {
  text-indent: 1em;
  margin-bottom: 1rem;
  /* background-image: linear-gradient(
    to bottom,
    rgba(128, 0, 128, 0.5) 1.5px,
    transparent 1.5px
  );
  background-size: 100% 1.5em;
  background-position: 0 1.4rem; */
  /* background-origin: content-box; */
}

footer.container2 {
  text-align: center;
}

@media screen and (min-width: 768px) {
  div.container2 {
    width: 60%;
  }
}

@media screen and (max-width: 768px) {
  .container2 img {
    float: none !important;
    width: 100% !important;
    margin: 10px;
  }
}

/* Form Styling */

form fieldset {
  display: flex;
  flex-direction: column;
  margin-block: 1rem;
  padding: 1rem;
}

form fieldset textarea {
  resize: vertical;
}