body {
  background-color: #f2f2f2;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill='%23e6e6e6' fill-opacity='0.5'%3E%3Cpath d='M0 10h10v10H0zM20 0h10v10h-10zM0 20h10v10H0zM20 10h10v10h-10zM20 20h10v10h-10zM30 10h10v10H30zM30 30h10v10H30zM10 30h10v10H10zM30 20h10v10H30zM10 10h10v10H10zM10 20h10v10H10z'/%3E%3C/g%3E%3C/svg%3E");
  font-family: "Dancing Script", "Open Sans", sans-serif;
  font-weight: 400;
  text-align : center;
  margin: 0;
}

html {
  scroll-behavior: smooth;
}

/* Select paragraphs and apply styles */
p {
  font-size: 16px; /* Default font size */
  line-height: 1.5; /* Adjust line height as needed */
}

/* Select first letter of each paragraph and modify size */
p::first-letter {
  font-size: 24px; /* Increase the font size for the first letter */
  font-weight: 600; /* Optionally make it bold */
}

/* Select paragraphs and apply styles */
#recounting p {
  font-size: 28px; /* Default font size */
  line-height: 1.5; /* Adjust line height as needed */
  margin: 30px;
}

/* Select first letter of each paragraph and modify size */
#recounting p::first-letter {
  font-size: 40px; /* Increase the font size for the first letter */
  font-weight: bold; /* Optionally make it bold */
}

#recounting {
  text-align: left;
  width: 100%;
}

.title {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.title h1 {
  font-size: 4rem;
  margin: 0;
}

.site {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.hall {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(500px, calc(100vw - 30px)), 1fr));
  gap: 15px;
  margin: 0 15px;
}

.card {
  overflow: show;
  cursor: pointer;
  height: auto;
  border-radius: 10px;
}

@media (hover: none) {
  .card {
    user-select: none;
  }
}

img {
  width: 100%;
  height: min(500px, calc(100vw - 30px));
  object-fit: cover;
  border-radius: 10px;
}

.card h3 {
  font-size: 2.3rem;
  padding: 20px 15px 0;
  margin: 0;
}

.card p {
  padding: 15px;
  margin: 0;
}

.flip-card {
  width: 100%;
  /* height: auto; */
  /* min-height: min(500px, calc(100vw - 30px)); */
  perspective: 1000px;
  overflow: show;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.flip-card.flipped .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back,
.flip-card-background,
.flip-card-frontground {
  position: absolute;
  width: 100%;
  backface-visibility: hidden;
  border-radius: 10px;
  overflow: show;
}

.flip-card-front {
  background-color: #fff;
  border-radius: 10px;
  height: auto;
  color: black;
  /* overflow-y: scroll; */
}

.flip-card-front p {
  text-align: left;
}

.flip-card-back {
  color: white;
  transform: rotateY(180deg);
  height: auto;
}

.flip-card-background {
  background-color: #2980b9;
  /* height: 100%; */
  width: 100%;
  transform: rotateY(180deg);
}

.flip-card-frontground {
  background-color: #ffffff;
  /* height: 100%; */
  width: 100%;
  border-radius: 10px;
}

.flip-card-back-content {
  color: white;
  height: auto;
  padding: 10px;
  box-sizing: border-box;
}

@keyframes autoColor {
  0% {
    color: #fff;
  }
  100% {
    color: #fff;
  }
}

.scrolling {
  /* This isn't working, and I don't really know what I want to do here anyways */
  /* animation: autoScroll 10s linear infinite; */
}

.flip-card-back-content h3 {
  text-align: center; /* center-align header text */
}

.flip-card-back-content p {
  text-align: left; /* left-align detail text */
}

@keyframes autoScroll {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-100%);
  }
}

::-webkit-scrollbar-corner {
  background: rgba(0, 0, 0, 0);
}

::-webkit-scrollbar {
  width: 20px;
  height: 20px;
}

::-webkit-scrollbar-track {
  box-shadow: inset 0 0 2px #d1d5db;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background: #a8a29e;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: #78716c;
}