@font-face {
  font-family:'Manrope';
  src: url("Manrope-VariableFont_wght.ttf") format("truetype");
  font-weight: 200 800;
}
@media (max-width:999px),(orientation: portrait) {
    body {
      width:500px;
    }
}

@media (max-width:560px) {
    body {
      width:100% !important;
      font-size:0.9em !important;
    }
    body, footer, article h2, article p {
      padding-left:1.6em !important;
      padding-right:1.6em !important;
    }
    li {
      padding:0em 1.2em !important;
    }
    svg {
      width:48px !important;
    }
    .timer {
    	font-size:1.6em !important;;
    }
    .flip-card {
      background-color: transparent;
      width: 100% !important;
      height: 324px !important;
      perspective: 1000px; /* Remove this if you don't want the 3D effect */
      margin-bottom:1em;
    }
}

@keyframes playScaleAnim {
	0% {transform: scale(1);}
	50% {transform: scale(1.13);}
	100% {transform: scale(1);}
}

@keyframes pulseFocus {
	0% {outline: 30px solid rgba(39,144,255,0)}
	/* 50% {outline: 7px solid #2790ff;} #83a9f1 */
	100% {outline: 4px solid rgba(131,169,255,1)}
}

*:focus-visible {
	outline: 4px solid rgba(131,169,255,1);
	outline-offset: 1px;
	animation: pulseFocus 0.3s ease 1;
	border-radius:3px;
}

html {
	font-size:16px;
	background-color:#fff;
	background-image: url('lemonglow_wordmark.png');
	background-size:cover;
	background-repeat:no-repeat;
	background-attachment: fixed;
	background-position:center;
	height:100%;
	margin:0;
	padding:0;
	display:flex;
	justify-content:center;
	align-items:center;
}
body {
	color:#000;
	font-family:"Manrope", sans-serif;
	margin:auto;
	width:500px;
	word-wrap: break-word;
}
iframe {
	border:0;
	width:100%;
	height:776px;
	margin-bottom:0.5em;
}
nav {
	margin-top:2em;
}
header, section {
	position:relative;
	padding-bottom:1em;
	margin-bottom:2em;
	overflow:hidden;
}
article {
	margin-bottom:1.5em;
}
a, a:link, a:visited {
	color:inherit;
	text-decoration: underline;
}
a:hover {
	text-decoration: none;
}
a:active {
	opacity:0.6;
}
ol {
	display:flex;
	flex-direction:column;
	background-color:#fff;
	border: 1px solid #000;
	height:100%;
	padding:0;
	margin:0;
}
li {
	flex-grow:1;
	list-style-type: none;
	margin:0;
	padding:0 1.5em;
	display:flex;
	justify-content: space-between;
	align-items: center;
}
li h3 {
  margin-top:1em;
}
li p {
  padding-bottom:1.3em;
  font-size:0.8em;
}
li:hover {
  background:#f9f9e9;
  cursor:pointer;
  color:#000;
}
li :first-child {
  min-width: 150px;
}
.playing, .playing:hover {
  background:#000;
  color:#fff;
}
.timer {
  text-align:right;
  font-size:2em;
  font-feature-settings: "tnum";
}
.songinfo h3, .songinfo p {
	margin:0;
	padding:0;
}
figure {
  display:grid;
  margin:0;
  padding:0;
}
figure img {
  grid-area:1/1/1/1;
  width:100%;
  background:#eee;
}
figure img:hover {
  cursor:pointer;
}
h1,h2,h3 {
	width:auto;
	margin-right:auto;
	margin-left:auto;
  margin-top:0.6em;
  margin-bottom:0.3em;
  font-weight:800;
}
h1 {
	font-size:3em;
  margin-bottom:0.1em;
}
h3 {
	font-weight:600;
}
p {
	line-height:1.5em;
	margin:0 auto;
	padding-bottom:1.6em;
	font-weight:400;
}
footer {
  padding-bottom:2em;
}
img {
  width:100%;
  margin-bottom:1em;
}

svg {
  width:56px;
}

/* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-card {
  background-color: transparent;
  width: 500px;
  height: 500px;
  perspective: 1000px; /* Remove this if you don't want the 3D effect */
  margin-bottom:.6em;
}

/* This container is needed to position the front and back side */
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.5s;
  transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flipped .flip-card-inner {
  transform: rotateY(-180deg);
}
.flipped svg, .flipped svg path {
	animation:none !important;
}

/* Position the front and back side */
.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */
.flip-card-front {
  background-color:#000;
  background-image:url('get-alive-cover-art.jpg');
  background-size:cover;
  background-repeat:no-repeat;
  background-position:center;
}
.flip-card-front {
  display:flex;
  justify-content:center;
  align-items:center;
}
.flip-card-front:hover {
  cursor:pointer;
}
.flip-card-front svg {
	animation: playScaleAnim 2s ease 1s infinite normal none;
}

/* Style the back side */
.flip-card-back {
  background-color:#fff;
  transform: rotateY(180deg);
}

@media (prefers-color-scheme: dark) {
  html {
    background-color:#000;
    animation: gradientWash 10s linear infinite;
    background-image:radial-gradient(circle at var(--x) var(--y), var(--color), var(--color-second)),url('lemonglow_wordmark.png');
  }
@property --color {
  syntax: '<color>';
  inherits: false;
  initial-value:rgba(0,0,0,1);
}

@property --color-second {
  syntax: '<color>';
  inherits: false;
  initial-value:rgba(0,0,0,0.8);
}
@property --x {
	syntax: '<length-percentage>';
	initial-value: 50%;
	inherits: false
}

@property --y {
	syntax: '<length-percentage>';
	initial-value: 50%;
	inherits: false
}
@keyframes playColorAnim {
  0% {fill:#fff;}
  50% {fill:#ff0;}
  100% {fill:#fff;}
}
@keyframes gradientWash {
  0% {
    --color: rgba(0,0,0,1);
    --color-second:rgba(0,0,0,0.8);
    --x:50%;
    --y:50%;
  }
  25% {
    --color:rgba(0,0,0,0.8);
    --color-second:rgba(0,0,0,1);
    --x:0%;
    --y:100%;
  }
  50% {
    --color:rgba(0,0,0,1);
    --color-second:rgba(0,0,0,0.8);
    --x:100%;
    --y:100%;
  }
  75% {
    --color:rgba(0,0,0,0.8);
    --color-second:rgba(0,0,0,1);
    --x:100%;
    --y:0%;
  }
  100% {
    --color:rgba(0,0,0,1);
    --color-second:rgba(0,0,0,0.8);
    --x:50%;
    --y:50%;
  }
}
  body {
      color:#ff0;
  }
  ol {
    background-color:#110;
    border-color:#ff0;
    color:#ff0;
  }
  li:hover {
    background:#1b1b00;
    cursor:pointer;
	color:#ff0;
  }
  .playing, .playing:hover {
    background:#ff0;
    color:#000;
  }
  .flip-card-back {
    background-color:#000;
  }
  .flip-card-front svg path{
    animation: playColorAnim 2s ease 1s infinite normal none;
  }

}