body {
    display: flex;
    font-family: Avantgarde, TeX Gyre Adventor, URW Gothic L, sans-serif;
    font-size: 2rem;
    line-height: 1.5;
    color: rgba(54, 69, 79, 1);
    justify-content: center;
    align-items: flex-start;
    margin: 0;
    height: 100vh;
    background-color: #36454f;
    overflow: auto;
    position: relative;
}
#background-text {
    position: fixed;
    top: -2vh;
    left: 0;
    right: 0;
    width: 110%;
    height: 100%;
    z-index: -100;
    color: #6feae6;
    opacity: 0.06;
    font-family: Avantgarde, TeX Gyre Adventor, URW Gothic L, sans-serif;
    font-size: 1.5rem;
    line-height: 1.5; 
    white-space: pre-wrap; 
    padding: 20px;
    pointer-events: none;
    overflow: auto;
    background-repeat: repeat;

}
.bottom-text {
    position: fixed;
    z-index: 2;
    color: rgba(54, 69, 79, 1);
    width: 100vw;
    background-color: #05ffa1;
    text-align: center;
    height: 6vh;
    bottom: 0;    
    opacity: .85;
}
.lmenu {
    position: fixed;
    left: -20vw;
    top: 12vh;
    z-index: 2;
    background-color: #b967ff;
    height: 32vh;
    width: 24vw;
    border-top-right-radius: 20px; 
    border-bottom-right-radius: 20px;
    opacity: .85;
    line-height: 1;
    font-weight: bold;
    font-style: italic;
}
.lmenu:hover {
    transform: translateX(20vw);
    transition: transform 0.5s ease;
}

.wrapper {
    display: flex;
    width: 50%;
    justify-content: center;
    flex-wrap: wrap;
    overflow: visible;
    position: relative;
    padding-top: 5%;
    padding-bottom: 10%;
}

.tile {
    position: static;
    width: 14vw;
    height: 11vh;
    margin: 7px;
    border-radius: 100px;
    z-index: 1;
    transition: transform 0.3s ease 1s, z-index 0s ease 1s, ease 1s;
    font-family: Avantgarde, TeX Gyre Adventor, URW Gothic L, sans-serif ;
    animation: pulse2 20s infinite;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 11vh;
    color: rgba(54, 69, 79, 1);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
    

}

.tile:nth-child(2n) {
    width: 14vw;
    height: 18vh;
    animation: pulse 7s infinite;
    font-weight: bold;
}

.tile:nth-child(3n) {
    width: 14vw;
    height: 11vh;
    animation: pulse2 10s infinite;
}

.tile:nth-child(4n) {
    width: 9vw;
    height: 13vh;
    animation: pulse4 13s infinite;
    font-weight: bold;
}

.tile:nth-child(5n) {
    width: 11vw;
    height: 16vh;
    animation: pulse 13s infinite;
}

.tile:nth-child(6n) {
    width: 13vw;
    height: 13vh;
    animation: pulse3 13s infinite;
}

.tile:hover {
    transform: scaleX(5) scaleY(3);
    transform-origin: center;
    z-index: 2;
    position: relative;
    transition-delay: .8s;
    color: rgba(0, 0, 0, 0.0);
    font-size: 200px;
    text-shadow: none;
    opacity: .85;
}


@keyframes pulse {
    0% {
margin-top: 0;

    }
    50% {
margin-top: -7px;

border-radius: 40px;
    }
    100% {
margin-top: 0;

    }
}

@keyframes pulse2 {
    0% {
margin-top: 0;

    }
    50% {
margin-top: 7px;

margin-right: 2px;
border-radius: 80px;
    }
    100% {
margin-top: 0;

    }
}

@keyframes pulse3 {
    0% {
margin-top: 0;

    }
    50% {
margin-top: 5px;
margin-left: 2px;

border-radius: 60px;
    }
    100% {
margin-top: 0;

    }
}

@keyframes pulse4 {
    0% {
margin-top: 0;

    }
    50% {
margin-top: -5px;

border-radius: 40px;
    }
    100% {
margin-top: 0;

    }
}
.paw-print {
    position: absolute;
    width: 2vw;
    height: 4vh;
    max-width: 400px;
    max-height: 400px;
    text-align: center;
    opacity: 0;
    animation: walk 80s infinite, blink 8s infinite;
    animation-delay: 0s;
    right: 5%;
}
.paw-print2 {
    position: absolute;
    width: 2vw;
    height: 4vh;
    max-width: 400px;
    max-height: 400px;
    text-align: center;
    opacity: 0;
    animation: walk2 80s infinite, blink 8s infinite;
    animation-delay: 2s;
    right: 5%;
}
.paw-printlol {
    position: fixed;
    z-index: -1;
    width: 100vw;
    height: 100vh;
    text-align: center;
    opacity: .35;
    right: 5%;
}

.toe {
    position: absolute;
    border-radius: 50%;
    opacity: .45;
}
.toe1 {
    width: 33%;
    height: 35%;
    top: -15%;
    left: 10%;
    background-color: #eecd69;
    filter: blur(3%);
    transform: rotate(-10deg);
}

.toe2 {
    width: 30%;
    height: 35%;
    top: 16%;
    right: -14%;
    background-color: #dd6dfb;
    filter: blur(3%);
    transform: rotate(15deg);
}

.toe3 {
    width: 30%;
    height: 32%;
    top: -15%;
    right: 20%;
    background-color: #f6a3ef;
    filter: blur(3%);
    transform: rotate(10deg);
}

.toe4 {
    width: 35%;
    height: 33%;
    top: 15%;
    left: -20%;
    background-color: #6feae6;
    filter: blur(3%);
    transform: rotate(-15deg);
}
.pad {
    position: absolute;
    background-color: #6feae6;
    filter: blur(5%);
    transform: rotate(-10deg);
    opacity: .25;
}
.pad1 {
    
    bottom: 10%;
    left: 13%;
    width: 60%;
    height: 60%;
    border-radius: 80% 80% 40% 40%;
    box-shadow: 0% 15% 5% 10% #4B0150;
}
.pad2 {
    bottom: -5%;
    left: -4%;
    width: 60%;
    height: 50%;
    border-radius: 80% 80% 80% 80%;
    
}
.pad3 {
    bottom: -5%;
    right: 6%;
    width: 60%;
    height: 50%;
    border-radius: 80% 80% 80% 80%;
}.pad4 {
    bottom: 0%;
    left: 10%;
    width: 50%;
    height: 60%;
    border-radius: 80% 80% 80% 80%;
    opacity: .15
    
}

@keyframes walk {
    0%, 9% {
    bottom: 0vh;
    right: 0vw;
    }
    10%, 19% {
    bottom: 15vh;
    right: 4vw;
    }
    20%, 29% {
    bottom: 25vh;
    right: 4vw;
    }
    30%, 39% {
    bottom: 35vh;
    right: 4vw;
    }
    40%, 49% {
    bottom: 45vh;
    right: 4vw;
    }
    50%, 59% {
    bottom: 55vh;
    right: 4vw;
    }
    60%, 69% {
    bottom: 65vh;
    right: 4vw;
    }
    70%, 79% {
    bottom: 75vh;
    right: 4vw;
    }
    80%, 89% {
    bottom: 85vh;
    right: 4vw;
    }
    90%, 100% {
    bottom: 95vh;
    right: 4vw;
    }
}


@keyframes walk2 {
    0%, 9% {
    bottom: 0vh;
    right: 0vw;
    }
    10%, 19% {
    bottom: 20vh;
    right: 8vw;
    }
    20%, 29% {
    bottom: 30vh;
    right: 8vw;
    }
    30%, 39% {
    bottom: 40vh;
    right: 8vw;
    }
    40%, 49% {
    bottom: 50vh;
    right: 8vw;
    }
    50%, 59% {
    bottom: 60vh;
    right: 8vw;
    }
    60%, 69% {
    bottom: 70vh;
    right: 8vw;
    }
    70%, 79% {
    bottom: 80vh;
    right: 8vw;
    }
    80%, 89% {
    bottom: 90vh;
    right: 8vw;
    }
    90%, 100% {
    bottom: 100vh;
    right: 8vw;
    }
}

@keyframes blink {
    0%, 49.99% {
        opacity: .4;
    }
   50%, 100% {
        opacity: 0;
    }
}