@font-face {
    font-family: "Concerto";
    src: url("fonts/Braddington-Ge9a.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: "Ex";
    src: url("fonts/ExhoticPersonalUse-2vMXl.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: "Fr";
    src: url("fonts/fr-bold.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}

@import url("/icons/weather-icons.min.css");

:root {
    --green: #72ff9b;
    --green-glow: rgba(80,255,130,.8);
    --cyan: #7de3c9;
    --text: #780d04;
}

/* GLOBAL */
* {
    box-sizing:border-box;
}



body {
    margin:0;
    width:1620px;
    height:1080px;
    overflow:hidden;
    background:#05090b;
    font-family:"Fr";
    text-transform:uppercase;
    letter-spacing:3px;
    color:#fff1c7;
    text-shadow:
        2px 2px 0 #171b1c,
        1px 1px 0 #343b3d,
        0 0 8px rgba(255,220,150,.25);
}

.dashboard {
    position:relative;
    width:1620px;
    height:1080px;
    margin:auto;
    transform-origin:center center;
    background-image:url("images/background2.png");
    background-size:1620px 1080px;
    background-position:center;
    background-repeat:no-repeat;
}

/* WEATHER */
.weather {
    position:absolute;
    left:38px;
    top:17px;
    width:250px;
    height:250px;
}

.weather-dial {
    position:relative;
    width:100%;
    height:100%;
    font-family:"Concerto";
}

/* TEMPERATURE LABELS */
.dial-temp {
    position:absolute;
    font-size:24px;
    text-shadow:-1px -1px 27px rgba(242,196,109,1);
}

.temp0 {
    right:171px;
    top:192px;
    color:#8ed6f5;
    opacity: 0.6;
    rotate: 20deg;
}

.temp20 {
    left:45px;
    bottom:105px;
}

.temp40 {
    left:68px;
    top:52px;
}

.temp60 {
    left:154px;
    top:53px;
}

.temp80 {
    right:45px;
    top:116px;
}

.temp100 {
    right:65px;
    top:192px;
    color:#780d04;
    opacity: 0.6;
    rotate: -20deg;
}

/* NEEDLE */
.needle {
    position:absolute;
    left:50%;
    top:50%;
    width:6px;
    height:115px;
    background:
        linear-gradient(
            90deg,
            #777,
            white,
            #777
        );
    transform-origin:
        center bottom;
    transform:
        translate(-50%, -100%)
        rotate(0deg);
    filter:
        drop-shadow(
            0 0 6px #f2c46d
        );
}

.needle-hub {
    position:absolute;
    right:115px;
    top:113px;
    width: 20px;
    height: 20px;
    display: grid;
    border:3px solid #0000;
    border-radius: 50%;
    border-color:#4F3F09 #0000;
    animation: s6 10s infinite linear;
    opacity:.8;
}

.needle-hub::before,
.needle-hub::after {   
    content:"";
    grid-area: 1/1;
    margin:1px;
    border:inherit;
    border-radius: 50%;
}

.needle-hub::before {
    border-color:#1E4882 #0000;
    animation:inherit; 
    animation-duration: 15s;
    animation-direction: reverse;
    opacity:.85;
}

.needle-hub::after {
    margin:4px;
}

@keyframes s6 { 
    100%{transform: rotate(1turn)}
}

#current-weather {
    display:none;
}

/* CLOCK */
#clock {
    position:absolute;
    top:58px;
    right:137px;
    font-family:"Concerto";
    font-size:100px;
    font-weight:bold;
    letter-spacing:8px;
    animation:
        tubeGlow 4s ease-in-out infinite;
    color:#fff1c7;
    text-shadow:
        0 0 4px #ffb347,
        0 0 12px #ff8c00,
        0 0 30px rgba(255,140,0,.9),
        0 0 60px rgba(255,100,0,.5);
}

/* CALENDAR */
.calendar {
    position:absolute;
    left:50px;
    top:280px;
    width:1510px;
    height:340px;
	
}

#calendar-week {
    display:grid;
    grid-template-columns:repeat(7,1fr);
    gap:38px;
    height:100%;
}
/* Shift middle days */
.calendar-day:nth-child(3),
.calendar-day:nth-child(4),
.calendar-day:nth-child(5) {
    margin-LEFT: -5px; /* Adjust as needed */
}

/* Individual calendar day containers */
.calendar-day {
    position:relative;
	top:2px;
	left:-5px;
    min-height:260px;
    display:flex;
    flex-direction:column;
	width:180px;
	text-shadow: 0px 0px 4px rgba(0,0,0,1);
	font-family:"Fr";
}

.forecast-card {
    position:relative;
    left:5px;
    top:-5px;
    height:80px;
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    overflow:hidden;
    margin-bottom:10px;
}

.forecast-card::after {
    content:"";
    position:absolute;
    top:-30%;
    left:-150%;
    width:60%;
    height:200%;
    transform:rotate(20deg);
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.15),
            transparent
        );
    animation:
        placardSweep 12s linear infinite;
}

.forecast-left {
	position:relative;
    left:15px;
	TOP:12px;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
}

.forecast-day {
    font-size:22px;
    line-height:1;
}

.forecast-icon {
    margin-top:6px;
    font-size:30px;
	position:relative;
	left:10px;
	TOP:-5px;
}

.forecast-right {
	position:relative;
    RIGHT:20px;
	TOP:12px;
    display:flex;
    flex-direction:column;
    align-items:flex-end;
}

.forecast-date {
    font-size:17px;
    line-height:1;
}

.forecast-temp {
    margin-top:4px;
    font-size:17px;
}

.forecast-precip {
    margin-top:2px;
    font-size:14px;
}

.events {
    position:absolute;
    left:5px;
    right:0px;
    top:86px;
	gap: 12px;
    display:flex;
    flex-direction:column;
    height:calc(100% - 84px);
	text-shadow: 0px 0px 2px rgba(255,255,255,1);

}

.calendar-event {
    height:30px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:12px;
    overflow:hidden;
    white-space:nowrap;
	letter-spacing:1px;
}


/* LOWER SECTION */
.bottom {
    position:absolute;
    inset:0;
    pointer-events:none;
}

.quinnie-panel,
.unscheduled-panel,
.sydney-panel {
    position:absolute;
    pointer-events:auto;
}

/* QUINNIE */
.quinnie-panel {
    left:20px;
    top:572px;
    width:500px;
    height:280px;
}

/* CENTER */
.unscheduled-panel {
    left:578px;
    top:604px;
    width:440px;
    height:280px;
}

/* SYDNEY */
.sydney-panel {
    left:1110px;
    top:572px;
    width:500px;
    height:280px;
}

h2 {
    font-size:36px;
    text-transform:uppercase;
    letter-spacing:6px;
    text-align:center;
    color:#fff1c7;
    text-shadow: 0px 0px 2px rgba(255,255,255,1);
	position:relative;
	TOP:14px;
}


/* Individual routine columns */
.routine-column {
    display:flex;
    flex-direction:column;
    align-items:center;
}

.quinnie-panel .morning{
	position:absolute;
    width:180px;
	height:280px;
	left:30px;
    top:62px;
}
.sydney-panel .morning {
	position:absolute;
    width:180px;
	height:280px;
	left:30px;
    top:62px;
}

.quinnie-panel .night{
	position:absolute;
    width:180px;
	height:280px;
	left:270px;
    top:62px;
}
.sydney-panel .night{
	position:absolute;
    width:180px;
	height:280px;
	left:270px;
    top:62px;
}

.unscheduled-panel .checklist{
	position:relative;
	top:-45px;
	gap:5px;
}

/* Lists */
.checklist {
    position:absolute;
    top:0;
    left:0;
    right:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:7px;
    padding-top:20px;
}

/* Bottom labels */
.column-label {
    position:absolute; 
    bottom:-65px; 
    left:0px; 
    right:0px; 
    text-align:center;
    color:#fff1c7;
    font-size:30px;
	text-shadow: 0px 0px 2px rgba(255,255,255,1);
}

.checklist button {
    height:35px;
    width:100%;
    background:none;
    color:#fff1c7;
    text-shadow: 0px 0px 2px rgba(255,255,255,1);
    font-family:"Fr";
    font-size:12px;
    letter-spacing:1px;
	border:none;
}

.checklist button.completed {
    opacity:.15;
}

.checklist button:active {
    transform:none;
}

/* Weather Icons */
.forecast-icon {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Animations */
@keyframes blinkA { 95%,100% { opacity:.35; } }
@keyframes blinkB { 96%,100% { opacity:.25; } }
@keyframes blinkC { 97%,100% { opacity:.5; } }
@keyframes tubeGlow {
    0%,100% { filter:brightness(1); opacity:1; }
    50% { filter:brightness(1.15); opacity:.92; }
}
@keyframes crtFlicker {
    0% { opacity:.3; }
    50% { opacity:.5; }
    100% { opacity:.9; }
}
@keyframes placardSweep {
    from { left:-150%; }
    to { left:250%; }
}
@keyframes eventGlow {
    0%,100% { opacity:.3; }
    50% { opacity:1; }
}
@keyframes spark {
    0%,94%,100% { opacity:0; }
    95% { opacity:1; }
    96% { opacity:.2; }
    97% { opacity:1; }
    98% { opacity:0; }
}
@keyframes atomicPulse {
    0%,100% { opacity:.4; transform:scale(.95); }
    50% { opacity:1; transform:scale(1.1); }
}
@keyframes s7 { 100%{transform: rotate(1turn)} }

/* Atomic Core Effect */
.atomic-core {
    position:absolute;
    left:613px;
    top:166px;
    width:41px;
    height:41px;
    border-radius:50%;
    pointer-events:none;
    background-color: rgba(0, 128, 255, 0.26);
    box-shadow:
        0 0 15px #62AAD0,
        0 0 20px #62AAD0,
        inset 0px 0px 65px -12px rgba(0, 128, 255, 0.49);
    animation:
        atomicPulse 10s ease-in-out infinite;
}

.amber {
    position:absolute;
    top:166px;
    left:613px;
    opacity:.15;
    background-color: rgba(242, 150, 80, 0.17);
    box-shadow: 0px 0px 26px 33px rgba(242, 150, 80, 0.3);
    animation:
        atomicPulse 12s ease-in-out infinite;
    width:41px;
    height:41px;
	border-radius: 50%;
}

/* REMOVE OLD EFFECTS */
.checklist button.completing {
    animation:none;
}