/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
   
/* Weclome to our CSS... Good luck */

/* Background try (didn't work) */
body {
  background-image: url("https://strawberrycinnabuns.neocities.org/pics/ironblocks_3D_bg2.jpg");
}








/* Runnin Sillies at the bottom */
.header {
   background: url("https://strawberrycinnabuns.neocities.org/other_gifs/pattern%20539.gif");
	 overflow: hidden;
	 height: 65px;
	 position: relative;
}
 .header div {
	 display: flex;
	 flex-direction: row;
	 justify-content: space-around;
	 align-items: center;
	 overflow: hidden;
	 width: 100%;
	 height: 65px;
	 transform: translate(100%, 0);
}
 .header div img {
	 height: 60px;
}
 .header .ticker-wrapper__first-half, .header .ticker-wrapper__second-half {
	 display: flex;
	 flex-direction: row;
	 justify-content: space-around;
	 align-items: center;
	 position: absolute;
	 top: 0;
	 right: 0;
	 animation: ticker 30s infinite linear forwards;
}
 .header .ticker-wrapper__second-half {
	 animation: 30s ticker 15s infinite linear forwards;
}
 @keyframes ticker {
	 0% {
		 transform: translate(100%, 0);
	}
	 50% {
		 transform: translate(0, 0);
	}
	 100% {
		 transform: translate(-100%, 0);
	}
}
/* Runnin Sillies at the bottom */
















/* TESTING */
.images-marquee {
  --animation-speed: 50s;
  
  .container {
    position: relative;
    overflow: hidden;

    &:before,
    &:after {
      content: "";
      position: absolute;
      z-index: 1000;
      top: 0;
      left: 0;
      width: 15rem;
      height: 100%;
      background-image: linear-gradient(to right, rgba(255, 255, 255, 1), transparent);
    }
    &:after {
      left: auto;
      right: 0;
      background-image: linear-gradient(to left, rgba(255, 255, 255, 1), transparent);
    }
  }

  .marquee {
    position: relative;
    display: flex;
    overflow: hidden;
    user-select: none;

    &.hover-pause:hover .marquee-content {
      animation-play-state: paused;
    }
  }

  .marquee-content {
    flex-shrink: 0;
    display: flex;
    justify-content: space-around;
    animation: scroll var(--animation-speed) linear infinite;

    /* Pause animation when reduced-motion is set */
    @media (prefers-reduced-motion: reduce) {
      .marquee-content {
        animation-play-state: paused !important;
      }
    }

    li {
      display: flex;
      flex-shrink: 0;
      flex-direction: column;
      justify-content: center;
      width: 20rem;

      img {
        max-width: 100%;
        height: 10rem;
      }
    }
  }

  @keyframes scroll {
    0% {
        transform: translate3d(0, 0, 0);
    }

    100% {
        transform: translate3d(-100%, 0, 0);
    }
  }

/* TESTING */

























/* Tryin to make space between clocks... */
.container {
  display: flex;
  gap: 1rem;
  border: 1px solid var(--color-primary);
  background: var(--color-primary-x-light);
}

.box:nth-child(3) {
  margin-inline-start: auto;
}


/* For clocks spacing */
.parent {
  position: relative; /* establish positioning context */
  width: 300px;
  height: 150px;
  background: #f0f0f0;
}

.abs-child {
  position: absolute; /* removed from normal flow, positioned relative to .parent */
  left: 40px;         /* 40px from .parent's left padding edge */
  top: 20px;          /* optional: distance from top of .parent */
  background: #cce;
  padding: 6px;
}