@font-face {
    font-family: 'Rabar 021';
    src: url('fonts/Rabar_021.ttf') format('truetype');
  }
html, body {
  place-self: center;
  margin: 0;
  padding: 40px;
  height: 100%;
  overflow: hidden;            /* no scroll */
  -webkit-user-select: none;   /* Safari */
  -ms-user-select: none;       /* IE10+ */
  user-select: none;           /* modern browsers */
}
  body {
    margin: 0;
    height: 100vh;
    background: linear-gradient(135deg, #a7a7a7 0%, #000000 25%, #2c3e52 50%, #000000 75%, #2c3e52 100%);
    background-size: 400% 400%;
    animation: gradientMove 10s ease infinite;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-family: 'Rabar 021', sans-serif;
    color: cyan;
    text-align: center;
  }

  @keyframes gradientMove {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
  }

  h1 {
    font-size: 2rem;
    margin-bottom: 40px;
  }
img  {
  
  width: 80px;
  height: auto;
  
  display: block;
  margin: 0px auto;
  filter: drop-shadow(0 0 5px white)
          drop-shadow(0 0 15px white);


}
  .icons {
    display: flex;
    gap: 20px;
  }
.icons img {
  width: 35px;
  height: 35px;
  object-fit: contain;
  filter: drop-shadow(0 0 2px rgba(0,0,0,0.5));
  transition: all 0.3s ease;
}


  .icons a {
    width: 60px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
  
    border-radius: 10px;
    transition: all 0.25s ease;
  }

  .icons svg {
    width: 30px;
    height: 30px;
    
    transition: all 0.25s ease;
  }

  /* Hover colors */
  .icons a.facebook:hover { background: #3a05fc; box-shadow: 0 0 15px #1877F2; }
  .icons a.instagram:hover { background: linear-gradient(#F9CE34,#EE2A7B,#6228D7); box-shadow: 0 0 15px #E1306C; }
  .icons a.tiktok:hover { background: #e8eaeb; box-shadow: 0 0 15px #edefef; }
  .icons a.snapchat:hover { background: #FFD700; box-shadow: 0 0 15px #ffffff; }
  .icons a.whatsapp:hover { background: #25d366; box-shadow: 0 0 15px #09de53; }
.icons a.telegram:hover { background: hsl(212, 81%, 53%); box-shadow: 0 0 15px hsl(211, 78%, 50%); }
  
.icons a:hover {
    border-radius: 50%;
    transform: scale(1.2);
  }

  .icons a:hover svg {
    fill: black;
  }
/* General style for both typewriters */
.typewriter {
    font-family: 'Rabar 021' , sans-serif;
    font-size: 14px;
    color: black;
    text-shadow: 0 0 5px white, 0 0 10px white;
    opacity: 0;                /* Start hidden for smooth appearance */
    transition: opacity 0.5s ease-in;
    display: inline-block;
    white-space: pre-wrap;     /* Keep spaces and line breaks */
}

/* When typing starts, fade in */
.typewriter.active {
    opacity: 1;
}
#typewriter1 {
  border-bottom: 2px solid grey; 
  display: block;
  border-bottom: 2px solid grey;
  padding-bottom: 8px;
  margin: 15px auto;
  width: 275px;
  text-align:center ;

}
/* When typing starts, fade in */
.typewriter.active {
    opacity: 1;
}
footer {
  flex-shrink: 0;
  background-color: #000;       /* black background */
  color: white;
  font-size: 0.85rem; /* smaller text */
  text-align: center;
  padding: 15px 10px;
  box-shadow: 0 0 10px 3px rgba(128, 128, 128, 0.5); /* subtle grey glow */
}
footer a {
  color: #bbb;    /* light grey link color */
  font-size: 0.85rem; /* smaller text */
  text-decoration: none;     /* no underline */
  transition: color 0.3s ease;
}
footer a:hover {
  color: #fff;               /* white on hover */
  /* no underline on hover either */
}