:root {
	--color: #2c90be;
	--gold: #DBA632;
	--title: 'Questrial';
	--base: 'Bitter';
}

body::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px var(--color);
    border-radius: 10px;
    background-color: var(--color);
}

body::-webkit-scrollbar {
    width: 12px;
    background-color: var(--color);
}

body::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px var(--color);
    background-color: var(--gold);
}

.title {
	font-family: var(--title);
}
body, pre {
	font-family: var(--base);
	font-size: 16px;
	background: whitesmoke;
}

header {
	background-image: -webkit-linear-gradient(whitesmoke 90%, var(--gold));
	background-image: -o-linear-gradient(whitesmoke 90%, var(--gold));
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(90%, whitesmoke), to(var(--gold)));
	background-image: linear-gradient(whitesmoke 90%, var(--gold));
}

footer {
	background: url(../img/header.png);
	background-position: center top;
	background-origin: bottom;
	background-repeat: no-repeat;
	background-size: cover;
}
footer {
	min-height: 40vh;
}
header img {
	-webkit-filter: drop-shadow(0px 0px 0.5px var(--color));
	        filter: drop-shadow(0px 0px 0.5px var(--color));
}
.mastodon-hero {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	background-image: url(../img/leviathan.jpg);
	background-attachment: fixed;
	background-size: cover;
	background-position: center;
}
h1#intro, footer h5 {
	/*
	Ensure background is added first
	*/  
	background: url(../img/download.jpg);

	background-attachment: fixed;
	-webkit-text-fill-color: transparent;
	-webkit-background-clip: text;

	font-size: 18vw;
	font-weight: bold;
	will-change: scroll-position;
}

footer h5 {
	font-size: 8vw !important;
}

h1.title small {
	display: block;
}
.section-spacing {
	margin: 10px 15px;
	padding: 30px 20px;
}

a {
	color: var(--color);
}
.icons {
	  display: -webkit-box;
	  display: -ms-flexbox;
	  display: flex;
	  -webkit-box-align: center;
	      -ms-flex-align: center;
	          align-items: center;
	  -webkit-box-pack: center;
	      -ms-flex-pack: center;
	          justify-content: center;
	  -webkit-box-orient: horizontal;
	  -webkit-box-direction: normal;
	      -ms-flex-direction: row;
	          flex-direction: row;
	  -ms-flex-wrap: wrap;
	      flex-wrap: wrap;
	  -ms-flex-flow: row wrap;
	      flex-flow: row wrap;
	  -ms-flex-line-pack: end;
	      align-content: flex-end;
}
.icons i {
	padding: 20px;
	font-size: 2rem;
	color: var(--color);
	-webkit-transition: color .7s ease-in-out;
	-o-transition: color .7s ease-in-out;
	transition: color .7s ease-in-out;
}
.icons i:hover {
	color: black;
}
blockquote span {
	font-size: 25px;
	font-weight: 900;
}

.player {
  position: relative;
  font-size: 0;
  overflow: hidden;
}
.player video {
	height: 100%;
}
.player:hover {
	cursor: pointer;
}

/* This css is only applied when fullscreen is active. */
.player:-webkit-full-screen {
  max-width: none;
  width: 100%;
}
.player:-moz-full-screen {
  max-width: none;
  width: 100%;
}
.player:-ms-fullscreen {
  max-width: none;
  width: 100%;
}
.player:fullscreen {
  max-width: none;
  width: 100%;
}

.player:-webkit-full-screen {
  max-width: none;
  width: 100%;
}

.player__video {
  width: 100%;
}

.player__button {
	position: absolute;
	top: 50%;
	left: 0;
	background: none;
	border: 0;
	color: whitesmoke;
	width: 100%;
	z-index: 3;
	cursor: pointer;
	outline: none;
	margin-top: -33px;
}
.player__button i {
	font-size: 3rem;
	-webkit-transition: color .4s ease-in-out;
	-o-transition: color .4s ease-in-out;
	transition: color .4s ease-in-out;
}
.player__button i:hover, .player:hover i {
	color: var(--color);
}

.player__button:focus {
  outline: none;
}
.hidden {
	display: none;
}

.progress {
  -webkit-box-flex: 10;
      -ms-flex: 10;
          flex: 10;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-preferred-size: 100%;
      flex-basis: 100%;
  height: 15px;
  -webkit-transition: height 0.3s;
  -o-transition: height 0.3s;
  transition: height 0.3s;
  background: var(--gold);
  cursor: pointer;
}
.progress:hover:after {
	content: 'Listen to Steambreather by Mastodon';
	margin: auto;
}
.progress__bar {
  width:50%;
  background: var(--color);
  -webkit-box-flex:0;
      -ms-flex:0;
          flex:0;
  -ms-flex-preferred-size:0%;
      flex-basis:0%;
  cursor: pointer;
}
.progress__bar:after {
    content: attr(data-content);
}
.progress__bar:after, .progress:hover:after {
    font-size: 12px;
    color: whitesmoke;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

#scrollable {
	direction: rtl;
}
pre {
	direction: ltr;
}

#scrollable::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px var(--gold);
    border-radius: 10px;
    background-color: var(--gold);
}

#scrollable::-webkit-scrollbar {
    width: 12px;
    background-color: var(--gold);
}

#scrollable::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px var(--gold);
    background-color: var(--color);
}

.meet-the-band li {
	padding-bottom: 20px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-moz-flex-direction: column;
	-ms-flex-direction: column;
	-o-flex-direction: column;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	        flex-direction: column;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
}
.meet-the-band li.subtitle {
	padding-bottom: 0;
	margin-bottom: 0;
}