body {
    font-family: Arial, Helvetica, sans-serif;
    background-color: #04AA6D;
}
form {
    background-color: #ffffff;
    border: 2px solid #f1f1f1;
    border-radius: 20px;
    box-shadow: 2px 2px 8px #000000;
    width: 25%;
    margin: 15% auto 15% auto; /* 1= all sides 2 = top and bottom 3= top,right and left, bottom 4= top,right,bottom,left*/
    box-sizing: border-box;
}
input[type=text] {
  width: 100%;
  padding: 12px 20px;
  margin: 20px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-sizing: border-box;
}
button {
  background-color: #04AA6D;
  color: white;
  padding: 14px 20px; /* 1= all sides 2 = top and bottom 3= top,right and left, bottom 4= top,right,bottom,left*/
  margin: 8px 0;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  width: 100%;
}
button:hover {
  opacity: 0.8;
}
.upper {
    padding: 30px 30px 15px 30px;
}
.lower {
    /*background-color: white;*/
    border-radius: 0px 0px 0px 0px;
    opacity: 0.8;
    padding: 25px;
    margin: 2px 0px 0px 0px;
}
.right{
    float: right;
    /*text-align: right;*/
}
input:focus::placeholder {
  color: transparent;
}
@media screen and (max-width: 300px) {
    .pword {
     display: block;
     float: none;
  }
}
/* border
border-radius
border-top-left-radius
1= applies to all corners
2= top left and bottom right / top right and bottom left
3= top left / top right and bottom left / bottom right
4= top left / top right / bottom right / bottom left
*/
/* padding
padding-bottom / padding-left / padding-right / padding-top
1= Set padding for all 4 sides
2= top and bottom / right and left
3= top / right and left / bottom
4= top / right / bottom / left
*/
/* margin
margin-bottom / margin-left / margin-right / margin-top
1= Set margin for all 4 sides
2= top and bottom / right and left
3= top / right and left / bottom
4= top / right / bottom / left
*/