body {
    background-color:rgb(218, 137, 215);
}

main {
    text-align: center;
    background-color:rgb(215, 224, 255);
    margin-left:10%;
    margin-right:10%;
    border: dotted rgb(132, 159, 255) 5px;
    border-radius:25px;
    padding-bottom:100px;
}

nav {
    text-align: center;
    background-color:rgb(215, 224, 255);
    padding:25px;
    margin-left:10%;
    margin-right:10%;

}

div {
    display:flex;
    flex-direction: row;
    justify-content: center;
    justify-content: space-between;
}

.menubutton {
    padding: 20px;
    background-color:rgb(250, 177, 247);
    border: solid rgb(132, 159, 255) 3px;
    border-radius:15px;
     padding-left:45px;
    padding-right:45px;
 
}

.menubutton:hover {
       transition-duration: 0.5s;
    transition-property: transform;
    transform: scale(1.15);
    font-weight:bolder;
}

#back2top {
    padding: 20px;
    background-color:rgb(250, 177, 247);
    border: solid rgb(132, 159, 255) 3px;
    border-radius:15px;
 
}

#back2top:hover {
       transition-duration: 0.5s;
    transition-property: transform;
    transform: scale(1.15);
    font-weight:bolder;
}

a {
    color:rgb(164, 67, 189);
    font-family:'Courier New', Courier, monospace;
    font-weight:bold;
    text-decoration:none;
    padding: 20px;
    padding-left:45px;
    padding-right:45px;
}
.aah {
    color:rgb(164, 67, 189);
    font-family:'Courier New', Courier, monospace;
    font-weight:bold;
    text-decoration:none;
    padding: 20px;
    padding-left:45px;
    padding-right:45px;
}

section {
        text-align: center;
    background-color:rgb(215, 224, 255);
    margin-left:12%;
    margin-right:13%;
    border: double rgb(132, 159, 255) 5px;
    border-radius:10px;
    padding:20px;
    padding-left:10%;
    padding-right:10%;
}

.SillyDance {
    width:250px;
    z-index: 5;
}

#CassieDance {
    position:fixed;
    bottom:0;
    left:0;
    margin-left:-45px;
}

#HarpyDance {
    position:fixed;
    bottom:0;
    right:0;
    margin-right:-45px;
}

.SillyDance:hover {
    animation: shake 0.5s;
    animation-iteration-count: infinite;
}

@keyframes shake {
    0% { transform: translate(2px, 2px) rotate(0deg); }
  10% { transform: translate(-2px, -4px) rotate(-2deg); }
  20% { transform: translate(-6px, 0px) rotate(2deg); }
  30% { transform: translate(6px, 4px) rotate(0deg); }
  40% { transform: translate(2px, -2px) rotate(2deg); }
  50% { transform: translate(-2px, 4px) rotate(-2deg); }
  60% { transform: translate(-6px, 2px) rotate(0deg); }
  70% { transform: translate(6px, 2px) rotate(-2deg); }
  80% { transform: translate(-2px, -2px) rotate(2deg); }
  90% { transform: translate(2px, 4px) rotate(0deg); }
  100% { transform: translate(2px, -4px) rotate(-2deg); }
}

h3 {
    font-family: 'Times New Roman', Times, serif;
    font-weight: bolder;
    font-size:35px;
    color: rgb(250, 238, 177);
    -webkit-text-stroke: 1px rgb(189, 67, 179);
}

p {
    font-family:'Courier New', Courier, monospace;
    font-weight:bolder;
}

h4 {
    font-family: 'Times New Roman', Times, serif;
    font-weight:bolder;
    font-size:20px;
}

audio[controls] {
    border:rgb(132, 159, 255) dotted 3px;
    border-radius:30px;

}

#videos {
    display:flex;
    flex-flow:wrap;
    
}

video {
    border:rgb(132, 159, 255) dotted 3px;
    border-radius:30px;

}

.outsidelink {
    text-decoration: underline;
}

@keyframes logoload {
    0% {
        transform: rotate(-360deg)
    }


    100% {
        transform: rotate(0deg)
    }
}

#top {
        animation: 1s 0s 1 logoload;
}

#back2top:focus {
    transition-duration: 7s;
    transition-property: transform;
    transform:translate(0px, -2750px);
}

#GoToWIPs {
    padding: 20px;
    background-color:rgb(250, 177, 247);
    border: solid rgb(132, 159, 255) 3px;
    border-radius:15px;
 
}

#GoToWIPs:hover {
       transition-duration: 0.5s;
    transition-property: transform;
    transform: scale(1.15);
    font-weight:bolder;
}

#GoToWIPs:focus {
    transition-duration: 5s;
    transition-property: all;
    transform:translate(0px, 925px) scale(75%);
}

footer {
    font-family:'Times New Roman', Times, serif;
    z-index:10;
    text-align:center;
}

footer:hover {
    transition-duration: 15s;
    transition-property: all;
    transform:translateY(50px);
}