/* --- BASE STYLES --- */
    * { margin:0; padding:0; box-sizing:border-box; font-family: 'Inter', sans-serif; }
	
	:root {
		  --jupiter-plugin-primary: 199, 242, 132;
		  --jupiter-plugin-background: 20, 20, 20;
		  --jupiter-plugin-primary-text: 232, 249, 255;
		  --jupiter-plugin-warning: 251, 191, 36;
		  --jupiter-plugin-interactive: 33, 42, 54;
		  --jupiter-plugin-module: 20,20,20;
		}

    body {
      min-height: 100vh;
      min-width: 300px;
      background: #111;
      padding: 1rem;
      display: block;
    }

    .page-container {
      display:grid;
      grid-template-columns:1fr;
      gap:1rem;
      width:100%;
      max-width:1000px;
      margin:0 auto;
    }

    .card {
      position:relative;
      overflow:hidden;
      border-radius:1rem;
      min-height:220px;
      background: rgba(20,20,20,0.9);
      box-shadow:0 4px 15px rgba(0,0,0,0.2);
      padding: 1rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
    }
   
    .slogan-card {
      min-height: 120px;
      justify-content: center;
    }

    #slogan-carousel {
      transition: opacity 2s ease-in-out;
      opacity: 0;
      animation: color-change 4s infinite ease-in-out;
    }

    .card canvas {
      position:absolute;
      top:0; left:0;
      width:100%; height:100%;
      z-index:0;
    }

    .card-content {
      position:relative;
      z-index:1;
      height:100%;
      width: 100%;
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      text-align:center;
      padding:1rem;
      color:#fff;
    }
   
    h1, h2 { color: #fff; }
   
    .main-title {
      font-size: 1.8em;
      margin-bottom: 20px;
    }

    #weekNumberDisplay {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 10px;
      margin-bottom: 20px;
      height: auto;
      cursor: default;
    }
   
    .digit {
      font-size: 5em;
      font-weight: bold;
      display: inline-block;
      line-height: 1;
      padding: 0 5px;
      animation: random-pulse 3s infinite ease-in-out, color-change 4s infinite ease-in-out;
    }

    .countdown-value {
      font-size: 3em;
      font-weight: bold;
      text-align: center;
      margin: 10px 0;
      animation: random-pulse 3s infinite ease-in-out, color-change 4s infinite ease-in-out;
    }

    .time-display {
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 1.2em;
      font-weight: bold;
      margin-top: 10px;
    }
   
    .time-display span {
      display: flex;
      align-items: center;
      font-size: 1.5em;
    }

    .time-display .value, .time-display .label, .ampersand {
      color: #14F195;
      transition: color 0.5s;
    }
   
    .time-display.completed .value, .time-display.completed .label, .time-display.completed .ampersand {
      color: #8B0000;
    }
   
    .time-display .value {
      font-size: 1.8em;
      margin: 0 5px;
    }

    .time-display .label {
      font-size: 0.7em;
      margin-left: 2px;
    }

    .ampersand {
      font-size: 1.5em;
      margin: 0 10px;
    }

    .progress-bar-container {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 15px;
      background-color: #14F195;
      border-bottom-left-radius: 1rem;
      border-bottom-right-radius: 1rem;
      overflow: hidden;
      z-index: 1;
      background-image: linear-gradient(90deg, #14F195, white, #14F195);
      background-size: 200% 100%;
      animation: move-gradient 5s linear infinite;
    }
   
    .progress {
      position: absolute;
      bottom: 0;
      left: 0;
      height: 100%;
      background: #8B0000;
      transition: width 0.5s ease-in-out;
      z-index: 2;
    }
   
    .markers {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 4;
      display: flex;
      justify-content: space-between;
      padding: 0;
    }

    .day-marker {
      width: 4px;
      height: 4px;
      background-color: black;
      border-radius: 50%;
      margin-top: auto;
      margin-bottom: auto;
      margin-left: -2px;
      margin-right: -2px;
    }

    .day-marker:first-child { margin-left: 0; }
    .day-marker:last-child { margin-right: 0; }
   
    .progress-bar-container.completed .progress { width: 100% !important; }
    .progress-bar-container.completed { background-color: #8B0000; animation: none; }

    .data-info-container {
      position: relative;
      z-index: 1;
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 1rem;
    }

    .transition-section {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.5rem;
      margin-bottom: 1rem;
    }
   
    .transition-icon {
      width: 4em;
      height: 4em;
      opacity: 0.5;
      animation: pulse 2s infinite; 
    }
   
    .transition-slogan { font-size: 1.5em; }

    .data-info-wrapper {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      position: relative;
    }
        
    .data-index-display {
        font-size: 1.2em;
        color: #ccc;
        font-weight: bold;
        text-align: center;
        margin: 0.3rem 0;
        cursor: pointer;
        opacity: 0.5;
    }

    .data-info {
      min-height: 120px;
      flex-grow: 1;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      width: 100%;
    }
   
    .nav-arrow {
      background: transparent; border: none; color: #9945FF; cursor: pointer; padding: 0 10px;
      transition: color 0.3s, transform 0.2s; outline: none; flex-shrink: 0; display: flex;
      align-items: center; justify-content: center;
    }

    .nav-arrow:disabled {
      color: #444; cursor: not-allowed; transform: none; opacity: 0.5;
    }

    .nav-arrow svg { width: 40px; height: 40px; }
    .nav-arrow:hover:not(:disabled) { color: #14F195; transform: scale(1.1); }
   
    .nav-arrows-mobile { display: none; }
    #prevBtnDesktop, #nextBtnDesktop { display: flex; }

    .data-image-wrapper {
      position: relative; width: 80px; height: 80px; margin-right: 20px;
      flex-shrink: 0; display: flex; align-items: center; justify-content: center;
    }
   
    .data-image, .data-image-placeholder {
      position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    }
   
    .data-image { object-fit: contain; cursor:pointer; }
    .data-image-placeholder svg { width: 100%; height: 100%; }

    .data-content {
      display: flex; flex-direction: column; text-align: left;
      justify-content: center; flex-grow: 1;
      min-width: 0; 
    }

    .data-info h2 { font-size: 1.6em; color: #fff; margin-bottom: 0; }
    #dataTicker { font-size: 1.2em; color: #ccc; margin: 0; display: inline; margin-left: 8px; }
    #dataAddress {
      font-size: 1.2em; color: #ccc; margin-top: 5px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 350px; 
    }

    .data-info h2.clickable,
    .data-info .data-content #dataTicker,
    .data-info p.clickable,
    .data-info .data-image-wrapper,
    .data-info-container #dataIndexDisplay {
        cursor: pointer;
		
    }
	.data-content #dataAddress {
		cursor: copy;
	}
    .data-info h2.clickable:hover, .data-info p.clickable:hover { color: #ddd; }
   
    #copyNotification {
      position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
      background-color: rgba(0, 0, 0, 0.7); color: #fff; padding: 10px 20px;
      border-radius: 5px; opacity: 0; transition: opacity 0.5s ease-in-out; z-index: 10;
    }
   
    .disclaimer, .disclaimersmall {
      font-size: 0.9em;
      color: #ccc;
	  font-weight: bold;
      text-align: center;
      line-height: 1.5;
      padding: 0 1rem;
	  opacity: 0.5;
    }
    .disclaimersmall {
      font-size: 0.6em;
      color: #ced;
      text-decoration:none;
    }

    .social-icons-container {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 0.5rem;
        width: 100%;
        flex-wrap: wrap;
    }

    .social-icon img, .social-icon svg {
        width: 2.2em;
        height: 2.2em;
        filter: invert(1);
        transition: transform 0.2s ease-in-out, filter 0.3s ease-in-out;
    }

    .social-icon:hover img {
        transform: scale(1.15);
    }
    
    .video-container {
        position: relative;
        width: 100%;
        height: 100%;
        min-height: 300px;
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        border-radius: 1rem;
    }

    .video-container .youtube-thumbnail {
        width: 100%;
        height: 100%;
        object-fit: cover;
        position: absolute;
        top: 0;
        left: 0;
        transition: transform 0.3s ease;
    }

    .video-container:hover .youtube-thumbnail {
        transform: scale(1.05);
    }

    .video-container .play-button {
        position: absolute;
        width: 90px;
        height: 60px;
        background-color: rgba(0, 0, 0, 0.6);
        border-radius: 12px;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: background-color 0.3s ease;
        z-index: 1;
    }

    .video-container:hover .play-button {
        background-color: rgba(255, 0, 0, 0.8);
    }

    .video-container .play-button::after {
        content: '';
        display: block;
        width: 0;
        height: 0;
        border-left: 24px solid white;
        border-top: 14px solid transparent;
        border-bottom: 14px solid transparent;
        margin-left: 5px;
    }

    .video-container iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        min-height: 300px;
        object-fit: cover;
    }

    @keyframes random-pulse {
      0%, 100% { transform: scale(1.03); }
      50% { transform: scale(0.97); }
    }

    @keyframes color-change {
      0% { color: #9945FF; }
      25% { color: #14F195; }
      50% { color: #8E44AD; }
      75% { color: #3498DB; }
      100% { color: #9945FF; }
    }
    
    @keyframes move-gradient {
      0% { background-position: 200% 0; }
      100% { background-position: -200% 0; }
    }

    @keyframes pulse {
      0% { transform: scale(1) rotate(0deg); }
      50% { transform: scale(1.4) rotate(180deg); }
      100% { transform: scale(1) rotate(360deg); }
    }

    .card:not(.is-visible) *,
    body.tab-inactive * {
        animation-play-state: paused !important;
    }

    @media (min-width: 769px) {
        .card {
            backdrop-filter: blur(8px);
        }
    }
    
    @media (min-width: 481px) {
      .digit { font-size: 10em; }
    }

    @media (max-width: 480px) {
      body { padding: 1.2em; }
      .card { padding: 0.5rem; min-height: 180px; }
      .slogan-card { min-height: 100px; }
      .main-title { font-size: 1.2em; margin-bottom: 10px; }
      #weekNumberDisplay { margin-top: 5px; margin-bottom: 10px; }
      .digit { font-size: 7em; }
      .countdown-value { font-size: 2em; }
      .time-display { font-size: 0.9em; }
      .time-display .value { font-size: 1.2em; }
      .ampersand { font-size: 1em; margin: 0 5px; }
     
      .data-info-wrapper { flex-direction: column; justify-content: center; }
      #prevBtnDesktop, #nextBtnDesktop { display: none; }
      .nav-arrows-mobile { display: flex; justify-content: center; width: 100%; margin-bottom: 1rem; }
      .nav-arrow svg { width: 30px; height: 30px; }
     
      .data-info { min-height: 100px; flex-direction: column; text-align: center; padding: 0.5rem; }
      .data-image-wrapper { width: 120px; height: 120px; margin-right: 0; margin-bottom: 10px; }
      
      .data-content { align-items: center; text-align: center; }
      #dataAddress {
          white-space: normal;
          word-wrap: break-word;
          max-width: 100%;
          text-align: center;
      }

      .data-info h2 { font-size: 1.8em; display: block; }
      #dataTicker { font-size: 1.5em; display: block; margin-left: 0; margin-top: 4px; }
     
      .progress-bar-container { height: 10px; }
      .progress { height: 10px; }

      .transition-section {
          gap: 0.5rem;
          margin-bottom: 1.5rem;
      }
      .transition-icon {
          width: 3em;
          height: 3em;
      }
      .transition-slogan { font-size: 1.2em; }
    }

    @media (max-width: 320px) {
      .digit { font-size: 7em; }
      .progress-bar-container { height: 8px; }
      .progress { height: 8px; }
    }
	
	
.footer-credit {
    display: flex;
    flex-wrap: wrap; /* Allows items to wrap on smaller screens */
    justify-content: center;
    align-items: center;
    gap: 0.5rem 1.5rem; /* Adds space between items and rows */
    width: 100%;
}

.credit-item {
    display: flex;
    align-items: center;
    gap: 0.5rem; /* Space between icons and text */
}

.footer-icon {
    width: 1.1em; /* Adjust size as needed */
    height: 1.1em;
    filter: invert(75%); /* Makes the icons a nice grey color */
    transition: filter 0.3s ease;
}

.footer-credit a:hover .footer-icon,
.credit-item a:hover {
    filter: invert(100%); /* Makes icons and text white on hover */
    text-decoration: none; /* Optional: removes underline from links on hover */
}


#dataChart {
    width: 100%; 
	height: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.5rem;
    box-sizing: border-box;
    color: #fff; 
    background-color: rgba(255, 255, 255, 0.00); 
    border-radius: 0.8rem;
    font-size: 1.5em; 
	padding-top: 3rem;
}

#dataChart iframe {
    display: block;
    width: 100%;
    height: 220%;
    border: none;
    border-radius: 0.8rem;
	padding-top: 3rem;
	pointer-events: none;
    cursor: not-allowed;
}