:root {
  --clr-main:
}

/* width */
::-webkit-scrollbar {
  width: 5px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #000;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #222;
  border-radius: 1vh;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  cursor: pointer;
}

* {
  letter-spacing: 1%;
  box-sizing: border-box;
  font-family: Inter;
  padding: 0;
  margin: 0;
}

a {
  text-decoration: none;
}

a:visited {
  color: inherit;
  cursor: pointer;
}


html {
  overflow: hidden;
  overscroll-behavior: none;
  font-family: "Verdana", sans-serif;
  background-color: #000;
}

body {
  margin: 0 auto;
  height: 100svh;
  max-width: 500px;
  border-radius: 2vh;
  padding: 1vh;
  border: 1px solid transparent;
  background-color: #eee;
  display: flex;
  flex-direction: column;

  * {}

  header {
    >p {
      font-weight: bold;
      margin: 1vh 0;
      color: #111;
    }
  }

  main {
    flex-grow: 1;
    overflow-y: scroll;
  }

  nav {
    >a {
      font-size: 2vh;
      margin: 1vh 0;
    }
  }
}

.card {
  border: 1px solid #111;
  border-radius: 2vh;
  margin: 1vh;
}

.expedition {
  padding: 1vh;
  display: flex;

  >* {
    margin: 1vw;
  }

  >.lineNo {}

  >.start,
  >.end {
    flex-grow: 1;

    >.name {
      font-size: 4.5vw;
    }

    >.hours {
      font-size: 4vw;
    }
  }
}