body {
  margin: 0;
  min-width: 250px;
}

.signUp{

  background-color: wheat;
  padding: 30px 40px;
  color: white;
  text-align: center; 
  border-radius: 10px;
  height: 500px;

}

.register{

  padding: 10px;
  width: 25%;
  background: #d9d9d9;
  color: #555;
  float: left;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
  transition: 0.3s;
  border-radius: 0;
  border-radius: 10px;

}

/* Include the padding and border in an element's total width and height */
* {
  box-sizing: border-box;
}

/* Remove margins and padding from the list */
ul {
  margin: 0;
  padding: 0;
}

/* Style the list items */
ul li {
  cursor: pointer;
  position: relative;
  padding: 12px 8px 12px 40px;
  list-style-type: none;
  background: #eee;
  font-size: 18px;
  transition: 0.2s;
  
  /* make the list items unselectable */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Set all odd list items to a different color (zebra-stripes) */
ul li:nth-child(odd) {
  background: #f9f9f9;
}

/* Darker background-color on hover */
ul li:hover {
  background: #ddd;
}

/* When clicked on, add a background color and strike out text */
ul li.checked {
  background: #888;
  color: #fff;
  text-decoration: line-through;
}

/* Add a "checked" mark when clicked on */
ul li.checked::before {
  content: '';
  position: absolute;
  border-color: #fff;
  border-style: solid;
  border-width: 0 2px 2px 0;
  top: 10px;
  left: 16px;
  transform: rotate(45deg);
  height: 15px;
  width: 7px;
}

/* Style the close button */
.close {
  position: absolute;
  right: 0;
  top: 0;
  padding: 12px 16px 12px 16px;
}

.close:hover {
  background-color: red;
  color: white;
}

/* Style the header */
.header {
  background-color: wheat;
  padding: 30px 40px;
  color: white;
  text-align: center;
  border-radius: 10px;
  margin-top: 20px;
}


@media screen and (max-width: 600px) {
  
   /* Style the header */
.header {
  background-color: wheat;
  padding: 30px 40px;
  color: white;
  text-align: center;
  border-radius: 10px;
  
}


.mail{
  background-color: #eee;
  
}

.pass{
  margin-top: 20px;
  background-color: #eee;
}


.register{
  margin-top: 20px;
  background-color: #eee;
  margin-left: 70px;
}



  }




/* Clear floats after the header */
.header:after {
  content: "";
  display: table;
  clear: both;
}

/* Style the input */
input {
  margin: 0;
  border: none;
  border-radius: 0;
  width: 75%;
  padding: 10px;
  float: left;
  font-size: 16px;
}

/* adding background color and alligning center */
.file{
  margin-left: 35px;
  background-color: #eee;    font-size: 16px;

}
.username{
  margin-left: 35px;
  background-color: #eee;    font-size: 16px;
}
.email{
  margin-top: 20px;
  margin-left: 35px;
  background-color: #eee;
}
.url1{
  margin-left: 35px;
   background-color: #eee;
}
.url2{
  margin-left: 35px;
   background-color: #eee;
}
.url3{
  margin-left: 35px;
   background-color: #eee;
}
.txtbox{
  margin-left: 35px;
   background-color: #eee;
}


/* Style the "Add" button */
.addBtn {
  padding: 10px;
  width: 35%;
  background: #d9d9d9;
  color: #555;
  float: left;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
  transition: 0.3s;
  border-radius: 10px;
}

.addBtn:hover {
  background-color: #bbb;
}
.imge-box{
height: 50px;
border-radius: 40px;
margin-left: 70px;
position: relative;
padding: 2px 4px;
margin-bottom: 90px;

}

.btn{
position: relative;
padding: 2px 4px;
background: 15px;
box-shadow: 0 0px 150px rgba(0, 0, 0, 0.3); 
margin-top: -56px;
margin-left: -57px;
border-radius: 50px;
margin-bottom: -50px;
margin-top: -65px;
background-color: wheat;
color: black;
width: 56px;
height: 56px;
}

@media screen and (max-width: 900px) {
  
.imge-box{ width: 50px;
height: 50px;
border-radius: 40px;
margin-left: 70px;
position: relative;
padding: 2px 4px;
margin-bottom: 70px;

}

.btn{
  position: relative;
  padding: 2px 9px;
  background: 15px;
  box-shadow: 0 0px 150px rgba(0, 0, 0, 0.3); 
  margin-top: -56px;
  margin-left: 103px;
  border-radius: 50px;
  margin-bottom: 9px;
  background-color: wheat;
  color: black;
  width: 56px;
  height: 56px;
  margin-bottom: 60px;
}

.imge-box  img{
  margin-left: 33px;
  margin-top: -10px;
}

.back{
  position: relative;
  padding: 2px 9px;
  background: 15px;
  box-shadow: 0 0px 150px rgba(0, 0, 0, 0.3); 
  margin-top: -56px;
  margin-left: -60px;
  border-radius: 50px;
  margin-bottom: 9px;
  background-color: wheat;
  color: black;
  width: 56px;
  height: 56px;
  margin-bottom: 60px;

}

.btn{
  position: relative;
  padding: 2px 9px;
  background: 15px;
  box-shadow: 0 0px 150px rgba(0, 0, 0, 0.3); 
  margin-top: -56px;
  margin-left: 103px;
  border-radius: 50px;
  margin-bottom: 9px;
  background-color: wheat;
  color: black;
  width: 56px;
  height: 56px;
  margin-bottom: 60px;
}
/* 
text inputfields shadow */
.input{margin: 0;
border: none;
border-radius: 20px;
width: 75%;
padding: 10px;
float: left;
font-size: 16px;
position: relative;
padding: 10px 15px;
background: 2px;
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
margin-right: 90px;
margin-top: 10px;
}

submit info btn */
.addBtn{
  margin-top: 20px;
  margin-left: 90px;
}


}

input {
  margin: 0;
  border: none;
  border-radius: 20px;
  width: 75%;
  padding: 10px;
  float: left;
  font-size: 16px;
  position: relative;
  padding: 10px 15px;
  background: 2px;
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
  margin-right: 90px;
  margin-top: 10px;
  
 
  
}

.addBtn{
  margin-top: 20px;
  margin-left: 90px;
}

.txtbox{
  height: 100px;
}

.username{
  margin-left: 35px;
  background-color: #eee;    font-size: 16px;
}
.email{
  margin-left: 35px;
  background-color: #eee;
}
.url1{
  margin-left: 35px;
   background-color: #eee;
}
.url2{
  margin-left: 35px;
   background-color: #eee;
}
.url3{
  margin-left: 35px;
   background-color: #eee;
}
.txtbox{
  margin-left: 35px;
   background-color: #eee;
}
/* 
Register box */ 
.img{
margin-right: 25px; 
background-image: url;
width: 40%;
height: 40%;
border-radius: 45px;

}

.file{
  margin-top: 45px;
  margin-left: 36px;
   background-color: #eee;
}

 .mail{
  background-color: #eee;
  
}

.pass{
  margin-top: 20px;
  background-color: #eee;
}


.register{
  margin-top: 20px;
  background-color: #eee;
  margin-left: 70px;

}
.email-reg{

margin-left: 1px;
background-color: #eee;
margin-top: 15px;


}

.btn{
  position: relative;
  padding: 2px 9px;
  background: 15px;
  box-shadow: 0 0px 150px rgba(0, 0, 0, 0.3); 
  margin-top: -56px;
  margin-left: 103px;
  border-radius: 50px;
  margin-bottom: 9px;
  background-color: wheat;
  color: black;
  width: 56px;
  height: 56px;
  margin-bottom: 60px;
}