* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

body {
    width: 100%;
    height: 100vh;
}

header {
    width: 100%;
    height: 40vh;
    background-color: yellow;
    border-bottom: 20px orange solid;
    text-align: center;
    padding: 20vh 0 0 0;
    font-size: 26px;
    color: rgb(88, 63, 14);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

header span {
    font-size: 50px;
}

.bounceme {
    animation: bounce ease 2s 3; /* runs the 'bounce' animation with ease timing (slow start and end) for two seconds. Runs the animation three times. */
    display: inline-block;
}

@keyframes bounce {
    /* The bounce animation code */
    0% {
        transform: scale(1, 1) translateY(0); /* Starting position and actual size */
    }
    10% {
        transform: scale(1.1, 0.9) translateY(0); /* Grow width and shrink height for pre-bounce squash effect */
    }
    30% {
        transform: scale(1, 1) translateY(-6rem); /* Return to actual size and move emoji up 100px from current position */
    }
    50% {
        transform: scale(1, 1) translateY(0); /* Move emoji back to starting position */
    }
}

.rollmeleft {
    animation: rollleft ease 8s 1;
    display: inline-block;
  }
  
  @keyframes rollleft {
    /* The roll animation code */
    from {
      transform: translate(-60vw) rotate(0deg);
    }
  
    to {
      transform: translate(0vw) rotate(360deg);
    }
  }

main {
    text-align: center;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    height: 50vh;
}

.image {
    width: 100%;
    height: 50vh;
    position: absolute;
    background-image: url(Emoji\ Ipsos\ iSay\ Today\ May\ \(1\).jpg);
    opacity: 0.5;
}

ol {
    font-size: 25px;
    margin-bottom: 40px;
}

.hugefont {
    font-size: 90px;
}


.spinme {
    animation: rotate-center linear 8s 2; /* Time taken for animation and number of repetitions */
    display: inline-block;
}
  
  @keyframes rotate-center {
    0% {
      transform: rotate(0);
    }
    100% {
      transform: rotate(360deg);
    }
}

.wrap {
    text-align: center;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 20px;
    color: rgb(88, 63, 14);
}

footer {
    background-color: rgb(51, 51, 177);
    border-top: 20px blue solid;
    width: 100%;
    height: 10vh;
}