body {
  background: hsl(180, 100%, 95%);
  color: black;
  font-family: Atkinson Hyperlegible, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0px;
}

.main {
  width: 100%;
  max-width: 1080px;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(4, auto);
  grid-template-areas: "header " "sidebar" "content" "copyright";
}

.area {
  width: 100%;
  margin-bottom: 1rem;
  background-color: hsl(173, 100%, 80%);
  background-image: radial-gradient(at 92% 75%, hsl(180, 100%, 88%) 0px, transparent 50%), radial-gradient(at 3% 9%, hsl(180, 100%, 89%) 0px, transparent 50%), radial-gradient(at 3% 84%, hsl(180, 100%, 80%) 0px, transparent 50%), radial-gradient(at 89% 14%, hsl(199, 100%, 81%) 0px, transparent 50%);
  filter: drop-shadow(3px 3px 4px hsl(193, 90%, 51%));
  border-radius: 2rem;
}

.copyright {
  grid-area: copyright;
  display: flex;
  justify-content: center;
  text-align: center;
  display: block;
}
.copyright span {
  font-size: 0.7rem;
}

.header {
  grid-area: header;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.header img {
  margin: 1rem;
  border-radius: 1.5rem;
  display: block;
}
.header a {
  text-decoration: none;
  color: black;
}
.header a:hover {
  text-decoration: none;
  color: black;
}

@media (width < 33rem) {
  .header {
    flex-direction: column;
  }
}
.contact-container {
  display: flex;
}
.contact-container img {
  display: block;
  width: 48px;
  height: 48px;
  border-radius: 0px;
}

.sidebar {
  grid-area: sidebar;
  font-size: 2rem;
}
.sidebar a {
  color: hsl(180, 80%, 0%);
}
.sidebar div {
  margin: 1rem;
}

.content {
  grid-area: content;
}

.strong {
  background-color: hsl(173, 100%, 80%);
  background-image: radial-gradient(at 92% 21%, hsl(208, 95%, 72%) 0px, transparent 50%), radial-gradient(at 3% 9%, hsl(180, 100%, 89%) 0px, transparent 50%), radial-gradient(at 3% 84%, hsl(180, 100%, 80%) 0px, transparent 50%), radial-gradient(at 95% 89%, hsl(193, 90%, 51%) 0px, transparent 50%);
}

.section-container {
  display: flex;
  flex-direction: column;
}

.section-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  border-top-left-radius: 2rem;
  border-top-right-radius: 2rem;
}

.section-cards-container {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.5rem;
}
.section-cards-container a {
  text-decoration: none;
  color: black;
}
.section-cards-container a:hover {
  text-decoration: none;
  color: black;
}

.card {
  width: 240px;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 1.5rem;
  background-color: hsl(203, 100%, 79%);
  background-image: radial-gradient(at 82% 72%, hsl(198, 62%, 84%) 0px, transparent 50%), radial-gradient(at 82% 18%, hsl(192, 100%, 82%) 0px, transparent 50%), radial-gradient(at 5% 90%, hsl(187, 100%, 85%) 0px, transparent 50%), radial-gradient(at 8% 10%, hsl(196, 100%, 86%) 0px, transparent 50%);
  gap: 0.3rem;
  filter: drop-shadow(3px 3px 4px hsl(193, 90%, 51%));
}
.card div {
  padding: 0.5rem;
}

@media (width < 33rem) {
  .card {
    width: 160px;
  }
  .card div {
    padding: 0.1rem;
  }
}
.card-title {
  height: 2rem;
  text-align: center;
}

@media (width < 33rem) {
  .card-title {
    height: 100%;
  }
}
.card img {
  width: 100%;
  border-radius: 0.5rem;
}

.post {
  padding: 1rem;
}

.post img {
  max-width: calc(min(100%, 1080px) - 0rem);
}

/*# sourceMappingURL=main.css.map */