fancytextstuff/styles/globals.css

/* in globals.css oder styles/index.css */
@import "./local-fonts.css";

@tailwind base;
@tailwind components;
@tailwind utilities;

/* === Lokale Fonts via woff2 einbinden === */
@font-face {
  font-family: "AbrilFatface";
  src: url("/fonts/abril-fatface.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Alegreya";
  src: url("/fonts/alegreya.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "AlfaSlabOne";
  src: url("/fonts/alfa-slab-one.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Almendra";
  src: url("/fonts/almendra.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "AmaticSc";
  src: url("/fonts/amatic-sc.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Andika";
  src: url("/fonts/andika.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "ArchitectsDaughter";
  src: url("/fonts/architects-daughter.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Audiowide";
  src: url("/fonts/audiowide.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "AveriaLibre";
  src: url("/fonts/averia-libre.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "BebasNeue";
  src: url("/fonts/bebas-neue.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "BlackOpsOne";
  src: url("/fonts/black-ops-one.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Caveat";
  src: url("/fonts/caveat.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "CinzelDecorative";
  src: url("/fonts/cinzel-decorative.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Courgette";
  src: url("/fonts/courgette.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "DancingScript";
  src: url("/fonts/dancing-script.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Exo";
  src: url("/fonts/exo.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "FjallaOne";
  src: url("/fonts/fjalla-one.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "GermaniaOne";
  src: url("/fonts/germania-one.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "GlassAntiqua";
  src: url("/fonts/glass-antiqua.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "GloriaHallelujah";
  src: url("/fonts/gloria-hallelujah.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "GreatVibes";
  src: url("/fonts/great-vibes.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "HoltwoodOneSc";
  src: url("/fonts/holtwood-one-sc.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "IndieFlower";
  src: url("/fonts/indie-flower.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Italiana";
  src: url("/fonts/italiana.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Jost";
  src: url("/fonts/jost.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "KaushanScript";
  src: url("/fonts/kaushan-script.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Lato";
  src: url("/fonts/lato.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "MetalMania";
  src: url("/fonts/metal-mania.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Montserrat";
  src: url("/fonts/montserrat.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Neucha";
  src: url("/fonts/neucha.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "NotoSans";
  src: url("/fonts/noto-sans.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "OpenSans";
  src: url("/fonts/open-sans.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Orbitron";
  src: url("/fonts/orbitron.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Oswald";
  src: url("/fonts/oswald.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Pacifico";
  src: url("/fonts/pacifico.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "PermanentMarker";
  src: url("/fonts/permanent-marker.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Philosopher";
  src: url("/fonts/philosopher.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "PlayfairDisplay";
  src: url("/fonts/playfair-display.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Poppins";
  src: url("/fonts/poppins.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "PressStart2P";
  src: url("/fonts/press-start-2p.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Questrial";
  src: url("/fonts/questrial.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Quicksand";
  src: url("/fonts/quicksand.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Rajdhani";
  src: url("/fonts/rajdhani.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Raleway";
  src: url("/fonts/raleway.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Righteous";
  src: url("/fonts/righteous.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Roboto";
  src: url("/fonts/roboto.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Sacramento";
  src: url("/fonts/sacramento.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Satisfy";
  src: url("/fonts/satisfy.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "SpaceMono";
  src: url("/fonts/space-mono.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Spectral";
  src: url("/fonts/spectral.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Staatliches";
  src: url("/fonts/staatliches.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "StintUltraCondensed";
  src: url("/fonts/stint-ultra-condensed.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Syncopate";
  src: url("/fonts/syncopate.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Ultra";
  src: url("/fonts/ultra.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "UnicaOne";
  src: url("/fonts/unica-one.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "WorkSans";
  src: url("/fonts/work-sans.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Yellowtail";
  src: url("/fonts/yellowtail.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}

@layer utilities {
  .font-abril-fatface {
    font-family: "AbrilFatface", serif;
  }

  .font-alegreya {
    font-family: "Alegreya", sans-serif;
  }

  .font-alfa-slab-one {
    font-family: "AlfaSlabOne", sans-serif;
  }

  .font-almendra {
    font-family: "Almendra", serif;
  }

  .font-amatic-sc {
    font-family: "AmaticSc", cursive;
  }

  .font-andika {
    font-family: "Andika", sans-serif;
  }

  .font-architects-daughter {
    font-family: "ArchitectsDaughter", cursive;
  }

  .font-audiowide {
    font-family: "Audiowide", sans-serif;
  }

  .font-averia-libre {
    font-family: "AveriaLibre", cursive;
  }

  .font-bebas-neue {
    font-family: "BebasNeue", sans-serif;
  }

  .font-black-ops-one {
    font-family: "BlackOpsOne", sans-serif;
  }

  .font-caveat {
    font-family: "Caveat", cursive;
  }

  .font-cinzel-decorative {
    font-family: "CinzelDecorative", serif;
  }

  .font-courgette {
    font-family: "Courgette", cursive;
  }

  .font-dancing-script {
    font-family: "DancingScript", cursive;
  }

  .font-exo {
    font-family: "Exo", sans-serif;
  }

  .font-fjalla-one {
    font-family: "FjallaOne", sans-serif;
  }

  .font-germania-one {
    font-family: "GermaniaOne", sans-serif;
  }

  .font-glass-antiqua {
    font-family: "GlassAntiqua", cursive;
  }

  .font-gloria-hallelujah {
    font-family: "GloriaHallelujah", cursive;
  }

  .font-great-vibes {
    font-family: "GreatVibes", cursive;
  }

  .font-holtwood-one-sc {
    font-family: "HoltwoodOneSc", sans-serif;
  }

  .font-indie-flower {
    font-family: "IndieFlower", cursive;
  }

  .font-italiana {
    font-family: "Italiana", serif;
  }

  .font-jost {
    font-family: "Jost", sans-serif;
  }

  .font-kaushan-script {
    font-family: "KaushanScript", cursive;
  }

  .font-lato {
    font-family: "Lato", sans-serif;
  }

  .font-metal-mania {
    font-family: "MetalMania", sans-serif;
  }

  .font-montserrat {
    font-family: "Montserrat", sans-serif;
  }

  .font-neucha {
    font-family: "Neucha", sans-serif;
  }

  .font-noto-sans {
    font-family: "NotoSans", sans-serif;
  }

  .font-open-sans {
    font-family: "OpenSans", sans-serif;
  }

  .font-orbitron {
    font-family: "Orbitron", sans-serif;
  }

  .font-oswald {
    font-family: "Oswald", sans-serif;
  }

  .font-pacifico {
    font-family: "Pacifico", cursive;
  }

  .font-permanent-marker {
    font-family: "PermanentMarker", sans-serif;
  }

  .font-philosopher {
    font-family: "Philosopher", serif;
  }

  .font-playfair-display {
    font-family: "PlayfairDisplay", serif;
  }

  .font-poppins {
    font-family: "Poppins", sans-serif;
  }

  .font-press-start-2p {
    font-family: "PressStart2P", monospace;
  }

  .font-questrial {
    font-family: "Questrial", sans-serif;
  }

  .font-quicksand {
    font-family: "Quicksand", sans-serif;
  }

  .font-rajdhani {
    font-family: "Rajdhani", sans-serif;
  }

  .font-raleway {
    font-family: "Raleway", serif;
  }

  .font-righteous {
    font-family: "Righteous", sans-serif;
  }

  .font-roboto {
    font-family: "Roboto", sans-serif;
  }

  .font-sacramento {
    font-family: "Sacramento", cursive;
  }

  .font-satisfy {
    font-family: "Satisfy", cursive;
  }

  .font-space-mono {
    font-family: "SpaceMono", sans-serif;
  }

  .font-spectral {
    font-family: "Spectral", sans-serif;
  }

  .font-staatliches {
    font-family: "Staatliches", serif;
  }

  .font-stint-ultra-condensed {
    font-family: "StintUltraCondensed", sans-serif;
  }

  .font-syncopate {
    font-family: "Syncopate", sans-serif;
  }

  .font-ultra {
    font-family: "Ultra", serif;
  }

  .font-unica-one {
    font-family: "UnicaOne", sans-serif;
  }

  .font-work-sans {
    font-family: "WorkSans", sans-serif;
  }

  .font-yellowtail {
    font-family: "Yellowtail", cursive;
  }
}
/* Komponenten */
@layer components {
  .text-shadow-lg {
    text-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  }
}

/* Basis-Styling */
body {
  background: #111;
  color: #fff;
}