﻿body {
    background-image: url("../../images/background.jpg");
    background-repeat: no-repeat;
    position: fixed;
    background-size: 100%;
}
.animate {
    animation : shimmer 8s infinite;
    background: linear-gradient(to right, #575757 4%, #680e0e 25%, #490202 36%);
    background-size: 1000px 100%;
 }

 @keyframes shimmer {
    0% {
      background-position: -1000px 0;
    }
    100% {
      background-position: 1000px 0;
    }
}
#introp1 {
    background-image: url("../../images/intro_p1.png");
    background-repeat: no-repeat;
    position: fixed;
    background-size: 100%;
    height: 92px;
    width: 241px;
    top: 20px;
    left: 15%;
    margin-left: -123.5px;
    opacity: 0;
}
#introp2 {
    background-image: url("../../images/intro_p2.png");
    background-repeat: no-repeat;
    position: fixed;
    background-size: 100%;
    height: 69px;
    width: 66px;
    top: 38px;
    left: 23%;
    margin-left: -33.5px;
    opacity: 0;
}
#namelogo {
    background-image: url("../../images/clanname.png");
    background-repeat: no-repeat;
    position: fixed;
    background-size: 100%;
    height: 318px;
    width: 691px;
    top: 375px;
    left: 450px;
    opacity: 0;
}
#mouseHandler {
    background-color: rgba(25, 25, 25, 0.0);
    position: relative;
    height: 1100px;
    width: 1760px;
    overflow-x: hidden;
    top: -15px;
    left: -15px;
}
#sidemenu {
    background-image: url("../../images/menubutton.png");
    background-repeat: no-repeat;
    position: fixed;
    background-size: 100%;
    width: 60px;
    height: 59px;
    right: -25px;
    top: 47%;
    animation-name: noticeMe;
    animation-duration: 3s;
    animation-fill-mode: none;
}
@keyframes noticeMe {
    from {right: 150px;}
    to {right: -25px;}
}

#sidemenu:hover {
    right: -20px;
}
#expandedmenu {
    background-image: url("../../images/menubutton.png");
    background-repeat: no-repeat;
    position: fixed;
    background-size: 100%;
    width: 60px;
    height: 59px;
    right: 150px;
    top: 47%;
}
#menucontent {
    background-color: rgba(55, 55, 55, 0.6);
    position: fixed;
    height: 100%;
    width: 175px;
    right: 0px;
    top: -15px;
    padding-bottom: 15px;
}
#menulinks {
    position: relative;
    top: 225px;
    left: 25px;
    width: 174px;
    height: 100%;
}
#link1 {
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    font-size: 31px;
    text-decoration: none;
    margin-left: 20px;
    color: black;
}
    #link1:hover {
        border-top: 1px solid white;
        border-bottom: 1px solid white;
        color: darkgoldenrod;
    }
#link2 {
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    font-size: 31px;
    text-decoration: none;
    color: black;
}
    #link2:hover {
        border-top: 1px solid white;
        border-bottom: 1px solid white;
        color: darkgoldenrod;
    }
#link3 {
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    font-size: 31px;
    text-decoration: none;
    margin-left: 18px;
    color: black;
}
    #link3:hover {
        border-top: 1px solid white;
        border-bottom: 1px solid white;
        color: darkgoldenrod;
    }
#link4 {
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    font-size: 31px;
    text-decoration: none;
    margin-left: 33px;
    color: black;
}
    #link4:hover {
        border-top: 1px solid white;
        border-bottom: 1px solid white;
        color: darkgoldenrod;
    }