/* Fixed missing alpha value */
/* === CONTAINER GRID SETUP === */
#container {
  display: grid;
  grid-template-areas: "nav nav nav nav nav nav nav nav nav nav nav nav" "shapes shapes shapes shapes shapes shapes shapes shapes shapes shapes shapes shapes" "header header header header header header header header header header header header" "blocks blocks blocks blocks blocks blocks about about about about about about" "Scientist Scientist Scientist Scientist Reformer Reformer Reformer Reformer Peacemaker Peacemaker Peacemaker Peacemaker" "Visionary Visionary Visionary Visionary Visionary Visionary Feminist Feminist Feminist Feminist Feminist Feminist" "class class class test test test test2 test2 test2 test3 test3 test3" "test4 test4 test4 class1 class1 class1 test6 test6 test6 test5 test5 test5" "class2 class2 class2 test7 test7 test7 test8 test8 test8 test9 test9 test9" "Quote Plane2 Plane2 Plane2 Plane2 Plane2 Plane2 Plane2 Plane2 Plane2 Plane2 Plane2" "sensitive sensitive sensitive sensitive Characteristics Characteristics Characteristics Characteristics tendencies tendencies tendencies tendencies" "cite cite cite cite cite cite cite cite cite cite cite cite" "footer footer footer footer footer footer footer footer footer footer footer footer";
  grid-template-rows: auto 1fr auto;
  background-color: #f5f5dc; /* Beige fallback */
  overflow-x: hidden;
}

/* === NAVIGATION === */
nav {
  grid-area: nav;
  background-color: #9caf88; /* Sage green fallback */
  padding: 20px;
  text-align: center;
  position: sticky;
  top: 0;
  z-index: 1000;
}

nav ul {
  padding: 0;
  margin: 0;
}

nav li {
  display: inline-block;
  position: relative;
  list-style-type: none;
  margin-right: 1.5em;
}

nav li a {
  text-decoration: none;
  color: black;
  background-color: transparent;
}

nav .active {
  font-weight: bold;
}

/* === DROPDOWN === */
.dropdown-content {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: rgb(242, 242, 207);
  list-style: none;
  padding: 0;
  margin: 0;
  border: 1px solid rgb(242, 242, 207);
  z-index: 1000;
  min-width: 220px;
}

.dropdown-content li a {
  display: block;
  padding: 10px 15px;
  text-decoration: none;
  color: #333;
  background-color: rgb(242, 242, 207);
}

.dropdown:hover .dropdown-content {
  display: block;
}

/* Optional: add hover effect */
.dropdown-content li a:hover {
  background-color: #f0f0f0;
}

header {
  grid-area: header;
  text-align: center;
  color: rgb(54, 69, 79);
  font-size: 55px;
  padding: 0;
  margin: 0;
  font-family: "Tangerine", cursive;
}

header p {
  font-family: "Josefin Slab", "Playfair Display", "Merriweather", serif;
  font-size: 40px;
}

.about {
  grid-area: about;
  padding: 0px 200px 0px 0px; /* Unused, consider removing */
}
.about h2 {
  font-size: 40px;
  font-family: "Tangerine", cursive;
  font-weight: 700;
}
.about p {
  font-size: 20px;
  line-height: 25px;
  font-family: "Josefin Slab", "Playfair Display", "Merriweather", serif;
  font-weight: 700;
}
.about .site {
  background-color: rgba(128, 128, 0, 0.5);
  padding: 20px;
}
.about .Maria {
  background-color: rgba(226, 114, 91, 0.5);
  padding: 20px;
  margin: 4px;
}
.about .Guiding {
  background-color: rgba(194, 178, 128, 0.5);
  padding: 20px;
}
.about .Planes {
  background-color: rgba(34, 139, 34, 0.5);
  padding: 20px;
  margin: 4px;
}
.about .thankyou {
  background-color: rgb(255, 253, 208);
  padding: 20px;
}
.about ul {
  font-family: "Josefin Slab", "Playfair Display", "Merriweather", serif;
  font-weight: 700;
  font-size: 15px;
}

.blocks {
  grid-area: blocks;
  display: flex;
  justify-content: center; /* Centers the content horizontally */
  align-items: flex-start; /* Aligns the content to the top */
  flex-direction: column; /* Stacks items vertically */
  height: 100vh; /* Full viewport height */
  margin-top: 0;
  padding: 0;
}

.blocks img {
  width: 400px;
  height: auto;
  margin: 10px;
  padding: 0px 15px;
  box-sizing: border-box;
}

.shapes {
  grid-area: shapes;
  display: flex;
  justify-content: center; /* Centers the content horizontally */
  align-items: center; /* Centers the content vertically */
  height: 300px; /* Adjust height for a banner-like size */
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden; /* Ensures no part of the image overflows */
}
.shapes header {
  position: absolute; /* Positions header over the image */
  top: 25%;
  left: 50%;
  transform: translate(-50%, -50%); /* Centers header */
  color: white;
  font-family: "Tangerine", cursive;
  font-size: 3rem;
  text-align: center;
  z-index: 10;
}

.shapes img {
  width: 100%; /* Makes the image span the full width */
  height: auto;
  -o-object-fit: cover;
     object-fit: cover; /* Ensures image covers container */
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.Scientist {
  grid-area: Scientist;
  font-family: "Josefin Slab", "Playfair Display", "Merriweather", serif;
  margin-left: 10px;
}
.Scientist h2 {
  font-size: 40px;
  font-family: "Tangerine", cursive;
  font-weight: 700;
  text-align: center;
  background-color: rgb(194, 178, 128);
  padding: 10px;
}
.Scientist p {
  font-family: "Josefin Slab", "Playfair Display", "Merriweather", serif;
  margin: 20px 15px;
  font-size: 20px;
}

.Reformer {
  grid-area: Reformer;
  font-family: "Josefin Slab", "Playfair Display", "Merriweather", serif;
  margin: 0px 10px;
}
.Reformer h2 {
  font-size: 40px;
  font-family: "Tangerine", cursive;
  font-weight: 700;
  text-align: center;
  background-color: rgb(226, 114, 91);
  padding: 10px;
}
.Reformer p {
  font-family: "Josefin Slab", "Playfair Display", "Merriweather", serif;
  margin: 20px 15px;
  font-size: 20px;
}

.Peacemaker {
  grid-area: Peacemaker;
  font-family: "Josefin Slab", "Playfair Display", "Merriweather", serif;
  margin-right: 10px;
}
.Peacemaker h2 {
  font-size: 40px;
  font-family: "Tangerine", cursive;
  font-weight: 700;
  text-align: center;
  background-color: rgb(194, 178, 128);
  padding: 10px;
}
.Peacemaker p {
  font-family: "Josefin Slab", "Playfair Display", "Merriweather", serif;
  margin: 3px 15px;
  font-size: 20px;
}

.Visionary {
  grid-area: Visionary;
  margin: 0px 10px;
}
.Visionary h2 {
  font-size: 40px;
  font-family: "Tangerine", cursive;
  font-weight: 700;
  text-align: center;
  background-color: rgb(226, 114, 91);
  padding: 10px;
}
.Visionary p {
  font-family: "Josefin Slab", "Playfair Display", "Merriweather", serif;
  margin: 20px 15px;
  font-size: 20px;
}

.Feminist {
  grid-area: Feminist;
  margin-right: 10px;
}
.Feminist h2 {
  font-size: 40px;
  font-family: "Tangerine", cursive;
  font-weight: 700;
  background-color: rgb(194, 178, 128);
  text-align: center;
  padding: 10px;
}
.Feminist p {
  font-family: "Josefin Slab", "Playfair Display", "Merriweather", serif;
  margin: 20px 15px;
  font-size: 20px;
}

.cite {
  grid-area: cite;
}
.cite p {
  font-size: 10px;
}

.class {
  grid-area: class;
  margin-bottom: 50px;
  /* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
  /* This container is needed to position the front and back side */
  /* Do an horizontal flip when you move the mouse over the flip box container */
  /* Position the front and back side */
  /* Style the front side (fallback if image is missing) */
  /* Style the back side */
}
.class h1 {
  font-family: "Tangerine", cursive;
  font-size: 40px;
  color: rgb(54, 69, 79);
}
.class p {
  font-family: "Josefin Slab", "Playfair Display", "Merriweather", serif;
}
.class img {
  width: 300px;
  height: auto;
}
.class .flip-card {
  background-color: transparent;
  width: 300px;
  height: 200px;
  border: 1px solid #f1f1f1;
  perspective: 1000px; /* Remove this if you don't want the 3D effect */
}
.class .flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}
.class .flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}
.class .flip-card-front, .class .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%; /* Safari */
  backface-visibility: hidden;
}
.class .flip-card-front {
  background-color: rgba(34, 139, 34, 0.5);
  color: black;
}
.class .flip-card-back {
  color: white;
  transform: rotateY(180deg);
}

.test {
  grid-area: test;
  margin: 0.5px;
  /* This container is needed to position the front and back side */
  /* Do an horizontal flip when you move the mouse over the flip box container */
  /* Position the front and back side */
  /* Style the front side (fallback if image is missing) */
  /* Style the back side */
}
.test h1 {
  font-family: "Tangerine", cursive;
  font-size: 40px;
  color: rgb(54, 69, 79);
}
.test p {
  font-family: "Josefin Slab", "Playfair Display", "Merriweather", serif;
}
.test img {
  width: 300px;
  height: auto;
}
.test .flip-card {
  background-color: transparent;
  width: 300px;
  height: 200px;
  border: 1px solid #f1f1f1;
  perspective: 1000px; /* Remove this if you don't want the 3D effect */
}
.test .flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}
.test .flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}
.test .flip-card-front, .test .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%; /* Safari */
  backface-visibility: hidden;
}
.test .flip-card-front {
  background-color: #bbb;
  color: black;
}
.test .flip-card-back {
  background-color: rgb(194, 178, 128);
  color: white;
  transform: rotateY(180deg);
}

.test2 {
  grid-area: test2;
  margin-bottom: 50px;
  /* This container is needed to position the front and back side */
  /* Do an horizontal flip when you move the mouse over the flip box container */
  /* Position the front and back side */
  /* Style the front side (fallback if image is missing) */
  /* Style the back side */
}
.test2 h1 {
  font-family: "Tangerine", cursive;
  font-size: 40px;
  color: rgb(54, 69, 79);
}
.test2 p {
  font-family: "Josefin Slab", "Playfair Display", "Merriweather", serif;
}
.test2 img {
  width: 300px;
  height: auto;
}
.test2 .flip-card {
  background-color: transparent;
  width: 300px;
  height: 200px;
  border: 1px solid #f1f1f1;
  perspective: 1000px; /* Remove this if you don't want the 3D effect */
}
.test2 .flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}
.test2 .flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}
.test2 .flip-card-front, .test2 .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%; /* Safari */
  backface-visibility: hidden;
}
.test2 .flip-card-front {
  background-color: rgba(34, 139, 34, 0.5);
  color: black;
}
.test2 .flip-card-back {
  color: white;
  transform: rotateY(180deg);
}

.test3 {
  grid-area: test3;
  margin-bottom: 50px;
  /* This container is needed to position the front and back side */
  /* Do an horizontal flip when you move the mouse over the flip box container */
  /* Position the front and back side */
  /* Style the front side (fallback if image is missing) */
  /* Style the back side */
}
.test3 h1 {
  font-family: "Tangerine", cursive;
  font-size: 40px;
  color: rgb(54, 69, 79);
}
.test3 p {
  font-family: "Josefin Slab", "Playfair Display", "Merriweather", serif;
}
.test3 img {
  width: 300px;
  height: auto;
}
.test3 .flip-card {
  background-color: transparent;
  width: 300px;
  height: 200px;
  border: 1px solid #f1f1f1;
  perspective: 1000px; /* Remove this if you don't want the 3D effect */
}
.test3 .flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}
.test3 .flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}
.test3 .flip-card-front, .test3 .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%; /* Safari */
  backface-visibility: hidden;
}
.test3 .flip-card-front {
  background-color: #bbb;
  color: black;
}
.test3 .flip-card-back {
  background-color: rgb(194, 178, 128);
  color: white;
  transform: rotateY(180deg);
}

.class1 {
  grid-area: class1;
  margin-bottom: 50px;
  /* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
  /* This container is needed to position the front and back side */
  /* Do an horizontal flip when you move the mouse over the flip box container */
  /* Position the front and back side */
  /* Style the front side (fallback if image is missing) */
  /* Style the back side */
}
.class1 h1 {
  font-family: "Tangerine", cursive;
  font-size: 40px;
  color: rgb(54, 69, 79);
}
.class1 p {
  font-family: "Josefin Slab", "Playfair Display", "Merriweather", serif;
}
.class1 img {
  width: 300px;
  height: auto;
}
.class1 .flip-card {
  background-color: transparent;
  width: 300px;
  height: 200px;
  border: 1px solid #f1f1f1;
  perspective: 1000px; /* Remove this if you don't want the 3D effect */
}
.class1 .flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}
.class1 .flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}
.class1 .flip-card-front, .class1 .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%; /* Safari */
  backface-visibility: hidden;
}
.class1 .flip-card-front {
  background-color: rgba(34, 139, 34, 0.5);
  color: black;
}
.class1 .flip-card-back {
  color: white;
  transform: rotateY(180deg);
}

.test4 {
  grid-area: test4;
  margin: 0.5px;
  /* This container is needed to position the front and back side */
  /* Do an horizontal flip when you move the mouse over the flip box container */
  /* Position the front and back side */
  /* Style the front side (fallback if image is missing) */
  /* Style the back side */
}
.test4 h1 {
  font-family: "Tangerine", cursive;
  font-size: 40px;
  color: rgb(54, 69, 79);
}
.test4 p {
  font-family: "Josefin Slab", "Playfair Display", "Merriweather", serif;
}
.test4 img {
  width: 300px;
  height: auto;
}
.test4 .flip-card {
  background-color: transparent;
  width: 300px;
  height: 200px;
  border: 1px solid #f1f1f1;
  perspective: 1000px; /* Remove this if you don't want the 3D effect */
}
.test4 .flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}
.test4 .flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}
.test4 .flip-card-front, .test4 .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%; /* Safari */
  backface-visibility: hidden;
}
.test4 .flip-card-front {
  background-color: #bbb;
  color: black;
}
.test4 .flip-card-back {
  background-color: rgb(194, 178, 128);
  color: white;
  transform: rotateY(180deg);
}

.test5 {
  grid-area: test5;
  margin-bottom: 50px;
  /* This container is needed to position the front and back side */
  /* Do an horizontal flip when you move the mouse over the flip box container */
  /* Position the front and back side */
  /* Style the front side (fallback if image is missing) */
  /* Style the back side */
}
.test5 h1 {
  font-family: "Tangerine", cursive;
  font-size: 40px;
  color: rgb(54, 69, 79);
}
.test5 p {
  font-family: "Josefin Slab", "Playfair Display", "Merriweather", serif;
}
.test5 img {
  width: 300px;
  height: auto;
}
.test5 .flip-card {
  background-color: transparent;
  width: 300px;
  height: 200px;
  border: 1px solid #f1f1f1;
  perspective: 1000px; /* Remove this if you don't want the 3D effect */
}
.test5 .flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}
.test5 .flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}
.test5 .flip-card-front, .test5 .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%; /* Safari */
  backface-visibility: hidden;
}
.test5 .flip-card-front {
  background-color: rgba(34, 139, 34, 0.5);
  color: black;
}
.test5 .flip-card-back {
  color: white;
  transform: rotateY(180deg);
}

.test6 {
  grid-area: test6;
  margin-bottom: 50px;
  /* This container is needed to position the front and back side */
  /* Do an horizontal flip when you move the mouse over the flip box container */
  /* Position the front and back side */
  /* Style the front side (fallback if image is missing) */
  /* Style the back side */
}
.test6 h1 {
  font-family: "Tangerine", cursive;
  font-size: 40px;
  color: rgb(54, 69, 79);
}
.test6 p {
  font-family: "Josefin Slab", "Playfair Display", "Merriweather", serif;
}
.test6 img {
  width: 300px;
  height: auto;
}
.test6 .flip-card {
  background-color: transparent;
  width: 300px;
  height: 200px;
  border: 1px solid #f1f1f1;
  perspective: 1000px; /* Remove this if you don't want the 3D effect */
}
.test6 .flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}
.test6 .flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}
.test6 .flip-card-front, .test6 .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%; /* Safari */
  backface-visibility: hidden;
}
.test6 .flip-card-front {
  background-color: #bbb;
  color: black;
}
.test6 .flip-card-back {
  background-color: rgb(194, 178, 128);
  color: white;
  transform: rotateY(180deg);
}

.class2 {
  grid-area: class2;
  margin-bottom: 50px;
  /* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
  /* This container is needed to position the front and back side */
  /* Do an horizontal flip when you move the mouse over the flip box container */
  /* Position the front and back side */
  /* Style the front side (fallback if image is missing) */
  /* Style the back side */
}
.class2 h1 {
  font-family: "Tangerine", cursive;
  font-size: 40px;
  color: rgb(54, 69, 79);
}
.class2 p {
  font-family: "Josefin Slab", "Playfair Display", "Merriweather", serif;
}
.class2 img {
  width: 300px;
  height: auto;
}
.class2 .flip-card {
  background-color: transparent;
  width: 300px;
  height: 200px;
  border: 1px solid #f1f1f1;
  perspective: 1000px; /* Remove this if you don't want the 3D effect */
}
.class2 .flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}
.class2 .flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}
.class2 .flip-card-front, .class2 .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%; /* Safari */
  backface-visibility: hidden;
}
.class2 .flip-card-front {
  background-color: rgba(34, 139, 34, 0.5);
  color: black;
}
.class2 .flip-card-back {
  color: white;
  transform: rotateY(180deg);
}

.test7 {
  grid-area: test7;
  margin: 0.5px;
  /* This container is needed to position the front and back side */
  /* Do an horizontal flip when you move the mouse over the flip box container */
  /* Position the front and back side */
  /* Style the front side (fallback if image is missing) */
  /* Style the back side */
}
.test7 h1 {
  font-family: "Tangerine", cursive;
  font-size: 40px;
  color: rgb(54, 69, 79);
}
.test7 p {
  font-family: "Josefin Slab", "Playfair Display", "Merriweather", serif;
}
.test7 img {
  width: 300px;
  height: auto;
}
.test7 .flip-card {
  background-color: transparent;
  width: 300px;
  height: 200px;
  border: 1px solid #f1f1f1;
  perspective: 1000px; /* Remove this if you don't want the 3D effect */
}
.test7 .flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}
.test7 .flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}
.test7 .flip-card-front, .test7 .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%; /* Safari */
  backface-visibility: hidden;
}
.test7 .flip-card-front {
  background-color: #bbb;
  color: black;
}
.test7 .flip-card-back {
  background-color: rgb(194, 178, 128);
  color: white;
  transform: rotateY(180deg);
}

.test8 {
  grid-area: test8;
  margin-bottom: 50px;
  /* This container is needed to position the front and back side */
  /* Do an horizontal flip when you move the mouse over the flip box container */
  /* Position the front and back side */
  /* Style the front side (fallback if image is missing) */
  /* Style the back side */
}
.test8 h1 {
  font-family: "Tangerine", cursive;
  font-size: 40px;
  color: rgb(54, 69, 79);
}
.test8 p {
  font-family: "Josefin Slab", "Playfair Display", "Merriweather", serif;
}
.test8 img {
  width: 300px;
  height: auto;
}
.test8 .flip-card {
  background-color: transparent;
  width: 300px;
  height: 200px;
  border: 1px solid #f1f1f1;
  perspective: 1000px; /* Remove this if you don't want the 3D effect */
}
.test8 .flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}
.test8 .flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}
.test8 .flip-card-front, .test8 .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%; /* Safari */
  backface-visibility: hidden;
}
.test8 .flip-card-front {
  background-color: rgba(34, 139, 34, 0.5);
  color: black;
}
.test8 .flip-card-back {
  color: white;
  transform: rotateY(180deg);
}

.test9 {
  grid-area: test9;
  margin-bottom: 50px;
  /* This container is needed to position the front and back side */
  /* Do an horizontal flip when you move the mouse over the flip box container */
  /* Position the front and back side */
  /* Style the front side (fallback if image is missing) */
  /* Style the back side */
}
.test9 h1 {
  font-family: "Tangerine", cursive;
  font-size: 40px;
  color: rgb(54, 69, 79);
}
.test9 p {
  font-family: "Josefin Slab", "Playfair Display", "Merriweather", serif;
}
.test9 img {
  width: 300px;
  height: auto;
}
.test9 .flip-card {
  background-color: transparent;
  width: 300px;
  height: 200px;
  border: 1px solid #f1f1f1;
  perspective: 1000px; /* Remove this if you don't want the 3D effect */
}
.test9 .flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}
.test9 .flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}
.test9 .flip-card-front, .test9 .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%; /* Safari */
  backface-visibility: hidden;
}
.test9 .flip-card-front {
  background-color: #bbb;
  color: black;
}
.test9 .flip-card-back {
  background-color: rgb(194, 178, 128);
  color: white;
  transform: rotateY(180deg);
}

.Quote {
  grid-area: Quote;
}
.Quote img {
  width: 300px;
  height: auto;
}

.Plane2 {
  grid-area: Plane2;
  margin-right: 90px;
  margin-left: 90px;
  font-size: 20px;
}
.Plane2 h2 {
  font-family: "Josefin Slab", "Playfair Display", "Merriweather", serif;
}
.Plane2 p {
  font-family: "Josefin Slab", "Playfair Display", "Merriweather", serif;
}
.Plane2 h1 {
  text-align: center;
  font-family: "Tangerine", cursive;
  font-size: 50px;
  background-color: rgba(226, 114, 91, 0.5);
  padding: 15px;
}

.sensitive {
  grid-area: sensitive;
  margin-left: 10px;
  font-family: "Josefin Slab", "Playfair Display", "Merriweather", serif;
  font-size: 20px;
}
.sensitive h1 {
  background-color: rgb(194, 178, 128);
  padding: 10px;
}

.Characteristics {
  grid-area: Characteristics;
  margin: 0px 10px;
  font-family: "Josefin Slab", "Playfair Display", "Merriweather", serif;
  font-size: 20px;
}
.Characteristics h1 {
  background-color: rgba(128, 128, 0, 0.5);
  padding: 10px;
}

.tendencies {
  grid-area: tendencies;
  margin-right: 10px;
  font-family: "Josefin Slab", "Playfair Display", "Merriweather", serif;
  font-size: 20px;
}
.tendencies h1 {
  background-color: rgb(194, 178, 128);
  padding: 10px;
}

.Period {
  grid-area: Period;
  background-color: rgba(226, 114, 91, 0.5);
  padding: 10px;
  margin: 10px 20px;
  text-align: center;
  font-family: "Josefin Slab", "Playfair Display", "Merriweather", serif;
  font-size: 20px;
}

aside {
  grid-area: aside;
}
aside img {
  width: 300px;
  height: auto;
}

footer {
  grid-area: footer;
  background-color: rgb(156, 175, 136);
  position: relative; /* Avoid sticky footer overflow issues */
}

@media only screen and (max-width: 900px) {
  #container {
    display: grid;
    grid-template-areas: "nav" "shapes" "header" "about" "Scientist" "Reformer" "Peacemaker" "Visionary" "Feminist" "class" "test" "test2" "test3" "test4" "class1" "test6" "test5" "class2" "test7" "test8" "test9" "Plane2" "sensitive" "Characteristics" "tendencies" "cite" "footer";
    grid-template-rows: auto; /* Each row automatically fits content */
    background-color: rgb(242, 242, 207);
  }
  nav {
    grid-area: nav;
  }
  .shapes {
    grid-area: shapes;
  }
  .blocks {
    grid-area: blocks;
  }
  .blocks img {
    display: none;
  }
  header {
    grid-area: header;
  }
  .about {
    grid-area: about;
    margin: 0px;
  }
  .Scientist {
    grid-area: Scientist;
  }
  .Reformer {
    grid-area: Reformer;
  }
  .Peacemaker {
    grid-area: Peacemaker;
  }
  .Visionary {
    grid-area: Visionary;
  }
  .Feminist {
    grid-area: Feminist;
  }
  .class {
    grid-area: class;
  }
  .test {
    grid-area: test;
  }
  .test2 {
    grid-area: test2;
  }
  .test3 {
    grid-area: test3;
  }
  .test4 {
    grid-area: test4;
  }
  .class1 {
    grid-area: class1;
  }
  .test6 {
    grid-area: test6;
  }
  .test5 {
    grid-area: test5;
  }
  .class2 {
    grid-area: class2;
  }
  .test7 {
    grid-area: test7;
  }
  .test8 {
    grid-area: test8;
  }
  .test9 {
    grid-area: test9;
  }
  .Plane2 {
    grid-area: Plane2;
  }
  .Quote {
    grid-area: Quote;
  }
  .Quote img {
    display: none;
  }
  .sensitive {
    grid-area: sensitive;
  }
  .Characteristics {
    grid-area: Characteristics;
  }
  .tendencies {
    grid-area: tendencies;
  }
  .cite {
    grid-area: cite;
  }
  .footer {
    grid-area: footer;
  }
}/*# sourceMappingURL=style.css.map */