/* VVitchcast 1 and 2 CSS - Last Updated November 16, 2024 */

@font-face {
font-family: "Alegreya";
src: url("/vvfnts/Alegreya-Regular.eot");
src: url("/vvfnts/Alegreya-Regular.eot?#iefix") format("embedded-opentype"),
     url("/vvfnts/Alegreya-Regular.woff2") format("woff2"),
     url("/vvfnts/Alegreya-Regular.woff") format("woff"),
     url("/vvfnts/Alegreya-Regular.ttf") format("truetype"),
     url("/vvfnts/Alegreya-Regular.svg#Alegreya-Regular") format("svg");
font-weight: 400;
font-style: normal;
}

html {
  height: 100%;
  font-size: 100%;
  font-family: Arial, Helvetica, sans-serif;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  padding: 0;
  background-color: rgba(0, 0, 0, 1.0);  
  font-weight: 400;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

*:focus {
  outline: none;
}

a:link, 
a:visited, 
a:active {
  display: inline-block;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 700;
  color: #a8c696;
  text-decoration: none;
  margin: 0;
  padding: 1px 11px;
  background-color: #333333;
  border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
      -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
      -webkit-focus-ring-color: rgba(0, 0, 0, 0) !important;
  outline: none !important;
}

@media only screen and (min-width: 48em) {   /* 768px */
a:hover {
  color: #ffffff;
  background-color: #464646;
}
}

.wrapper { margin: 0 0; }

.container {
  width: 100%;
  margin: 0 auto;
  padding: 4px 0 22px 0;
  background-color: rgba(28, 28, 28, 1.0);
}

@media only screen and (min-width: 40em) {
  .container {width: 100%;}
}

@media only screen and (min-width: 56em) {
  .container {width: 80%;}
}

@media only screen and (min-width: 70em) {
  .container {width: 70%;}
}

@media only screen and (min-width: 100em) {
  .container {width: 60%;}
}

h1 {
  padding: 0 10px;  
  font-family: Alegreya, Georgia, "Times New Roman", Times, serif;
  font-variant: small-caps; text-transform: none; font-weight: 400;
  font-size: 1.7em;
  letter-spacing: 0.0625rem;
  color: #f6f6f6;
  word-wrap: break-word;
  text-align: center;
  line-height: 0.875em;
}

@media only screen and (min-width: 32em) {
  h1 {font-size: 1.7em;}
}

@media only screen and (min-width: 70em) {
  h1 {font-size: 1.9em;}
}

@media only screen and (min-width: 100em) {
  h1 {font-size: 2em;}
}

h2 {
  padding: 0;
  font-family: Alegreya, Georgia, "Times New Roman", Times, serif;
  font-variant: small-caps; text-transform: none; font-weight: 400;
  font-size: 1.375em;
  letter-spacing: 0.0625rem;
  color: #f6f6f6;
  word-wrap: break-word;
  text-align: center;
  line-height: 0.875em;
}

@media only screen and (min-width: 32em) {
  h2 {font-size: 1.6em;}
}

@media only screen and (min-width: 70em) {
  h2 {font-size: 1.7em;}
}

@media only screen and (min-width: 100em) {
  h2 {font-size: 1.8em;}
}

.song, .history {
  width: 100vw;
  margin: 0 auto;
  padding: 10px 0;
  background: rgba(0, 0, 0, 0.6);
  border-radius: initial;
}

@media only screen and (min-width: 32em) {
.song, .history {
  width: 85vw;
  margin: 0 auto;
  padding: 10px 0;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 9px;
    -moz-border-radius: 9px;
    -webkit-border-radius: 9px;
    -ms-border-radius: 9px;
    -o-border-radius: 9px;
}
}

@media only screen and (min-width: 40em) {
.song, .history {width: 75vw;}
}

@media only screen and (min-width: 56em) {
.song, .history {width: 55vw;}
}

@media only screen and (min-width: 70em) {
.song, .history {width: 45vw;}
}

.song_container, .history_container {
  max-width: 100%;
  margin: 0 auto;
  padding: 6px 0;
  background: rgba(0, 0, 0, 0);
}

@media only screen and (min-width: 32em) {
.song_container, .history_container {
  width: 96%;
  margin: 0 auto;
  padding: 6px 0;
  background: rgba(0, 0, 0, 1.0);
  border-radius: 6px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    -ms-border-radius: 6px;
    -o-border-radius: 6px;
}
}

b { color: #b8a97e; }

p {
  width: 92%;
  margin: 0 auto;
  padding: 0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.75em;
  line-height: 1.5em;
  color: #ebebeb;
  text-align: left;
}

@media only screen and (min-width: 32em) {
p {
  width: 90%;
  font-size: 0.75em;}
}

@media only screen and (min-width: 100em) {
p {
  width: 90%;
  font-size: 1.0em;}
}

p.current_song { font-size: 1.0em; }

@media only screen and (min-width: 100em) {
p.current_song { font-size: 1.25em; }
}

ol {
  width: 82%;
  margin: 0 auto;
  padding: 0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.875em; /* 0.75em */
  color: #ebebeb;
  text-align: left;
}

@media only screen and (min-width: 70em) {
ol {
  width: 88%;
  font-size: 0.875em;} /* 0.875em */
}

@media only screen and (min-width: 100em) {
ol {
  width: 90%;
  font-size: 1.0em;} /* 1.0em */
}

ol li {
  margin: 3px 0 3px 0;
  padding: 1px 6px;
  background-color: #1e1e1e;
}

@media only screen and (min-width: 32em) {
ol li {background-color: #121212;}
}