#webgarden {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    position: fixed;
    top: 50%;
    left: 50%;
    margin: -125px 0 0 -125px;
    width: 240px;
    height: 240px;

    text-align: center;
    padding: 5px;

    box-shadow: 0px 0px 10px 5px #DCFFDD55 inset;
    -webkit-box-shadow: 0px 0px 10px 5px #DCFFDD55 inset;
    -moz-box-shadow: 0px 0px 10px 5px #DCFFDD55 inset;

    background-image: linear-gradient(#11040955, var(--back));
}

#webgarden a {
    text-decoration: none;
}
#webgarden h1:hover { animation: tilt-n-move-shaking 0.25s infinite; color: var(--head-4); }
#webgarden .shroom:hover { animation: an_shake .2s linear infinite; }

#webgarden h1 {
    position: relative;
    top: -20px;
}

#webgarden .shroom {
    position: relative;
    top: -40px;
    z-index: 1;

    width: 50%;
}

#webgarden .shrooms {
    position: relative;
    top: -60px;
    z-index: 0;

    height: 120px;

    background-image: url("../images/mushrooms.webp");
    background-size: 50%;
}
#webgarden .tagline {
    position: relative;
    top: -180px;
    z-index: 2;

    padding-top: 1em;
    padding-bottom: 5em;

    background-image: linear-gradient(#11040900, #11040955);
}
#webgarden mark { background-color: #11040955; color: var(--color) }

@keyframes tilt-n-move-shaking {
  0% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(5px, 5px) rotate(5deg); }
  50% { transform: translate(0, 0) rotate(0eg); }
  75% { transform: translate(-5px, 5px) rotate(-5deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}