html,body{
    height:100%
}

.tausta {
    background-image:
    url("https://cdn.pixabay.com/photo/2014/12/04/14/46/magnolia-trees-556718_1280.jpg");
    height:100%;
    background-position:center;
      background-repeat:no-repeat;
        background-size:cover;
        background-attachment:fixed;
}
div {
background-color: red;
width: 300px;
border: 15px solid purple;
padding: 20px;
margin: 20px;
outline-style:outset;
outline-color:black;
border-radius:40px;
}

img {
 height:100%;
 width:100%;
 border-radius:20px;
 opacity:0.4;
}
img:hover{
opacity:1;
transition:0.7s;
}

.top-middle{
    position:absolute;
    top:1px;
    right:40%;
    
}

.top-middle2{
    position:absolute;
    top:35%;
    right:40%;
    
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: purple;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover:not(.active) {
  background-color: #111;
}

.active {
  background-color: purple;
}