:root {
  --landing-primary: var(--syn-ink);
  --landing-primary-hover: var(--syn-blue);
}

/* body.landing moved to Spa/styles/shell.css, and is down to `overflow-x: hidden` there. The vertical half
   was what stopped the signed-out screens from scrolling; the horizontal clamp is kept. */

  body:after {
    content: url('Images/bg8.webp');
    display: none;
  }

h1.login {
  font-size: calc(16pt + 2vw);
  font-family: Unbounded !important;
  color: var(--syn-blue);
  background: linear-gradient(105deg, var(--syn-navy), var(--syn-blue));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 0.6em;
}

#Hero_Section {
  position: fixed;
  left: 0;
  top: 0;
  height: 100vh;
  width: 80vw;
}

  #Hero_Section::before {
    content: '';
    -webkit-backdrop-filter: sepia(0.3);
    backdrop-filter: sepia(0.3) brightness(0.8) saturate(0.6);
    position: fixed;
    width: 90vw;
    height: 120vh;
  }

  #Hero_Section::after {
    content: '';
    background: url('Images/bg8.png');
    background-size: 100% 100% !important;
    position: fixed;
    left: 0;
    top: 0;
    height: 100%;
    width: 80%;
    z-index: -1;
    /*animation: imagePan 70s infinite linear;*/
  }

/* #Login_Section and #Content_Body moved to Spa/styles/shell.css. #Login_Section was a fixed, full-viewport
   box that was simultaneously the wrapper and the painted backdrop - the reason the document could not
   scroll - and #Content_Body was the inner scroller that stood in for it. The two roles are separate
   elements now and the scrolling is the document's.
   #Content_Footer is gone outright: LandingLayout rendered it empty, and nothing else in the repository
   referenced it (grep over Spa/, App.aspx and Content/ found only that element and this rule). */


.content-section-contrast {
  position: relative;
  background: linear-gradient(358deg, var(--syn-navy), var(--syn-blue));
  border-radius: 20px;
  width: fit-content;
  height: fit-content;
  padding: 30px;
  border: 1px solid grey;
}


/*Form*/

/* .form-textbox-caption, .form-textbox, `.form-textbox input` and `.form-textbox *` moved to
   Spa/styles/signin.css, alongside the card they sit in. */

/* .form-textbox-focused was here. Dead: it matches nothing in Spa/, App.aspx or Reporting/. */

.form-hyperlink {
  font-size: 1.5em;
  color: darkslateblue !important;
}

/* There used to be a second .form-button definition here - a black, 50px-top-margin button in Josefin Sans.
   Content/Style.css:863 defines .form-button too, and this file loads after it (App.aspx:33 against :31), so
   the landing definition was silently winning on the authenticated screens as well: every Save, Edit and
   Cancel button in the application was painted by the landing page's rule. Rather than rename it and keep two
   looks, it is gone - the landing screens now use the same primary button as everything else, which is the
   point of having one. AppButton in Spa/ui maps every screen's intent onto these classes.

   .form-button-outline stays: it is the landing family's secondary button and has no counterpart in
   Style.css. */
.form-button-outline {
  background: inherit;
  border: 3px ridge var(--landing-primary) !important;
  color: var(--landing-primary);
  transition: 0s;
}

  .form-button-outline:hover {
    background: var(--landing-primary);
    color: var(--bg-primary);
  }


.new-user-button {
  width: fit-content !important;
  margin: auto !important;
  display: block !important;
  border-radius: 4px;
}

  .new-user-button * {
    font-family: 'Bebas Neue' !important;
    letter-spacing: 2.5px;
    font-size: 0.95em;
  }

  /* The cookie consent strip - container, text and both buttons - moved to Spa/styles/cookie.css. The
     ASPxButton markup that used to be quoted here in a comment is recorded on Spa/ui/CookieBanner.tsx,
     which is the live markup. */

/* Hero Section */

.hero-section {
  position: relative;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 50px;
  top: 25%;
  transform: translateY(-50%);
}

.hero-content h1, h1.hero {
  font-size: 3.7rem !important;
  color: var(--syn-ink);
  margin-bottom: 20px;
}

.hero-content p {
  font-size: 1.4rem;
  color: var(--syn-cream);
  margin: auto;
  max-width: 600px;
}

.hero-images {
  position: relative;
  display: inline-block;
  width: calc(25% - 51px);
  padding-inline: 10px;
  max-width: 400px; /* Adjust based on your images' size */
  margin-top: 30px;
}

  .hero-images .hexagram {
    width: calc(100% - 20px);
    position: absolute;
    opacity: 0;
  }


.hero-images1 .hexagram {
  animation: imageFadeInOut calc(7s * 64) infinite cubic-bezier(.24,.6,.33,1.13);
}

.hero-images2 .hexagram {
  animation: imageFadeInOut2 calc(9s * 64) infinite cubic-bezier(.24,.6,.33,1.13);
}

.hero-images3 .hexagram {
  animation: imageFadeInOut3 calc(4.8s * 64) infinite cubic-bezier(.24,.6,.33,1.13);
}

.hero-images4 .hexagram {
  animation: imageFadeInOut3 calc(2.6s * 64) infinite cubic-bezier(.24,.6,.33,1.13);
}

.hero-images1 div:nth-child(n) {
  animation-delay: calc(var(--nth-child) * 7s - 7s);
}

.hero-images2 div:nth-child(n) {
  animation-delay: calc(var(--nth-child) * 9s - 9s);
}

.hero-images3 div:nth-child(n) {
  animation-delay: calc(var(--nth-child) * 4.8s - 4.8s);
}

.hero-images4 div:nth-child(n) {
  animation-delay: calc(var(--nth-child) * 2.6s - 2.6s);
}

.hero-images :nth-child(1) {
  --nth-child: 1
}

.hero-images :nth-child(2) {
  --nth-child: 2
}

.hero-images :nth-child(3) {
  --nth-child: 3
}

.hero-images :nth-child(4) {
  --nth-child: 4
}

.hero-images :nth-child(5) {
  --nth-child: 5
}

.hero-images :nth-child(6) {
  --nth-child: 6
}

.hero-images :nth-child(7) {
  --nth-child: 7
}

.hero-images :nth-child(8) {
  --nth-child: 8
}

.hero-images :nth-child(9) {
  --nth-child: 9
}

.hero-images :nth-child(10) {
  --nth-child: 10
}

.hero-images :nth-child(11) {
  --nth-child: 11
}

.hero-images :nth-child(12) {
  --nth-child: 12
}

.hero-images :nth-child(13) {
  --nth-child: 13
}

.hero-images :nth-child(14) {
  --nth-child: 14
}

.hero-images :nth-child(15) {
  --nth-child: 15
}

.hero-images :nth-child(16) {
  --nth-child: 16
}

.hero-images :nth-child(17) {
  --nth-child: 17
}

.hero-images :nth-child(18) {
  --nth-child: 18
}

.hero-images :nth-child(19) {
  --nth-child: 19
}

.hero-images :nth-child(20) {
  --nth-child: 20
}

.hero-images :nth-child(21) {
  --nth-child: 21
}

.hero-images :nth-child(22) {
  --nth-child: 22
}

.hero-images :nth-child(23) {
  --nth-child: 23
}

.hero-images :nth-child(24) {
  --nth-child: 24
}

.hero-images :nth-child(25) {
  --nth-child: 25
}

.hero-images :nth-child(26) {
  --nth-child: 26
}

.hero-images :nth-child(27) {
  --nth-child: 27
}

.hero-images :nth-child(28) {
  --nth-child: 28
}

.hero-images :nth-child(29) {
  --nth-child: 29
}

.hero-images :nth-child(30) {
  --nth-child: 30
}

.hero-images :nth-child(31) {
  --nth-child: 31
}

.hero-images :nth-child(32) {
  --nth-child: 32
}

.hero-images :nth-child(33) {
  --nth-child: 33
}

.hero-images :nth-child(34) {
  --nth-child: 34
}

.hero-images :nth-child(35) {
  --nth-child: 35
}

.hero-images :nth-child(36) {
  --nth-child: 36
}

.hero-images :nth-child(37) {
  --nth-child: 37
}

.hero-images :nth-child(38) {
  --nth-child: 38
}

.hero-images :nth-child(39) {
  --nth-child: 39
}

.hero-images :nth-child(40) {
  --nth-child: 40
}

.hero-images :nth-child(41) {
  --nth-child: 41
}

.hero-images :nth-child(42) {
  --nth-child: 42
}

.hero-images :nth-child(43) {
  --nth-child: 43
}

.hero-images :nth-child(44) {
  --nth-child: 44
}

.hero-images :nth-child(45) {
  --nth-child: 45
}

.hero-images :nth-child(46) {
  --nth-child: 46
}

.hero-images :nth-child(47) {
  --nth-child: 47
}

.hero-images :nth-child(48) {
  --nth-child: 48
}

.hero-images :nth-child(49) {
  --nth-child: 49
}

.hero-images :nth-child(50) {
  --nth-child: 50
}

.hero-images :nth-child(51) {
  --nth-child: 51
}

.hero-images :nth-child(52) {
  --nth-child: 52
}

.hero-images :nth-child(53) {
  --nth-child: 53
}

.hero-images :nth-child(54) {
  --nth-child: 54
}

.hero-images :nth-child(55) {
  --nth-child: 55
}

.hero-images :nth-child(56) {
  --nth-child: 56
}

.hero-images :nth-child(57) {
  --nth-child: 57
}

.hero-images :nth-child(58) {
  --nth-child: 58
}

.hero-images :nth-child(59) {
  --nth-child: 59
}

.hero-images :nth-child(60) {
  --nth-child: 60
}

.hero-images :nth-child(61) {
  --nth-child: 61
}

.hero-images :nth-child(62) {
  --nth-child: 62
}

.hero-images :nth-child(63) {
  --nth-child: 63
}

.hero-images :nth-child(64) {
  --nth-child: 64
}

@keyframes imageFadeInOut {

  0% {
    opacity: 0;
  }

  1.4% {
    opacity: 1;
  }

  2.2% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

@keyframes imageFadeInOut2 {

  0% {
    opacity: 0;
  }

  1.4% {
    opacity: 1;
  }

  2.2% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

@keyframes imageFadeInOut3 {

  0% {
    opacity: 0;
  }

  1.4% {
    opacity: 1;
  }

  2.2% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

@keyframes imagePan {
  0% {
    background: url('Images/bg5.webp');
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
    transform: translate3d(0, 0, 0);
  }

  31% {
    background: url('Images/bg5.webp');
  }

  32% {
    -moz-transform: translate(-150px, -80px);
    -ms-transform: translate(-150px, -80px);
    -o-transform: translate(-150px, -80px);
    -webkit-transform: translate(-150px, -80px);
    transform: translate3d(-150px, -80px, 0);
  }

  33% {
    background: url('Images/bg6.webp');
  }

  64% {
    background: url('Images/bg6.webp');
  }

  65% {
    -moz-transform: translate(-30px, -80px);
    -ms-transform: translate(-30px, -80px);
    -o-transform: translate(-30px, -80px);
    -webkit-transform: translate(-30px, -80px);
    transform: translate3d(-30px, -80px, 0);
  }

  66% {
    background: url('Images/bg7.webp');
  }

  98% {
    background: url('Images/bg7.webp');
  }

  99% {
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
    transform: translate3d(0, 0, 0);
  }

  100% {
    background: url('Images/bg5.webp');
  }
}

.sent-link-text {
  font-size: 1.5em;
  color: black !important;
}


/* The two `@media screen and (orientation: ...)` blocks that lived here are gone, wrappers and all. They
   sized the signed-out card and the cookie strip off orientation, which was always the wrong axis: a phone
   held in landscape is 844px wide and was handed the width meant for a desktop, while an iPad held upright
   is 768px wide and got the width meant for a phone. The .signinbox halves went to Spa/styles/signin.css,
   the .cookie-consent-container halves to Spa/styles/cookie.css. Both are sized off viewport width now.

   .signinbox itself was centred with left:50% + translateX(-50%) and offset with top:10%, a percentage
   that had already stopped resolving once the shell stopped being viewport-height. */

.mainscreen-button-grid {
  display: grid;
  position: absolute;
  top: 85%;
  width: 100%;
  margin: auto;
  place-items: center;
}

.mainscreen-button {
  border-radius: 3px;
  background: rgb(var(--btn-primary));
  text-wrap: pretty;
  transition: none;
  border: 1px solid black;
  font-size: 1.1em;
  height: 5vh;
  width: 9vw !important;
  min-width: 140px;
  cursor: default;
}

.mainscreen-button span {
  font-family: Tahoma !important;
  color: var(--bg-primary);
  font-size: 1.2em;
}

.mainscreen-button:not(.dxbDisabled_Office365):hover {
  background: linear-gradient(var(--btn-primary-hover));
}

@media screen and (max-height: 700px) {
  .mainscreen-button-grid {
    top: 78%;
  }
}

@media screen and (max-height: 600px) {
  .mainscreen-button-grid {
    top: 77%;
  }
}

@media screen and (max-height: 500px) {
  .mainscreen-button-grid {
    top: 75%;
  }
}

@media screen and (max-height: 400px) {
  .mainscreen-button-grid {
    top: 76%;
  }
}

@media screen and (max-height: 300px) {
  .mainscreen-button-grid {
    top: 72%;
  }
}

@media screen and (max-width: 500px) {
  .mainscreen-button {
    min-width: 120px;
  }
}

@media screen and (max-width: 400px) {
  .mainscreen-button {
    font-size: 0.8em;
    min-width: 100px;
  }
}

/* A second, near-identical .nav-item was here - same declarations as Content/Home.css's plus
   `font-family: 'Times New Roman' !important`, and it won on source order. Both are now one scoped rule in
   Spa/styles/nav.css. */