body{

    margin:0;
    background:#f5f5f5;
    font-family:Arial,Helvetica,sans-serif;

}

*{
    box-sizing:border-box;
}

.container{

    width:100%;
    max-width:1400px;
    margin:auto;
    padding:20px;

}

/* ===================================
   TOP BAR
=================================== */

.topBar{

    display:flex;
    justify-content:space-between;
    align-items:center;

    background:#2f3948;

    padding:18px 25px;

    border-radius:12px;

    border-top:3px solid #FFD700;

    border-bottom:3px solid #FFD700;

    margin-bottom:25px;

    box-shadow:0 5px 20px rgba(0,0,0,.18);

    gap:15px;

}

.topBar h1{

    margin:0;

    color:#FFD700;

    font-size:34px;

    font-weight:bold;

    text-align:center;

    flex:1;

}

.topBar i{

    margin-right:10px;

}

.homeBtn,
.futureBtn{

    background:#FFC107;

    color:#222;

    text-decoration:none;

    padding:12px 22px;

    border-radius:8px;

    font-weight:bold;

    transition:.25s;

    white-space:nowrap;

}

.homeBtn:hover,
.futureBtn:hover{

    transform:translateY(-2px);

    background:#FFD700;

}

/* ===================================
   SUMMARY
=================================== */

.summaryGrid{

    display:grid;

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

    gap:18px;

    margin-bottom:30px;

}

.summaryCard{

    background:#fff;

    border-radius:12px;

    padding:20px;

    box-shadow:0 4px 15px rgba(0,0,0,.12);

    border-top:4px solid #FFD700;

    transition:.25s;

}

.summaryCard:hover{

    transform:translateY(-4px);

    box-shadow:0 10px 25px rgba(0,0,0,.18);

}

.summaryCard h3{

    margin:0 0 18px;

    color:#2f3948;

    font-size:20px;

}

.summaryCard div{

    margin:10px 0;

    font-size:17px;

    font-weight:bold;

}

.live{

    color:#00b050;

    font-size:22px;

}

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

.calendarTitle{

    background:#2f3948;

    color:#FFD700;

    font-size:28px;

    font-weight:bold;

    text-align:center;

    padding:15px;

    border-radius:10px 10px 0 0;

}

.calendarTitle i{

    margin-right:10px;

}

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

.calendarBox{

    background:#fff;

    padding:8px;

    border-radius:0 0 12px 12px;

    box-shadow:0 5px 20px rgba(0,0,0,.12);

    height:85vh;

    overflow-x:auto;

    overflow-y:hidden;

    -webkit-overflow-scrolling:touch;

}

.calendarBox iframe{

    width:100%;

    min-width:900px;

    height:100%;

    border:none;

}

/* ===================================
   TABLET
=================================== */

@media(max-width:1000px){

.summaryGrid{

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

}

.topBar{

    flex-wrap:wrap;

}

.topBar h1{

    width:100%;

    order:1;

    font-size:28px;

}

.homeBtn{

    order:2;

}

.futureBtn{

    order:3;

}

}

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

@media(max-width:768px){

.container{

    padding:10px;

}

.summaryGrid{

    grid-template-columns:1fr;

    gap:15px;

}

.topBar{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:10px;

    padding:15px;

}

.topBar h1{

    grid-column:1 / 3;

    font-size:22px;

    margin-bottom:5px;

}

.homeBtn,
.futureBtn{

    width:100%;

    text-align:center;

    padding:10px;

    font-size:14px;

}

.calendarTitle{

    font-size:18px;

    padding:12px;

}

.calendarBox{

    padding:5px;

    height:80vh;

    overflow-x:auto;

    overflow-y:hidden;

}

.calendarBox iframe{

    min-width:900px;

    height:100%;

}

}

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

@media(max-width:480px){

.topBar h1{

    font-size:18px;

}

.homeBtn,
.futureBtn{

    font-size:13px;

    padding:8px;

}

.calendarTitle{

    font-size:16px;

}

.summaryCard{

    padding:15px;

}

.summaryCard h3{

    font-size:18px;

}

.summaryCard div{

    font-size:15px;

}

}