@tailwind base;
@tailwind components;
@tailwind utilities;
@custom-variant dark (&:where(.dark, .dark *));

/* <link href="{% static 'css/website.css' %}" rel="stylesheet"> */

@font-face {
    font-family: "Diodrum-Rounded-Bold";
    src: url("../fonts/DiodrumRounded-Bold.otf") format("opentype");
    font-style: bold;
}

.diodrum {
    font-family: Diodrum-Rounded-Bold;
}

@font-face {
    font-family: "Doto";
    src: url("../fonts/Doto.ttf") format("truetype");
    font-style: normal;
    font-weight: 100 900; /* Bereich für variable Font */
    font-display: swap;
}

.doto {
    font-family: Doto;
    font-weight: 400;
}

.doto-thin    { font-variation-settings: "wght" 100; }
.doto-regular { font-variation-settings: "wght" 400; }
.doto-bold    { font-variation-settings: "wght" 700; }
.doto-black   { font-variation-settings: "wght" 900; }

@font-face {
    font-family: "Pacifico-Regular";
    src: url("../fonts/Pacifico-Regular.ttf") format("truetype");
    font-style: normal;
}

.pacifico {
    font-family: Pacifico-Regular;
}

@font-face {
  font-family: "Gotham-Rounded-Bold";
  src: url("../fonts/Gotham-Rounded-Bold.woff") format("opentype");
  font-style: bold;
}

.gotham {
  font-family: Gotham-Rounded-Bold;
}

@font-face {
    font-family: "Bauhaus 93";
    src: url("../fonts/Bauhaus93.woff2") format("woff2"),
         url("../fonts/Bauhaus93.woff") format("woff"),
         url("../fonts/Bauhaus93.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

.bauhaus {
    font-family: "Bauhaus 93", sans-serif;
}

.image-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1rem;
}
.grid-item img {
  width: 100%;
  height: auto;
}

.typewriter-container {
    display: inline-block;
  }
  
.typewriter {
  display: inline-block;
  overflow: hidden;
  border-right: .15em solid orange; /* Cursor */
  white-space: nowrap;
  font-size: 2rem;
  letter-spacing: 0.05em;
  width: 0;
  animation:
    typing 6s steps(37, end) forwards, /* x Zeichen */
    blink-caret 1.2s step-end infinite;
}

@keyframes typing {
  from { width: 0 }
  to   { width: 40ch } /* ch = Zeichenbreite, x Zeichen */
}

@keyframes blink-caret {
  from, to { border-right-color: orange; }
  50%      { border-right-color: transparent; }
}