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

@font-face {
  font-family: "Biolinum";
  src: url("../fonts/LinBiolinum_R.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Biolinum";
  src: url("../fonts/LinBiolinum_RI.woff") format("woff");
  font-weight: normal;
  font-display: swap;
  font-style: italic;
}

@font-face {
  font-family: "Biolinum";
  src: url("../fonts/LinBiolinum_RB.woff") format("woff");
  font-weight: bold;
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: "Libertine";
  src: url("../fonts/LinLibertine_R.woff") format("woff");
  font-weight: normal;
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: "Libertine";
  src: url("../fonts/LinLibertine_RI.woff") format("woff");
  font-weight: normal;
  font-display: swap;
  font-style: italic;
}

@font-face {
  font-family: "Libertine";
  src: url("../fonts/LinLibertine_RB.woff") format("woff");
  font-weight: bold;
  font-display: swap;
  font-style: normal;
}

body {
  background-image: url("../img/subtlenet2.png");
  background-repeat: repeat;
}

@layer components {
  body {
    @apply text-base lg:text-lg;
  }

  p {
    @apply my-3;
  }

  h1 {
    @apply font-bold text-xl 2xl:font-normal 2xl:text-4xl;
  }

  h2 {
    @apply text-lg 2xl:text-2xl;
  }

  a {
    @apply text-gray-600 hover:text-gray-900;
  }

  .topnav {
    @apply flex lg:grow-0 lg:shrink-0 md:text-lg 2xl:text-xl lg:place-self-end;
  }

  .topnav a {
    @apply hidden lg:inline pr-5 2xl:pr-6;
  }

  .active {
    @apply text-red-700 hover:text-red-700;
  }

  .ha-maincolumn {
    @apply bg-slate-50 mx-auto p-2 md:p-4 lg:px-16 lg:py-12 xl:pr-80 text-lg font-serif;
  }

  .topnav.responsive {
    @apply mt-4 text-base;
  }

  table tr td {
    @apply pr-4 pt-1 pb-1 pl-2
  }

  table tr {
    @apply pt-2
  }

  table tr:nth-child(2n+1) {
    @apply bg-slate-100
  }

  table tr td:nth-of-type(2) {
    @apply border-l-2
  }
}

table {
  empty-cells: show;
}

td {
  vertical-align: top;
}

ul {
  list-style-type: circle;
}

.ha-maincolumn {
  max-width: 1280px;
}

.ha-maincolumn p {
  hyphens: auto;
}

.main__item {
  background: var(--white);
  border-radius: 4px;
}

.main__item svg {
  width: 24px;
  height: 24px;
  stroke: #000000;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: miter;
  fill: none;
  color: #000000;
}

@media screen and (max-width: 1344px) {
  .topnav.responsive {
    display: block !important;
    width: 100%;
  }

  .topnav.responsive a {
    display: block;
    text-align: left;
    clear: both;
  }
}