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

/* Regular woff-files for regular font variants curerently
   Instead we can use the Graphite versions of the font   

@font-face {
    font-family: 'Biolinum';
    src: url('/fonts/LinBiolinum_R_G.ttf') format('truetype');
    font-display: swap;
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Libertine';
    src: url('/fonts/LinLibertine_R_G.ttf') format('truetype');
    font-display: swap;
    font-weight: normal;
    font-style: normal;
}

*/

@font-face {
    font-family: "Sofia Sans";
    src: url("../fonts/SofiaSans-Regular.ttf") format("truetype");
    font-display: swap;
    font-weight: normal;
    font-style: normal;
  }
  
  
  @font-face {
    font-family: "Sofia Sans";
    src: url("../fonts/SofiaSans-Italic.ttf") format("truetype");
    font-display: swap;
    font-weight: normal;
    font-style: italic;
  }
  
  @font-face {
    font-family: "Sofia Sans";
    src: url("../fonts/SofiaSans-Bold.ttf") format("truetype");
    font-display: swap;
    font-weight: bold;
    font-style: normal;
  }

  @font-face {
    font-family: "Sofia Sans";
    src: url("../fonts/SofiaSans-BoldItalic.ttf") format("truetype");
    font-display: swap;
    font-weight: bold;
    font-style: italic;
  }

  @font-face {
    font-family: "Libertine";
    src: url("../fonts/LinLibertine_Rah.ttf") format("truetype");
    font-display: swap;
    font-weight: normal;
    font-style: normal;
  }
  
  @font-face {
    font-family: "Libertine";
    src: url("../fonts/LinLibertine_RIah.ttf") format("truetype");
    font-display: swap;
    font-weight: normal;
    font-style: italic;
  }
  
  @font-face {
    font-family: "Libertine";
    src: url("../fonts/LinLibertine_RZah.ttf") format("truetype");
    font-display: swap;
    font-weight: bold;
    font-style: normal;
  }
  
  /* @font-face {
    font-family: "Playfair";
    src: url("../fonts/PlayfairDisplay-VariableFont_wght.ttf") format("truetype");
    font-display: swap;
    font-weight: normal;
    font-style: normal;
  } */

  body {
    font-size: 15px;
  }

  @layer components {
    .sidebar-nav li li {
      @apply ml-4
    }

    .sidebar-nav .active {
      @apply font-bold
    }

    .maincolumn {
      @apply basis-4/5 grow-0
    }

    .Einzug {
      
    }

    .Kommentar {
      @apply !indent-0 !pl-0
    }

    .handschrift-sammlung .handschrift {
      @apply border basis-[31.5%] shrink-0 bg-white
    }

    .handschrift-sammlung .ueberschrift-gruppe {
      @apply w-full
    }

    .handschrift-sammlung .beschreibung {
      @apply mt-1.5 px-2.5
    }

    .handschrift-sammlung .ueberschrift-gruppe {
      @apply text-xl font-bold
    }

    .handschrift-sammlung .feld {
      @apply rounded-md inline text-sm mr-1 px-2 py-0.5 bg-slate-200 font-bold
    }

    .handschrift-sammlung .wert {
      @apply py-0.5 px-1
    }
  }

  .hyphenation {
    hyphens: auto;
  }

  .sidebar-nav .active::before {
    content: "· ";
  }

  aside {
    min-height: 100vh;
    max-height: calc(10rem + 100vh);
  }

  .twocolumns {
    columns: 2;
  }

  .Einzug {
    break-inside: avoid;
  }

  .Kommentar {

  }