adopta.css

body{
    background-image: url("poza_fundal.jpg");
    height: 100vh;
    display: flex;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}




nav{
  position: fixed;
  position: top;
  right:0;
  top: 0;
  left:0; 
  width: 100%; 
  z-index:1000;
  
}

nav ul{
  list-style-type: none;
  margin: 2px;
  padding: 8px 10px;
  overflow: hidden;
  background-color: black;
  display: flex;
  justify-content: space-around;
}

nav li{
  float: left;
}
.color {
  
  animation: colors 10s infinite;
}

@keyframes colors {
    from {color: blue;}  
    to {color: yellow;}  
}
li a {
  color: white;
  text-align: center;
  font-size: x-large;
  padding: 8px 10px;
  text-decoration: none;
}

nav li:hover
{
  padding: 8px 10px;
  background-color: brown;
}

.dropdown-content a
{
  opacity: 0.5;
  padding: 8px 10px;
}

.dropdown-content a:hover
{
  opacity: 0.5;
  background-color: gray;
  animation-name: example;
  animation-duration: 4s;
}

@keyframes example {
  from {background-color: white;}
  to {background-color: brown;}
}

.dropdown-content
{
  display:none; 
  position:absolute;
}

.dropdown:hover .dropdown-content
{
  color: white;
  text-align: center;
  font-size: x-large;
  padding: 8px 10px;
  text-decoration: none;
  display:flex;
  flex-flow:column nowrap;
  background-color: black;
}
.container 
{
  position: relative;
  padding-top: 7em;
  padding-left: 2em;
}
.container li
{
  font-size: larger;
  vertical-align: middle;
  text-decoration-line: underline;
  text-decoration-style: solid;
}
.container {
  box-shadow: inset 0 0 0 0 #54b3d6;
  color: #54b3d6;
  padding: 0 .25rem;
  margin: 0 -.25rem;
  transition: color .3s ease-in-out, box-shadow .3s ease-in-out;
}
.container:hover {
  color: #fff;
  box-shadow: inset 822px 0 0 0 #54b3d6;;
}


.container {
  color: #54b3d6;
  font-family: 'Poppins', sans-serif;
  font-size: 27px;
  font-weight: 700;
  line-height: 1.5;
  text-decoration: none;
}
.mail{  
  width: 382px;  
  overflow: hidden;  
  margin: auto;  
  margin: 20 0 0 450px;
  margin-top: 200px;
  padding: 80px;  
  background: chocolate;  
  border-radius: 15px ;  
    
}  
h2{  
text-align: center;  
color: black;  
padding: 20px;  
}  
p{  
color: #08ffd1;  
font-size: 17px;  
}  

input[type=text], select { 
width: 300px;  
height: 30px;  
border: none;  
border-radius: 3px;  
padding-left: 8px;  
}

#Pass{  
width: 300px;  
height: 30px;  
border: none;  
border-radius: 3px;  
padding-left: 8px;  

}  

.submit{  
width: 300px;  
height: 30px;  
border: none;  
border-radius: 17px;  
padding-left: 7px;  
color: blue;  


}  

.user-bar {
background: lightgreen;
display: flex;
padding: 12px;
margin-bottom: 12px;
}

.user-bar .message {
flex: 1;
min-width: 0;
}
@media only screen and (max-width: 768px)
{
  .container:hover {
    color: #fff;
    box-shadow: inset 600px 0 0 0 rebeccapurple;
  }
}
@media only screen and (max-width: 600px)
{
  .container:hover {
    color: #fff;
    box-shadow: inset 550px 0 0 0 greenyellow;;
  }
}