* {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
    
 }
 
 html, body {
     height: 100vh;
      background-color: black;
 }
 
 h3 {
     text-align: center;
 }
 
.svg{
    transform: translate(0%, 0%);
    width: 100%;
    height: 97%;
    display: block;
    max-width: 100%;
    max-height:100%;     
}

#button{
    transform: translate(22px,520px) ;
    cursor:pointer;
}

#hover-text{   
    opacity:0;
    transition: opacity 1s linear; 
}

#hover-image{   
    z-index: 4;
    opacity:0;
    mix-blend-mode: multiply;
    transition: opacity 1s linear;
    transform-origin: center;
    animation: rotate 10s linear infinite;
}
 
svg:hover #hover-text{
    opacity:1;
}

svg:hover #hover-image{
    opacity:0.8;
}

#map{
    position: absolute;
    z-index: 1;
}

#fellowship{
    position: absolute;
    z-index: 2;
    mix-blend-mode: multiply; 
}

 footer {
     background-color: red;
     position: fixed;
     bottom: 0;
     height: 3%;
     width: 100%;
 }
 
@keyframes rotate {
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
}
 

#shireElipse{   
    animation: Shire 7s linear infinite;   
}

@keyframes Shire {
    0% {
        rx:0;
        ry:0;
    }
    20% {
        rx:100;
        ry:60;
    }
    40% {
        rx:0;
        ry:0;
    }
    100% {
        rx:0;
        ry:0;
    }
}

#rivenElipse{   
    animation: Riven 7s linear infinite;   
}

@keyframes Riven {
    0% {
        rx:0;
        ry:0;
    }
    20%{
        rx:0;
        ry:0; 
    }
    40% {
        rx:100;
        ry:60;
    }
    60% {
        rx:0;
        ry:0;
    }
    100% {
        rx:0;
        ry:0;
    }
}

#minasElipse{   
    animation: Minas 7s linear infinite;   
}

@keyframes Minas {
    0% {
        rx:0;
        ry:0;
    }
    40%{
        rx:0;
        ry:0; 
    }
    60% {
        rx:100;
        ry:60;
    }
    80% {
        rx:0;
        ry:0;
    }
    100% {
        rx:0;
        ry:0;
    }
}

#mordorElipse{   
    animation: Mordor 7s linear infinite;   
}

@keyframes Mordor {
    0% {
        rx:0;
        ry:0;
    }
    60%{
        rx:0;
        ry:0; 
    }
    80% {
        rx:100;
        ry:60;
    }
    100% {
        rx:0;
        ry:0;
    }
}