*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:"Happy Monkey";
}
body {
    min-height: 100vh;
    background: url('dog.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
.header{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    padding:20px;
    background:gray;
    display:flex;
    justify-content:space-between;
    /* yopu are adding space between each navigation*/
    
    align-items:center;
    z-index:100;
    /* Z-index specifies the stack order of elements (which element of, or behind, the other)*/
}
.logo{
    font-size:32px;
    color:black;
    text-decoration:none;
    font-weight:650;
}
.navbar a{
    position:relative;
    font-size:18px;
    color:white;
    font-weight:500;
    text-decoration:none;
    margin-left:30px;
}
.navbar a::before{
    content:'';
    /*add space before to create a hovering underline element*/
    position:absolute;
    top:100%;
    left:0;
    width:0;
    height:2px;
    background:black;
    transition:.5s ease-in;
}
.navbar a:hover::before{
    width:100%;
}
.active {
    background: #0047AB;
    border-radius: 50%; 
    
}
.wrapper{
font-family:"", sans-serif;
  width:50%;
    margin:0 auto;
    position: relative;
}
img{
       opacity:1;
    display:block;
    width:110%;
    height:auto;
    transition: .5s ease;
    margin-top:150px;
}
.content{
position: absolute;
    top:45%;
    left:50%;
    transform:translate(-50%,-50%);
    -ms-transform:translate(-50%,-50%);
    text-transform: uppercase;
    text-align:center;
    color: Red
    white-space:nowrap;
    overflow:hidden;
    font-size: 70px;
   
    
}
.content a{
    font-size: 30px;
    display: block;
    background-color: white;
    text-align: center;
    padding:10px;
    cursor:pointer;
    text-decoration: none;
    color:blue;
}
.overlay{
opacity:0;
}
.wrapper:hover img{
    opacity:.3;
}
.wrapper:hover .overlay{
opacity:1;
}
#box1{
    width:20%;
    border:3px solid black;
    position:absolute;
    margin-top: -400px;
    margin-left: 20px;
    text-align: center;
    padding:10px;
    font-weight:bold;
    color:red;
}
#box2{
    width:17%;
    border:3px solid black;
    position: absolute;
    margin-top: -400px;
    left:82%;
    text-align: center;
    padding:10px;
    font-weight:bold;
    color:orange;
    
}
#box3{
    width:50%;
    position:absolute;
    border:3px solid black;
    position: absolute;
    margin: 50px;
    padding: 10px;
    text-align:center;
    left:25%;
    font-weight:bold;
    color:tomato;
}
#box4{
    width:17%;
    border:3px solid black;
    position: absolute;
    margin-top: -200px;
    left:82%;
    text-align: center;
    padding:10px;
    font-weight:bold;
    color:yellow;
    
}
li{
    list-style:none;
    
}

#box3:hover {
    cursor: pointer;
    transform: translateY(-250px);
    transition: transform 2.5s ease-in;
}

#box1:hover {
    cursor: pointer;
    transform: translateX(500px);
    transition: transform 2.5s ease-in;
}

#box2:hover {
    cursor: pointer;
    transform: translateX(-500px);
    transition: transform 2.5s ease-in;
}

#box4:hover {
    cursor: pointer;
    transform: translateX(-500px);
    transition: transform 2.5s ease-in;
}