:root {
  --darkBlue: #262262;
  --lightBlue: #b3c8ff;
  --brightBlue: #163eab; 
  --grey: #abaac3;
  --whiteBlue: #e9fbf7;
  --Gold: #efb64f;
  --Orange: #ef9059;
  --lightGreen: #9bc259;
  --Green: #68782b;
  --darkGreen: #3c5628;
  --Yellow: #ece361;
  --White: #f2f1ee;
  --pink: #ef3ca0;
  --skyBlue: #05a3f9;

}
/*https://www.w3schools.com/css/css3_variables.asp*/

html, body {
  margin: 0;
  padding: 0;
}

body.no-scroll {
  overflow: hidden;
  height: 100vh;
}

/*https://www.w3schools.com/css/css3_fonts.asp*/
@font-face {
  font-family: "Biro";
  src: url("fonts/Biro_Script_reduced.otf");
}

@font-face {
  font-family: "DMDisplay";
  src: url("fonts/DMSerifDisplay-Regular.ttf");
}

@font-face {
  font-family: "Lustria";
  src: url("fonts/Lustria-Regular.ttf");
}

@font-face {
  font-family: "TheeBiscuits";
  src: url("fonts/TheeBiscuits.ttf");
}

@font-face {
  font-family: "TheesTest";
  src: url("fonts/TheesTest.ttf");
}

.Homepage {
  height: 100vh;
  width: 100%;
  background-image: url("img/Homepage_Background.png"); 
  background-size: cover;      
  background-position: center;  
  background-repeat: no-repeat;
  margin: 0;
  padding: 0;
  position: relative; 
}

.Grain { 
  position: absolute; 
  inset: 0; 
} 

.Grain img { 
  width: 100%; 
  height: 100%; 
  object-fit: cover; 
  z-index: 0; 
}

.Sapling {
  position: absolute;
  left: 50%;
  bottom: clamp(72px, 14vh, 120px);
  transform: translateX(-50%);
  z-index: 1;
}

.Sapling img {
  height: clamp(110px, 14vh, 150px);
  width: auto;
  display: block;
}

.topbar {
  background: var(--darkBlue);
  color: var(--White);
  box-shadow: 0 0 10px rgba(42, 85, 53, 0.8);
  position: relative;
  opacity: 95%;
  z-index: 1;
}

.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 20px;
}

.nav {
  display: flex;
  align-items: center;
  gap: 10px;
}

.site-title {
  font-family: "DMDisplay";
  font-size: 15px;
  letter-spacing: 0.2px;
  opacity: 0.95;
}

.nav-select-label {
  font-family: "DMDisplay";
  font-size: 15px;
  color: var(--White);
}

.nav-select {
  font-family: "DMDisplay";
  font-size: 15px;
  color: var(--White);
  background: rgba(38, 34, 98, 0.96);
  border: 1px solid var(--lightGreen);
  border-radius: 6px;
  padding: 4px 10px;
  cursor: pointer;
}

.nav-select:focus {
  outline: 1px solid var(--lightGreen);
  outline-offset: 1px;
}

.nav-link {
  font-family: "DMDisplay";
  font-size: 15px;
  text-decoration: none;
  color: var(--White);
  padding: 4px 10px;
  border-radius: 4px;
  border: 1px solid transparent; 
  transition: all 0.2s ease;
}

.nav-link:hover {
  border: 1px solid var(--lightGreen);
  color: var(--lightGreen);
}

.nav-link.active {
  background: var(--lightGreen);
  color: #13210b;
}

#autoScrollBtn {
  background: var(--darkBlue);
  position: absolute;       
  top: 30px;                 
  left: 30px;                
  z-index: 10;              
  cursor: pointer;
  padding: 8px 16px;       
  border-radius: 8px;  
}

#autoScrollBtn.active {
  background: rgba(38, 34, 98, 0.52);
  color: rgba(242, 241, 238, 0.72);
  border-color: rgba(155, 194, 89, 0.55);
  opacity: 0.72;
}

.Homepage-Content { 
  position: relative;
  height: calc(100vh - 44px);
  display: flex; 
  justify-content: center; 
  align-items: center; 
  text-align: center;
  z-index: 1;
}

.HomepageBox {
  margin-top: -400px;
  width: 700px;
  padding-left: 60px;
  padding-right: 60px;
  padding-top: 20px;
  padding-bottom: 20px;
  border-radius: 95px;
  background: rgba(38, 34, 98, 0.9);
}

.Rule {
  width: 580px;
  height: 3.5px;
  background: var(--lightGreen);
  margin: 10px auto 10px;
  background: linear-gradient(
    to right,
    transparent 0%,
    var(--lightGreen) 15%,
    var(--lightGreen) 85%,
    transparent 100%)
}

.HC-Title {
  margin: 0;
  line-height: 0.95;
  font-family: "DMDisplay";
  font-size: 124px;
  font-weight: 500;
  letter-spacing: 25px;
  color: var(--whiteBlue);
}

.HC-Subtitle {
  margin: 0;
  margin-top: 20px;
  line-height: 1.1;
  font-family: "Lustria";
  font-size: 35px;
  color: var(--whiteBlue);
  padding-bottom: 10px;
}

.ScrollBox {
  position: absolute;
  bottom: 40px;         
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  background: rgba(38, 34, 98, 0.9);
  padding: 12px 32px;
  border-radius: 20px;
  cursor: pointer;
}

.HC-Button {
  margin: 0;
  font-family: "DMDisplay";
  font-size: 26px;
  font-weight: 500;
  color: var(--whiteBlue);
}

.lifted-text {
  text-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);
}

* { box-sizing: border-box; }

.ContinuePrompt {
  position: absolute;
  left: 50%;
  bottom: 48px;
  transform: translateX(-50%);
  z-index: 6;
  opacity: 0;
  pointer-events: none;
  background: rgba(38, 34, 98, 0.88);
  padding: 12px 24px;
  border-radius: 20px;
}

.ContinuePromptText {
  margin: 0;
  font-family: "DMDisplay";
  font-size: 22px;
  color: var(--whiteBlue);
}

.AboutPage {
  background: var(--White);
}

.AboutLayout {
  min-height: calc(100vh - 44px);
  padding: 60px 80px;
  display: flex;
  justify-content: center;
}

.AboutCopy {
  max-width: 1250px;
}

.AboutH1 {
  font-family: "DMDisplay";
  font-size: 72px;
  margin: 0 0 14px;
  color: var(--darkBlue);
  letter-spacing: 1px;
}

.AboutP {
  font-family: "Lustria";
  font-size: 20px;
  line-height: 1.45;
  color: var(--darkBlue);
  margin: 0 0 24px;
}

.topbar{ position: relative; z-index: 2; }
.AboutLayout{ position: relative; z-index: 1; }

.Frame {
  height: 100vh;
  width: 100%;
  position: relative;
  overflow: hidden;
}

/* Temporary I think! Just want to see sections more clearly. 
likely the the blue will stay so that it fades into the ocean? 
although its possible I will make the color fade into a lighter blue? 
That Might be interesting actually... */
.Frame--one { background-color: var(--brightBlue); }
.Frame--two { background-color: var(--darkGreen); }
.Frame--three { background-color: var(--darkBlue); }

.Frame--four { background-color: var(--brightBlue); }
.Frame--five { background-color: var(--darkGreen); }
.Frame--six { background-color: var(--darkBlue); }

.Frame--seven { background-color: var(--brightBlue); }
.Frame--eight { background-color: var(--darkGreen); }
.Frame--nine { background-color: var(--darkBlue); }

.Frame--ten{ background-color: var(--brightBlue); }
.Frame--eleven { background-color: var(--darkGreen); }
.Frame--twelve { background-color: var(--darkBlue); }

.Frame--thirteen { background-color: var(--brightBlue); }
.Frame--fourteen { background-color: var(--darkGreen); }
.Frame--fifteen { background-color: var(--darkBlue); }


.Grain { 
  position: absolute; 
  inset: 0; 
  z-index: 0; 
  pointer-events: none;
}

.Grain img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.Frame-Content {
  position: relative;
  height: 100%;
  width: 100%;
  z-index: 1; 
}

.ArtSwap{
  position: absolute;
  right: 230px; 
  top: 90px;  
  width: 620px;  
  height: 80vh;  
  z-index: 3;
}

.SwapImg{
  position: absolute;
  inset: 0;
  width: 120%;
  height: 120%;
  object-fit: contain;     
  object-position: center;
  opacity: 0;

}

.Frame-Text{
  position: absolute;
  left: 80px;
  top: 120px;
  width: min(620px, 42vw);
  z-index: 5;
  margin: 0 0 22px;
  transform: translateY(12px);
  font-family: "TheesTest";
  font-size: 40px;
  line-height: 1.25;
  color: var(--whiteBlue);
  font-weight: 700;
  letter-spacing: 5px;
}

.Frame--flip .Frame-Text {
  left: auto;
  right: 80px;
  width: min(620px, 42vw);
  text-align: right;
}

.Frame--flip .ArtSwap {
  right: auto;
  left: 230px;
}

.FrameText--center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(900px, 80vw);
  text-align: center;
  margin: 0;
}

.FrameText--page-center {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(900px, 80vw);
  margin: 0;
  font-family: "TheesTest";
  font-size: 40px;
  line-height: 1.25;
  color: var(--whiteBlue);
  font-weight: 700;
  letter-spacing: 5px;
  text-align: center;
  transform: translate(-50%, -50%);
}

#f1t4 {
  position: relative;
  top: -42px;
  width: min(700px, 46vw);
  margin-bottom: 0;
}

#frame3 .ArtSwap {
  position: absolute;
  inset: 0;
  width: 120%;
  height: 120%;
  z-index: 2;
  overflow: hidden;
}

#frame3 .SwapImg {
  position: absolute;
  opacity: 0;
  object-fit: contain;
  object-position: center;
}

#f3img1 {
  width: 78vw;
  height: 78vh;
  left: 180px;
  top: 120px;
  z-index: 3;
}

#f3img2 {
  position: absolute;
  right: 380px;
  top: 130px;
  width: 620px;
  height: 80vh;
  left: auto;
  transform: none;
  z-index: 2;
}

#frame3 .Frame-Text {
  position: absolute;
  inset: 0;
  width: 100%;
  z-index: 5;
  pointer-events: none;
}

#f3t1 {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(900px, 80vw);
  text-align: center;
  margin: 0;
}

/*have to reset things here because of the lightning*/
#f3t2,
#f3t3 {
  position: relative;
  left: 80px;
  top: 200px;
  width: min(500px, 34vw);
  line-height: 1.35;
  text-align: left;
}

/*scrollbar yay!!!*/
.scroll-enabled::-webkit-scrollbar {
  width: 14px;
}

.scroll-enabled::-webkit-scrollbar-track {
  background: var(--darkBlue);
}

.scroll-enabled::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: linear-gradient(
    to bottom, var(--Orange), var(--pink), var(--skyBlue)
  );
}

.hide-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none; 
}

.hide-scrollbar::-webkit-scrollbar {
  display: none;
}

.chunk {
  display: none;
}

.SwapImg--overlay {
  z-index: 10;
  pointer-events: none;
}

#f4img2b {
  transform: translateY(100%);
}

#frame5 .Frame-Text {
  position: absolute;
  inset: 0;
  width: 100%;
  z-index: 5;
  pointer-events: none;
}

#f5t1 {
  position: absolute;
  left: 50%;
  top: 45%;
  transform: translate(-50%, -50%);
  width: min(900px, 80vw);
  text-align: center;
  margin: 0;
}

#f5t2,
#f5t3,
#f5t4 {
  position: relative;
  left: 80px;
  top: 200px;
  width: min(620px, 42vw);
  text-align: left;
}

#f5img4 {
  transform-origin: bottom center;
}


#frame7 .Frame-Text {
  position: absolute;
  inset: 0;
  width: 100%;
  z-index: 6;
  pointer-events: none;
}

#f7t1,
#f7t2,
#f7t3,
#f7t4,
#f7t5 {
  position: absolute;
  left: 50%;
  top: 50px;
  transform: translate(-50%, -50%);
  width: min(900px, 80vw);
  text-align: center;
  margin: 0;
}

.ArtSwap--centered {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  overflow: hidden;
}

#f7log {
  position: absolute;
  left: 50%;
  top: 58%;
  transform: translate(-50%, -50%);
  width: min(900px, 70vw);
  height: 70vh;
  object-fit: contain;
  z-index: 2;
  opacity: 0;
}

#f7sapling {
  position: absolute;
  left: 50%;
  top: 40%;
  transform: translate(-50%, -50%);
  width: min(500px, 35vw);
  height: 30vh;
  object-fit: contain;
  z-index: 1; 
  opacity: 0;
}

.SwapImg--cycle {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(900px, 72vw);
  height: 75vh;
  object-fit: contain;
  opacity: 0;
}

#f7c1 { z-index: 3; }
#f7c2 { z-index: 3; }
#f7c3 { z-index: 3; }
#f7c4 { z-index: 3; }
#f7c5 { z-index: 3; }
#f7c6 { z-index: 3; }

#frame8Text {
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
}

#frame8 .FrameText,
#frame9 .FrameText {
  text-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}

#frame8 .ArtSwap {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}

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

#f8img5,
#f8img6 {
  filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0));
}

#frame9 .ArtSwap {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}

#frame9 .SwapImg:not(#f9img1) {
  position: absolute;
  inset: 0;               
  width: 100% !important; 
  height: 100% !important;
  object-fit: cover;
  object-position: center; 
}

#f9bg1, #f9bg2, #f9bg3, #f9bg4 {
  z-index: 1;
  opacity: 1;
  filter: none;
}

#f9img2 {
  z-index: 2;
  opacity: 0;
}

#f9img1 {
  z-index: 3;
  opacity: 1;
  top: -50px !important;
}

#f9t5 {
  position: absolute;
  left: 0;
  top: 66vh;
  width: min(680px, 46vw);
  margin: 0;
}

#f5t1Wrapper {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(0, 0); 
  width: min(900px, 80vw);
  text-align: center;
  z-index: 5;
  margin: 0;
}

#f5t1 {
  position: static;
  transform: none;
  margin: 0;
  text-align: center;
}

#frame10 .ArtSwap {
  position: absolute;
  inset: 0;
  width: auto;
  height: 100vh;
  overflow: hidden;
}

#frame10 .SwapImg {
  width: auto;
  height: 100vh;
  object-fit: cover; 
}

#frame10 .Frame-Text {
  position: absolute;
  inset: 0;
  width: 100%;
  z-index: 5;
  pointer-events: none;
}

#f10t1,
#f10t2 {
  position: absolute;
  left: 80px;
  top: 120px;
  width: min(620px, 42vw);
  margin: 0;
}

#f10img1 {
  left: auto !important;
  right: 0 !important;
  top: 0;
  position: absolute;
  object-fit: contain;
  object-position: right bottom;
}

#frame10 #f10img3a {
  position: absolute;
  left: 50%;
  top: 0;
  width: 100vw;
  height: auto;
  max-width: none;
  object-fit: contain;
  object-position: center top;
  z-index: 3;
}

#frame10 #f10img3b {
  position: absolute;
  left: 0;
  top: 100%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
  transform: none;
  z-index: 2;
}

#frame11 .ArtSwap {
  position: relative;
  width: 100%;
  height: auto;
  overflow: visible;
}

#frame11 .SwapImg {
  position: relative;
  width: 100%;
  height: auto;
  left: 0;
  top: 0;
}

#frame11 #f11img0 {
  display: none;
}

#frame11 #f11img1 {
  width: 100%;
  height: auto;
  left: 0;
  top: 0;
  opacity: 1;
  z-index: 2;
  display: block;
}

#frame11 .Frame-Text {
  position: absolute;
  inset: 0;
  width: 100%;
  z-index: 4;
  pointer-events: none;
}

#frame11 {
  height: auto;
  min-height: 100vh;
  overflow: visible;
}

#frame11 .Frame-Content {
  min-height: 100%;
}

#frame10 #f10img4 {
  left: auto !important;
  right: 0 !important;
  z-index: 5;
  object-fit: contain;
  object-position: right bottom;
}

#frame10 .SwapImg:not(#f10img3a):not(#f10img3b) {
  z-index: 5;
}

#frame10 .FrameText--page-center{
  top: 200px !important;

}

#frame11,
#frame11Content {
  height: 100vh;
  overflow: hidden;
}

#f11Viewport {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 2;
}

#f11Track {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 170vh;
  z-index: 2;
  pointer-events: none;
}

#f11Gradient {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 170vh;
  z-index: 1;
  background: linear-gradient(
    to bottom,
    #4976cb 0%,
    #4976cb 22%,
    #3d56a6 38%,
    #262262 52%,
    #262262 100%
  );
}

#f11img2 {
  position: absolute;
  top: -42vh;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: center;

  pointer-events: none;
  z-index: 4;
}

#f11img2 img {
  height: 200px;
  width: auto;
}

#f11img3 {
  position: absolute;
  left: 50%;
  bottom: 0;                
  transform: translateX(-50%);
  width: 100vw;
  height: auto;
  z-index: 3;
  pointer-events: none;
}

#f11img5 {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 4;
  pointer-events: none;
}

#f11TextLayer {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}

#frame11 .f11copy {
  margin: 0;
  opacity: 0;
}

#frame11 .FrameText--page-center {
  top: 26vh;
}

#f11img4 {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  width: min(900px, 80vw);
  height: auto;

  z-index: 4;
  pointer-events: none;

  opacity: 0;
}

#f11t4, #f11t5, #f11t6 {
  top: 400px!important;
  transform: translate(-50%, -50%)!important;
}

#frame12 {
  background: #262262;
}

#frame12 .ArtSwap {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#frame12 .Frame-Text {
  position: absolute;
  inset: 0;
  width: 100%;
  z-index: 6;
  pointer-events: none;
}

#frame12 .FrameText--page-center {
  top: 50%;
  width: min(860px, 70vw);
}

#f12Universe {
  position: absolute;
  inset: 0;
  background: #262262;
  overflow: hidden;
}

#f12ZoomLayer {
  position: absolute;
  inset: 0;
  transform-origin: 50% 50%;
}

#f12base {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: 50% 50%;
  z-index: 1;
}

.f12Field {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.f12Field--dark {
  z-index: 3;
}

#f12field2 { z-index: 3; }
#f12field3 { z-index: 4; }
#f12field4 { z-index: 5; }

.f12Sprite {
  position: absolute;
  opacity: 0;
  will-change: transform, opacity, filter;
}

.f12Sprite--star {
  width: clamp(26px, 3vw, 56px);
}

.f12Sprite--galaxy {
  width: clamp(78px, 9vw, 150px);
}

#f12field1 .f12Sprite {
  filter: brightness(1) saturate(1);
}

#f12field2 .f12Sprite {
  filter: brightness(0.42) saturate(0.75);
}

#f12star1 { left: 8vw; top: 12vh; }
#f12star2 { right: 10vw; top: 16vh; }
#f12star3 { left: 14vw; bottom: 22vh; }
#f12star4 { right: 16vw; bottom: 18vh; }
#f12star1a { left: 3vw; top: 22vh; }
#f12star1b { right: 4vw; top: 28vh; }
#f12star1c { left: 20vw; top: 8vh; }
#f12star1d { right: 22vw; bottom: 10vh; }
#f12gal1 { left: 3vw; top: 46vh; }
#f12gal2 { right: 12vw; top: 58vh; }
#f12gal1a { left: 18vw; bottom: 10vh; }
#f12gal1b { right: 2vw; bottom: 18vh; }

#f12star5 { left: 6vw; top: 10vh; }
#f12star6 { right: 8vw; top: 14vh; }
#f12star7 { left: 12vw; bottom: 16vh; }
#f12star8 { right: 14vw; bottom: 12vh; }
#f12gal3 { left: 8vw; top: 26vh; }
#f12gal4 { right: 18vw; top: 68vh; }

#f12star9 { left: 20vw; top: 8vh; }
#f12star10 { right: 22vw; top: 9vh; }
#f12star11 { left: 26vw; bottom: 10vh; }
#f12star12 { right: 24vw; bottom: 14vh; }
#f12gal5 { left: 30vw; top: 74vh; }
#f12gal6 { right: 6vw; top: 24vh; }

#f12star13 { left: 2vw; top: 30vh; }
#f12star14 { left: 34vw; top: 18vh; }
#f12star15 { right: 3vw; top: 34vh; }
#f12star16 { right: 34vw; top: 20vh; }
#f12star17 { left: 4vw; bottom: 30vh; }
#f12star18 { left: 32vw; bottom: 20vh; }
#f12star19 { right: 5vw; bottom: 32vh; }
#f12star20 { right: 30vw; bottom: 22vh; }
#f12gal7 { left: 2vw; top: 64vh; }
#f12gal8 { right: 26vw; top: 76vh; }

#frame13 {
  background: #262262;
}

#frame13 .ArtSwap {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#frame13 .Frame-Text {
  position: absolute;
  inset: 0;
  width: 100%;
  z-index: 4;
  pointer-events: none;
}

#frame13 .FrameText--page-center {
  top: 58%;
  width: min(900px, 74vw);
}

#f13t5 {
  width: min(900px, 74vw);
  font-size: 28px;
  line-height: 1.18;
}

#f13Universe {
  position: absolute;
  inset: 0;
  background: #262262;
  overflow: hidden;
}

#f13CrunchLayer {
  position: absolute;
  inset: 0;
  transform-origin: 50% 50%;
  z-index: 2;
}

#f13base {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.45;
}

.f13Field {
  position: absolute;
  inset: 0;
}

.f13Sprite {
  position: absolute;
  will-change: transform, opacity, filter;
}

.f13Sprite--star {
  width: clamp(28px, 3.2vw, 58px);
  filter: brightness(0.62) saturate(0.82);
  opacity: 0.35;
}

.f13Sprite--galaxy {
  width: clamp(80px, 9vw, 160px);
  filter: brightness(0.5) saturate(0.8);
  opacity: 0.32;
}

#f13star1 { left: 4vw; top: 10vh; }
#f13star2 { right: 5vw; top: 16vh; }
#f13star3 { left: 10vw; bottom: 14vh; }
#f13star4 { right: 12vw; bottom: 12vh; }
#f13star5 { left: 22vw; top: 6vh; }
#f13star6 { right: 26vw; bottom: 18vh; }
#f13gal1 { left: 6vw; top: 52vh; }
#f13gal2 { right: 9vw; top: 62vh; }
#f13gal3 { right: 18vw; top: 24vh; }

#f13CrunchGlow {
  position: absolute;
  left: 50%;
  top: 46%;
  width: 34vmin;
  height: 34vmin;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(242,241,238,0.95) 0%, rgba(179,200,255,0.68) 22%, rgba(73,118,203,0.28) 52%, rgba(73,118,203,0) 72%);
  transform: translate(-50%, -50%) scale(0.15);
  opacity: 0;
  z-index: 5;
  pointer-events: none;
  mix-blend-mode: screen;
}

#f13CrunchCore {
  position: absolute;
  left: 50%;
  top: 46%;
  width: 18vmin;
  height: 18vmin;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(233,251,247,0.95) 26%, rgba(179,200,255,0.7) 54%, rgba(179,200,255,0) 78%);
  transform: translate(-50%, -50%) scale(0.08);
  opacity: 0;
  z-index: 6;
  pointer-events: none;
}

#f13EndScreen {
  position: absolute;
  inset: 0;
  background: #f5f2ea;
  z-index: 7;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
}

#f13EndScreen::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("img/Grain.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.42;
  filter: brightness(0.48) contrast(1.15);
  z-index: 0;
}

#f13imgEnd {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}


#frame14 {
  background: var(--darkBlue);
}

#frame14 .ArtSwap {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  overflow: hidden;
}

#frame14 .Frame-Text {
  position: absolute;
  inset: 0;
  width: 100%;
  z-index: 4;
  pointer-events: none;
}

#frame14 .Grain {
  z-index: 3;
  opacity: 0;
}

#frame14 .Grain img {
  opacity: 0.55;
}

#frame14 .FrameText--page-center {
  top: 50%;
  width: min(900px, 74vw);
}


#f14Gradient {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 220vh;
  background: linear-gradient(
    to bottom,
    #ffffff 0%,
    #f2f8ff 8%,
    #c8daf9 20%,
    #6f8fd7 42%,
    var(--brightBlue) 100%
  );
  opacity: 1;
}


@media (max-width: 700px) {
.Homepage-Content{ padding-left: 20px; padding-top: 60px; }
.HC-Title { font-size: 64px; }
.Rule { width: 240px; }
.HC-Scroll{ margin-left: 40px; }

  .Frame .Frame-Text,
  .Frame--flip .Frame-Text {
    left: 20px;
    right: 20px;
    text-align: left;
    width: auto;
  }

  .Frame .ArtSwap,
  .Frame--flip .ArtSwap {
    left: 20px;
    right: 20px;
    width: auto;
  }
}