html, body{ height: 100%; margin: 0; }
body{ display: grid; grid-template-rows: auto 1fr auto; height: 100dvh; margin: 0; } 
main{ padding: 20px; overflow: auto; }
footer{ background-color: rgba(243, 11, 46, 0); color: black; padding: 10px; text-align: center; }

@keyframes image1 { 0% { opacity: 1 } 50% { opacity: 0; } 100% { opacity: 1; } }
@keyframes image2 { 0% { opacity: 0 } 50% { opacity: 1; } 100% { opacity: 0; } }
@media (max-width:1024px) { .border-r { border: 0px solid !important } }

.text-color { color: #00DE00; }
.options:hover { text-decoration: underline; color: #00DE00; }
.hash-button { color: #fff; padding: 5px 20px; letter-spacing: 0.2em; border-radius: 30px; background-image: conic-gradient(from 1turn, #5ddb1c, #43b309 0turn, #5ddb1c); display: inline-flex; align-items: center; color: #fff; }
.button { display: flex; height: 30px; padding: 0; background: #262626; border-radius: 5px; overflow: hidden; font-family: "Lexend Exa", sans-serif; cursor: pointer; }
.button:hover { background: #4ab8482a; }
.button:disabled:hover { cursor: not-allowed; background-color: #262626; color: #00de001e; }
.button:active { background: #4ab8489c; }
.button__text { display: inline-flex; align-items: center; padding: 0 5px; color: #00DE00; height: 100%; }
.button__icon { display: inline-flex; align-items: center; padding: 0 10px; color: #00DE00; height: 100%; font-size: 1em; background: #4ab84809 }
.mainfooter { width: 100%; background-color: #24262cd7; }
.innerfooter { background-color: #171717; }
.footer { background-color: #24262c67; display: block; unicode-bidi: isolate; padding: 20px; }
.footertext { color: #525C67; }
.dino-1-animation { animation: dino1 5000ms infinite; }
.dino-2-animation { animation: dino2 5000ms infinite; }

@keyframes dino1 { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } }
@keyframes dino2 { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } }

/* ================================ 
                M O D A L
============================== */
.modal { position: fixed; bottom: 0; z-index: 1000; }
.dino-chimney-container { position: relative; }
.chimney { width: 6.4em; height: 70%; bottom: 0; transition: transform 2s; }
.chimney img { display: block; width: 100%; height: auto; position: absolute; bottom: 0; transform-origin: bottom center; }
.chimneyup { animation: bounceUp 0.5s forwards; }
.chimneydown { animation: bounceDown 1s forwards; }

@keyframes bounceUp { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1.01); } }
@keyframes bounceDown { 0% { transform: scaleY(1.01); } 50% { transform: scaleY(1); } 100% { transform: scaleY(0); } }

.dino { position: absolute; display: flex; width: 5rem; bottom: 0px; margin-left: 0.7rem; transition: transform 2s; }
.dino img { display: block; width: 100%; height: auto; position: absolute; bottom: 0; transform-origin: bottom center; }
.dinoup { animation-delay: 1s; animation: dinobounceUp 0.3s forwards; }
.dinodown { animation: dinobounceDown 0.4s forwards; }

@keyframes dinobounceUp { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: translateY(-6.2em); } }
@keyframes dinobounceDown { 0% { transform: translateY(-6.2em); } 50% { transform: scaleY(1); } 100% { transform: scaleY(0); } }

.message-container { display: flex; width: 10px; justify-content: center; color: rgb(0, 0, 0); position: absolute; bottom: 0; margin-left: 3em; }
.message-content { padding: 10px; overflow: hidden; text-align: center; align-items: center; font-size: 12px; height: 35%; width: fit-content; background: greenyellow; border-radius: 20px; box-shadow: 0 0 20px 10px rgb(0, 0, 0); }
.messageup { animation: popOut 0.5s ease-in-out forwards; }
.messagedown { animation: popIn 0.3s ease-in-out forwards; }

@keyframes popOut { 0% { transform: translateY(0px); height: 30px; width: 20px; opacity: 0; } 45% { transform: translateY(-10em); height: 30px; width: 30px; margin-left: 3em; opacity: .5; } 100% { transform: scale(1); width: 150px; height: 18em; opacity: 1; margin-left: 3em; } }
@keyframes popIn { 0% { transform: scale(1); width: 150px; height: 18em; opacity: 1; margin-left: 3em; } 75% { transform: translateY(-10em); height: 30px; width: 30px; margin-left: 3em; opacity: .5; } 100% { transform: translateY(0px); height: 30px; width: 20px; opacity: 0; } }

@media (width <= 319px){ .modal { display: none; } .dino-chimney-container { display: none; } }
@media (height <= 450px){ .modal { display: none; } .dino-chimney-container { display: none; } }