/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
 *= require_tree .
 *= require_self
 */

@import url('https://fonts.googleapis.com/css2?family=Bungee&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=VT323&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300;0,400;0,500;1,300&display=swap');



body {
  font-family: 'VT323', sans-serif;
  font-size: 64px;
  background: #333;
  color: orange;
  padding: 12px;
}

a, a:hover, a:link, a:active, a:visited {
  color: red;
}

h1, h2, h3 {
  font-family: 'Bungee', sans-serif;
  margin-top: 0.3em;
}

.hidden {
  display: none;
}

/* Text input */
input:not([type=submit]):not([type=file]) {
  padding: 6px;
  font-size: 0.6em;
}
/* Submit button */
input[type=submit] {
  padding: 6px;
  font-size: 0.6em;
}

.alert, .notice {
  background: darkred;
}

.hello-user {
  font-size: 72px;
  margin-bottom: 64px;
}

/* @media only screen and (max-width: 599px) { */
  .userbox {
    position: fixed;
    display: flex;
    z-index: 2;
    width: 100%;
    padding: 12px;
    left: 0;
    bottom: 0;
    background: black;
  }
  .userbox h3 {
    display: none;
  }
  .userbox .nav-item {
    flex-grow: 1;
    text-align: center;
  }
  .userbox .navlink-tablet {
    display: none;
  }
  .userbox .nav-icon img {
    width: 40px;
    image-rendering: crisp-edges;
  }
  .maincontent {
    width: 100%;
    overflow: hidden;
    padding-bottom: 120px;
  }
/* } */
/* @media only screen and (min-width: 600px) {
  .userbox {
    z-index: 2;
    display: inline;
    position: absolute;
    width: 30%;
    right: 12px;
    padding: 6px;
    margin-bottom: 12px;
    border: 2px solid;
    font-size: 0.7em;
  }
  .userbox h3 {
    text-align: center;
  }
  .userbox .nav-item {
    text-align: center; 
    padding-top: 20%;
    padding-bottom: 20%;
  }
  .userbox .nav-icon {
    text-align: center;
  }
  .userbox .nav-icon img {
    width: 40%;
    image-rendering: crisp-edges;
  }
  .userbox .navlink-mobile {
    display: none;
  }
  .maincontent {
    width: 64%;
    margin-top: 60px;
  }
} */

.box {
  margin-bottom: 24px;
  padding: 6px;
  border: 2px solid;
}
.box.invert {
  border-color: orange;
  color: #333;
  background: orange;
}
.tutorial {
  padding: 6px;
  border: 2px solid greenyellow;
  background: darkolivegreen;
}

.item {
  padding: 12px;
  display: flex;
}
.item span {
  padding-right: 12px;
}

.img100 img {
  width: 100%
}
.imgcenter {
  width: 100%;
  text-align: center;
}

/* Explore view overlays */
.geoping-button {
  font-size: 32px;
  position: absolute;
  height: 190px;
  width: 120px;
  right: 30px;
  bottom: 120px;
  z-index: 5;
  text-align: center;
  background-color: black;
}
.geoping-button img {
  height: 60px;
  width: 60px;
  width: 100%;
  height: 100%;
  image-rendering: crisp-edges;
  text-align: center;
}
.missions-button {
  font-size: 32px;
  position: absolute;
  height: 190px;
  width: 120px;
  right: 30px;
  bottom: 340px;
  z-index: 5;
  text-align: center;
  background-color: black;
}
.missions-button img {
  height: 60px;
  width: 60px;
  width: 100%;
  height: 100%;
  image-rendering: crisp-edges;
  text-align: center;
}
.missions-overlay {
  position: absolute;
  left: 60px;
  right: 60px;
  top: 60px;
  bottom: 60px;
  z-index: 5;
  background: black;
}
.close-missions-overlay {
  margin-top: 60px;
  text-align: center;
  color: black;
  background: orange;
  padding: 20px;
}

.geolocation-is-missing-overlay {
  padding: 12px;
  margin-bottom: 120px;
  font-size: 32px;
  position: absolute;
  left: 60px;
  right: 60px;
  top: 60px;
  overflow: scroll;
  z-index: 6;
  background: black;
  opacity: 0.0;
}
.fade-in {
  opacity: 1.0;
  transition-delay: 4s;
  transition-duration: 2s;
}
.distance-o-meter {
  font-size: 32px;
  position: absolute;
  top: 30px;
  right: 30px;
  z-index: 4;
  text-align: right;
  color: black;
  background: orange;
}

.footer {
  font-size: 0.8em;
  margin-top: 420px;
  margin-bottom: 60px;
}

/* this is for the google map stuff */
.callout {
  font-size: 400%;
}
.callout h1 {
  font-size: 1.2em;
}
.callout .collect-item {
}