*{
    padding:0;
    margin:0;
box-sizing: 0;;
}

h1{

        font-family: "Rubik Distressed", serif;
        font-weight: 400;
        font-style: normal;
        padding: 0 5%;
    
      
}
p{

        font-family: "Love Ya Like A Sister", serif;
        font-weight: 400;
        font-style: normal;
      }
      
      

#titlecontainer{
    background-color: rgba(4, 65, 118, 0.639);
    background-image: url(hermes-images/clouds.webp); 
    background-size: cover;
    background-repeat: no-repeat;
    color: rgb(254, 215, 168);
    font-size: 80px;
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    height:100vh;
    flex-direction: row;
    text-shadow: 5px 5px 20px rgba(188, 58, 2, 0.957);
    position:relative;
}

.titlehermes{

background-image: url(hermes-images/titlehermes.png);
width: 600px;
height:600px;
background-size: contain;
background-repeat: no-repeat;
background-position: right;
position: absolute;
right:0;
bottom:0;


}
.button{
    position: absolute;
    bottom:20%;
    left: 60%;
    background-color: rgba(0, 26, 255, 0.781);
    width:200px;
    height:100px;
    border-radius: 60%;
    box-shadow: 10px 10px, black;
    text-align: center;
    font-size: 70px;
text-decoration: none;
color:aliceblue;
}
.button:hover{

    background-color: blueviolet;
    color:rgb(255, 200, 0);

}

#hermespage1{
    background-color: green;
  
}





.cave{
    background-image: url(hermes-images/cave.jpeg);
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 100vh;
    background-position: center;
    display: flex;
    flex-direction: row;
    position: relative;
}
.intro{ 
    background-color: rgba(2, 45, 2, 0.527);
    color:white;
    font-size: 30px;
    padding:15px;
    width:33%;
    height:200px;
    margin-left:33%;
    margin-right:33%;
    margin-top:15px;
    margin-bottom:100px;
    animation: dropdown 5s 0s linear normal;
  

}
@keyframes dropdown{
    0%{
    margin-top:15px;
    margin-bottom:100px;
    }
   
    100%{
        margin-top:200px;
        margin-bottom:15px;
        
    
    }
}
.tortoiseshell{

    display: flex;
    flex-direction: row;
    width:100%;
    height: 100vh;
    position: relative;
}
.tortoise{
    background-image: url(hermes-images/tortoise.jpeg);
    background-repeat: no-repeat;
    background-size: cover;
    width: 40%;
    height:100vh;
  
    
    
}
.tortoise2{
    background-image: url(hermes-images/tortoise2.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: 100%;
    height:100vh;
    position: absolute;
    top:0px;
    left:10%;
    z-index: 10;
    animation: turtlespinn 10s linear 5s 1 normal;
}
.chisel{
    background-image: url(hermes-images/chisel.webp);
    background-repeat: no-repeat;
    background-size: contain;
    width: 400px;
    height:500px;
    position: absolute;
    top:10%;
    left:70%;
    z-index:13;
   
    animation: stab 10s linear 5s 1 ;
   
}
.explain2{
    background-color: rgba(56, 24, 5, 0.728);
    width:500px;
    height:200px;
    position:absolute;
    bottom: 20%;
    left:50%;
    font-size: 30px;
    color:white;
    padding: 15px;
    text-decoration: none;

}
.explain2:hover{

    background-color: rgb(56, 24, 5);;
    box-shadow: 0 10px 10px gold;
    text-decoration: none;
    color:rgb(3, 57, 3);


}

@keyframes turtlespinn {
    0%{
        
        opacity: 1;
       
    }
    
   


    100%{
        opacity: 0;
        left:50%;
   
    }

    
}
@keyframes stab {
    0%{
       
        opacity: 1;
    }
   

    100%{
        opacity: 0;
        left:30%;
    }

    
}
.shell{
    background-image: url(hermes-images/shell.jpeg);
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 60%;
    width: 60%;
    height:100vh;
   
    text-align: center;
    font-size: 30px;
 


}
.cow3{
    background-image: url(hermes-images/cow3.png);
    width: 200px;
    height:150px;
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
 bottom:0;
 right:0;
  

}
.cow3:hover{
    background-color: rgba(255, 217, 0, 0.534);
    box-shadow: 10px 10px 5px 10px rgba(255, 217, 0, 0.6);
    border-radius: 80%;
}

#hermespage2{

}

.sacrifice{
    display: flex;
    flex-direction: column;
    width:100%;
    position: relative;
   

}
.text{
    width:300px;
    height:200px;
    position: absolute;
    font-size: 24px;
    background-color: rgba(255, 166, 0, 0.767);
    box-shadow: 0px 5px 5px 5px;
    padding: 10px;
    margin:15px
}
.cattle{
    background-image: url(hermes-images/cattle.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height:150vh;
}

.cow2{
    background-image:url(hermes-images/cow2.webp) ;
    background-repeat: no-repeat;
    background-size: cover;
    width: 600px;
    height:500px;
    position:absolute;
    background-color: rgba(255, 196, 0, 0.651);
    border-radius: 70%;
    top: 20%;
    left: 30%;
    animation: cowforgods 15s 5s ease-in-out 1 normal;

}
.gods{
    background-image: url(hermes-images/greek-gods-olympus.jpeg);
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height:100vh;
}


@keyframes cowforgods {
0%{
    opacity: 0;
}
50%{
    opacity: 1;
}
100%{
    top:70%;

}

    
}
.uhoh{
    background-color: rgba(255, 0, 0, 0.79);
width: 100%;
height: 100vh;
box-shadow: 10px;
    width:100%;
    height: 100vh;
    display: flex;
    flex-direction: row;
position: relative;


}

.angryapollo{
    background-image: url(hermes-images/appollp2.png);
    width: 30%;
    height: 100vh;
    background-size: contain;
    background-repeat: no-repeat;


}

.bubble{
    background-color: white;
    border-radius: 70%;
    width:30%;
    height:40vh;
    font-size: 50px;
    text-align: center;
    margin: 10px 10px;
    justify-content: center;

    

}
.hermes1{
    background-image:url(hermes-images/hermes1.png);
    width:30%;
    height:100vh;
border-radius: 50%;
    background-size: cover;
    background-repeat: no-repeat;


}



.bubble2{

background-color: white;
color: #000;
width: 150px;
height:80px;
position: absolute;
top: 50%;
left:70%;
font-size: 50px;
text-align: center;
box-shadow: 10px 5px 5px;
text-decoration: none;




}

.buuble2:hover{
    background-color: rgba(255, 153, 0, 0.865);
    color:rgb(255, 0, 0);
    text-decoration: none;

}

.music1{
background-image: url(hermes-images/musicnote4.png);
background-size: cover;
background-repeat: no-repeat;
width:200px;
height:200px;
position: absolute;
left:80%;
}
.music2{
background-image:url(hermes-images/musicnote3.png);
background-size: cover;
background-repeat: no-repeat;
width:200px;
height:200px;
position: absolute;
bottom:20%;
left:80%;
}
.music3{
    background-image: url(hermes-images/musicnote4.png);
    background-size: cover;
    background-repeat: no-repeat;
    width:200px;
    height:200px;
    position: absolute;
    right:30%;
    bottom:40%
}

#hermespage3{
    background-color: rgb(255, 191, 0);
    width:100%;
    height:100vh;

}
.creation{
    background-image: url(hermes-images/clouds.webp);
    background-size: cover;
 background-repeat: no-repeat;
 width:100%;
 height:100vh;
 display: flex;
 flex-direction: row;
 position: relative;


}
.hermeslyre{
    background-image: url(hermes-images/hermes3.webp);
    width: 33%;
    height: 100vh;
    background-repeat: no-repeat;
    background-size: cover;
    margin-left: 33%;
    margin-right: 33%;
  
    box-shadow: 0 20px 30px yellow;
}
.musicnotes{
   background-image: url(hermes-images/musicnotes2.png);
    background-size: contain;
background-repeat: no-repeat;
width:100%;
height:100vh;
position: absolute;
opacity: .2;
bottom:0;
right:0;

}
    .creation2{
        background-image: url(hermes-images/clouds.webp);
        background-size: cover;
     background-repeat: no-repeat;
     width:100%;
     height:100vh;
     display: flex;
     flex-direction: row;
    
    }
 .lyre{
    background-image: url(hermes-images/lyre2.avif);
    width:350px;
    height: 500px;
    background-size: cover;
    background-repeat: no-repeat;
    margin:15px;
    box-shadow: 0px 10px 10px;
 }
.explain{
    background-color: orange;
    width:400px;
    height:200px;
    padding:25px;
    margin:15px 15px 15px 15px;
    font-size: 24px;
    text-align: center;
    box-shadow: 0px 10px 10px;
}
.appollo{
    background-image: url(hermes-images/appollo3.webp);
    background-size: cover;
    background-repeat: no-repeat;
    width:300px;
    height: 500px;
    margin:15px;
    box-shadow: 10px 10px 5px;
 
}
.creation3{
    background-image: url(hermes-images/clouds.webp);
    background-size: cover;
 background-repeat: no-repeat;
 width:100%;
 height:100vh;
 display: flex;
 flex-direction: row;
}
.hat{
    background-image: url(hermes-images/hat.png);
    background-size: contain;
    background-repeat: no-repeat;
    width:30%;
    height:100vh;


}
.zeus{
    background-color: orange;
    width:400px;
    height:200px;
    padding:25px;
    margin:15px 15px 15px 15px;
    font-size: 24px;
    text-align: center;
    box-shadow: 0px 10px 10px;
}


.shoes{
    background-image: url(hermes-images/shoes.jpg);
    width: 325px;
    height: 180px;
    background-size: contain;
    background-repeat: no-repeat;
    margin-top: 20%;
    box-shadow: 0px 10px 10px;
    
}

.theend{
    display:flex;
    flex-direction: row;
    width:100%;
    height: 600px;
}
.hermeslast{
    background-image: url(hermes-images/hermes4.png);
    background-size: cover;
 background-repeat: no-repeat;
 width:500px;
 height:600px;
 



}
.conclude{
    width: 300px;
    height:200px;
    padding:15px;
    margin:25px;
    font-size:30px;
    text-decoration: none;
    margin-left: 20%;
 margin-top: 20%;;

}
.conclude a{
    text-decoration: none;
}
.conclude:hover{
    text-shadow: 10px 10px 10px rgb(0, 110, 255);
text-decoration: none;
}
#hermesfinal{
    background-color: rgb(68, 165, 230);
}
.final{
    background-color: rgba(4, 65, 118, 0.639);
    background-image: url(hermes-images/hermes5.jpg); 
    background-size: cover;
    background-repeat: no-repeat;
    color: rgb(254, 215, 168);
    font-size: 80px;
    display:flex;
    align-items:center;
    justify-content:center;
    width:700px;
    height:500px;
    flex-direction: row;
    text-shadow: 5px 5px 20px rgba(188, 58, 2, 0.957);
    position:relative;
 margin:20%;
}
.button2{
    position: absolute;
    bottom:10%;
    left: 60%;
    background-color: rgba(0, 26, 255, 0.781);
    width:300px;
    height:150px;
    border-radius: 60%;
    box-shadow: 10px 10px, black;
    text-align: center;
    font-size: 60px;
text-decoration: none;
color:aliceblue;
}
.button2:hover{

    background-color: blueviolet;
    color:rgb(255, 200, 0);

}