index.css

@import url('https://fonts.googleapis.com/css2?family=B612&Pacifico&display=swap');

body{    
    margin:0;
    padding:0;
    height: 100vh;
    width:100vw;
}

.content{
    color:white;
    font-family: 'B612', sans-serif;
    margin-left: 5%;
    padding-top:10%;
    margin-right: 35%;
    text-align: center;
}

button{
   background: #A60311;
   color:white;
   border: none;
   border-radius: 4px;
   font-size: 1em;
   margin-top: 20px;
   padding:10px 15px;
   cursor: pointer;
   font-family: 'B612', sans-serif;
}

button:focus{
    outline: none;
}


@media(hover: hover) and (pointer: fine) {
    button:hover {
        /* Start the shake animation and make the animation last for 0.5 seconds */
        animation: shake 0.5s;
        font-size: 1.5em;
        /* When the animation is finished, start again */
        animation-iteration-count: infinite;
      }
}

/*shake animation: https://www.w3schools.com/howto/howto_css_shake_image.asp */

button:hover {
    /* Start the shake animation and make the animation last for 0.5 seconds */
    animation: shake 0.5s;
    font-size: 1.5em;
    /* When the animation is finished, start again */
    animation-iteration-count: infinite;
  }
  
  @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); }
  }

.slogan{
    font-size: 4em;
    font-family: 'Pacifico', cursive;
}

.tag-line{
    margin-top: 20px;
    font-size: 1.4em;
}

main{
    background-image:url('coca-cola.jpg');
    background-repeat:no-repeat;
    background-size:cover;
    background-position:center;
    height:100%;
    width:100%;
}