/* ==========================
   RESET
========================== */

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

body {
    background: #ece8df;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Cormorant Garamond', serif;
}

/* ==========================
   ENTIRE SCENE
========================== */

.scene {
    position: relative;
    width: 1280px;
    aspect-ratio: 5 / 4;
    overflow: hidden;
    border-radius: 22px;
}

/* ==========================
   BACKGROUND IMAGE
========================== */

.background {
    position: absolute;
    inset: 0;
}

.background-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ==========================
   CALENDAR CARD
========================== */

.calendar-card {

    position: absolute;

    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%);

    width: 530px;

    background: linear-gradient(
        180deg,
        #183924,
        #12301d
    );

    border-radius: 36px;

    padding: 34px;

    color: #f8f4ec;

    box-shadow:
        0 18px 45px rgba(0,0,0,.28);
}

/* ==========================
   HEADER
========================== */

.header {

    display: flex;

    justify-content: space-between;

    align-items: center;
}

.calendar-icon {

    width: 28px;
    height: 28px;
}

.leaf-icon {

    width: 58px;
}

.month {

    font-size: 28px;

    font-weight: 600;

    letter-spacing: 5px;

    text-align: center;

    flex: 1;
}

/* ==========================
   DIVIDER
========================== */

.divider {

    height: 1px;

    background: rgba(255,255,255,.18);

    margin: 26px 0;
}

/* ==========================
   WEEKDAYS
========================== */

.weekdays {

    display: grid;

    grid-template-columns: repeat(7,1fr);

    text-align: center;

    font-size: 20px;

    margin-bottom: 24px;
}

/* ==========================
   CALENDAR GRID
========================== */

.calendar-grid {

    display: grid;

    grid-template-columns: repeat(7,1fr);

    gap: 18px;
}

/* ==========================
   DAYS
========================== */

.day {

    width: 48px;

    height: 48px;

    margin: auto;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    font-size: 22px;

    transition: .2s;
}

.today {

    background: #f6f2ea;

    color: #14311d;

    font-weight: bold;
}

/* ==========================
   FOOTER
========================== */

.footer {

    text-align: center;

    margin-top: 30px;

    font-size: 24px;
}

/* ==========================
   RESPONSIVE
========================== */

@media (max-width: 1300px){

.scene{

    width:95vw;

}

.calendar-card{

    width:42%;
}

}

@media (max-width:900px){

.calendar-card{

    width:60%;

}

}

@media (max-width:650px){

.calendar-card{

    width:88%;

    padding:26px;

}

.month{

    font-size:20px;

}

.weekdays{

    font-size:16px;

}

.day{

    width:38px;

    height:38px;

    font-size:18px;

}

.footer{

    font-size:18px;

}

}