/*
    Webgarden 250x250 styling
*/
@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap');

body {
    background-color: var(--bg-color);
    background-image: var(--bg-image);

    color: var(--font-color);
    font-family: var(--font-main);
    margin: 0;

    /*
    display: flex;
    justify-content: center;
    align-items: center;
    */
}

main {
    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;

    background-image: url("../img/heart_floaties.gif"), linear-gradient(#00000000, #00000000, #73408511, #73408555, #734085aa);

    box-shadow: 0px 0px 10px 5px var(--box-shadow) inset;
    -webkit-box-shadow: 0px 0px 10px 5px var(--box-shadow) inset;
    -moz-box-shadow: 0px 0px 10px 5px var(--box-shadow) inset;
}

/* */

h1 { font-size: 1.3em; line-height: 0.9; }
h1 span { font-size: 2.8em; }
h1:hover { animation: tilt-n-move-shaking 0.25s infinite; }

a { text-decoration: none; color: var(--font-color);}
a:hover, a:active { color: var(--accent-medium); }

img {
    position: relative;
    top: -60px;
    left: 0px;
    width: 250px;
    height: auto;

    z-index: -1;
}

.tagline {
    z-index: 1;
    position: relative;
    top: -550px;
}

/* ---- */

.fancy { font-family: 'Great Vibes', cursive; }

@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); }
}