1  /*
  2   * Your custom CSS goes here but before adding a lot of CSS check this out:
  3   *   https://tailwindcss.com/docs/extracting-components
  4  */
  5  @import "tailwindcss/base";
  6  @import "tailwindcss/components";
  7  @import "tailwindcss/utilities";
  8  
  9  :root {
 10  --header-link-spacing: 12px;
 11  }
 12  select, input, a, button, textarea {
 13  outline-color: #00000055;
 14  }
 15  html, body {
 16  height: 100%;
 17  display: flex;
 18  flex-direction: column;
 19  }
 20  .main {
 21  max-width: 1050px;
 22  margin: 0 auto;
 23  padding: 20px 10px;
 24  width: 100%;
 25  flex-grow: 1;
 26  }
 27  .header {
 28  background: #f2f2f2;
 29  box-shadow: 0px 0px 7px rgb(0 0 0 / 30%);
 30  }
 31  .header-inner {
 32  max-width: 1050px;
 33  margin: 0 auto;
 34  padding: 12px;
 35  }
 36  .header-inner-top {
 37  display: flex;
 38  align-items: center;
 39  justify-content: space-between;
 40  }
 41  .header-inner a:not(.custom-a), .header-inner a:not(.custom-a):visited {
 42  text-decoration: none;
 43  color: #000000a3;
 44  }
 45  .header-inner a:not(.custom-a):hover, .header-inner a:not(.custom-a):focus {
 46  color: black;
 47  }
 48  .header-inner h1 {
 49  line-height: 1;
 50  margin: 10px 0;
 51  font-weight: 900;
 52  }
 53  .header-bar {
 54  display: flex;
 55  flex-wrap: wrap;
 56  align-items: center;
 57  justify-content: space-between;
 58  margin-bottom: -4px;
 59  }
 60  .header-links {
 61  flex-shrink: 0;
 62  white-space: nowrap;
 63  display: flex;
 64  flex-wrap: wrap;
 65  max-width: 100%;
 66  }
 67  .header-links > a {
 68  margin-right: var(--header-link-spacing);
 69  padding-bottom: 0px;
 70  margin-top: 6px;
 71  margin-bottom: 2px;
 72  position: relative;
 73  border-bottom: 3px solid transparent;
 74  }
 75  .header-links-right > a {
 76  margin-left: var(--header-link-spacing);
 77  margin-right: 0;
 78  }
 79  .header-links-right > a.header-link-first {
 80  margin-left: 0;
 81  }
 82  .header-links > a.header-link-first .header-link-normal {
 83  left: 0;
 84  transform: none;
 85  }
 86  .header-link-normal {
 87  position: absolute;
 88  left: 50%;
 89  transform: translateX(-50%);
 90  }
 91  .header-link-bold {
 92  font-weight: bold;
 93  visibility: hidden;
 94  }
 95  .header-links > a.header-link-active {
 96  color: black;
 97  border-bottom-color: #0095ff;
 98  }
 99  .header-links > a.header-link-active > .header-link-normal {
100  visibility: hidden;
101  }
102  .header-links > a.header-link-active > .header-link-bold {
103  visibility: visible;
104  }
105  .header-search {
106  flex-grow: 1;
107  max-width: 400px;
108  margin-left: auto;
109  max-width: 400px;
110  margin-right: var(--header-link-spacing);
111  }
112  .header-search > input {
113  flex-grow: 1;
114  border: none;
115  outline-offset: -1px;
116  padding: 0 0.5em 1px;
117  font-size: 0.9em;
118  height: 2em;
119  background: white;
120  outline-style: none;
121  outline-width: 2px;
122  position: relative;
123  top: 1px;
124  }
125  .header-search > input:focus {
126  outline-style: solid;
127  }
128  a:not(.custom-a), a:not(.custom-a):visited {
129  color: #777;
130  text-decoration: underline;
131  }
132  a:not(.custom-a):hover, a:not(.custom-a):focus {
133  color: #333;
134  }
135  a.anna, a.anna:visited {
136  color: #008df0;
137  text-decoration: underline;
138  }
139  a.anna:hover, a.anna:focus {
140  color: #0070c0;
141  }
142  form {
143  margin-block-end: 0;
144  }
145  @keyframes header-ping {
146  75%, 100% {
147  transform: scale(2);
148  opacity: 0;
149  }
150  }
151  @keyframes scroll {
152    from {
153      transform: translateX(0);
154    }
155    to {
156      transform: translateX(-100%);
157    }
158  }