/* --- CLOCK JASONHOBLIN.ME CSS --- */ 

.brown {background-color:#8B4513;}

body {
        align-items:center; text-align:center;
        font-family:'Lato', sans-serif;  background-color:#343434;
        display:flex; flex-direction:column;
        background-color: #442300; }
.clock-wrap {
                color: antiquewhite; font-size:12px; 
                border:2px solid antiquewhite; border-radius:8px; 
                margin:40px 40px 20px 40px; padding:10px 10px 10px 10px; }

button { margin:5px 5px; }
select { margin:12px 5px; }

/* --=== FRAME  ===-- */
        .clock-table { 
                color: antiquewhite; font-size:12px; 
                border:1px solid antiquewhite; border-radius:8px; margin:8px 0px 8px 0px; }
        .rowitems { display:flex; flex-direction:row; flex-wrap: wrap; justify-content: center;
            margin:5px 5px 5px 5px; }

/* --=== DATE ===-- */
        .clock-date { 
                color: antiquewhite; font-size:28px; 
                border:0px solid antiquewhite; border-radius:8px; margin:16px 0px 0px 0px; }

/* --=== WORLD ===-- */
        .clock-world { 
                color: antiquewhite; font-size:12px; 
                border:0px solid antiquewhite; border-radius:8px;  padding:8px; }
        .clock-world-timezone {
                color: antiquewhite; font-size:12px; 
                border:1px solid antiquewhite; border-radius:8px; margin:0 8px;  padding:10px; text-align: center; }
        .timezone-name { 
                color: antiquewhite; font-size:12px; 
                border:0px solid antiquewhite; border-radius:8px;  padding:0px }

/* --=== GAME ===-- */
        .clock-game { 
                color: antiquewhite; font-size:12px; 
                border:0px solid antiquewhite; border-radius:8px;  padding:0px; margin:4px 0px 8px 0px; }
        .clock-game-ingress { 
                color: antiquewhite; font-size:12px; 
                border:1px solid antiquewhite; border-radius:8px; margin:0 10px;  padding:10px; }
        .clock-game-ftc { 
                color: antiquewhite; font-size:12px; 
                border:1px solid antiquewhite; border-radius:8px; margin:0 10px;  padding:10px; }


/* --=== TIME ===-- */
        .clockIcon { position:relative; top:0; left;0; }
        .clock-time {
            color: antiquewhite; font-size: 6em; 
            border: 0px solid antiquewhite; 
            border-radius: 8px;  
            margin: 0px 0px 16px 0px; 
        }
        .clock-time-big { 
            margin: 16px 0px 0 64px;
        }
        
        .clock-face {
            position: relative;
            top: 15px;
            right: -20px;
            width: 88px;
            height: 88px;
            background-color: #8B4513;
            border: 2px solid antiquewhite;
            border-radius: 50%;
            margin: 0 auto;
        }
        
        .secondHand {
            position: absolute;
            width: 2px;
            height: 40px;
            background-color: antiquewhite;
            top: 5%;
            left: 50%;
            transform: translateX(-50%) rotate(0deg);
            transform-origin: 50% 100%;
            transition: transform 1s linear;
        }
	.clock-unixepoch { margin-bottom:8px; }
	.clock-unix {
		margin:0px; padding:0px; 
            	color: antiquewhite; font-size:12px; 
            	border:0px solid antiquewhite; border-radius:8px; }

  
/* --=== COUNTERS ===-- */
        .clock-stop { 
            margin:8px; padding:8px; 
            color: antiquewhite; font-size:12px; 
            border:1px solid antiquewhite; border-radius:8px; }
        .clock-count {
            margin:8px; padding:8px; 
            color: antiquewhite; font-size:12px; 
            border:1px solid antiquewhite; border-radius:8px; }

/* --=== TIME ===-- */
        audio { width: 150px; height: 40px; }
        .clock-title {
            margin:0 8px; 
            color: antiquewhite; font-size:48px; 
            border:0px solid antiquewhite; border-radius:8px;}        

        .clock-chime { 
            margin:4px 0px 0px 0px; padding:8px;
        color: antiquewhite; font-size:12px; 
        border:0px solid antiquewhite; border-radius:8px; }
        .clock-chime-freq { 
            margin:8px 8px;
        color: antiquewhite; font-size:12px; 
        border:0px solid antiquewhite; border-radius:8px; }
        .clock-chime-play { 
            margin:8px 8px;
        color: antiquewhite; font-size:12px; 
        border:0px solid antiquewhite; border-radius:8px;}

/* --=== FOOTER ===-- */
        .clock-footer  { 
                
                border:0px solid antiquewhite; border-radius:8px;  padding:8px;
                color: antiquewhite; font-size:9px; font-style:italic;  }


/* --=== FIREWORKS ===-- */
    .firework {
        position: absolute;
        width: 5px;
        height: 5px;
        border-radius: 50%;
        animation: fireworks 15s linear;
        opacity: 0;
    }

    .firework.red {
        background-color: #FF5733;
    }

    .firework.green {
        background-color: #33FF33;
    }

    .firework.blue {
        background-color: #3366FF;
    }

    .firework.yellow {
        background-color: #FFFF33;
    }

    .firework.purple {
        background-color: #9933FF;
    }

    @keyframes fireworks {
        0% {
            transform: translateY(0) scale(1);
            opacity: 1;
        }
        100% {
            transform: translateY(-1000px) scale(0);
            opacity: 0;
        }
    }

.buttonFire {
    position: fixed;
    bottom: 10px;
    right: 10px;
    padding: 5px 10px;
    background-color: #343434;
    color: white;
    border: none;
    cursor: pointer;
    outline: none;
}



/* --=== HOLIDAYS ===-- */
.holidaysTitle {
    color: antiquewhite; font-size: 24px;
    font-weight: bold;
    text-align: center;
    margin-top: 20px;
    display: none; /* Initially hidden */
}




/* --=== END ===-- */