@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Shantell+Sans:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500;1,600&display=swap');

:root {
  --beige: #f0e2d9;
  --lightBG: #abcbc6;
  --darkBG: #399b9d;
  --darkBlue: #2c3e50;
  --white: #ffffff;
  --black:#000000;
}

/* General Styling */
body {
    background-color: var(--beige);
    padding: 16px;
    max-width: 576px;
    margin: 0;
    font-size: 24px;
    color: var(--darkBlue);
    font-family: 'Shantell Sans';
}

/* Headings */
h1 {
    font-size: 48px;
    margin: 0;
    font-family: 'Dancing Script';
}

h2 {
  margin: 0;
}

.heading {
  text-align: center;
}

/* Links */
a {
  text-decoration: none;
  color: var(--darkBlue);
}

a:hover {
  text-decoration: underline;
  color: var(--darkBlue);
}

/* Main Content */
.content {
  line-height: 1.5;
  text-align: justify;
}

.poem {
  text-align: center;
}

.hidden {
  display: none;
}

.ClueRecap {
  margin: 24px 0px;
}

.ClueRecap .heading {
  text-align: start;
}

.ClueRecap .recap {
  display: grid;
  grid-template-columns: 100%;
  column-gap: 16px;
  row-gap: 8px;
  margin-top: 8px;
}

.ClueRecap .recap img{
  width: 100%;
}

.ClueRecap .recap p{
  margin: 0;
}

/* Button Styling */
.buttons {
  text-align: right;
}

#back {
  text-align: left;
  margin-bottom: 16px;
}

.buttons button {
  padding: 8px;
  font-size: 18px;
  border: none;
  color: var(--white);
  background-color: var(--darkBG);
  border-radius: 4px;
}

.buttons button:hover {
  border: solid 1px var(--darkBG);
  color: var(--darkBG);
  background-color: var(--white);
  cursor: pointer;
}

/* Puzzle Styling */
.puzzle {
  display: grid;
  grid-template-areas: "p1 p2 p3" "p4 p5 p6" "p7 p8 p9";
  gap: 8px;
  width: 100%;
}

.puzzle .piece {
  text-align: center;
  vertical-align: middle;
  aspect-ratio : 1 / 1;
  border: dotted 1px var(--darkBG);
}

.no-border {
  border: none !important;
}

.puzzle .piece img{
  width: 100%;
}

#p1 {
  grid-area: p1;
}

#p2 {
  grid-area: p2;
}

#p3 {
  grid-area: p3;
}

#p4 {
  grid-area: p4;
}

#p5 {
  grid-area: p5;
}

#p6 {
  grid-area: p6;
}

#p7 {
  grid-area: p7;
}

#p8 {
  grid-area: p8;
}

#p9 {
  grid-area: p9;
}

/* Responsive */
@media screen and (min-width: 600px) {
  body {
    margin: auto;
  }

  .ClueRecap .recap {
    display: grid;
    grid-template-columns: 45% 55%;
    column-gap: 16px;
  }
}