*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Arial,Helvetica,sans-serif;
}

body{
    background:#121212;
    display:flex;
    justify-content:center;
    padding:20px;
    color:#fff;
}

.phone{
    width:360px;
    background:#1B1B1F;
    min-height:760px;
    position:relative;
    overflow:hidden;
    border-radius:24px;
}

.topbar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:18px;
}

.month h2{
	color:#fff;
    font-size:34px;
    font-weight:400;
}

.menu button{
	color:#fff;
    border:none;
    background:none;
    font-size:20px;
    margin-left:10px;
    cursor:pointer;
}

.weekday{
    display:grid;
    grid-template-columns:repeat(7,1fr);
    text-align:center;
    color:#888;
    font-size:12px;
    margin-bottom:8px;
}

.calendar{
    display:grid;
    grid-template-columns:repeat(7,1fr);
    gap:6px;
    padding:0 10px;
}

.day{
    height:44px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:22px;
    color:#eee;
}

.other{
    color:#555;
}

.today{
    background:#2D8CFF;
    color:#fff;
    border-radius:50%;
    width:42px;
    height:42px;
    margin:auto;

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

    box-shadow:0 0 12px rgba(45,140,255,.5);
}

.indicator{
    width:36px;
    height:5px;
    border-radius:50px;
    background:#d8d8d8;
    margin:12px auto;
}

.card{
    margin:15px;
    background:#2A2A2F;
	color:#fff;
    border-radius:18px;
    padding:16px;
    box-shadow:none;
}

.weather{
    margin:15px;
    border-radius:18px;
    background:#2A2A2F;
	color:#fff;
    padding:16px;
    box-shadow:none;
    text-align:center;
}

.weather .title{
    text-align:left;
    color:#A8A8A8;
    margin-bottom:25px;
}

.weather-icon{
    font-size:48px;
}

.weather p{
    color:#8F8F8F;
    margin-top:10px;
    font-size:14px;
}

.fab{
    position:absolute;
    right:18px;
    bottom:18px;

    width:60px;
    height:60px;

    border:none;
    border-radius:50%;
    background:#2D8CFF;
    color:white;
    font-size:34px;

    cursor:pointer;

    box-shadow:0 8px 20px rgba(45,140,255,.35);
}

.calendar-wrapper{
    overflow:hidden;
    position:relative;
}

.calendar{
    display:grid;
    grid-template-columns:repeat(7,1fr);
    gap:6px;
    padding:0 10px;

    touch-action:pan-y;

    transition:transform .25s ease,
               opacity .25s ease;
}

.calendar.slide-left{
    transform:translateX(-80px);
    opacity:0;
}

.calendar.slide-right{
    transform:translateX(80px);
    opacity:0;
}
.month-nav{
    display:flex;
    align-items:center;
    gap:12px;
}

.month-nav button{
    border:none;
    background:none;
    font-size:18px;
    cursor:pointer;
    color:#fff;
    width:30px;
    height:30px;
    border-radius:50%;
}

.month-nav button:hover{
    background:#eee;
}
.menu{
    display:flex;
    align-items:center;
    gap:8px;
}

.menu button{
    border:none;
    background:#35353A;
    color:white;
    padding:8px 12px;
    border-radius:20px;
    cursor:pointer;
    font-size:14px;
    transition:.2s;
}

.menu button:hover{
    background:#45454A;
}
.todo-card{
    margin:15px;
    padding:18px;
    background:#2A2A2F;
    border-radius:18px;
}

.todo-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:15px;
}

.todo-header h3{
    color:white;
    font-size:18px;
}

.todo-header span{
    color:#8F8F8F;
}

.progress{
    width:100%;
    height:8px;
    background:#3B3B40;
    border-radius:20px;
    overflow:hidden;
    margin-bottom:18px;
}

.progress-fill{
    width:0%;
    height:100%;
    background:#2D8CFF;
    transition:.3s;
}

.todo-item{

    display:flex;
    align-items:center;

    gap:12px;

    padding:12px 0;

    border-bottom:1px solid #3A3A3F;
}

.todo-item:last-child{
    border:none;
}

.todo-item input{

    width:22px;
    height:22px;

    accent-color:#2D8CFF;

    cursor:pointer;
}

.todo-item label{

    color:white;
    cursor:pointer;
    flex:1;
}

.todo-item.done label{

    color:#777;
    text-decoration:line-through;
}