/*
 * 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.
 */




.btn-success {background:  rgb(0,145, 69);
              background:  #009144;}
.bg-secondary-subtle {background:  #f2f2f2 !important;}

.fg-red {color:  red}
.fg-color {color: #009144;}
.fg-small {font-size: 0.9em;}
.fg-xsmall {font-size: 0.8em;}

a {color: #009144; text-decoration: none;}


.avatar {
  display:  inline-block;
  text-align:  center;
  background:  #CCC;
  width: 32px;
  height: 32px;
  position: relative;
  overflow: hidden;
  border-radius: 50%;
  border: 1px solid #555;
}
.avatar img {object-fit: cover; width: 32px; height: 32px;}

.btn-link-emoji {sfont-size: 0.9em; text-decoration: none; svertical-align: 7%; padding:  0; border:  0;}


.game-block a {color:  inherit}



.field_with_errors label {color: red;}
.field_with_errors input {border:  1px solid red}
.field_with_errors select {border:  1px solid red}

.bi-user::before {
  display: inline-block;
  content: "";
  vertical-align: -.125em;
  width:  28px;
  height:  28px;
  stroke:  #CCC;
  fill:  red;
  color:  red;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23009144' class='bi bi-person-circle' viewBox='0 0 16 16'><path d='M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0'/><path fill-rule='evenodd' d='M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8m8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1'/></svg>");
  background-repeat: no-repeat;
  background-size: 24px 24px;
  background-position:  50% 50%;
}


.bi-heart::before {
  display: inline-block;
  content: "";
  vertical-align: -.125em;
  width:  1em;
  height:  1em;
  stroke:  #CCC;
  fill:  red;
  color:  red;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23AAA' class='bi bi-heart' viewBox='0 0 16 16'><path d='m8 2.748-.717-.737C5.6.281 2.514.878 1.4 3.053c-.523 1.023-.641 2.5.314 4.385.92 1.815 2.834 3.989 6.286 6.357 3.452-2.368 5.365-4.542 6.286-6.357.955-1.886.838-3.362.314-4.385C13.486.878 10.4.28 8.717 2.01zM8 15C-7.333 4.868 3.279-3.04 7.824 1.143q.09.083.176.171a3 3 0 0 1 .176-.17C12.72-3.042 23.333 4.867 8 15'/></svg>");
  background-repeat: no-repeat;
  background-size: 1rem 1rem;
}

.bi-comment::before {
  display: inline-block;
  content: "";
  vertical-align: -.125em;
  width:  1em;
  height:  1em;
  stroke:  #CCC;
  fill:  red;
  color:  red;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23AAA' class='bi bi-chat' viewBox='0 0 16 16'><path d='M2.678 11.894a1 1 0 0 1 .287.801 11 11 0 0 1-.398 2c1.395-.323 2.247-.697 2.634-.893a1 1 0 0 1 .71-.074A8 8 0 0 0 8 14c3.996 0 7-2.807 7-6s-3.004-6-7-6-7 2.808-7 6c0 1.468.617 2.83 1.678 3.894m-.493 3.905a22 22 0 0 1-.713.129c-.2.032-.352-.176-.273-.362a10 10 0 0 0 .244-.637l.003-.01c.248-.72.45-1.548.524-2.319C.743 11.37 0 9.76 0 8c0-3.866 3.582-7 8-7s8 3.134 8 7-3.582 7-8 7a9 9 0 0 1-2.347-.306c-.52.263-1.639.742-3.468 1.105'/></svg>");
  background-repeat: no-repeat;
  background-size: 1rem 1rem;
}



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

:root {

  --bs-secondary-color:  #BBB;
}

.text-muted {

}


@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;
    overflow: hidden;
    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: scroll;
    padding-right: 15px;

  } 

  #mobile_inner:hover {
    xoverflow-y:  hidden;
  } 
}


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


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




#posts {display:block; smax-height: 400px; overflow-y: scroll; sborder: 1px solid #CCC; sborder-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;}