/* General Style */
 html {
    background: url("img/matrix_panda.gif") no-repeat center top;
    background-size: cover;
    background-color:#000000;
}

body {
    marging:0em;
    padding:0em;
}

ul {
    margin:0px;
    padding:0px;
}

img {
    width:90%;
    hight:auto;
    max-width:100%;
}

li {
    margin:5em;   
}

a {
    text-decoration: none;
}

 /* Navigation */

nav {
    display:flex;
    justify-content: center;
}
nav ul {
    text-align: center;
}

#pc-div {
    margin-top:5em;
}

#panda {
    width:8em;
}

#cloud {
    width:0em;
}

#plex {
    width:6em;
}

#plexlist {
    width:15em;
}

#shell {
    width:6em;
}

/* Animation */

#pc-div:hover {
      margin-left:7.5em;
      margin-bottom:-3.4em;
}
#pc-div:hover #panda {
      position: relative;
      top:-3.4em;
      left:-10.75em;
      width:8em;
}
#pc-div:hover #cloud {
      position: relative;
      top:-1.4em;
      left:0.25em;
      width:14em;
      animation: grow 1.5s linear infinite;
}
@keyframes grow{
      0%{transform: scale(0.775);}
      10%{transform: scale(0.85);}
      20%{transform: scale(0.925);}
      30%{transform: scale(1.0);}
      40%{transform: scale(1.075);}
      50%{transform: scale(1.15);}
      60%{transform: scale(1.075);}
      70%{transform: scale(1.0);}
      80%{transform: scale(0.925);}
      90%{transform: scale(0.85);}
      100%{transform: scale(0.775);}
}

#plex:hover {
    animation: spin 1.5s linear infinite;
}
@keyframes spin{
    100%{transform: rotate(360deg);}
}

#plexlist:hover {
    animation: grow 1s linear infinite;
}
/**
#shell:hover {
    animation: bounce 0.65s alternate infinite;
    animation-timing-function: ease-in;
}
@keyframes bounce{ **/
    /**from{transform: translate3d(0, 0, 0);}
    to{transform: translate3d(0, -2em, 0);}**/
/**    0% {transform: scale(1,.75) translateY(0);}
    10% {transform: scale(1,.85) translateY(-0.7em);}
    20% {transform: scale(1,1) translateY(-1.4em);}
    30% {transform: scale(1,1) translateY(-2.1em);}
    40% {transform: scale(1,1) translateY(-2.8em);}
    50% {transform: scale(1,1) translateY(-3.5em);}
    60% {transform: scale(1,1) translateY(-2.8em);}
    70% {transform: scale(1,1) translateY(-2.1em);}
    80% {transform: scale(1,1) translateY(-1.4em);}
    90% {transform: scale(1,.85) translateY(-0.7em);}
    100% {transform: scale(1,.75) translateY(0);}
}**/

/* Media */
@media screen and (max-width: 650px) {
    html {
        font-size: 65%;
    }
}