*{
  margin: 0; padding: 0; box-sizing: border-box;
}


header ,form {
  width: 100%; height: 100vh; background-image:linear-gradient(rgba(1, 0, 0, 0.7),rgba(1, 0, 0, 0.4)), url('background.jpg');
  background-repeat: no-repeat;
  background-size: cover;
}
nav {
  width: 100%; height: 15vh; background-blend-mode: ; color: white; display: flex; justify-content: space-between; align-items: center;
}

nav .logo{
      width: 25%; text-align: center; 
}


nav .menu{
  width:50% ; display: flex; justify-content: space-around;
}
nav .menu a {
   width: 25%; text-decoration: none; color: white; font-weight: bold;
}

main{
  width: 100%; height: 85vh; display: flex; justify-content: center; align-items: center; text-align: center; color: white;
}
section {

}
section h3{
  font-size: 35px; font-weight: 200;letter-spacing: 3px; text-shadow: 2px 2px 3px black;
}
section h1{
    margin :30px 0 20px 0 ; font-size: 55px; font-weight: 700;letter-spacing: 3px; text-shadow: 2px 2px 3px black;
}

section p{
    margin :30px 0 20px 0 ; font-size: 14px; font-weight: 100;letter-spacing: 3px; text-shadow: 2px 2px 3px black;
}
section a{
   padding: 12px 30px; border-radius: 4px; outline: none; margin :30px 0 20px 0 ; font-size: 17px; font-weight: 500;letter-spacing: 1px; transition: all .5s ease;
    
}
section .btnone{
  background: whitesmoke; color: black;  font-weight: bold;border-radius: 40px;
}

.btnone:hover{
  background: blue; color: white; 
}

section .btntwo{
  background: #00b894; color: white;    font-weight: bold; border-radius: 40px;
}

.btntwo:hover{
  background: blue; color: black;
}

.change_content:after{
  content: '';
  animation: changetext 5s infinite linear; color:#00b894 ;
}
@keyframes changetext{
  0%{content: "DOING";}
  33%{content: "PRACTICING";}
  66%{content: "EXECUTION";}
  100%{content: "IMPLIMENTATION";}
}

.container {
  display: grid-tamplet-column:300px 100px ;
  padding: 10px;display: inline;
}
input[type=text], input[type=number] {
  width: 50%;
  padding: 10px;
  margin: 4px 0 18px 0;
  display: inline-block;
  border: none;
  background: #f1f1f1;border-radius: 40px;
}

/* Full-width input fields */
input[type=text], input[type=password] , input[type=date] {
  width: 50%;
  padding: 10px;
  margin: 4px 0 18px 0;
  display: inline-block;
  border: none;
  background: #f1f1f1;border-radius: 40px;
}

input[type=text]:focus, input[type=password]:focus {
  background-color: #ddd;
  outline: none;
}
input[type=radio] {
  width: 5%;
  padding: 4px;
  margin: 2px 0 7px 0;
  display: inline-block;
  border: none;
  background: #f1f1f1;border-radius: 40px;
}


/* Set a style for the submit/register button */
.registerbtn {
  background-color: #04AA6D;
  color: white;
  padding: 16px 20px;
  margin: 8px 0;
  border: none;
  cursor: pointer;
  width: 100%;
  opacity: 0.9;
}

.registerbtn:hover {
  opacity:1;
}

/* Add a blue text color to links */
a {
  color: dodgerblue;
}

/* Set a grey background color and center the text of the "sign in" section */
.signin {
  background-color: #f1f1f1;
  text-align: center;
}
form h1{
     width: 100%;  display: flex; justify-content: center; align-items: center; text-align: center; color: white;
}