mexarxu

#days-container {
display: grid;
grid-template-columns: repeat(7, minmax(0, 1fr));
grid-gap: 1px;

text-align: center;
font-weight: 600;
background-color: var(--grayish); /* essentially the border color */
}

#days-container > div {
background-color: white;
padding: .5rem;

border-top-width: 1px;
border-bottom-width: 2px;
border-color: var(--grayish);
}

@media (max-width: 768px) {
#days-container > div > span {
display: none;
}
}

#calendar-flex {
display: flex;
flex: 1 1 auto;
background-color: var(--grayish);
}

.six-rows {
grid-template-rows: repeat(6, minmax(0, 1fr));
}

.five-rows {
grid-template-rows: repeat(5, minmax(0, 1fr));
}

#squares-wrapper {
display: grid;
grid-template-columns: repeat(7, minmax(0, 1fr));
grid-gap: 1px;
width: 100%
}

/* The calendar itself */
.square {
padding: .75rem 1rem;
}

.square.grayed-out {
background-color: var(--disabled-squares-color);
color: var(--disabled-squares-background);
}

.square.normal {
background-color: white;
}

.square > time.today {
display: flex;
justify-content: center;

width: 1.5rem;
padding-bottom: 2px;
border-radius: 9999px;

font-weight: 600;
color: white;
}

.square.normal > time.today {
background-color: var(--today-normal-background);
}

.square.grayed-out > time.today {
background-color: var(--today-disabled-background);
}

ol.events {
margin-top: .5rem;
}

ol.events p {
/* truncate text */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

font-weight: 500;
font-size: .875rem;
}

.square.normal ol p {
color: var(--event-normal-color);
}

.square.grayed-out ol p {
color: var(--event-disabled-color);
}

.square.normal ol p:hover {
color: var(--event-hover-normal-color);
}

.square.grayed-out ol p:hover {
color: var(--event-hover-disabled-color);
}

/* Modal and children */
#modal {
display: grid;
place-items: center;

position: fixed;
z-index: 50;
inset: 0;
opacity: 0%
}

#modal > div {
display: flex;
flex-direction: column;
box-shadow: var(--box-shadow);
background-color: white;

border-radius: 2rem;
padding: 1.5rem;
width: 100%;
max-width: 48rem;
}

#modal-header {
display: flex;
justify-content: space-between;
margin-bottom: 1.5rem;
color: var(--modal-header-color);
}

#modal-header > h2 {
font-weight: bolder;
font-size: 1.5rem;
line-height: 2rem;
}

#modal-header > h2 > span {
font-size: 1.2rem;
padding-left: 8px;
}

#modal-header > button {
padding: 0.25rem;
}

#modal-body {
margin-bottom: 1.5rem;
line-height: 1.7rem;
text-align: justify;
}

#modal-footer {
display: flex;
justify-content: flex-end;
}

#modal-footer > button {
color: white;
background-color: var(--modal-ok-button-background);

letter-spacing: 0.05rem;
font-size: .875rem;
line-height: 1.5;
font-weight: 700;

padding: 0.625rem 1.5rem;
border-radius: 2rem;

/* Transition */
transition-property: all;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: .3s;
}

#modal-footer > button:hover {
background-color: var(--modal-ok-button-hover-background);
}

#modal-footer > button:focus {
background-color: var(--modal-ok-button-focus-background);
}

#overlay {
position: fixed;
z-index: 40;
inset: 0;html, body {
display: flex;
flex-direction: column;
height: 100%
}

/* Variables */
body {
/* Header/general colors */
--grayish: #b5bac1;
--svg-chevron-color: #6b7280;
--letters-color: #374151;

/* Calendar colors */
--disabled-squares-color: #f3f4f6;
--disabled-squares-background: #6b7280;
--today-normal-background: #4f46e5;
--today-disabled-background: #a5b4fc;

--event-normal-color: #111827;
--event-disabled-color: var(--svg-chevron-color);
--event-hover-normal-color: var(--today-normal-background);
--event-hover-disabled-color: var(--today-disabled-background);

--box-shadow: rgb(0 0 0 / 10%) 0px 5px 15px;
--modal-header-color: var(--event-normal-color);
--modal-ok-button-background: #10b981;
--modal-ok-button-hover-background: #047857;
--modal-ok-button-focus-background: #34d399;

/* Footer colors */
--footer-letters-color: #4b5563;
--footer-link-color: #1f2937;

color: var(--letters-color);
font-family: 'Segoe UI';
margin: 0px;
}

*, ::after, ::before {
box-sizing: border-box;
border-width: 0;
border-style: solid;
border-color: #e5e7eb;
}

ol, ul {
list-style: none;
margin: 0;
padding: 0;
}

a {
color: inherit;
text-decoration: inherit;
}

h1, h2, p, button {
margin: 0;
}

button {
background-color: transparent;
background-image: none;
padding: 0;
line-height: inherit;
color: inherit;
cursor: pointer;
font-family: inherit;
font-size: 100%;
line-height: 1.15;
}

svg {
display: block;
vertical-align: middle;
height: 1.5rem;
width: 1.5rem;
}

/*