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

body {
  min-height: 100vh;
  position: relative;
  padding-bottom: 80px;
}

/*section.aboutContainer {background: #ededed;}*/

.about {max-width: 900px;}
.jobtitle {text-transform: uppercase;font-weight: 500;}

p.intro {
    font-weight: 300;
    font-size: 18Px;
    opacity: .8;
}

.table-hover * {border: none;text-transform: uppercase;}
.table>:not(caption)>*>* {padding: 4px 8px;}
.table>thead * {font-weight: 500;}

.table {--bs-table-hover-bg: none;}

thead::after {
  content: "";
  display: table-row;
  height: 22px;
}

th svg {width: 8px;margin: -4px 0 0 6px;}

/*.table>tbody {border-top: 22px solid white;}*/

.table>tbody * {
    vertical-align: inherit;
    font-weight: 400;
    font-size: 14px;
}

.table>tbody tr, th  {cursor: pointer;}
.table-hover tbody tr:hover td:nth-child(1) {border-radius: 4px 0 0 4px;}
.table-hover tbody tr:hover td:nth-child(5) {border-radius: 0 4px 4px 0;}
.table-hover tbody tr:hover td:nth-child(6) {background: white !important;padding: 0;}
.table-hover tbody tr:hover td {background-color: #1072fa;color: white;}

td.project-link {
  transition: opacity 0.2s ease-in-out;
  text-align: right;
  padding: 0;
  position: relative;
  width: 86px;
}

.table-hover tbody tr:hover td.project-link {
  background: white !important;
  --bs-table-bg-state: initial;
}

td.project-link>div {
  opacity: 0;
  background: black;
  text-decoration: none;
  padding: 0 32px;
  border-radius: 4px;
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 
}

tr:hover .project-link>div {opacity: 1;}
td.project-link>div:hover {color: #084298;}
td.project-link>div svg {width: 12px;}

.filter-buttons>button {
    text-transform: uppercase;
    padding: 2px 14px;
    font-size: 13px;
}


footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 0 20px 6px 20px;
  font-size: 14px;
}

footer ul  > li:not(:last-child) {margin-right: 30px;}

.link {
  text-transform: uppercase;
  text-decoration: none;
  color: black;
}

svg.icon {
  width: 14px;
  height: 14px;
  margin-right: 10px;
  opacity: 0.4;
}

a:hover svg.icon {opacity: 1;}





@media screen and (min-width: 900px) {
  .hidden-desk {display: none !important;}
  tr:not(:hover).visited>td{opacity: .4}
}

@media screen and (max-width: 899px) {
  footer {font-size: 12px;}
  footer ul  > li:not(:last-child) {margin-right: 20px;}
  svg.icon {
    width: 10px;
    height: 10px;
    margin-right: 8px;
  }
  .hidden-mobile {display: none !important;}

  tr {
      display: grid;
      background: #ededed;
      padding: 8px 92px 8px 10px;
      margin-bottom: 8px;
      border-radius: 6px;
      position: relative;
  }

.table>tbody * {font-size: 12px;}

  tr td {background: #ededed !important;padding: 0 !important;}
  tr>td {color: black !important}
  tr>td:nth-child(1) {font-weight: 500;font-size: 14px;color: #176de3 !important;}
  tr.visited>td:nth-child(1) {color: #9347cf !important;}
  tr>td:nth-child(3), tr>td:nth-child(4) {display: none;}

  td.project-link {position: initial;}

td.project-link>div {
    opacity: 1;
    position: absolute;
    height: calc(100% - 16px);
    top: 8px;
    right: 8px;
    aspect-ratio: 1 / 1;
    width: 60px;
    background: white;
}

td.project-link>div svg path {
    fill: black;
}


  body>.py-5 {padding: 0 !important;}

  .tableBox {margin-top: 20px !important;padding-bottom: 30px;}
  .filterBtn svg {width: 20px;margin: -2px 6px 0 0;}


  div#offcanvasBottom {height: auto;background: black;color: white;}

  .offcanvas-header {padding-bottom: 0;}

  button.hidden-desk.btn.btn-primary {
          background: black;
          border-color: black;
          position: sticky;
          width: calc(100% - 1.5rem);
          top: initial;
          top: calc(100vh - .75rem - 40px);
          left: .75rem;
          z-index: 1;
      }


.offcanvas .filter-buttons>button {
        margin: 0 0 12px 0 !important;
        width: calc(100% / 2 - 6px);
        font-size: 11px;
        padding: 4px 2px;
        border: 1px solid white;
        color: white;
    }

    .offcanvas .filter-buttons>button.active {
    background: white;
    color: black;
}
  button.btnClose {background: transparent;border: none;margin-right: -4px;}
  .btnClose svg {width: 24px;}
}