* {margin: 0; padding:0;
}
#di {background-image: url(div.jpg); background-size: cover; background-position: center;
}
img {float: left; height: 70px; border: 2px solid black;
}
 
.nar {background-color: indigo; font-size: 35px; line-height: 80px; height: 80px; text-align: center; margin-left: 30px; color: red; 
} 
.nad:hover {background-color: black; color:indigo; opacity: 0.5;
}




.nad {background-color: white; margin-right: 20px; margin-top: 30px; font-weight: bold; padding:5px; display:inline-block; width: 100px; text-align: center; float: right; border-radius: 10px; text-decoration: none;spacing: 4px; height: 15px; line-height: 10px;
}
.abt {margin-top: 40px; color: white; text-align: center;
}

#vi {background-image: url(dir.jpg); background-size: cover;}
footer {font-family: comic sans ms; font-size: 40px; background-color: black; margin-top: 100vh; color: white; text-align: center; height: 80px;
}
#zi {background-color: rgb(141,114,138);
}
div {border: 5px solid rgb(64,0,64); overflow: scroll; height: 250px; width: 300px; font-size: 20px; margin-top: 60px; font-family: Albertus Medium; margin-left: 20px;
}

section {background-color: indigo; font-family: broadway;  height: 60px; text-align: center; font-size: 40px; line-height: 60px; margin-top: 40px;
}
.ref { float: right; height:200px; border: 3px solid indigo; margin-top:40px;
}


.ref:hover {opacity: 0.5;
}

.p2 {float: left; margin-top: 100px; height: 500px; width: 580px; overflow: scroll; margin-left: 20px;
}

form { width: 500px; padding: 30px; text-align: center; margin: 0 auto; border-radius: 20px; background-image: url("N.jpg"); background-size: cover;background-position: center; height: 450px; margin: 0 auto;
}
input {font-size: 16px; text-align: center; border-bottom: 4px solid red; background-color: rgb(124,227,62); width: 400px; color: white; font-weight: bold; border-top: 0; border-left: 0; border-right: 0;
}
button {background-color: red; width: 200px; color: white; height: 30px; font-size: 13px; font-weight: bold; border-radius: 14px;
}
button:hover {background-color: rgb(124,227,62);
}
h4 {color: lightgreen; margin-top: 70px; margin-bottom: 0; font-weight: bold; font-size: 25px; text-decoration:underline;
}
label {font-weight: bold; margin: 0 auto; margin-left: 0px;
}

nav {background-color: indigo; height: 100px; color: black;  margin-bottom: 100px;
}


.plane-1 {float: left; height: 80px; border: 2px solid black; animation-name: plane-1; animation-duration: 5s; animation-iteration-count: 5;
}

@keyframes plane-1 {
	0%{margin-left: 0px;}
	60%{marign-left:100px; border: 8px solid yellow; height: 100px; }
	100&{margin-left: 70px; border:8px solid red; height: 180px;}
}







@media only screen and (min-width: 1000px ){
	
* {margin: 0; padding:0;
}
#di {background-image: url(div.jpg); background-size: cover; background-position: center;
}
img {float: left; height: 80px; border: 2px solid black;
}
 
.nar {background-color: indigo; font-size: 40px; line-height: 80px; height: 80px; text-align: center; margin-left: 30px; display: inline-block;
}
.nad:hover {background-color: black; color:indigo; opacity: 0.5;
}

.nad {background-color: white; margin-right: 20px; margin-top: 30px; font-weight: bold; padding:5px; display:inline-block; width: 100px; text-align: center; float: right; border-radius: 10px; text-decoration: none;spacing: 4px; height: 15px; line-height: 10px;
}

#vi {background-image: url(dir.jpg); background-size: cover;}
footer {font-family: comic sans ms; font-size: 40px; background-color: black; margin-top: 100vh; color: white; text-align: center; height: 80px;
}
#zi {background-color: rgb(141,114,138);
}
div {border: 5px solid rgb(64,0,64); overflow: scroll; height: 250px; width: 300px; font-size: 20px; margin-top: 60px; font-family: Albertus Medium; margin-left: 20px;
}

section {background-color: indigo; font-family: broadway;  height: 60px; text-align: center; font-size: 40px; line-height: 60px; margin-top: 40px;
}
.ref { float: right; height:200px; border: 3px solid indigo; margin-top:40px;
}


.ref:hover {opacity: 0.5;
}

.p2 {float: left; margin-top: 100px; height: 500px; width: 580px; overflow: scroll; margin-left: 20px;
}

form {background-color: rgb(182,237,146); width: 500px; padding: 30px; text-align: center; margin: 0 auto;border-radius: 20px; float: left; background-image: url("N.jpg"); background-size: cover;background-position: center; height: 450px; margin: 0 auto;
}
input {font-size: 16px; text-align: center; border-bottom: 4px solid red; background-color: rgb(124,227,62); width: 400px; color: white; font-weight: bold; border-top: 0; border-left: 0; border-right: 0;
}
button {background-color: red; width: 200px; color: white; height: 30px; font-size: 13px; font-weight: bold; border-radius: 14px;
}
button:hover {background-color: rgb(124,227,62);
}
h4 {color: lightgreen; margin-top: 70px; margin-bottom: 0; font-weight: bold; font-size: 25px; text-decoration:underline;
}
label {font-weight: bold; margin: 0 auto; margin-left: 0px;
}

nav {background-color: indigo; height: 80px; color: black;
}

.plane-1 {float: left; height: 80px; border: 2px solid black; animation-name: plane-1; animation-duration: 5s; animation-iteration-count: 5;
}

@keyframes plane-1 {
	0%{margin-left: 0px;}
	60%{marign-left:100px; border: 8px solid yellow; height: 100px; }
	100&{margin-left: 70px; border:8px solid red; height: 180px;}
}

	
	
}