body{
    background:black;
    color:rgb(255, 255, 255);
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
.message{
    margin:5em 0 2em;
    text-align:center;
}
.images{
    display:flex;
    justify-content:space-evenly;
    align-items:center;
    text-align:center;
}
.shakeComputer{
    animation: shake 0.8s linear;
}
.shakePlayer{
    animation:shake 0.8s linear;
}

.points{
    margin:2em;
    text-align:center;
}

.options{
    margin:2em 0;
    text-align:center;
}
.computerPoints{
    margin-left:3em;
}
.playerPoints{
    margin-right:3em;
}

.options{
    margin-top:4em;
    display:flex;
    justify-content: space-around;
}
.options button{
    background:none;
    color:white;
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    border: 1px solid lightblue;
    padding:1em 2em;
    border-radius: 10px;
    width:150px;
    white-space: nowrap;
    cursor:pointer;
    outline:none;
    transition: 0.2s all linear;
}

.options button:hover{
    background-color: rgba(177, 232, 252);
    color:rgb(245, 103, 126);
    border: 1px solid rgb(245, 103, 126);
}

@keyframes shake{
    0% { transform: translate(1px, 1px) rotate(0deg); }
    10% { transform: translate(-1px, -2px) rotate(-1deg); }
    20% { transform: translate(-3px, 0px) rotate(1deg); }
    30% { transform: translate(3px, 2px) rotate(0deg); }
    40% { transform: translate(1px, -1px) rotate(1deg); }
    50% { transform: translate(-1px, 2px) rotate(-1deg); }
    60% { transform: translate(-3px, 1px) rotate(0deg); }
    70% { transform: translate(3px, 1px) rotate(-1deg); }
    80% { transform: translate(-1px, -1px) rotate(1deg); }
    90% { transform: translate(1px, 2px) rotate(0deg); }
    100% { transform: translate(1px, -2px) rotate(-1deg); }
}

