*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    min-height: 100dvh;
    background-color: rgb(38, 39, 39);
    color: rgb(217, 216, 216);
    font-family: system-ui, sans-serif;
}

#page-container {
    display: flex;
    flex-direction: row;
    height: 100dvh;
}

.sides {
    flex: 1;
    height: 100%;
    display: grid;
    grid-template-columns: repeat(6, 1fr); 
    grid-template-rows: repeat(4, 1fr);
    gap: 5px;
    padding: 10px;
}

#timeside {
    background-color: #434646ff;
}

#dateside {
    background-color: #262727ff;
}
.timecircle, .datecircle {
   border-radius: 50%;
   width: 100%;
   aspect-ratio: 1 / 1;
   z-index: 99;
}
.timecircle {
    background-color: #262727ff;
}
.datecircle {
    background-color: #434646ff;
}
.timecircle.on, .datecircle.on{
    background-color: #d9d8d8ff;
}
@media (max-width: 768px) {
    #page-container {
        flex-direction: column;
    }
}