input{outline: none}
:-ms-input-placeholder{color:#fff}
::-webkit-input-placeholder{color: #fff}
input::placeholder{color: #fff}
* {margin:0;padding:0;-webkit-text-size-adjust:none}

.wrap{
    width: 100%;
    height: 100%;
    position: relative;
}
.inner_wrap{
    width: 580px;
    margin:auto;
    text-align: center;
    position: absolute;
    left:50%;
    margin-left: -290px;
    top:0;
}
.btn{
    cursor: pointer;
}

body{
    color:#fff;
    background-color: #5a758f;
}

.clicked{
    color:#ccc;
}

.form,
.greetings{
    display: none;
}

.showing{
    display:block;
}

.js-clock{
    font-size: 75px;
}
.input-style{
    font-size: 40px;
    background: transparent;
    border:none;
    border-bottom:1px solid #fff;
    color: #fff; 
    box-sizing: border-box;
    padding:10px;
}
.js-greetings{
    font-size: 55px;
    margin-bottom: 60px
}
.js-weather{
    position: absolute;
    right:20px;
    top:20px;
    font-size: 18px
}
.js-toDoList{
    margin-top: 40px
}
.js-toDoList li{
    color:#fff;
    font-size: 28px;
    text-align:left
}
.js-toDoList li button{
    border:none;
    background: transparent;
    font-size: 30px;
    color:crimson;
    cursor: pointer;
    margin-left:20px
}

.js-form input{
    border-bottom: 1px dashed #fff;
    font-size: 55px;
    text-align: center;
    margin-bottom: 40px
}

@keyframes fadeIn{
    from{
        opacity: 0;
    }
    to{
        opacity: 1;
    }
}

.bgImage{
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    z-index: -1;
    animation: fadeIn .5s linear;
}