:root {
  --white: #f0f8ff;
  --grey: #b2b2b2;
  --yellow: #fff32e;
  --orange: #f27252;
  --blue: #02b1ef;
  --pink: #f9bfd8;
  --green: #28ac61;
  --purple: #372475;
  --darkblue: #182727;
  --darkdarkblue: #131e1e;
  --darkpurple: #180553;
  --darkdarkpurple: #211b1f;
  --darkbrown: #261713;
  --teal: #14c198;
  --darkteal: #022d2d;
  --brightpurple: #4d00ff;
  --red: #ff0000;
  --black: #011010;
  --peach: #ffb392;
}

@font-face {
  font-family: 'Hermit';
  src: url('/fonts/Hermit-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'UniversLT-UltraCondensed';
  src: url('/fonts/UniversLT-UltraCondensed.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'UniversLT-ExtraBlackExt';
  src: url('/fonts/UniversLT-ExtraBlackExt.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'ArchivoBlack';
  src: url('/fonts/ArchivoBlack.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'NewsCycle';
  src: url('/fonts/NewsCycle.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

.white {
  color: var(--white);
}

.yellow {
  color: var(--yellow);
}

.orange {
  color: var(--orange);
}

.blue {
  color: var(--blue);
}

.pink {
  color: var(--pink);
}

.green {
  color: var(--green);
}

.purple {
  color: var(--purple);
}

.teal{
  color: var(--teal);
}

.darkpurple{
  color: var(--darkpurple);
}

.brightpurple{
  color: var(--brightpurple);
}

.red {
  color: var(--red);
}

.grey {
  color: var(--grey);
}

body {
  margin: 0;
  color: var(--orange);
  background-color: var(--darkbrown);
  font-family: 'Hermit', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2 {
  font-weight: bold;
  text-transform: uppercase;
  text-shadow: 1px 1px var(--red);
}

h1 {
  font-size: 32px;
}

h2 {
  font-size: 26px;
  color: var(--blue);
}

h3 {
  font-size: 16px;
  color: var(--blue);
  text-shadow: 1px 1px var(--red);
}

a, a:link, a:visited, a:hover, a:active, a:focus {
  color: var(--peach);
  text-decoration: none;
  text-shadow: none;
}

a:hover, a:active, a:focus,
.toggle-button:hover, .toggle-button:active, .toggle-button:focus {
  text-decoration: underline;
  -moz-transition: 0.1s color ease;
  -webkit-transition: 0.1s color ease;
  transition: 0.1s color ease;
  cursor: pointer;
}

.avalon-emerson {
  padding: 10px;
}

.main {
  margin: 0 auto;
  overflow: hidden;
  min-width: 280px;
  width: 92%;
  margin-bottom: 1em;
  max-width: 1000px;
}

.reveal {
  display: none;
  padding-top: 5px;
}

.down-arrow {
  display: none;
}

.name {
  font-size: 48px;
  margin-bottom: 24px;
}

.social {
  text-transform: uppercase;
}

ul.homepage-link-list {
  list-style-type: none;
  padding: 0;
  margin: 12px 0 24px;
}

/* begin public shows partial */

.public-shows-container {
  background-color: var(--darkdarkblue);
  padding: 20px;
}

.public-shows-list {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.public-shows-list .show-item {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 5px;
  align-items: center;
  border-bottom: 1px solid var(--pink);
  padding: 10px 0;
}

.public-shows-list .show-date {
  display: flow;
  max-width: 60%;
  grid-template-columns: minmax(60px, 1fr);
}

.public-shows-list .show-day,
.public-shows-list .show-name {
  grid-column: 4 / -1;
}

.public-shows-list .show-day,
.public-shows-list .show-name,
.public-shows-list .show-city,
.public-shows-list .show-rest-date {
  grid-column: 4 / -1;
}

.public-shows-list .show-rest-date,
.public-shows-list .show-city {
  display: inline-flex;
}

/* end public shows partial */

td.show-date{
  width: auto;
}

.shows-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
}

th, td {
  padding: 4px;
  text-align: left;
}

tr {
  border: 2px solid var(--darkbrown);
  min-height: 80px;
  background-color: var(--darkblue);
}

.today-row td {
  background-color: var(--darkdarkpurple);
}

th {
  background-color: var(--purple);
  color: var(--teal);
  font-weight: normal;
}

td {
  background-color: var(--darkblue);
  padding: 4px 8px;
  min-height: 50px;
  align-items: center;
}

td.show-name {
  color: var(--orange);
/*  min-line-height: 2em;*/
}

tr,
td.show-date,
td.show-city,
td.show-event_type,
td.sold-out,
td.show-announce_date, 
td.show-ticket_link a {
  color: var(--pink);
}

td.show-ticket_link a {
  margin-top: 4px;
}

td.show-ticket_link input {
  margin-top: 4px;
}

td.show-ticket_link a,
td.show-ticket_link input {
  display: inline-block;
  max-width: 140px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

td.sold-out{
  min-width: 90px;
}

td.show-date,
td.show-announce_date {
  min-width: 136px;
}

td.show-controls {
  min-width: 100px;
}

.show-controls button {
  cursor: pointer;
  border: none;
  background-color: var(--darkblue);
  width: 24px;
  height: 24px;
}

.show-controls button:hover,
.admin-form-row button{
  background-color: var(--pink);
}

.admin select, 
.admin input,
.admin textarea {
  font-family: "Hermit", Helvetica, Arial, sans-serif;
  font-size: 16px;
  color: var(--darkdarkpurple);
  background: var(--pink);
  border: none;
  margin: 2px;
}

.admin input[type=date] {
  width: 130px;
}
.admin input[type=text] {
  width: 100%;
}

.admin textarea {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  resize: both;
}

.admin select {
  width: 50px;
}

.admin button:hover {
  cursor: pointer;
}

.poster {
  max-width: 100%;
}

.tour.main, .linkinbio.main {
  line-height: 2.5em;
  text-align: center;
}

.drag-handle {
  cursor: grab;
  display: inline-block;
  padding: 8px;
  font-size: 18px; 
}

.drag-handle:active {
  cursor: grabbing;
}

.highlights-table {
  width: 100%;
}

.highlight-order {
  width: 40px; 
  min-width: 40px;
  text-align: center;
}

.highlight-controls button {
  font-family: "Hermit", Helvetica, Arial, sans-serif;
  border: none;
  padding: 5px;
  cursor: pointer;
  font-size: 16px;
  color: var(--red);
  background: none;
}

.highlight-divider {
  background-color: var(--darkdarkpurple);
  height: 3px; 
  border: none;
  height: 20px;
}

.highlight-divider td {
  background-color: var(--darkdarkpurple);
  height: 0;
}

.hidden-highlights {
  display: none;
}

.toggle-highlights {
  background-color: var(--darkdarkpurple);
  color: white;
  border: none;
  padding: 10px;
  cursor: pointer;
  font-size: 14px;
}

.toggle-highlights:hover {
  background-color: var(--purple);
}

.highlight-link input[type="url"],
.highlight-link input[type="text"] {
  width: 100%;
  box-sizing: border-box;
}

@media only screen and (max-width: 800px) {
  .show {
    padding: 12px 0;
  }
  #background_video {
      display: none;
  }
}

/* mailchimp signup */

#mc_embed_signup, #mce-EMAIL {
  text-align: center;
  width: 100%;
}

#mc-embedded-subscribe, #mce-EMAIL {
  font-size: 24px;
  font-family: 'Hermit';
  text-shadow: 1px 1px var(--red);
  color: var(--red);
  background: var(--purple);
  width: 96%;
  margin-bottom: 30px;
}

#mce-EMAIL {
  padding: 20px 0 20px 16px;
  border: none;
  text-shadow: none;
}

#mc-embedded-subscribe {
  color: var(--blue);
  padding: 20px 19px !important;;
  border: 2px solid var(--blue);
}

#mc-embedded-subscribe:hover {
  cursor: pointer;
}

#mc_embed_signup div.mce_inline_error {
  color: var(--red) !important;
  background-color: transparent !important;
}

/* /andthecharm */

body.charm {
  background-color: var(--darkbrown);
  background-size: cover;
  background-attachment: fixed;
  text-align: center;
  font-family: 'UniversLT-UltraCondensed', 'NewsCycle', Arial, Helvetica, sans-serif;
  background-image: url('https://avalon-emerson-homepage.s3.us-west-1.amazonaws.com/charm/AAC_Charms-transparent-sm-min.png');
}

.charm p {
  font-size: 22px;
}

.background-flowers {
  background-image: url('https://avalon-emerson-homepage.s3.us-west-1.amazonaws.com/charm/AAC_Charms-transparent-sm-min.png');
  background-repeat: repeat-x;
  background-position: center;
  height: 100vh;
  width: 100vw;
  position: fixed;
  z-index: -1; 
}

.charm #background_video {
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: -1;
}

.youtube-embed-container {
  width: 80%;
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
  margin: auto;
}

.youtube-embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.charm h1,
.charm h2,
.charm h3 {
  font-family: 'UniversLT-UltraCondensed', 'NewsCycle', Arial, Helvetica, sans-serif;
  font-weight: normal;
  text-transform: uppercase;
  letter-spacing: normal;
}

.charm h2 {
  font-size: 36px;
  color: var(--white);
  margin-bottom: -28px;
}

.charm h3 {
  font-size: 28px;
  color: var(--grey);
}

.charm a {
  color: var(--blue);
}

.charm .title {
  color: var(--white);
  font-size: 42px;
  position: relative;
  z-index: 1;
  margin-left: 4px;
  margin: 1em 0;
}

.charm .title .name, .charm .title .ampersand {
  margin-bottom: -0.4em;
}

.charm a:hover,
.charm a:active,
.charm a:focus {
  background-color: var(--orange);
  color: var(--darkdarkblue);
  -moz-transition: 0.1s color ease;
  -webkit-transition: 0.1s color ease;
  transition: 0.1s color ease;
}

.charm .extra-black {
  background-color: var(--darkblue);
  font-family: 'UniversLT-ExtraBlackExt', 'ArchivoBlack', Arial, Helvetica, sans-serif;
  color: var(--white);
}

.charm .uppercase {
  text-transform: uppercase;
}

.charm .presave-section {
  text-align: center;
  font-size: 22px;
  padding: 10px;
  margin-bottom: 24px;
}

.charm .presave-link {
  padding: 10px;
  display: block;
  background-color: var(--darkdarkblue);
  margin: 16px auto 10px;
  margin-bottom: 18px;
  }

.charm .album-art,
.charm .presave-link,
.charm .email-container,
.charm .shows-container {
  width: 85%;
  max-width: 700px;
  margin: 12px auto;
}

.charm .shows-container h3 {
  color: var(--grey);
}

.charm .show {
  color: var(--white);
  font-size: 24px;
  background-color: var(--darkbrown);
}

.charm .show .dot {
  color: var(--yellow);
}

.charm .show .show-name {
  color: var(--blue);
}

.charm .show:hover {
  background-color: var(--orange);
  color: var(--darkdarkblue);
  font-size: 24px;
}

/* charm mailchimp signup */

.email-container {
  margin: 24px auto 24px auto;
}

.charm #mc-embedded-subscribe,
.charm #mce-EMAIL {
  font-family: 'UniversLT-UltraCondensed';
  font-size: 22px;
  color: var(--grey);
  background: var(--darkdarkpurple);
  padding: 10px 2px !important;
  border: 2px solid var(--darkdarkblue);
  text-shadow: none;
  margin-bottom: 20px;
}

.charm #mce-EMAIL{
  width: 98%;
}

.charm #mc-embedded-subscribe {
  background: var(--darkdarkpurple);
  width: 100%;
}

.charm #mc_embed_signup div.mce_inline_error {
  color: #901919 !important;
  background: var(--darkdarkpurple) !important;
}

.charm #mce-success-response {
  color: var(--grey) !important;
}

.cybernedits {
  background-color: var(--darkpurple);
  color: var(--red);
}

.cybernedits h1,
.cybernedits h2{
  font-family: 'ArchivoBlack';
  text-shadow: none;
}
.cybernedits h3{
  text-shadow: none;
}

.volume {
  margin: 3em 0 3em;
}

.volume-title {
  color: var(--brightpurple);
  font-size: 22px;
  margin-bottom: 0;
}

.volume-title a {
  color: var(--teal);
}

.volume-title:hover {
  color: var(--red);
}

.blink-slow {
      animation: blinker 1s infinite;
  }
    
  @keyframes blinker {
      from { opacity: 1.0; }
      50% { opacity: 0.5; }
      to { opacity: 1.0; }
  }

.blink-fast {
      animation: blinker 0.2s infinite;
  }
    
  @keyframes blinker {
      from { opacity: 1.0; }
      50% { opacity: 0.5; }
      to { opacity: 1.0; }
  }

/*  bball*/

.bball {
  margin: 0;
  padding: 0;
  background-size: cover;
  background-position: top center;
  text-align: center;
}

.bball .countdown-container {
  text-align: center;
}

.bball .main {
    margin: 20px auto;
}

.bball #mc-embedded-subscribe, #mce-EMAIL {
  font-size: 24px;
  font-family: 'Hermit';
  text-shadow: 1px 1px var(--red);
  color: var(--red);
  background: var(--grey);
  width: 96%;
  margin-bottom: 30px;
}

.bball p {
  background-color: var(--peach);
  text-align: left;
  color:var(--darkdarkpurple);
  padding: 0.5em;
}

.bball .siren-container {
  text-align: center;
  margin: 1em auto;
}

.bball #siren {
  font-size: 32px;
  cursor: pointer;
  padding: 0.3em 0.5em;
  background-color: var(--peach);
}

#mc-embedded-subscribe {
  color: var(--blue);
  padding: 20px 19px !important;;
  border: 2px solid var(--blue);
}
}

/* cybernedits */

.cybernedits .email-container {
  margin-top: 2em;
  margin: auto;
  width: 100%;
}

.cybernedits #mc-embedded-subscribe,
.cybernedits #mce-EMAIL {
  font-size: 22px;
  color: var(--red);
  background: var(--purple);
  padding: 10px 2px !important;
  text-shadow: none;
  margin-bottom: 20px;
}

.cybernedits #mce-EMAIL{
  width: 98%;
  border: 2px solid var(--purple);
}

.cybernedits #mc-embedded-subscribe {
  background: var(--darkpurple);
  width: 100%;
}

.cybernedits #mc_embed_signup div.mce_inline_error {
  background: var(--purple) !important;
}

.cybernedits #mce-success-response {
  color: var(--red) !important;
}

#game-area {
  margin: 0px;
  padding: 0px; }

#high-score {
  position: relative;
  left: 200px;
  bottom: 50px; }

#game-area:focus {
  outline: none; }

#mode-wrapper {
  font-family: "Hermit", Helvetica, Arial, sans-serif;
  font-size: 18px;
  color: var(--red); }

a.snake-link {
  color: var(--red); }
  a.snake-link:link, a.snake-link:visited {
    color: var(--red); }
  a.snake-link:hover {
    color: var(--purple); }

.snake-pause-screen {
  font-family: "Hermit", Helvetica, Arial, sans-serif;
  font-size: 18px;
  position: absolute;
  width: 300px;
  height: 80px;
  text-align: center;
  top: 50%;
  left: 50%;
  margin-top: -40px;
  margin-left: -150px;
  display: none;
  background-color: var(--purple);
  color: var(--teal); }

.snake-panel-component {
  position: absolute;
  font-family: "Hermit", Helvetica, Arial, sans-serif;
  font-size: 12px;
  color: var(--red);
  text-align: center;
  background-color: none;
  margin: 0px; }

.snake-snakebody-block {
  margin: 0px;
  padding: 0px;
  background-color: var(--purple);
  position: absolute;
  border: 0px solid var(--red);
  background-repeat: no-repeat; }

.snake-snakebody-alive {
  background-image: url("./images/snakeblock.png"); }

.snake-snakebody-dead {
  background-image: url("./images/dead-snakeblock.png"); }

.snake-food-block {
  margin: 0px;
  padding: 0px;
  background-color: var(--black);
  position: absolute; }

.snake-playing-field {
  box-shadow: 20px 20px 0 var(--brightpurple);
  margin: 0px;
  padding: 0px;
  position: absolute;
  background-color: var(--purple); }
  .snake-playing-field:focus {
    outline: none; }

.snake-game-container {
  margin: 0px;
  padding: 0px;
  border-width: 0px;
  border-style: none;
  zoom: 1;
  background-color: transparent;
  position: relative; }
  .snake-game-container:focus {
    outline: none; }

.snake-welcome-dialog {
  padding: 8px;
  margin: 0px;
  background-color: var(--black);
  color: var(--teal);
  font-family: "Hermit", Helvetica, Arial, sans-serif;
  font-size: 18px;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 300px;
  /*height: 150px; */
  margin-top: -100px;
  margin-left: -158px;
  text-align: center;
  display: block; }
  .snake-welcome-dialog button {
    font-family: "Hermit", Helvetica, Arial, sans-serif;
    font-size: 18px; }

.snake-try-again-dialog {
  padding: 8px;
  margin: 0px;
  background-color: var(--black);
  color: var(--teal);
  font-family: "Hermit", Helvetica, Arial, sans-serif;
  font-size: 18px;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 300px;
  height: 100px;
  margin-top: -75px;
  margin-left: -158px;
  text-align: center;
  display: none; }
  .snake-try-again-dialog button {
    font-family: "Hermit", Helvetica, Arial, sans-serif;
    font-size: 18px; }