@charset "utf-8";
/*	~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 * 	Resource:	dashboard.css       | Ver:5.0.0
 * 	Author:		DNC Thomas          | Feb 2026
 *  Created:    2026-02-05
 * 	Last Edit:  2025-10-03 15:19:34
 *	~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 * 	Role:	Additional styles for page
 * 	~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

.almanacGrid {
    margin: 1vh 0;
    display:grid; 
    gap: calc(var(--rowGap)/2) calc( var(--colGap));
    grid-template-columns: repeat(3, 1fr) 10em;
    grid-template-areas: 
        'sunRise dawn moonRise moon' 
        'sunSet dusk moonSet moon' 
        'dayLength dayLight moonPhase moon'
        'currcond currcond currcond moon';
    & p { margin:0;}
}
#moonImg {
    grid-area: moon;
    justify-self:center;
}
#moonTip {
    grid-area: moon;
    justify-self:center;
    align-self:center;
    padding:.2em 1em;
    font-weight:700;
    background: rgba(var(--baseR), var(--baseG), var(--baseB), 80%);
    border-radius: 50%;
    border-bottom: 5px solid var(--color4);
    color: var(--color9);
}

@media ( max-width: 600px ) {
    .almanacGrid {
        grid-template-columns: repeat(2, 1fr) 10em;
        grid-template-areas: 
            "sunRise sunSet moon"
            "dawn dusk moon"
            "dayLength dayLight moon"
            "moonRise moonSet moon"
            ". moonPhase moonPhase"
            "currcond currcond currcond";
    }
}