@charset "utf-8";
/* CSS Document */

body {background:#86dbd6;}
#container {width:500px;margin:0 auto;padding:20px;background:url(../img/todobg.gif) repeat-x;}
#container * {color:#0c968e;}
#container:focus {outline:none;}

h1, h2 {font-size:30px;}
h1 {font-weight:100;}
h2, li {font-weight:900;}
h2:first-of-type {text-align:center;}
input[type="text"] {height:60px;width:100%;border-radius:5px;font-size:25px;font-weight:900;text-indent:15px;padding-right:60px;margin-bottom:25px;background:url(../img/todobg-2.gif) no-repeat center center;transition:.5s;}
input[type="text"]:focus {background:url(../img/todobg-2.gif) no-repeat center 57px;border-radius:0;text-indent:0px;}
.whiteBG button {position:relative;float:right;height:40px;top:-75px;margin:0 10px -40px 0;width:40px;border-radius:100px;font-size:30px;font-weight:900;color:white !important;background:#0c968e;cursor: pointer;transition:.5s;}
input[type="text"]:focus + #add {margin-right:0px;}
input::placeholder {color:white;}
.listItems, .listItems * {transition:.2s;}
.listItems li {display:block;width:100%;color:white;border-bottom:3px solid #0c968e;padding:10px 0 8px 0;margin:25px 0;font-size:20px;color:white !important;}
.listItems li::first-line {display: none;}
.listItems li::after {content: '';display:block;clear:both;}
.listItems div {float:right;}
.listItems button {float:left;cursor:pointer;background:none;}
.remove {width:29px;fill:#dd5858;}
.complete {width:34px;margin-left:7px;fill:#0c968e;left:5px;position:relative;}
.listItems li:hover {padding:10px 10px 8px 7px;background:#62c5c0;}
.listItems #completed li {color:#62c5c0 !important;border-bottom:3px solid #62c5c0;}
.listItems #completed .remove, .listItems #completed .complete {fill:#62c5c0;}
.listItems #completed li:hover {background:#86dbd6;padding:10px 0 8px 0;}
ul.todo#todo:empty:after {content:url(../img/nothingToDo.svg);width:50%;margin:30px auto;display:block;text-align:center;}

/* Modal */
#modal_wrapper, #modal_wrapper * {transition: .5s;}
#modal_open {font-weight:900;font-size:20px;text-align:center;display:block;color:#86dbd6;text-decoration: none;background:#62c6c0;width:155px;margin:30px auto;padding:10px;transition:.5s;border-radius:5px;}
#modal_open:hover {color:white;}
#modal_close {display:block;width:100%;padding:10px;background:#0c968e;color:white;text-decoration:none;fill:white;}
#modal_wrapper.overlay::before {content:"";width:100%;height:100%;position:fixed;z-index:100;top:0;left:0;background:rgba(0,0,0,0.7);}
#modal_window{display:none;z-index:1000;position:fixed;max-width:400px;top:50%;transform:translateY(-50%);right:0;left:0;margin:auto;overflow:auto;background:white;border-radius:5px;text-align:center;}
#modal_window span {display:block;padding:25px;line-height:23px;text-align:center;}
#modal_wrapper.overlay #modal_window{display:block;}

/* Adjust container for desktop */
@media only screen and (max-width: 500px) {
	#container {width:100%;}
	#modal_window {max-width: 90%;}
}