body {
  overflow-x: hidden;
  box-shadow: inset 0 0 0 10px rgba(239, 182, 79, 0.9);
}

.topbar-inner {
  padding: 10px 16px;
  gap: 10px;
}

.topbar::after {
  content: "Medium CSS";
  position: fixed;
  right: 14px;
  bottom: 14px;
  z-index: 9999;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(239, 182, 79, 0.95);
  color: #13210b;
  font-family: "DMDisplay";
  font-size: 12px;
  letter-spacing: 0.5px;
}

.site-title,
.nav-select,
.nav-select-label,
.nav-link {
  font-size: 13px;
}

.nav {
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

#autoScrollBtn {
  top: 20px;
  left: 20px;
}

.Homepage-Content {
  padding-left: 48px;
  padding-top: 96px;
}

.HC-Title {
  font-size: clamp(84px, 10vw, 128px);
}

.Rule {
  width: min(340px, 48vw);
}

.Frame-Text,
.Frame--flip .Frame-Text {
  top: 96px;
  width: min(460px, 42vw);
  font-size: 31px;
  line-height: 1.18;
  letter-spacing: 3px;
}

.Frame-Text {
  left: 48px;
}

.Frame--flip .Frame-Text {
  right: 48px;
}

.ArtSwap,
.Frame--flip .ArtSwap {
  top: 92px;
  width: min(420px, 42vw);
  height: 72vh;
}

.ArtSwap {
  right: 90px;
}

.Frame--flip .ArtSwap {
  left: 90px;
}

.FrameText--center,
.FrameText--page-center {
  width: min(760px, 82vw);
  font-size: 31px;
  line-height: 1.18;
  letter-spacing: 3px;
}

.ContinuePrompt {
  bottom: 28px;
}

.ContinuePromptText {
  font-size: 18px;
}

#f10t1,
#f10t2 {
  left: 50%;
  top: 58%;
  width: min(720px, 78vw);
  margin: 0;
  text-align: center;
  transform: translateX(-50%);
}

#frame11 .FrameText--page-center,
#frame12 .FrameText--page-center,
#frame13 .FrameText--page-center,
#frame14 .FrameText--page-center,
#frame15 .FrameText--page-center {
  width: min(760px, 82vw);
}

#frame10 .FrameText--page-center {
  top: 58% !important;
  width: min(720px, 78vw) !important;
  transform: translateX(-50%) !important;
}

#frame7 .ArtSwap--centered {
  inset: 0;
  left: 0 !important;
  right: 0 !important;
  top: 0;
  width: 100% !important;
  height: 100%;
  transform: none;
  overflow: visible;
}

#frame7 #f7log {
  width: min(760px, 84vw);
  height: 58vh;
  object-fit: contain;
  object-position: center;
}

#frame7 #f7sapling {
  width: min(280px, 30vw);
  height: 24vh;
  object-fit: contain;
  object-position: center;
}

#frame9 #f9img1 {
  inset: auto 0 0 0 !important;
  top: auto !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  object-position: center bottom !important;
}

#frame9 .ArtSwap {
  overflow: hidden;
}

#f3img1 {
  left: 145px;
}

#f3img2 {
  left: 340px;
  top: 250px;
  height: 50vh;
  width: auto;
}

#f3t2, #f3t3 {
  width: min(420px, 32vw);
  line-height: 1.4;
}

#frame4 .ArtSwap {
  left: 50px;
}

#frame4 .Frame-Text {
  width: min(420px, 32vw);
  top: 150px;
}

#frame4 #f4t3 {
  top: 34% !important;
  width: min(560px, 60vw) !important;
  text-align: center !important;
  transform: translateX(-50%) !important;
}

#f5img7 {
  height: 50vh;
  width: auto;
  top: 150px;
}

#frame6 .ArtSwap {
  left: 50%;
  right: auto;
  top: auto;
  bottom: 50px;
  width: min(760px, 82vw);
  height: 78vh;
  transform: translateX(-50%);
}

#frame6 .SwapImg {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
}


/*REMEBER this is like the perfect center for stuff*/
#frame6 .Frame-Text {
  position: absolute;
  left: 500px;
  top: 150px;
  width: 100%;
  text-align: center;
  transform: translateX(-50%);
}


#frame8 .ArtSwap .SwapImg {
  position: absolute;
  inset: 0;               
  width: 100% !important; 
  height: 100% !important;
  object-fit: cover;
  object-position: center; 
  opacity: 100%;
}

#frame10 .Frame-Text {
  position: absolute;
  left: 500px;
  top: -350px;
  width: 100%;
  text-align: center;
  transform: translateX(-50%);
}

#frame10 #f10img2 {
  width: auto;
  height: 90vh;
  object-fit: contain;
  top: 90px;
}

#frame10 #f10img1 {
  width: auto;
  height: 100vh;
  left: auto !important;
  right: 0 !important;
  top: 20px;
  object-fit: contain;
  object-position: right bottom;
}

#frame10 #f10img4 {
  width: auto;
  height: 700px;
  left: auto !important;
  right: 0 !important;
  top: auto !important;
  object-fit: contain;
  object-position: right bottom;
}