:root {
  --purple-light:#6413d6;
  --purple-dark:#5000C8;
  --purple-darker:#1e1030;
  --purple-black:#320064;
  --orange-light:#fcdd34;
  --orange-dark:#fcdd34;
  --white:#ffffff;
  --gray-light:#ddd;
  --gray-midlight:#ccc;
  --gray-mid:#bababa;
  --gray-middark:#222;
  --gray-dark:#1a1a1a;
  --black:#000000;
}

body {
  margin:0;
  font-family:"Segoe UI",Roboto,sans-serif;
  background:var(--gray-mid);
  color:var(--gray-dark);
  line-height:1.6;
  transition:all .1s ease-in-out;
}

header.top-header{
  background:var(--purple-dark);
  color:var(--white);
  padding:0 1.5rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  position:sticky;
  top:0;
  z-index:10;
}

.nowrap {
  white-space: nowrap;
}

.header-left, .header-middle, .header-right{
  display:flex;
  flex: 0 0 auto; /* don’t stretch */
  align-items:center;
}
.header-left{
  align-items:center;
  padding-bottom:7px;
}
.header-middle{
  margin: 0 auto; /* keeps it centered even if sides vary in width */
  text-align:center;
  justify-content:center;
}

header img.header-logo{
  height:45px;
  margin-right:1.5rem;
  flex-shrink:0;
  align-self: flex-end; /* anchors image to bottom of flex container */
}
header /* T T I S Y.com */ span.text-20{font-size:2rem; font-weight: bold; letter-spacing: -.75px; padding:0}
header /* Privatize */ span.text-15{font-size:1.5rem; font-weight: bold; letter-spacing: 0.75px; padding:0}
header /* pure+simple */ span.text-125{font-size:1.25rem; font-weight: bold; letter-spacing:0; padding:.7rem 0 0 .25rem}

.dark-mode-toggle{
  position: relative;
  background:var(--purple-light);
  color:white;
  border: 1px solid var(--orange-light);
  padding: 2px 5px;
  margin:0 15px;
}
.dark-mode{
  background:var(--purple-darker);
  color:var(--gray-midlight);
}

body img.splash-logo{max-width:800px;margin-bottom:0}

.pulse-image {
  animation: slowPulse 60s ease-in-out infinite;
  transform-origin: center;
}

@keyframes slowPulse {
  0%, 100% {transform: scale(.75)}
  50% {transform: scale(1.25) rotate(22deg) translate(7.5%, 15%);}
}

.hero{
  position:relative;
  padding-bottom:3rem;
  color:var(--white);
  text-align:center;
  height:80vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  background:linear-gradient(rgba(222,222,222,.70),rgba(75,0,160,.90)),
  url("images/parcels-pyramid-top-lock.png") center/cover fixed no-repeat;
  overflow:hidden;
}

.hero /* slide text */ h4{font-size:2rem;color:var(--orange-light)}
.hero p{
  font-size:1.1rem;
  color:var(--gray-light);
  max-width:1100px;
  margin:0 auto;
  text-wrap: balance;
}

.textslide {
  display: inline-block;
  position: relative;
}

.textslide span {
  display: inline-block;
  opacity: 0;
  transform: translateX(0);
  animation-fill-mode: forwards;
}

.textslide .left {
	animation: FromLeft 2s ease-out forwards;
}

.textslide .right {
	animation: FromRight 2s ease-out forwards;
    animation-delay:0.8s
}

@keyframes FromLeft {
  0% {
    opacity: 0;
    transform: translateX(-100%);
  }
  100% {
	opacity:1;
	transform:translateX(0)
  }
}

@keyframes FromRight {
  0% {
    opacity: 0;
    transform: translateX(100%);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}


section{
  display:flex;
  align-items:center;
  gap:2rem;
  padding:3rem 1.5rem;
  max-width:1100px;
  margin:0 auto;
  opacity:0;
/*  transform:translateY(40px); */
  animation:fadeUp 4s forwards;
  text-wrap: balance;
}
section .text-block{flex: 1 1 50%;}

section:nth-of-type(odd){
  background:var(--gray-mid);
  flex-direction: row;
  text-align: left;
}
section:nth-of-type(even){
  background:var(--gray-light);
  flex-direction: row-reverse;
  text-align: left;  
}

.dark-mode section:nth-of-type(odd){background:var(--purple-darker);}
.dark-mode section:nth-of-type(even){background:var(--gray-middark);}

/*
section:nth-of-type(2){animation-delay:.2s}
section:nth-of-type(3){animation-delay:.4s}
section:nth-of-type(4){animation-delay:.6s}
section:nth-of-type(5){animation-delay:.8s}
section:nth-of-type(6){animation-delay:1s}
section:nth-of-type(7){animation-delay:1.2s}
section:nth-of-type(8){animation-delay:1.4s}
section:nth-of-type(9){animation-delay:1.6s}
section:nth-of-type(10){animation-delay:1.8s}
*/

@keyframes fadeUp{
  to{opacity:1;transform:translateY(0)}
}

.section-title{
  font-size:1.8rem;
  color:var(--purple-light);
  margin-bottom:1rem;
  text-align:left;
}

.image-block{
  display:flex;
  justify-content:center;
  margin:1.8rem 0;
}

.image-block img{
  width:100%;
  max-width:650px;
  border-radius:12px;
  border:2px solid var(--orange-dark);
}

footer.bottom-footer{
  background:var(--purple-dark);
  color:var(--gray-light);
  justify-content:center;
  padding: .5rem;
}
.footer-img-row{
  display:flex;
  position:relative;
  align-items:center;
  justify-content:center;
}
footer img.footer-logo{
  max-height:50px;
  margin:10px 10px 0 10px
}
.footer-text-row{
  display:flex;
  position:relative;
  align-items:center;
  justify-content:center;
  color:var(--orange-light)
}
.footer-text-row a {
  text-decoration:none;
  color:var(--orange-light);
}
.footer-text-row a:hover {text-decoration:underline}


/* responsive */
@media(max-width:768px){
  header.top-header {
    flex-direction: column;       /* stack left, middle, right */
    align-items: center;          /* center contents */
    text-align: center;
  }

  .header-left, .header-middle, .header-right {
    width: 100%;                  /* full width each */
    justify-content: center;      /* center each row */
  }

  section {
    flex-direction: column;
    text-align: center;
  }
  .image-block img {
    max-width: 90%;
    margin: 1rem auto;
  }
  .text-block {
    width: 100%;
  }
}