mdstyle.css

body{
margin:0px;
background-color:DarkRed;
}
.im{
width:160px;
height:250px;
border-radius:5px;
display:inline-block;
margin:0px 0px 0px 10px;
}
img{
border-radius:5px;
width:100%;
height:100%;
box-shadow:3px 3px 15px black;
transition:0.5s;
}

img:hover{
border-radius:5px;
width:100%;
height:100%;
box-shadow:3px 3px 15px black;
transform:translateY(-10px);
}

p{
text-align:center;
color:white;
font-size:16px;
}
#he{
background-color:black;
height:100px;
}
.sty{
margin:10px;
border-radius:5px;
width:200px;
height:70px;
box-shadow:3px 3px 15px 3px black;
transition:0.7s;
}
.sty:hover{
margin:10px;
background-color:black;
border-radius:5px;
width:200px;
height:70px;
box-shadow:4px 4px 10px 4px red;
transform:translateY(-15px);
}
h4{
color:DarkRed;
display:hidden;
text-shadow:3px 3px 15px 3px black;
transition:0.8s;
}
h4:hover{
display:block;
color:white;
text-shadow:4px 4px 10px 4px white;
transform:translateY(-24px);
}

input[type="text"] {
  width: 200px;
  height: 40px;
  padding: 10px;
  color: #fff;
  background-color:DarkRed;
  border: 2px solid #cc0000;
  border-radius: 20px;
  box-shadow: 3px 3px 15px black;
  font-size: 16px;
  outline: none;
  transition:0.8s;
}

input[type="text"]::placeholder{
  color:white;
  opacity: 0.8;
}
input[type="text"]:hover {
  width: 260px;
  height: 45px;
  padding: 10px;
  color: #fff;
  background-color:#111;
  border: 3px solid #cc0000;
  border-radius: 20px;
  box-shadow: 5px 5px 10px black;
  font-size: 20px;
  outline: none;
    }