html, body {
    height: 100%;
}

.gray{
  color: gray;
}

a.unstyled {
  --pico-text-decoration:none;
  * {
    text-decoration: none;
   }
}

.route-climbed {
  background-color: #26c92621;
}

.route-projecting {
  background-color: #26aac921;
}
/* body { */
/*   display: flex; */
/*   flex-direction: column; */
/**/
/*   > .main { */
/*     flex: 1; */
/*   } */
/* } */
/**/
/* nav { */
/*   display: flex; */
/*   flex-direction: row; */
/*   > * { */
/*     flex: 1; */
/*     text-align: center; */
/*   } */
/* } */
/**/
/* .route-list { */
/*   display: flex; */
/*   flex-direction: column; */
/*   gap: 1rem; */
/**/
/*   .route { */
/*     > div { */
/*       margin: auto; */
/*     } */
/*     > image { */
/*       margin: auto; */
/*     } */
/*   } */
/* } */
/**/
/* #add-route-button { */
/*   display: flex; */
/*   margin: 1rem; */
/*   > * { */
/*     text-align: center; */
/*     margin: auto; */
/*   } */
/* } */

/* #route { */
/* } */
/**/
/* .h-100{ */
/*   height: 100%; */
/* } */
/**/
/**/
/* .f-col { */
/*   display: flex; */
/*   flex-direction: column; */
/* } */
/**/
/* .f-row { */
/*   display: flex; */
/*   flex-direction: column; */
/* } */
/**/
/* .F-col { */
/*   display: flex; */
/*   flex-direction: column; */
/*   > * { */
/*     flex: 1; */
/*   } */
/* } */
/**/
/* .F-row { */
/*   display: flex; */
/*   flex-direction: column; */
/*   > * { */
/*     flex: 1; */
/*   } */
/* } */
/**/
/* .f-1 { */
/*   flex: 1; */
/* } */
/**/
/* .g-1 { */
/*   gap: 12px; */
/* } */
/**/
/* .g-2 { */
/*   gap: 16px; */
/* } */
/**/
/* .page { */
/*   display: flex; */
/*   flex-direction: column; */
/*   gap: 20px; */
/*   > div { */
/*     flex: 1; */
/*   } */
/* } */