/* ANIMATRIX.CSS */

/* Vertical Scroller for Notifications */
jar {
    display: block;
    position: relative;
    background: 0;
    width: 100%;
    height: auto;
    min-height: 80px;
    padding: 0 0;
    margin: 0 auto;
    text-align: center;
    align-items:center;
    clear: both;
    overflow: hidden;}

jar.autoY {
    mask: linear-gradient(0deg, transparent, white 10%, white 90%, transparent);
    -webkit-mask: linear-gradient(0deg,transparent,white 10%,white 90%,transparent);
    height: 333px; /* Set desired display height */
}
jar.autoY.header {
    mask: linear-gradient(0deg, transparent, white 17%, white 83%, transparent);
    -webkit-mask: linear-gradient(0deg,transparent,white 17%, white 83%,transparent);
    height: 103px; /* Set desired display height */
    margin: -11px auto 0 auto;
}
jar.autoY.body {
    mask: linear-gradient(0deg, transparent, white 19%, white 91%, transparent);
    -webkit-mask: linear-gradient(0deg,transparent,white 19%,white 91%,transparent);
    height: 100px; /* Set desired display height */
}
jar.autoY.clouds {
    mask: linear-gradient(0deg, transparent, white 7%, white 93%, transparent);
    -webkit-mask: linear-gradient(0deg,transparent,white 7%,white 93%,transparent);
    height: 100vh; /* Set desired display height */
    min-height: 555px;
}

jar > liner {
    display: block;
    position: relative;
    background: 0;
    background-color: rgba(255, 255, 255, 0);
    width: 100%;
    max-width: 1200px;
    height: auto;
    padding: 0 0;
    margin: 0 auto;
    text-align: center;
    align-items:center;
    clear: both;
    content: "";
    overflow: hidden;
}
liner.autoY {
    white-space: nowrap;
    will-change: transform;
}

liner.clouds.autoY {
    display: flex;
    flex-wrap: wrap;
}

.jar-item {
    display: block;
    margin: 0 auto;
    width: auto;}

#notify_jar > liner > a {
    background-color: none;
    background-image: linear-gradient(to right, transparent, #fed, white, #fed, transparent, transparent, #efd, white, #efd, transparent, transparent, #efd, white, #efd, transparent);
    align-content: center;
    min-height: 77px;
    padding: 0 0;
    width: auto;
}
#notify_jar > liner > a > p {
    font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif";
    color: #fed;
    text-shadow: 0 -1px 3px silver, 0 2px 4px darkslategray, 0 1px 5px white, 0 0 7px white, -3px -2px 3px goldenrod, 3px -2px 3px goldenrod, 3px 3px 3px #007aba, -3px 3px 3px #007aba, -2px -2px 4px white, 2px -2px 4px white, 2px 2px 4px silver, -2px 2px 4px silver, 0px 7px 11px #007aba, 0px 0px 21px white, 0 0 33px violet;
    font-size: 1.5rem;
    font-weight: 600;
    width: auto;
    white-space: pre-wrap;
}

.clouds.jar-item:hover {
    background-image: linear-gradient(to bottom, #007aba,transparent, #def, #fed, #fed);}

/* Horizontal Sroller for Link Buttons */
tray {
    display: block;
    margin: 0 auto;
    padding: 0;
}

tray.friends {margin: 0 0 1em 0;}

tray > liner {
    display: inline-flex;
    position: relative;
    background: 0;
    background-color: rgba(255, 255, 255, 0);
    width: auto;
    max-width: 1200px;
    height: auto;
    padding: 17px 0;
    margin: 0 auto;
    text-align: center;
    align-items:center;
    clear: both;
    content: "";
    overflow: visible;
}

tray.autoX {
    background: none;
    width: 94vw; /* Adjust as needed */
    max-width: 1200px;
    overflow: hidden;
}

liner.autoX {
    flex-wrap: wrap;
}

/* Pause on hover */
tray.autoX:hover, liner.autoX:hover {
    animation-play-state: paused !important;
}

tray.autoX[data-animated="true"] {
    -webkit-mask: linear-gradient(90deg,transparent,white 3%,white 97%,transparent);
    mask: linear-gradient(90deg, transparent, white 3%, white 97%, transparent);
}

tray.autoX[data-animated="true"] liner.autoX {
    flex-wrap: nowrap;
    animation: scroll var(--_animation-duration, 33s)
    var(--_animation-direction, forwards) linear infinite;
}

tray.autoX[data-direction="right"] {
  --_animation-direction: reverse;
}

tray.autoX[data-direction="left"] {
  --_animation-direction: forwards;
}

tray.autoX[data-speed="lightspeed"] {
  --_animation-duration: 1.1s;
}

tray.autoX[data-speed="ultrasonic"] {
  --_animation-duration: 3.3s;
}

tray.autoX[data-speed="fastest"] {
  --_animation-duration: 7s;
}

tray.autoX[data-speed="faster"] {
  --_animation-duration: 11s;
}

tray.autoX[data-speed="fast"] {
  --_animation-duration: 17s;
}

tray.autoX[data-speed="med"] {
  --_animation-duration: 24s;
}

tray.autoX[data-speed="slow"] {
  --_animation-duration: 33s;
}

tray.autoX[data-speed="slower"] {
  --_animation-duration: 49s;
}

tray.autoX[data-speed="slowest"] {
  --_animation-duration: 69s;
}

tray.autoX[data-speed="ticktock"] {
  --_animation-duration: 88s;
}

tray.autoX[data-speed="growing"] {
  --_animation-duration: 144s;
}

.tray-item {
    display: inline-block;
    margin: 0 auto;
    width: auto;}

.friends.tray-item:hover {
    background-image: linear-gradient(to bottom, #007aba, transparent, rgba(255, 255, 255, .77), #FDE08D, #FDE08D);}

@keyframes scroll {
  to {
    transform: translate(-100%);
  }
}

/* 3D Sroller for Visual Effects */
scroll.autoZ {
    min-width: 333px;
    max-width: 555px;
    height: 80px; /* Set desired display height */
    border: 1px solid silver;
    
}

sol.autoZ {
    position: absolute;
    animation: scroll3D 7s infinite; /* Adjust time for speed */
    
}

sol.autoZ div {
    height: 80px; /* Height of each item */
    padding: 10px;
    
}

@keyframes scroll3D {
    0% { top: 0px; }
    /* Adjust percentages based on number of items
    3% { top: 0px; }
    28% { top: -80px; }
    42% { top: -160px; }
    56% { top: -240px; }
    70% { top: -320px; }
    84% { top: -400px; }
    98% { top: -480px; } */
    100% { top: -728px; }
}

/* ------------ SLIDESHOW CODE ------------- */

.mySlides1, .mySlides2 {display: none}

/* Slideshow container */
slideshow {
    display: block;
    max-width: 1080px;
    position: relative;
    margin:.33px auto 69px auto;
    content: "";
    clear: both;
    height: auto;
    overflow: visible;
}

.slideshow-auto {
    display: block;
    width: 100%;
    position: relative;
    margin:0 auto 0 auto;
    content: "";
    clear: both;
    height: auto;
    overflow: visible;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a grey background color */
.prev:hover, .next:hover {
  background-color: #f1f1f1;
  color: black;
}

/* The dots/bullets/indicators */
.dot, .dot-welcome, .dot-featured {
  height: 17px;
  width: 17px;
  margin: 0 3px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.dot-box {position: absolute;bottom: 0;width: 100%; text-align: center;height: auto;padding: 17px;
margin-bottom: -69px;}

.active {
  background-color: #717171;
}

/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: .33s;
}

div.fade {
    background-attachment: local;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    aspect-ratio:7/3;
    height: auto;
    position: relative;
    overflow: hidden;
}


@keyframes fade {
  from {opacity: .77} 
  to {opacity: 1}
}

/* --- Scrolling Background --- */
harpazo {
    --imageHeight: 1024px;
    background: url("/images/In-The-Clouds.jpg") repeat;
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    height: 100%;
    animation: bgHarpazo 69s linear reverse infinite;
    opacity: 69%;
    box-shadow: 0px 26px 69px 7px white, 0px -3px 11px 3px white, inset 0px -33px 69px 3px white, inset 0px 3px 11px 3px white;
}

@keyframes bgHarpazo { 
  from {
    transform: translateY(calc(var(--imageHeight) * 0));
  }
  to {
    transform: translateY(calc(var(--imageHeight) * -1));
  }
}

@keyframes scrollHorizontal {
    0% { transform: translateX(25%); }
    100% { transform: translateX(-25%); } /* Scrolls half the width if items are duplicated */
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .text {font-size: 11px}
}

@media (max-width: 1080px) {
    header {font-size: 26px;}
    article.harpazo {max-width: 83%;}
    article.welcome {margin-top: 77px;}
    article {padding: .7em 3%;}
}
@media (max-width: 821px) {
    header {font-size: 21px;}
    article {padding: .7em 2%;}
}


@media (min-width: 640px) {
    .Mob {display: none !important;}
    main {padding-top:0px !important;}
}
@media (max-width: 640px) {
    div.fade {aspect-ratio:2/1;}
    iframe.hero {aspect-ratio:3/2;padding: .17em 0;}
    main {padding-top:0px !important;}
    article, iframe.hero {
    border-top-left-radius: 50% 7px !important;
    border-top-right-radius: 50% 7px !important;
    border-bottom-left-radius: 50% 7px !important;
    border-bottom-right-radius: 50% 7px !important;}
    h1.splash {font-size: 1.5em;}
    article.hero {padding: 1em 0;}
    article > h3 {font-size: 2.0em; padding:.21em 0 .33em 4%;}
    article > h5 {font-size: 1.2em; padding: 1.44em 2% .77em 2%;}
    article > hi {font-size: 1.7em;padding-top: .5em;}
    article > slideshow > h5 {font-size: 1.1em;}
    article > h7 {font-size: .97em;}
    article.hero > h3 {font-size: 1.7em;}
    article.hero > p {font-size: .9em;}
    article.harpazo {max-width: 88%;}
    jar.autoY.clouds {height:144vh;}
    header {font-size: 17px;}
    .noTab {display: none !important;}
    h6.slideText {font-size: 2em;}
    p.slideCap {font-size: 1.2em;}
    article {padding: .7em 1% !important;}
}

@media (max-width: 480px) {
    div.fade {aspect-ratio:8/5;}
    sol {padding: 0 0%;}
    .noMob {display: none !important;}
    h1.splash {font-size: 1.3em;}
    article {max-width: 96%;padding: .7em 0 !important;}
    article > h3 {font-size: 1.44em; padding:.55em 0 .55em 3%;}
    article > h5 {font-size: 1.0em; padding: 2.1em 1% .77em 1%;}
    article > hi {font-size: 1.3em;padding-top: .7em;}
    article > slideshow > h5 {font-size: 1em;}
    article > h7 {font-size: .88em;}
    article.hero > h3 {font-size: 1.4em;}
    article.hero > p {font-size: .8em;}
    .p-green, .p-red {font-size: 1.3em;}
    h6.slideText {font-size: 1.3em;}
    p.slideCap {font-size: 1em;}
}


@media (max-width: 360px) {
    
}
/* ------------ Animated Gradient ----- */
@property --startColor {
  syntax: "<color>";
  initial-value: ghostwhite;
  inherits: false;
}

@property --middleColor {
  syntax: "<color>";
  initial-value: transparent;
  inherits: false;
}

@property --endColor {
  syntax: "<color>";
  initial-value: rgba(218,165,32, 0.77);
  inherits: false;
}

@keyframes gradient {
  0% {
    --startColor: ghostwhite;
    --middleColor: transparent;
    --endColor: rgba(218,165,32, 0.77);
  }
    
  50% {
    --startColor: ghostwhite;
    --middleColor: transparent;
    --endColor: rgba(218,165,32, 0.55);
  }
  100% {
    --startColor: ghostwhite;
    --middleColor: transparent;
    --endColor: rgba(218,165,32, 0.77);
  }
}
.ex1 {
  background: linear-gradient(var(--startColor), var(--middleColor), var(--endColor));
  animation: gradient 5s linear infinite;
}
#grad1 {
  height: auto;
}

/* --- Define Colors ---- */
@property --my-bg-color {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}

.fresh {
    --my-bg-color: #ff6347;
}

.nature {
    --my-bg-color: rgb(120, 180, 30);
}

/* general styles */
:root {
  --clr-neutral-100: hsl(0, 0%, 100%);
  --clr-primary-100: hsl(205, 15%, 58%);
  --clr-primary-400: hsl(215, 25%, 27%);
  --clr-primary-800: hsl(217, 33%, 17%);
  --clr-primary-900: hsl(218, 33%, 9%);
}

.tag-list {
  margin: 0;
  padding-inline: 0;
  list-style: none;
}

.tag-list li {
  padding: 1rem;
  background: var(--clr-primary-400);
  border-radius: 0.5rem;
  box-shadow: 0 0.5rem 1rem -0.25rem var(--clr-primary-900);
}

/* for testing purposed to ensure the animation lined up correctly */
.test {
  background: red !important;
}

/* Login Form & Other Veils */