/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */



header {background: white; z-index:  99; position:  fixed; width:  100%;}
header form {display:  inline}



@media (min-width:576px) {

  body {background:  #EEE;}

  header {position:  absolute !important; width:  100%;}

  #mobile_container {
    box-sizing:  content-box;
    background: white;
    position: relative;
    width: 360px;
    height: 640px;
    margin: auto;
    border: 16px black solid;
    border-top-width: 60px;
    border-bottom-width: 60px;
    border-radius: 36px;
  }

  /* The horizontal line on the top of the device */
  #mobile_container:before {
    content: '';
    display: block;
    width: 60px;
    height: 5px;
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #333;
    border-radius: 10px;
  }

  /* The circle on the bottom of the device */
  #mobile_container:after {
    content: '';
    display: block;
    width: 35px;
    height: 35px;
    position: absolute;
    left: 50%;
    bottom: -65px;
   transform: translate(-50%, -50%);
    background: #333;
    border-radius: 50%;
  }


  #mobile_inner {
    box-sizing:  content-box;
    width: 360px;
    height: 640px;
    background: white;
    overflow-y:  hidden;
  } 

  #mobile_inner:hover {
    overflow-y:  auto;
  } 
}


.game-block:hover {background:  #EEE}


#logo {display: inline-block;}
#logo a {text-decoration: none; color:  rgb(0,145, 69)}
#logo img.icon {padding-right: 0.5em}




.bi-person-circle {fill:  rgb(0,145, 69); width:  24px;}

#posts {display:block; max-height: 400px; overflow-y: scroll; border: 1px solid #CCC; border-radius:  5px;}


#logo a span {
  display: flex;
  align-items: center;
  text-align: center;
  line-height: 1.6;
}

#logo a span {
  position: relative;
  overflow: hidden;
}
#logo a img {cursor:  pointer;}
#logo a span::before {
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%);
  content: "";
  display: block;
  height: 100%;
  left: -75%;
  position: absolute;
  top: 0;
  transform: skewX(-25deg);
  width: 50%;
  z-index: 2;
  cursor:  pointer;
}
#logo a span:hover::before, #logo a span:focus::before {
  -webkit-animation: shine 0.85s;
          animation: shine 0.85s;
}
@-webkit-keyframes shine {
  100% {
    left: 125%;
  }
}
@keyframes shine {
  100% {
    left: 125%;
  }
}

#waitlist_hero {background: url("/stadium.png") 50% 50%; min-height: 480px; background-size: cover;}
#waitlist_hero #waitlist_cta { color: #fff; font-size: 3rem; font-weight: 700; margin-bottom: 1rem; text-shadow: 1px 1px 4px rgba(0,0,0,.7);}
#waitlist_cta2 { color: #fff; font-size: 1.2rem; margin-bottom: 1.5rem; color: #fff; text-shadow: 1px 1px 4px rgba(0,0,0,.7);}
#waitlist h1 {font-size: 1.5rem; margin-bottom: 1.5rem; color: #1a1a1a;}