body {
    background-color: rgb(172, 172, 243);
    margin: 20px;
    font-family: 'Bubblegum Sans', cursive;;
    font-size: 20px;
}

.container {
    display: grid;
    grid-template-rows: 0.2fr 2fr 1fr;
}

#backlink {
    grid-row: 1 /span 1;
}

header {
    grid-row: 2 / span 1;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: rotate(4deg);
    color: yellow;
}

#fortunecontainer {
    grid-row: 3 / span 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-family: 'Baloo 2', cursive;;
}


figcaption {
    position: relative;
    left: 50%;
    color: red;
}

#image {
    border-radius: 150px;
    cursor: pointer;
    transition: 2s;
    margin-left: 60px;
    width: 300px;
    height: auto;
}


@media screen and (max-width: 600px) {
    img {
        width: 200px;
        height: auto;
    }
}


img:active {
    transform: rotate(1000deg);
}

/* CSS */
button {
  background-image: linear-gradient(92.88deg, #455EB5 9.16%, #5643CC 43.89%, #673FD7 64.72%);
  border-radius: 8px;
  border-style: none;
  box-sizing: border-box;
  color: #FFFFFF;
  cursor: pointer;
  flex-shrink: 0;
  font-family: "Inter UI","SF Pro Display",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
  font-size: 16px;
  font-weight: 500;
  height: 4rem;
  padding: 0 1.6rem;
  text-align: center;
  text-shadow: rgba(0, 0, 0, 0.25) 0 3px 8px;
  transition: all .5s;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

button:hover {
  box-shadow: rgba(80, 63, 205, 0.5) 0 1px 30px;
  transition-duration: .1s;
}

button:active {
    background-image:  linear-gradient(92.88deg, rgb(55, 67, 121) 9.16%, rgb(35, 12, 90) 43.89%, rgb(3, 10, 75) 64.72%);
}

@media (min-width: 768px) {
  button {
    padding: 0 2.6rem;
  }
}

#fortune {
    background-color: red;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80%;
    height: 100px;
    padding: 3%;
    color: white;
    font-size: x-large;
    box-shadow: rgb(85, 91, 255) 0px 0px 0px 3px, rgb(31, 193, 27) 0px 0px 0px 6px, rgb(255, 217, 19) 0px 0px 0px 9px, rgb(255, 156, 85) 0px 0px 0px 12px, rgb(255, 85, 85) 0px 0px 0px 15px;
}

button:disabled,
button[disabled] {
    background-image: linear-gradient(92.88deg, #787879 9.16%, #656568 43.89%, #2e2d2e 64.72%);
}