/*
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
}

.background-wrapper {
  position: fixed;
  width: 100%;
  height: 100%;
  overflow: hidden;
  top: 0;
  z-index: -1;
}

.background-img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 120vw;
  height: 120vh;
  object-fit: cover;
  will-change: transform;
  transition: transform 0.1s ease-out;
}


html {
  background: url(cat.gif);
  background: url('flash.png');
  background-size: cover;
  background-position: center;
  position: relative;
}

html:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('noise.gif');
    background-size: cover;
    opacity: .25;
    filter: invert(1);
}
*/

body * {
  font-family:arial, Inter;
  font-weight:500;
}

body {
  min-height: 100vh;
  position: relative;
  padding-bottom: 140px;
  background: rgba(255,255,255,.8);
}

@font-face {
    font-family: At Hauss Mono;
    src: url(AtHaussMono-Regular.woff2) format("woff2");
    font-display: swap;
    font-weight: 400
}
/*
@font-face {
    font-family: CloisterBlackLight;
    src: url(CloisterBlackLight.ttf) format("truetype");
    font-weight: 400
}
*/


.container {max-width: 1250px;}
.mono {font-family: At Hauss Mono;}

h1 {
  font-size: 42px;
  line-height: 1;
  margin: 0;
  /*font-family: CloisterBlackLight;*/
}

p.intro {opacity: .8;text-align: right;margin: 0;}

.links {font-size: 14px;}

.link {
  opacity: .5;
  color: black;
  text-underline-position: under;
}

.link:hover {opacity: 1;}


svg.icon {
  width: 14px;
  height: 14px;
  margin-right: 16px;
  opacity: 0.5;
}

.main>div {
    display: flex;
    justify-content: space-between;
    width: 100%;
}
.tableBox {
    width: calc(50% - .75rem);
    padding: 20px;
    margin-top: 2.5rem;
    border: 1px solid #a6a5a2;
    border-radius: 5px;
    background: white;
    /*
    background: rgba(255, 255, 255, .45);
    backdrop-filter: blur(6px);
    box-shadow: 0 6px 18px -1px rgba(0,0,0,.3);
    */
}

p.introBox {min-height: 80px;}
.uppercase {text-transform: uppercase;}


.btnBox {
    gap: 12px;
    display: flex;
    flex-wrap: wrap;
}

.btn {
    color: black;
    background-color: #dedfdf;
    padding: 10px 20px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-transform: uppercase;
    width: 100%;
    position: relative;
}

.btn svg {position: absolute;right: 0;}
.btn:hover {background: #4d4d4d;color: white;}
a.btn:hover svg {filter: invert(1);}

a.link:hover {color: #4d4d4d;}

.dark-gray {color: #a6a5a2;}

p.small {
    margin: 22px 0 0;
    font-size: 12px;
    font-style: italic;
}

.inline {display: inline;}


@media screen and (min-width: 900px) {
  body {
      display: flex;
      align-items: center;
      justify-content: center;
  }
  .hiddenDesk {
    display: none;
  }
}


@media screen and (max-width: 899px) {
  body {padding-bottom: 0;}
  .py-5 {padding-top: 1rem !important;padding-bottom: 8rem !important;}
  p.intro.uppercase.mono {display: none;}
  .main>div {
      flex-wrap: wrap;
      gap: 16px;
      margin-top: 30px;
  }
  h1 {font-size: 36px;}
  .tableBox {width: 100%;margin-top: 0 !important;}
  p.introBox {min-height: 0;}
  .links {font-size: 13px;}

  .hiddenMobile {
    display: none;
  }
}