:root {
   --dot-bg: rgb(20, 41, 63);
   --dot-color: rgb(58, 87, 180);
   --dot-size: 1px;
   --dot-space: 22px;
   --card-bg-rgb: rgb(0, 94, 171);
   --card-text-muted-rgb: rgb(102, 187, 236);
   --card-darker-rgb: rgb(3, 75, 134);
}

body {
   margin: 0px;
   background-color: rgb(37, 61, 87);
   background: linear-gradient(90deg, var(--dot-bg) calc(var(--dot-space) - var(--dot-size)), transparent 1%) center / var(--dot-space) var(--dot-space), linear-gradient(var(--dot-bg) calc(var(--dot-space) - var(--dot-size)), transparent 1%) center / var(--dot-space) var(--dot-space), var(--dot-color);
   cursor: url("resources/bike_cursor.png"), all-scroll;
}

.navbar {
   position: fixed;
   top: 0;
   left: 0;
   z-index: 10000;
   width: 100%;
}

.bio-cards-container {
   display: flex;
   justify-content: center;
}

.card {
   margin: 50px;
   border: 0;
   background-color: var(--card-bg-rgb);
   color: white;
   box-shadow: 10px 10px black;
}

.card-subtitle,
.blockquote-footer {
   color: var(--card-text-muted-rgb);
}

#mainCarouselContainer {
   width: 100%;
   display: flex;
   justify-content: center;
}

#mainCarousel {
   width: 90%;
   box-shadow: 10px 10px black;
}

.accordion-item {
   background-color: var(--card-bg-rgb);
}

.accordion-button {
   background-color: var(--card-darker-rgb);
   color: white;
   font-weight: bold;
}

.card-link {
   color: lightblue;
}

.map-viewer iframe {
   width: 100%;
   height: 99vh;
}

.form-container {
   width: 75%;
   max-width: 1000px;
   margin: 40px auto;
}

.routevote {
   display: flex;
   justify-content: center;
   margin-top: 30px;
}

.routeimg {
   width: 100%;
}

.card-body {
   color: black;
   background-color: white;
}

table {
   width: 50%;
   border-collapse: collapse;
   background-color: black;
   color: white;
   margin-top: 10px;
}

td {
   border: 1px solid black;
   padding: 8px;
   text-align: center;
}

th {
   background-color: darkgreen;
}