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

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

body{

    font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;

    background:#f6f6f6;

    color:#333;

    min-height:100vh;

}


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

.header{

    background:#ffffff;

    padding:20px;

    box-shadow:0 2px 8px rgba(0,0,0,.08);

}

.logo{

    text-align:center;

    font-size:30px;

    font-weight:bold;

    color:#CC1486;

    margin-bottom:15px;

}

.navigation{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:20px;

}

.navigation button{

    background:#CC1486;

    color:white;

    border:none;

    width:42px;

    height:42px;

    border-radius:50%;

    cursor:pointer;

    font-size:18px;

    transition:.3s;

}

.navigation button:hover{

    background:#a90f6d;

}

#monthYear{

    min-width:220px;

    text-align:center;

    font-size:28px;

}


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

.calendar{

    width:min(1400px,95%);

    margin:30px auto;

    display:grid;

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

    gap:2px;

    background:#d8d8d8;

    border-radius:10px;

    overflow:hidden;

}


/* ==============================
   WEEK NAMES
============================== */

.day-name{

    background:#CC1486;

    color:white;

    text-align:center;

    padding:15px;

    font-size:18px;

    font-weight:bold;

}


/* ==============================
   CALENDAR BODY
============================== */

#calendarBody{

    display:contents;

}


/* ==============================
   DATE BOX
============================== */

.day{

    background:white;

    min-height:150px;

    padding:10px;

    display:flex;

    flex-direction:column;

    position:relative;

    transition:.25s;

}

.day:hover{

    background:#fff8fc;

}


/* ==============================
   DATE NUMBER
============================== */

.date{

    font-size:20px;

    font-weight:bold;

    margin-bottom:10px;

}


/* ==============================
   TODAY
============================== */

.today{

    border:3px solid #CC1486;

}


/* ==============================
   EMPTY CELLS
============================== */

.empty{

    background:#f1f1f1;

}


/* ==============================
   ACTIVITY PILLS
============================== */

.activity{

    padding:6px 10px;

    margin-bottom:6px;

    border-radius:20px;

    color:white;

    font-size:13px;

    cursor:pointer;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;

    transition:.2s;

}

.activity:hover{

    transform:scale(1.04);

}


/* COLORS */

.video{

    background:#f5b700;

}

.speech{

    background:#CC1486;

}

.roleplay{

    background:#00b894;

}

.ppt{

    background:#0984e3;

}

.story{

    background:#6c5ce7;

}

.jam{

    background:#ff7675;

}

.optional{

    background:#9b59b6;

}


/* ==============================
   POPUP
============================== */

.popup-overlay{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.55);

    display:none;

    justify-content:center;

    align-items:center;

    z-index:999;

}

.popup{

    width:min(700px,92%);

    background:white;

    border-radius:12px;

    overflow:hidden;

    box-shadow:0 20px 40px rgba(0,0,0,.25);

}

.popup-header{

    background:#CC1486;

    color:white;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:18px;

}

.popup-header button{

    background:none;

    border:none;

    color:white;

    font-size:26px;

    cursor:pointer;

}

#popupContent{

    padding:25px;

    max-height:70vh;

    overflow-y:auto;

}


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

footer{

    text-align:center;

    padding:20px;

    color:#777;

}


/* ==============================
   MOBILE
============================== */

@media(max-width:900px){

    .day{

        min-height:120px;

    }

    .activity{

        font-size:11px;

        padding:5px 8px;

    }

    #monthYear{

        font-size:22px;

    }

}


@media(max-width:600px){

    .logo{

        font-size:22px;

    }

    .navigation{

        gap:10px;

    }

    #monthYear{

        min-width:auto;

        font-size:20px;

    }

    .day{

        min-height:90px;

        padding:5px;

    }

    .date{

        font-size:15px;

    }

    .activity{

        font-size:10px;

        padding:4px 6px;

    }

    .day-name{

        font-size:13px;

        padding:10px;

    }

}