@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300;400;600;700&display=swap');

body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  height: 100%;
  font-family: 'Raleway', sans-serif;
}

 /* MENU AND SIDEBAR  */
.nav-sidebar {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  right: 0;
  background-color: #111;
  overflow-x: hidden;
  padding-top: 1em;
  transition: 0.5s;
}

.nav-sidebar a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 2em;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.nav-sidebar a:hover {
  color: #f1f1f1;
}
.nav-menu-button {
  display: inline-block;
  position: absolute;
  top: 1em;
  right: 1em;
}
ul {
  display: flex;
  flex-flow: column;
}
ul li {
  list-style: none;
}
ul li a {
  text-decoration: none;
}
#openBtn {
  background-color: transparent;
  border: none;
}
#closeBtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
  background-color: transparent;
  color: #f1f1f1;
  border: none;
  
}

 /* TOGGLE SWITCH */
 .switch {
   --w:60px;
   --h:34px;
   position: relative;
   display: inline-block;
   width: var(--w);
   height: var(--h);
 }

 .switch input {
   opacity: 0;
   width: 0;
   height: 0;
 }

 .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
 }

 .slider::before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: #fff;
  -webkit-transition: .4s;
  transition: .4s;
}
.slider.round {
  border-radius: 34px;
}
.slider:before {
  border-radius: 50%;
}
 
input:checked + .slider {
  background-color: #18191a;
}
input:focus + .slider {
  box-shadow: 0 0 1px #18191a;
}
 
input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

 /* MAIN CONTENT */
 .container, .container-fallback {
   height: 100vh;
   /* min-height: -webkit-fill-available; */
   display: flex;
   flex-flow: column;
 }
 .container-fallback {
   justify-content: center;
   align-items: center;
   color: #eff;
   background-color: #111;
 }
 .container-fallback a {
   color: #eff;
 }
 .fallback-image {
   font-size: 50vw;
 }
 #main-header {
   /* background-image: url(/image/mtb-image.jpg); */
   background-size: cover;
   background-position: center;
   width: 100%;
   height: 68%;
 }
 #main-content {
   display: flex;
   flex-flow: column;
   flex: 1 1 auto;
 }
 .content-container {
   display: grid;
   grid-template-columns: repeat(5, 1fr);
   height: 100%;
   width: 100%;
   flex: 1 1 auto;

 }

 .tracking-controls {
   display: grid;
   grid-template-rows: repeat(5, 1fr);
   height: 100%;
   grid-column: 1/3;
 }

 .toggle-group {
   display: grid;
   grid-template-columns: repeat(5, 1fr);
   grid-row: 1/3;
   position: relative;
 }
 .switch {
   grid-column: 1/4;
   justify-self: center;
   align-self: center;
   
 }
 .power-indicator {
   grid-column: 4/6;
   justify-self: center;
   align-self: center;
 }

 .lit {
  color: #111;
 }
 .dim {
  color: #cac8c8;
 }

 .tracking-info {
   display: grid;
   grid-template-rows: repeat(5, 1fr);
   grid-row: 3/6;
 }
 #tracking-message-box {
   visibility: hidden;
   overflow: hidden;
   z-index: 1;
   grid-row: 1/4;
   justify-self: center;
   align-self: center;
   width: 100%;
   height: 100%;
   filter: drop-shadow(0px 8px 4px #ccc);
 }

 .bounce-animation {
  animation: bounce 1.5s ease-out  infinite;
 }

 #tracking-message {
  display: flex;
  justify-content: center;
  align-items: center;
  clip-path: polygon(20% 0 , 80% 0, 80% 70%, 55% 70%, 50% 90%, 45% 70%, 20% 70% );
  background-color: #fff;
  width: 100%;
  height: 100%;

 }
 .coordinate-container {
   display: flex;
   flex-flow: column;
   justify-content: center;
   align-items: center;
   grid-row: 4/6;
   justify-self: center;
   align-self: center;
 }

 .info-content {
   display: flex;
   flex-flow: column;
   justify-content: center;
   align-items: flex-start;
   height: 100%;
   grid-column: 3/6;
   text-align: center;
   padding-right: 1em;
 }

 .info-content h3 {
   position: relative;
 }
 input[type="button"] {
   align-self: center;
   background-color: hsla(0, 0%, 100%, .8);
   color: #111;
   margin-bottom: 1em;
   padding: 1em;
   width: 100%;
   border: 2px solid #111;
   border-radius: 12px;
   box-shadow: none;
   font-size: large;
 }
 input[type="button"]:hover {
   background-color: #111;
   color: #fff;
 }

 .arrow {
   position: absolute;
   top: -100%;
   left: -60%;
   width: 5em;
   animation: reveal 3s linear;
 }
 .no-display {
   display: none;
 }
 .display {
   display: block;
 }
 ol {
   padding: 0;
   margin-top: 0;
   text-align: left;
 }
 .footer-details {
   width: 100%;
   text-align: center;
 }

 @keyframes reveal {
   0% {
     opacity: 0;
   }
   100% {
     opacity: 1;
   }
   
 }
 @keyframes bounce {
   0% {
     transform: translateY(0);
   }
   50% {
     transform: translateY(-10px);
   }
   100% {
     transform: translateY(0);
   }
 }