@import url("https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@300;400;500;700;900&display=swap");
body {
  background-color: #000000;
  color: #FFFFFF;
  display: flex;
  justify-content: center;
  align-items: center;
  height: -webkit-fill-available;
  min-height: 100vh;
  /* mobile viewport bug fix */
  min-height: -webkit-fill-available;
  margin: 0;
  font-family: 'Zen Kaku Gothic New', sans-serif; }

html {
  height: -webkit-fill-available; }

.container {
  text-align: center; }

.logo {
  margin-bottom: 1rem; }

.heading {
  font-size: 2rem;
  font-weight: 1000;
  margin-bottom: 1rem; }

.message {
  font-size: 1.2rem;
  margin-bottom: 1rem; }

/* Add styles for the matrix code rain container */
.matrix-rain {
  position: fixed;
  top: -50%;
  left: 0;
  width: 100%;
  height: 200%;
  overflow: hidden;
  background: linear-gradient(to top, #000000, #1e1e20);
  z-index: -1;
  pointer-events: none; }

/* Add styles for the matrix code characters */
.code {
  font-size: 1rem;
  font-family: 'Courier New', monospace;
  position: absolute;
  color: #009eff;
  white-space: nowrap;
  top: calc(100vh * var(--random-y));
  /* Random vertical position */
  left: calc(100% * var(--random-x));
  /* Random horizontal position */
  animation: matrix-fall linear;
  /* Apply the animation */ }

/* Define animation for matrix code falling */
@keyframes matrix-fall {
  0% {
    transform: translateY(0);
    opacity: 1; }
  100% {
    transform: translateY(100vh);
    opacity: 0; } }
/* Floating paw icon styles */
.floating-paw {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  z-index: 1000;
  animation: paw-float 3s infinite alternate; }
  .floating-paw i {
    font-size: 2rem;
    color: #ffffff;
    animation: paw-rotate 2s infinite linear;
    color: #009eff;
    opacity: .1;
    cursor: pointer;
    transition: all 0.2s ease; }
    .floating-paw i:hover, .floating-paw i.pawsed {
      opacity: 1; }

/* Animation for rotating the paw icon when paused */
@keyframes paw-rotate {
  0% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(360deg); } }