@import "tailwindcss";

@font-face {
  font-family: "AbyssFont";
  src: url("../uploads/Geist.ttf") format("truetype");
}

:root {
  --font-sans: "AbyssFont", Helvetica, Arial, sans-serif;
}

html, body {
  height: 100%;
  background-color: #000;
  color: #fff;
  padding: 0;
  margin: 0;
  overflow: hidden;
  font-family: var(--font-sans);
  cursor: url(../cursors/main.png) 0 0, auto;
}

#haupt {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 10;
}

#inner {
  margin: 0 auto;
  text-align: center;
}

.title {
  font-size: 48pt;
  font-weight: bold;
  letter-spacing: -2px;
}

.blackbox {
  padding: 20px;
  background-color: #000;
  max-width: 240px;
  width: 100%;
  margin: 20px auto;
}

td {
  text-align: center;
}

a {
  color: #b1cccc;
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: 4px;
  font-size: 14pt;
  transition: color 0.3s ease;
  cursor: url(../cursors/link.png) 0 0, auto;
}

a:hover {
  color: #fff;
}

.birds-placeholder {
  background: #050505;
  border: 5px solid #141313;
  display: inline-block;
  position: relative;
  overflow: hidden;
  line-height: 0; /* Prevents small gap at bottom of image */
}

/* Subtle animated noise/grain for the placeholder */
.birds-placeholder::after {
  content: "";
  position: absolute;
  top: -50%; left: -50%;
  width: 200%; height: 200%;
  background: url('https://grainy-gradients.vercel.app/noise.svg');
  opacity: 0.05;
  animation: noise 0.2s infinite;
}

@keyframes noise {
  0% { transform: translate(0,0) }
  10% { transform: translate(-5%,-5%) }
  20% { transform: translate(-10%,5%) }
  30% { transform: translate(5%,-10%) }
  40% { transform: translate(-5%,15%) }
  50% { transform: translate(-10%,5%) }
  60% { transform: translate(15%,0) }
  70% { transform: translate(0,10%) }
  80% { transform: translate(-15%,0) }
  90% { transform: translate(10%,5%) }
  100% { transform: translate(5%,0) }
}

/* Custom scrollbar for a cleaner look if needed */
::-webkit-scrollbar {
  width: 0px;
}

.footer-notice {
  position: fixed;
  bottom: 20px;
  left: 20px;
  font-family: var(--font-sans);
  font-size: 10pt;
  color: rgba(255, 255, 255, 0.5);
  z-index: 100;
  pointer-events: none;
}