petition.css

body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-family: 'Alkatra', sans-serif;
}

/* div,
h1,
h3 {
    /* display: flex;
    justify-content: center;} */

.main-content {
    background-color: antiquewhite;
    border-color: black;
    box-shadow: 0 0 .5rem black;
    border-radius: .5rem;
    margin-bottom:10px;
    /* display: flex;
    justify-content: center;
    align-items: center; */
    /* height: 100%; */
}

.choice-area{
    display: flex;
    justify-content: center;
    /* flex-direction: row; */
}

img{
    max-width: 100%;
    max-height: 100%;
}

.rock,
.paper,
.scissors,
.play-again {
    /* display: flex;
    justify-content: center; */
    border: .2rem solid black;
    border-radius: .5rem;
    margin: 1rem;
    font-size: 1.5rem;
    padding: 1rem .5rem;
    transition: all .07s ease;
    width: 8rem;
    text-align: center;
    color: white;
    background: rgba(0,0,0,0.4);
    text-shadow: 0 0 .5rem black;
    object-fit: fill;
    cursor: pointer;
}
  
.button-clicked {
    transform: scale(1.1);
    border-color: #ffc600;
    box-shadow: 0 0 1rem #ffc600;
}

.user-win {
    border-color: green;
    box-shadow: 0 0 1rem green;
}
  
.computer-win {
    border-color: red;
    box-shadow: 0 0 1rem red;
}
  
@keyframes shake {
    0%, 100% {
      transform: translateX(0);
    }
    10%, 30%, 50%, 70%, 90% {
      transform: translateX(-3px);
    }
    20%, 40%, 60%, 80% {
      transform: translateX(3px);
    }
}

.shake {
    animation: shake .5s;
}  

@keyframes floatUp {
    0% {
        transform: translateY(0);
        opacity: 1;
    }
    100% {
        transform: translateY(-100px);
        opacity: 0;
    }
}
  
.floating-point {
    position:absolute;
    font-size: 1.5rem;
    animation: floatUp 2s linear forwards;
}

@keyframes grow-and-shrink {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

.play-again {
    animation: grow-and-shrink 4000ms;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    
}

.white-space{
    margin-top: 40px;
}

#Github-logo{
    width: 15px;
    height: 15px;
}

a{
    text-decoration:none;
    color: black;
}

a:hover{
    text-decoration: underline;
}

footer{
    background-color: lightgray;
    width: 100%;
    position: fixed;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}