:root{
    --bg-color: hsl(0, 0%, 90%);
    --card-color: hsl(from var(--bg-color) h calc(s) calc(l + 5));
    font-family:Verdana, Geneva, Tahoma, sans-serif;
    color: black;
}

*{
    padding: 0;
    /* margin: 0; */
    box-sizing: border-box;
}

body{
    background-color: var(--bg-color);
    height: 100vh;
}

#year-ul{
    display: grid;
    grid-template-columns:repeat(3, 1fr);
    gap: 8px;
    padding: 8px;
    justify-items: center;
}

ul{
    list-style-type: none;

}

#year-ul li{
    width: 100%;
}

.holiday{
    display: flex;
    flex-direction: column;

    /* padding: 5px;
    margin: 5px; */
    margin-bottom: 5px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.27);
    text-align: left;
    align-self: flex-start;
}

.card-field{
    display: flex;
}


.card{
    --inset-color: hsla(0, 0%, 90%,1);

    border: 1px solid white;
    padding: 20px;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* box-shadow: 0 0 15px hsla(0, 0%, 0%, .5); */
    box-shadow: 
        inset 0 0 5px hsla(0, 0%, 40%, 1),
        inset -15px -15px 5px var(--inset-color),
        inset 15px 15px 5px var(--inset-color);

}

.card h3{
    width: 100%;
    text-align: center;
    padding: 5px;
}


/* Standard Breakpoints */
/* Mobile First Approach */
@media (min-width: 320px)  { /* Mobile Small */ }
@media (min-width: 480px)  { /* Mobile Large */ }
@media (min-width: 768px)  { /* Tablet */ }
@media (min-width: 1024px) { /* Desktop */ }
@media (min-width: 1200px) { /* Large Desktop */ }
@media (min-width: 1440px) { /* Extra Large */ }

/* Desktop First Approach */
@media (max-width: 1439px) { /* Below XL */ }
@media (max-width: 1199px) { /* Below Large */ }
@media (max-width: 1023px) { /* Below Desktop */ }
@media (max-width: 767px)  { /* Below Tablet */ }
@media (max-width: 479px)  { /* Below Mobile Large */ }