/* @group Browser Reset (Defaults) */
/* Eric Meyer CSS Reset - v1.2 - May 4, 2007
   Don't forget to set a foreground and background colour on the 'html' or 'body' element! */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {border: 0; font-family: inherit; font-size: 100%; font-style: inherit; font-weight: inherit; margin: 0; padding: 0; outline: 0; vertical-align: baseline;}

/* remember to define focus styles! */
:focus {outline: 0;}

body {background: white; color: black; line-height: 1;}
ol, ul {list-style: none;}

/* tables still need 'cellspacing="0"' in the markup */
table {border-collapse: separate; border-spacing: 0;}

caption, th, td {font-weight: normal; text-align: left;}
blockquote:before, blockquote:after, q:before, q:after {content: "";}
blockquote, q {quotes: "" "";}
/* @end */

:root {
  --white: #ffffff;
  --purple-light: #d8d9e3;
  --purple-dark: #575967;
  --orange: #e49b60;

  --font-serif: Georgia, Palatino, "Times Roman", "Times New Roman", Times, serif;
  --font-sans: Helvetica, Arial, sans-serif;
}

*, ::before, ::after {box-sizing: border-box;}

body {
  background-color: var(--white);
  background-image:
    url(../img/trees.png),
    url(../img/snow.png),
    url(../img/snow_top.png);
  background-position: 100% 3.9375em, 0 0, 50% 0;
  background-repeat: no-repeat, no-repeat, repeat-x;
  font-family: var(--font-serif);
  font-size: 1.25rem;
  line-height: 1.5;
  margin: 0 1rem 4rem 1rem;
  text-align: center;
}

a {
  text-decoration: none;
  transition: all .3s cubic-bezier(.42, 0, .58, 1);
}
a:link, 
a:visited {color: var(--orange);}
a:hover {color: var(--purple-dark);}
a:active {color: var(--orange);}

b, strong {font-weight: bold;}

figure {
  margin: 0;
  padding: 0;
}

img {
  vertical-align: top;
  max-width: 100%;
}

.cover img {max-width: 90%;}

main {
  color: var(--purple-dark);
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  align-items: flex-start;
  align-content: flex-start;
  column-gap: 8rem;
  padding: 0 1.2rem 2.4rem 1.2rem;
  text-align: left;
}

@media screen and (min-width: 60em) {
  main {padding: 0 4.8rem 3.6rem 4.8rem;}
}

.clips {
  border-top: 1px solid var(--orange);
  margin-top: .5rem;
  padding: 1.5rem 0 0 0;
}

footer {
  color: var(--purple-dark);
  margin: 2.4rem 0;
}

.content,
.cover {
  margin-top: 1.2rem;
  width: 100%;
}

@media screen and (min-width: 60em) {
  .content,
  .cover {margin-top: 2.4rem;}
}

.cover {
  background: url(../img/record.gif) 100% 50% no-repeat;
  background-size: contain;
}

.cover img {
  box-shadow: rgba(0, 0, 0, 0.25) 0px 25px 50px -12px, rgba(0, 0, 0, 0.2) 0px 12px 28px 0px, rgba(0, 0, 0, 0.1) 0px 2px 4px 0px, rgba(255, 255, 255, 0.05) 0px 0px 0px 1px inset;
}

@media screen and (min-width: 60em) {
  .content {width: calc(50% - 8rem);}
  .cover {width: 50%;}
}

.album {margin-top: 4.8rem;}

.info {
  border-top: 1px solid var(--purple-light);
  font-size: 1rem;
  margin-top: 3.2rem;
  padding-top: 1.2rem;
}

.info h3 {font-size: 1.2rem;}
.info p {margin-top: .4rem;}

/* Dialog ------------------------------------------------------------------ */
::backdrop {
  background: var(--purple-dark);
  -webkit-backdrop-filter: blur(10px) saturate(100%);
  backdrop-filter: blur(10px) saturate(100%);
  opacity: 0.8;
}

dialog {
  background: var(--white);
  border: none;
  border-radius: 18px;
  box-shadow: rgba(255, 255, 255, 0.1) 0px 1px 1px 0px inset, rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
  padding: 1rem;
  z-index: 3;
}

/* Headings ---------------------------------------------------------------- */
header {
  margin: 0;
  width: 100%;
}

h1, h2, h3, h4, h5, h6 {line-height: 1.5rem;}

h1 {
  background: url(../img/george.png) 0 0 no-repeat;
  color: var(--orange);
  font-size: 4.8rem;
  margin-top: 36rem;
  margin-bottom: 1.2rem;
  text-transform: uppercase;
}

h2 {
  background: url(../img/album_title.png) 0 0 no-repeat;
  color: var(--purple-light);
  font-size: 3.2rem;
  margin-top: 1.2rem;
  margin-bottom: 0;
}

h1, h2 {
  background-size: contain;
  display: block;
  line-height: 1;
  max-width: 100%;
  text-indent: -9999em;
}

@media screen and (min-width: 60em) {
  h1 {margin-top: 12rem;}
  h2 {margin-bottom: 12rem;}
}

h3 {
  color: var(--orange);
  font-family: var(--font-serif);	
  font-size: 1.8rem;
}

h4 {
  color: var(--orange);
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* Text -------------------------------------------------------------------- */
p {
  line-height: 1.5rem;
  margin: 1rem 0;
}

/* Buttons ----------------------------------------------------------------- */
a.button,
.button {
  background: var(--orange);
  border: none;
  border-radius: 9px;
  color: var(--purple-dark);
  cursor: pointer;
  font-family: var(--font-sans);
  font-weight: bold;
  padding: .75rem 1rem .625rem 1rem;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
}

.btn__buy {
  display: inline-block;
  margin: 0 1rem 0 0;
}

.button span {font-weight: normal;}
.button:hover {
  background: var(--purple-dark);
  color: var(--white);
}

/* Icons ------------------------------------------------------------------- */
.with__icn {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: center;
  align-content: center;
}

.icn {
  margin-right: 2px;
  width: 20px;
}

/* Services ---------------------------------------------------------------- */
#elsewhere {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: baseline;
  align-content: center;
  column-gap: 2rem;
  row-gap: 0;
}

#elsewhere, 
#elsewhere li {
  margin: 0;
  padding: 0;
}

#elsewhere svg {
  height: 48px;
}

/* Utility ----------------------------------------------------------------- */
.note {
  font-size: 1rem;
  font-style: italic;
}

.caps {
  font-size: 1.375rem;
  letter-spacing: 1px;
}