#chain{
    animation:funny 5s;
    scale: 2;
    position: fixed;
}
@keyframes funny {
    0%{top: 700px; left: 800px;}
    50%{top:50px; left:200px; transform: rotate(180deg);}
    100%{ top: 75px; left: -3000px; transform: rotate(180deg);}
}
#hands{
    transform: rotate(180deg);
    position: fixed;
    top:50px;
    right:0px;
    scale:2;
    animation:hand 5s infinite;
}
@keyframes hand {
    0%{transform:rotate(200deg);}
    50%{transform:rotate(100deg);}
    100%{transform:rotate(200deg);}
}
#main{
    margin-top:20px;
    display: grid;
    grid-template-areas:
    "title title title"
    "zl1 zl1 zl2"
    "zl3 zl3 zl2"
    "zl4 zl4 zl4";
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 3fr 3fr 3fr;
}
#main > *{
    border:black 1px solid;
    padding: 5px;
    text-align: center;
}
#zl1{
    grid-area:zl1;
}
#zl2{
    grid-area:zl2;
}
#zl3{
    grid-area:zl3;
}
#zl4{
    grid-area:zl4;
}
#title{
    grid-area:title;
}
nav{
    display: flex;
    justify-content: space-around;
}
nav > *{
    text-decoration: none;
    cursor: pointer;
    color:black;
    font-size: 25px;
}
#logo{
    height: 50px;
    width:auto;
    position: absolute;
    top: 2px;
    left: 5px;
}
#hands, #chain{
    pointer-events: none;
}




@media screen and (max-width:599px){
    #main{
        margin-top:60px;
        display: grid;
        grid-template-areas:
        "title"
        "zl1"
        "zl2"
        "zl3"
        "zl4";
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 3fr 3fr 3fr 3fr;
    }
    nav{
        display: none;
    }
    #hands,#chain{
        display: none;
    }
}
@media screen and (min-width:600px) and (max-width:1199px){
    #main{
    margin-top:20px;
    display: grid;
    grid-template-areas:
    "title title"
    "zl1 zl2"
    "zl1 zl2"
    "zl3 zl3"
    "zl4 zl4";
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 3fr 3fr 3fr 3fr;
    font-size: 30px;
    }
    #hands,#chain{
        height: 150px;
        width: auto;
    }
}
@media screen and (min-width:1200px){
    #main{
    margin-top:20px;
    display: grid;
    grid-template-areas:
    "title title title"
    "zl1 zl1 zl2"
    "zl3 zl3 zl2"
    "zl4 zl4 zl4";
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 3fr 3fr 3fr;
    font-size: 25px;
    }
    nav > *{
        font-size: 40px;
    }
}