main.css

body{
	box-sizing: border-box;
	background:url('background.jpg') center no-repeat;
	    background: url('background.jpg') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height: 100%;
    overflow: hidden;

	background-size:cover;
	min-height:100vh;
	display:flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	font-family: Futura,"Trebuchet MS",Arial,sans-serif;
}
*, *:before, *:after {box-sizing: inherit; }

.wrapper{
	padding: 20px;
	max-width: 350px;
	background: rgba(255,255,255,0.95);
	box-shadow: 0 0 0 10px rgba(0,0,0,0.1);
}

h2{
	text-align: center;
	margin: 0;
	font-weight: 200;
}

.list{
	margin: 0;
	padding: 0;
	text-align: left;
	list-style: none;
}

.list li{
	border-bottom: 1px solid rgba(0,0,0,0.2);
	padding: 10px 0;
	font-weight: 100;
	display: flex;
}

.list label{
	flex:1;
	cursor: pointer;
}

.list input{
	margin-right: 10px;
}

.add-items{
	margin-top: 20px;
}

form{
	padding-top: 20px;
}

.actions{
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	justify-content: space-around;
}

.actions > input[type="submit"]:first-child{
	order: -1;
	flex: 1 0 100%;
}

input[type="submit"] + input[type="submit"]{
	margin-top: 10px;
}

input[type="submit"]{
	color: #444444;
	background: #F3F3F3;
	border: 1px #DADADA solid;
	padding: 5px 10px;
	border-radius: 2px;
	font-weight: bold;
	outline: none;
}

input[type="submit"]:hover{
	border: 1px #C6C6C6 solid;
	box-shadow: 1px 1px 1px #EAEAEA;
	color: #333333;
	background: #F7F7F7;
}

input[type="submit"]:active{
	box-shadow: inset 1px 1px 1px #DFDFDF;   
}

.add-Items > input[type="submit"]{
	color: white;
	background: #4C8FFB;
	border: 1px #3079ED solid;
	box-shadow: inset 0 1px 0 #80B0FB;
}

.add-Items > input[type="submit"]:hover{
	border: 1px #2F5BB7 solid;
	box-shadow: 0 1px 1px #EAEAEA, inset 0 1px 0 #5A94F1;
	background: #3F83F1;
}

.add-Items > input[type="submit"]:active{
	box-shadow: inset 0 2px 5px #2370FE;   
}

input[type="submit"].red{
	background: -webkit-linear-gradient(top, #DD4B39, #D14836); 
	background: -moz-linear-gradient(top, #DD4B39, #D14836); 
	background: -ms-linear-gradient(top, #DD4B39, #D14836); 
	border: 1px solid #DD4B39;
	color: white;
	text-shadow: 0 1px 0 #C04131;
}

input[type="submit"].red:hover{
	background: -webkit-linear-gradient(top, #DD4B39, #C53727);
	background: -moz-linear-gradient(top, #DD4B39, #C53727);
	background: -ms-linear-gradient(top, #DD4B39, #C53727);
	border: 1px solid #AF301F;
}

input[type="submit"].red:active{
	box-shadow: inset 0 1px 1px rgba(0,0,0,0.2);
	background: -webkit-linear-gradient(top, #D74736, #AD2719);
	background: -moz-linear-gradient(top, #D74736, #AD2719);
	background: -ms-linear-gradient(top, #D74736, #AD2719);
}

.add-Items > input[type="text"]{
	border: none;
	border-bottom:1px solid #757575;
}

.add-Items > input[type="text"]:focus{
	outline: none;
}

input[type="checkbox"]:checked + label{
	text-decoration: line-through;
}

input[type="radio"]{
	display: none;
}

input[type="radio"] + label:before {
	float: right;
	margin-right: 5px;
	content: '🗑️';
}