/* fonts */ @font-face  {
  font-family: heylouie;
  src: url(../font/heylouie.otf);
}

/* fonts */ @font-face  {
  font-family: rimouski;
  src: url(../font/rimouski.otf);
}

:root  {
  /* fonts */ 
  --titlefont:'heylouie', Georgia, serif;
  --bodyfont:'rimouski', serif;
  /* images */ 
  --backgroundimage:url(../img/pixelrecord/vinyls-background.png);
  /* colors */
  --backgroundcolor: #3e2308;
  --accentcolor: #c6b299;
}

*  {
  scrollbar-color:var(--accentcolor) var(--backgroundcolor);
}

::selection  {
  background-color:var(--accentcolor);
  color:var(--backgroundcolor);
}

body  {
  color: white;
  overflow-x: hidden;
  font-family: var(--bodyfont);
  font-size: 12pt;
  image-rendering: pixelated;
  background-image: var(--backgroundimage);
  background-size: cover;
  background-attachment: fixed;
}

footer  {
  padding:15px;
}

h1, footer {
  text-shadow: -1.5px -1.5px 0 var(--backgroundcolor), 1.5px -1.5px 0 var(--backgroundcolor), -1.5px 1.5px 0 var(--backgroundcolor), 1.5px 1.5px 0 var(--backgroundcolor);
}

h1  {
  font-family: var(--titlefont);
  font-size: 30pt;
  letter-spacing: 0.15em;
  filter: drop-shadow(4px 5px #516146);
}

h2  {
  font-size:18pt;
}

a  {
  color: #ffea00;
  text-decoration: none;
}

hr  {
  border: none;
}

iframe{
  width: 40em;
  height: 35em;
  border: none;
}

textarea {
    height: 150px;
    border-radius: 10px;
    max-width: 50vw;
}

.container  {
  width:90vw;
  margin:auto;
  padding:1em;
  display:flex;
  gap:1em;
  align-items:center;
}

.header  {
  width: 100vw;
}

.leftbox, .rightbox  {
  width:50vw;
  height:90vh;
  padding: 1em;
}

.leftbox  {
  background-color: ;
  text-align: center;
}

.rightbox  {
  overflow: auto;
  border-radius: 5em;
  border: 0.5em solid #516146;
  background-color: #3e2308;
}

.rightbox h1  {
  font-size:18pt;
}

.prcase  {
  height: 38em;
  padding: 1em;
  overflow: auto;
  background-image: url("../img/pixelrecord/woodbox_bg.png");
  background-size: contain;
  border: 3.5em solid transparent;
  border-image-slice: 113 101 59 104;
  border-image-width: 4.6em;
  border-image-repeat: stretch stretch;
  border-image-source: url("../img/pixelrecord/woodbox_border.png");
}

/* code for the club START */ 
.pixelrecords  {
  display: inline-flex;
  align-items: center;
  margin: 10px;
  padding: 15px;
  image-rendering: pixelated;
  width: fit-content;
}

.vinyl  {
  margin-left: -60px;
  margin-bottom: 5px;
  padding: 10px;
  position: relative;
}

.vinyl:hover  {
  right: -55px;
}

/* alt spin (optional): animation: spin 2.5s infinite;
*/ .cover  {
  position: relative;
  z-index: 1;
}

/* code for the club END */ @media only screen and (max-width: 975px)  {
  body  {
  background-repeat: repeat-y;
  background-size:contain;
}

  iframe{
  width: fit-content;
  height: fit-content;
}

  .container  {
    flex-wrap: wrap;
  }

  .leftbox, .rightbox, .prcase  {
    width: fit-content;
    height: fit-content;
  }

  .leftbox  {
    order: 1;
  }

  .rightbox  {
    order: 2;
  }

}