body{
    background-color: black;
    user-select: none;
}
@keyframes myAnimation {
0% {background-color: black;}
50% {background-color: darkred;}
100% {background-color: black;}
}
@keyframes sideSkull{
    0% {transform: translateX(0px) rotate(0deg);}
    50% {transform: translateX(20px) rotate(10deg);}
    100% {transform: translateX(0px) rotate(0deg);}
}
@keyframes handsAttack{
0%{left:-1000px; top:-50px; transform: rotate(0deg);}
4%{left:-300px; top:-40px;}
8%{left:-200px; top:-20px;}
12%{left:-100px; top:-5px;}
14%{left:0px; top:30px;}
16%{left:-150px; top:100px;}
20%{left:-400px; top:-10px; transform: rotate(20deg);}
100%{left:-4000px; top:-10px; transform: rotate(20deg);}
}
@keyframes chainSaw{
0% {
    transform: translateX(-325px) rotate(180deg) scale(2); display: block;
}
50% {
    transform: translateX(-90vw) rotate(175deg) scale(1.9); display: block;
}
100% {
    transform: translateX(110vw) rotate(190deg) scale(2); display: block;
}
}

p{
    font-size:16px;
}
h2{
    font-size:20px;
}
h1{
    font-size:22px;
}
main {
background-color: #000000;
  animation-name: myAnimation;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}
#Logo{
    width: 100px;
    height: auto;
    display: block;
    margin-top:auto;
    margin-bottom:auto;
    animation-name: sideSkull;
    animation-duration: 2s;
    content: url(Images/zombie-logo.png)
}
#Logo:hover{
        animation-iteration-count: infinite;;
}
#Hands{
    width:900px;
    height: auto;
    position:fixed;
    left:-1000px;
    top:25px;
    transform: rotate(0deg);
    animation: handsAttack 3s;
    animation-delay:3.2s;
    pointer-events: none;
}
#CSAW{
    position: fixed;
    top: 75px;
    right: -400px;
    transform:rotate(180deg) scale(2);
    animation: chainSaw 2s;
    animation-delay: 3s;
}
#navBar{
    color:red;
    display:flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
}
#navBar>nav{
    display: flex;
    gap:5px;
}
main{
    display:grid;
    grid-template-areas:
    "H1 P1"
    "P2 H2"
    "H3 P3"
    "P4 H4";
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr;
    height:800px;
}
#P1{
    grid-area: H1;
}
#PP1{
    grid-area: P1;
}
#P2{
    grid-area: H2;
}
#PP2{
    grid-area: P2;
}
#P3{
    grid-area: H3;
}
#PP3{
    grid-area: P3;
}
#P4{
    grid-area: H4;
}
#PP4{
    grid-area: P4;
}
@media screen and (max-width:1199px) and (min-width:600px){
@keyframes handsAttack{
0%{left:-1000px; top:-50px; transform: scale(.75) rotate(0deg);}
4%{left:-300px; top:-40px;transform: scale(.75);}
8%{left:-200px; top:-20px;transform: scale(.75);}
12%{left:-100px; top:-5px;transform: scale(.75);}
14%{left:0px; top:30px;transform: scale(.75);}
16%{left:-150px; top:100px;transform: scale(.75);}
20%{left:-400px; top:-10px; transform: rotate(20deg) scale(.75);}
100%{left:-4000px; top:-10px; transform: rotate(20deg) scale(.75);}
}
@keyframes chainSaw{
0% {
    transform: translateX(-325px) rotate(180deg) scale(1.5); display: block;
}
50% {
    transform: translateX(-90vw) rotate(175deg) scale(1.5); display: block;
}
100% {
    transform: translateX(110vw) rotate(190deg) scale(1.5); display: block;
}
}
@keyframes myAnimation {
0% {background-color: black;}
50% {background-color: rgb(91, 0, 0);}
100% {background-color: black;}
}
p{
    font-size:15px;
}
h2{
    font-size:18px;
}
h1{
    font-size:20px;
}
main{height:1000px;}
}

@media screen and (max-width:599px){
    @keyframes handsAttack{
0%{left:-1000px; top:-50px; transform: scale(.5) rotate(0deg);}
4%{left:-300px; top:-40px;transform: scale(.5);}
8%{left:-200px; top:-20px;transform: scale(.5);}
12%{left:-100px; top:-5px;transform: scale(.5);}
14%{left:0px; top:30px;transform: scale(.5);}
16%{left:-150px; top:100px;transform: scale(.5);}
20%{left:-400px; top:-10px; transform: rotate(20deg) scale(.5);}
100%{left:-4000px; top:-10px; transform: rotate(20deg) scale(.5);}
}
@keyframes chainSaw{
0% {
    transform: translateX(-325px) rotate(180deg) scale(.92); display: block;
}
50% {
    transform: translateX(-90vw) rotate(175deg) scale(.92); display: block;
}
100% {
    transform: translateX(110vw) rotate(190deg) scale(.92); display: block;
}}
        *{
        color:lawngreen;
    }    
    @keyframes myAnimation {
0% {background-color: black;}
100% {background-color: black;}
}
main{
    display:grid;
    grid-template-areas:
    "H1"
    "P1"
    "H2"
    "P2"
    "H3"
    "P3"
    "H4"
    "P4";
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 3fr 1fr 3fr 1fr 3fr 1fr 3fr;
    height:800px;
}
#Logo{
    content: url(Images/Glow-logo.png)
}
p{
    font-size:13px;
}
h2{
    font-size:15px;
}
h1{
    font-size:17px;
}
}