body, html {
  margin: 0;
  padding: 0;
  overscroll-behavior: none;
}
a.link {
  color: #ff9100 !important;
}
a.link:hover {
  color: #777 !important;
  cursor: pointer;
}
* {
  box-sizing: border-box;
}
.patrick { font-family: "Patrick Hand", cursive; }
.four4 { font-family: "Itim", cursive; }
.barriecito { font-family: "Barriecito", system-ui; }
.sedgwick { font-family: "Sedgwick Ave", cursive; }

section {
  min-height: 100vh;
  display: block;
}
.hideLoading {
  animation: cssAnimation 4s ease-in-out 2s forwards;
  opacity: 1;
  height: 100%;
}
@keyframes cssAnimation {
  0%, 50% {
    opacity: 1;
    height: 100vh;
  }
  51%, 100% {
    opacity: 0;
    height: 0vh;
  }
}

.wrapper {
  height: 100vh;
  background: url(../images/bg_grey_lines.png);
  background-size: cover;
  background-repeat: no-repeat;
}
.ogs {
  background: url(../images/bg_grey_lines_payphone.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: bottom center;
}

.wrapper1 {
  animation: wrapperAnimation 3s ease-in-out 0s forwards;
  opacity: 0;
  overflow: auto;
}
@keyframes wrapperAnimation {
  0% { opacity: 0; }
  20% { opacity: .2; }
  50% { opacity: .5; }
  100% { opacity: 1; }
}

.floating, .floating1 {
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}
.floating { animation-name: floating; }
.floating1 { animation-name: floating1; }
@keyframes floating {
  0%, 100% { transform: translateY(0); }
  65% { transform: translateY(15px); }
}
@keyframes floating1 {
  0%, 100% { transform: translateY(0); }
  40% { transform: translateY(15px); }
}

.about {
  background-image: url(../images/table_section.png);
  background-size: contain;
  margin-top: -70px;
}
.table44 {
  width: 100%;
  max-width: 1280px;
  background: url(../images/table.png) no-repeat center/cover;
}
.content {
  max-width: 1280px;
}
.clay44 {
  background: url(../images/clay44/bg_clay.png);
  background-size: cover;
}
.pfp-group {
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
}
.pfp-item {
  width: 15%;
  height: 40vh;
  background-position: top;
  background-size: 40vh;
  margin: 0.7vw;
  border-radius: 2.5vw;
  display: inline-block;
  cursor: pointer;
  box-shadow: 1px 3px 10px rgba(0, 0, 0, 0.5);
}

.box {
  margin: 25px;
  width: 250px;
  height: 250px;
  background: #fff;
  border: solid 1px black;
}
.box2 {
  border-width: 3px 3px 5px 5px;
  border-radius: 4% 95% 6% 95% / 95% 4% 92% 5%;
  transform: rotate(-2deg);
}
.box3 {
  width: 350px;
}
.box4 {
  background: #fff;
  border: solid 1px black;
}
.rotatebox1 {
  border-width: 3px 3px 5px 5px;
  border-radius: 4% 95% 6% 95% / 95% 4% 92% 5%;
  transform: rotate(-3deg);
}
.rotatebox2{
  border-width: 3px 3px 5px 5px;
  border-radius: 4% 95% 6% 95% / 95% 4% 92% 5%;
  transform: rotate(-2deg);
}
.rotatebox3 {
  border-width: 3px 3px 5px 5px;
  border-radius: 4% 95% 6% 95% / 95% 4% 92% 5%;
  transform: rotate(-1deg);
}
.rotatebox4 {
  border-width: 3px 3px 5px 5px;
  border-radius: 4% 95% 6% 95% / 95% 4% 92% 5%;
  transform: rotate(0deg);
}
.rotatebox5 {
  border-width: 3px 3px 5px 5px;
  border-radius: 4% 95% 6% 95% / 95% 4% 92% 5%;
  transform: rotate(1deg);
}
.rotatebox6 {
  border-width: 3px 3px 5px 5px;
  border-radius: 4% 95% 6% 95% / 95% 4% 92% 5%;
  transform: rotate(2deg);
}
.rotatebox7 {
  border-width: 3px 3px 5px 5px;
  border-radius: 4% 95% 6% 95% / 95% 4% 92% 5%;
  transform: rotate(2deg);
}
.evenboxinner, .evenboxbottom {
  transform: rotate(2deg);
  margin: 15px;
  padding: 0 5px;
  background: #ddd;
  border: 1px solid #222;
  box-shadow: 3px 3px 0 #222;
}
.evenboxinner {
  position: absolute;
  right: 0;
}
.evenboxbottom {
  position: absolute;
  right: 5px;
  bottom: 0;
  background: #e8994d;
}






a.button, label.button {
  align-self: center;
  padding: 0 0.5rem;
  transition: all 0.5s ease;
  font-size: 1.5rem;
  letter-spacing: 1px;
  outline: none;
  box-shadow: 10px 18px 32px -12px rgba(0, 0, 0, 0.2);
  border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
}
a.button:hover, label.button:hover {
  box-shadow: 2px 8px 4px -6px rgba(0, 0, 0, 0.3);
  cursor: pointer;
}
a.button.lined.thick, label.button.lined.thick {
  border: solid 3px #41403E;
}

#target-modal {
  display: none;
}
#target-modal:checked ~ .modal.target-modal {
  opacity: 1;
  visibility: visible;
  pointer-events: initial;
}
#target-modal:checked ~ .modal.target-modal .modal-inner {
  transform: none;
}



#collectors-modal {
  display: none;

}
#collectors-modal:checked ~ .modal.collectors-modal {
  opacity: 1;
  visibility: visible;
  pointer-events: initial;
}
#collectors-modal:checked ~ .modal.collectors-modal .modal-inner {
  transform: none;
    background-color:rgba(0,0,0,.92);
    background-size: cover;
    background-repeat: no-repeat;
    color: white;
}
.modal {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  padding: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: all 0.3s ease-in-out;
  z-index: 100;
  overflow: auto;

}
.modal .modal-inner {
  position: relative;
  text-align: center;
  background: #fdffff;
  border-radius: 8px;
  z-index: 2;
  box-shadow: 0 4px 22px rgba(0, 0, 0, 0.45);
  transform: translate(0, 100%);
  transition: all 0.3s ease;
  color: #222;
}
.modal .modal-inner .close-modal {
  position: absolute;
  top: .5rem;
  right: .5rem;
  height: 1.2rem;
  width: 1.2rem;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="currentColor"/><path d="M18 6L6 18M6 6L18 18" stroke="white" stroke-width="2"/></svg>'); /* keep SVG or move to separate asset */
  background-size: contain;
  background-repeat: no-repeat;
  cursor: pointer;
  transition: all 0.3s ease;
}
.modal .modal-inner .close-modal:hover {
  opacity: 0.45;
}
.modal .modal-inner h2 {
  font-size: 3rem;
}
.modal .modal-inner h3 {
  font-weight: 400;
}
.modal .overlay-modal {
  position: fixed;
  background: rgba(0, 0, 0, 0.75);
  height: 100%;
  width: 100%;
  z-index: 1;
  top: 0;
}
.collectors-modal .overlay-modal {
  background: #ffffff1f;
}
@media (max-width: 768px) {
  .table44 {
    width: 100vw;
    background-size: 200vw;
    background-position: bottom center;
    height: 100%;
  }
  .box3 { width: 300px; }
  .modal {
      align-items: baseline;
}
}
@media (max-height: 810px) {
  section.clay44 {
    min-height: 810px;
  }
}

/* Trait Colors */
.storm { background-color: #b7cbd4; }
.smoke { background-color: #e2e8e8; }
.sunrise { background-color: #fa9485; }
.clear-sky { background-color: #cfeee8; }
.luxury { background-color: #cdd2fa; }
.pollution { background-color: #d2c5bf; }
.desert { background-color: #e1d4b1; }
.swamp { background-color: #dce393; }
.sunset { background-color: #f8b483; }
.jungle { background-color: #a8cda4; }