input:required:invalid, input:required:invalid {
  border: 1px dotted red;
}

label {
  display: inline-block;
  margin-left: 20px;
  margin-top: 15px;
  text-align: left;
  font-family: Arial, Arial, Helvetica, sans-serif;
  font-size: 2vw;
  color: navy;
}

@media only screen and (min-width: 1500px) {
  label{
    font-size: 25px;
  }
}


/* Create two equal columns that floats next to each other */
.column {
  float: left;
  width: 50%;
  padding: 10px;
}

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

/* Full-width input fields */
input[type=text], input[type=password] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  box-sizing: border-box;
  font-size: 2vw;
  color: purple;
}

@media only screen and (min-width: 1500px) {
input[type=text], input[type=password] {
    font-size: 30px;
  }
}

/* Set a style for all buttons */
button{
  padding: 15px 25px;
  font-size: 1.8vw;
  text-align: center;
  cursor: pointer;
  outline: none;
  color: #fff;
  background-color: #4CAF50;
  border: none;
  border-radius: 15px;
  box-shadow: 0 9px #999;
  margin-bottom: 10px;
}

/*Submit button - centering detail*/
.btnSubmit{
  display: flex;
  justify-content: center;
}

.btnSubmit{
  width: 100%
}

/* Center the image (avatar) and position the close button */
.imgcontainer {
  position: relative;
  text-align: center;
  margin: 10px 0 2px 0;
}

img.avatar {
  width: 20%;
  border-radius: 50%;
}

.container {
  padding: 0px 0px 0px 50px;
  font-size: 1.5vw;
  margin: 10px;
}

/* Add Zoom Animation */
.animate {
  -webkit-animation: animatezoom 0.6s;
  animation: animatezoom 0.6s
}

@-webkit-keyframes animatezoom {
  from {-webkit-transform: scale(0)} 
  to {-webkit-transform: scale(1)}
}
  
@keyframes animatezoom {
  from {transform: scale(0)} 
  to {transform: scale(1)}
}

form input{
  color: purple;
  margin-top: 0px;
  margin-bottom: 10px;
  margin-left: 5px;
}