@import url('https://fonts.googleapis.com/css?family=Roboto');
    /*font-family: 'Roboto', sans-serif;*/
    @import url('https://fonts.googleapis.com/css?family=Open+Sans');
    /*font-family: 'Open Sans', sans-serif;*/
    @import url('https://fonts.googleapis.com/css?family=Encode+Sans+Condensed');
    /*font-family: 'Encode Sans Condensed', sans-serif;*/

.wrapper{
	width: 45%;
	border: 1px solid #bfbfbf;
	margin: 5% 25%;
	box-shadow: 0px 5px 10px 5px rgba(0,0,0,0.5);
	
}

li{
	list-style-image: url(https://klocksnack.se/styles/baisik/pen.png);
	padding-bottom: 5%;
}

h3{
	font-family: 'Open Sans', sans-serif;
	font-size: 100%;
	padding: 0 0 2% 3%;
}

header{
	background-color: #d8d8d8;
	text-align: center;
	padding: 2% 2%;
	font-size: 170%;
    font-family: 'Roboto', sans-serif;
    color: #7109ce;
}

#add-task{
	padding: 5% ;
	margin: 0 7%;
	width: 90%;
}



#hide{
	margin: 15px 0px; ;
	width: 20px;
}

.delete{
	background: #7109ce;
	color: white;
	float: right;
	padding: 1% 1%;
	cursor: pointer;
	margin-right: 2%;
	font-family: 'Roboto', sans-serif;
	font-size: 100%;
}

input[type = text]{
height:2em;
width: 50%;
}

button{
	background: #7109ce;
	color: white;
	padding:1%;
	font-family: 'Roboto', sans-serif;
	border: solid 1px #7109ce;
	font-size: 90%; 
}

@media screen and (max-width: 768px){
  
  .wrapper{
	width: 85%;
	border: 1px solid #bfbfbf;
	margin: 10% 5%;
	box-shadow: 0px 5px 10px 5px rgba(0,0,0,0.5);
	}
  
  li{
    padding-bottom:4%;
    font-size:100%;
  }
  
  h3{
	font-family: 'Open Sans', sans-serif;
	font-size: 90%;
	padding: 0 0 2% 3%;
}
  
 header{
	text-align: center;
	padding: 2% 2%;
	font-size: 140%;
} 
  
  
  
  #add-task{
	padding: 2% 0 10% 10% ;
	width: 80%;
  
}
 
 #hide{
	margin: 20px 0px; ;
	width: 20px;
   
}
  
}

@media screen and (max-width: 420px){
  #add-task{
    width:70%;
    padding-left:20%;
  }
}


.article {
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	padding: 0 20% 1%;
}