body.kilopop {
  background-image: url(/images/radgb.jpg);
}

body.kilopop main img.kilopoplogo {
  display: block;
  margin: auto;
  width: 30%;
  max-width: 400px;
}

body.kilopop main>p:first-of-type {
  display: flex;
  flex-direction: column;
  align-items: center;
}

body.kilopop main>p {
  max-width: 750px;
  padding: 1em;
  margin: auto;
}

/* Notes screen specific */
body.kilopop main article>img:first-of-type {
  display: block;
  margin: auto;
}

body.kilopop table td img {
  display: block;
}

body.kilopop>img {
  max-width: 80vw;
  height: auto;
}

body.kilopop article#notes>section {
  max-width: 90vw;
}

.whiteframe blockquote,
.whiteframe blockquote {
  border: none;
  margin: 0;
}

body.kilopop h3 {
  text-align: center;
  margin: auto;
}

body.kilopop .whiteframe h3 {
  width: 80%;
}

body.kilopop h4 span {
  font-weight: 400;
}


.whiteframe blockquote:before,
.whiteframe blockquote:after {
  content: "";
}

.whiteframe blockquote p:before {
  content: "\201C";
}

.whiteframe blockquote p:last-of-type::after {
  content: "\201D";
}


.whiteframe {
  background: white;
  border: 4px ridge #08561b;
  border-radius: 5px;
  margin: auto;
  padding: 1em;
  color: #580808;
  margin-bottom: 2em;
}

.whiteframe.clues img {
  width: 100%;
  display: block;
  margin: auto;
}


.whiteframe .redclue {
  color: red;
  font-style: italic;
}

body.kilopop ul.kilodisco {
  margin: auto;
  width: 60%;
  max-width: 600px;
  padding-left: 0;
}

body.kilopop h3.bgpaleyellow {
  background-color: #ffff80;
  margin: 1em auto;
}

body.kilopop>main>article>section {
  background: white;
  border: 3px ridge #555;
  margin: 1em auto;
  padding: 0 1em 1em 1em;
  max-width: 90vw;
}

body.kilopop div.proud2 {
  border: 4px solid silver;
  border-radius: 10px;
  padding: 1em;
  background: white;
  margin: 1em auto;
  box-shadow: 5px 5px 5px 0 #000;
  font-weight: bold;
  font-family: 'Times New Roman', Times, serif;
  width: 500px;
  max-width: 90vw;
}

body.kilopop div.proud2 p {
  font-style: italic;
}

body.kilopop img {
  max-width: 100vw;
  height: auto;
}

body.kilopop div.proud2 h3 {
  font-size: 1.1em;
  text-align: left;
}

body.kilopop div.proud2 h3::first-letter {
  float: left;
  font-size: 4em;
  line-height: 0.6;
}

body.kilopop div.proud2 blockquote {
  border: none;
  padding: 0;
  margin: 0;
}

body.kilopop div.proud2 blockquote::before {
  content: "";
}

body.kilopop div.proud2 blockquote cite {
  text-align: right;
  font-style: normal;
}

body.kilopop>main>article#notes>section {
  padding: 0;
}

body.kilopop>main>article#notes>section>div {
  display: flex;
}

body.kilopop>main>article#notes>section>div h3 {
  margin: 0;
  color: red;
  background-color: #CFCFCF;
  text-align: left;
  padding-left: 0.3em;
}

body.kilopop>main>article#notes>section>div p {
  margin: 0.3em;
}

body.kilopop>main>article#notes>section>div>div:first-of-type {
  background: #000000;
  width: 30px;
}

body.kilopop>main>article#notes>section>div>div:nth-of-type(2) {
  flex: 1;
}

body.kilopop>main>article#notes>section>div>div img {
  display: block;
  margin: 3px auto;
}


body.kilopop>main section a {
  color: var(--dark);
}

body.kilopop>main section a:hover {
  color: var(--light-brown);
}

body.kilopop>main section a:visited {
  color: var(--dark);
}

body.kilopop>main section figure {
  margin: 1em auto;
  padding: 1em;
  background: var(--lighter);
  display: flex;
  flex-direction: column;
  width: fit-content;
  align-items: center;
  text-align: center;
  gap: 0.5em;
  font-family: 'Courier New', Courier, monospace;
}

body.kilopop>main section figure em {
  font-family: 'Times New Roman', Times, serif;
}

div.kilopopalbumlisting {
  width: 100%;
  background: none;
}

div.kilopopalbumlisting .sleeve {
  margin: auto;
  background: white;
}

div.kilopopalbumlisting .sleeve img {
  display: block;
  margin: auto;
}

.whiteframe.clues .sleeve div:first-of-type {
  display: block;
  margin: auto;
  width: 50%;
}

.whiteframe.clues h4 {
  text-align: center;
}

div.kilopopalbumlisting .sleevewrap .sleeve {
  width: 100%;
}

div.kilopopalbumlisting .sleevewrap {
  padding: 0.5em 0;
  border-top: 3px solid black;
}

div.kilopopalbumlisting .sleevewrap {
  margin: 0 auto;
}

div.kilopopalbumlisting .sleevewrap ul {
  list-style-type: none;
  padding: 0.3em 0;
}


div.kilopopalbumlisting .sleevewrap .sleeve>div:first-of-type {
  display: block;
}

div.kilopopalbumlisting .sleevewrap .sleeve>div:first-of-type img {
  margin: 1em auto;
  display: block;
}

body.kilopop ul.kilodisco li .bgwhite {
  background: white;
  margin: 0;
  padding: 0.1em 1em;
}


body.kilopop ul.kilodisco li {
  padding: 0.3em 0;
  border-bottom: 3px solid black;
  width: 100%;
  list-style-type: none;
}

body.kilopop ul.kilodisco li:first-of-type {
  border-top: 3px solid black;
}

div.sleeve {
  margin-bottom: 1em;
}

div.sleeve>div:first-of-type {
  min-width: 120px;
  width: 100%;
}

div.sleeve>div:first-of-type {
  display: flex;
  justify-content: center;
}

div.sleeve>div:nth-of-type(2) {
  min-width: 300px;
  flex: 1;
}

body.kilopop div.sleeve .details h4 {
  width: 100%;
  text-align: center;
}

div.kilopopalbumlisting .sleevewrap .sleeve>div:first-of-type img {
  width: 50%;
  margin-top: 1em;
}

div.kilopopalbumlisting .sleeve {
  padding: 1em;
  max-width: 90vw;
}

body.kilopop .radiowrap table {
  margin: auto;
}

.whiteframe {
  max-width: 90vw;
}

body.kilopop h3.bgpaleyellow:first-of-type {
  width: 60%;
}

body.kilopop h3.bgpaleyellow {
  max-width: 90vw;
}

.radiowrap table td,
.radiowrap table th {
  padding: 0;
}

.radiowrap table {
  border-collapse: collapse;
  border-spacing: 0;
}

@media (min-width: 768px) {

  div.sleeve>div:first-of-type {
    width: 20%;
  }

  body.kilopop h3.bgpaleyellow:first-of-type {
    max-width: 400px;
  }
}

@media (min-width: 1024px) {

  body.kilopop div.sleeve .details h4 {
    width: unset;
    text-align: unset;
  }

  div.kilopopalbumlisting .sleeve {
    padding: 0.1em 1em;
    width: 80%;
    display: flex;
  }

  .whiteframe.clues .sleeve div:first-of-type {
    width: unset;
  }

  div.kilopopalbumlisting .sleeve {
    margin: auto;
    background: white;
    padding: 0.1em 1em;
    width: 80%;
  }

  .whiteframe ul {
    /* padding-left: 0.5em; what was this for?*/
    max-width: 80%;
  }

  .whiteframe {
    width: 700px;
    max-width: 80%;
  }

  div.kilopopalbumlisting .sleevewrap {
    width: 800px;
    max-width: 80%;
  }

  body.kilopop .sleeve ul {
    max-width: 400px;
  }

  div.sleeve {
    margin-bottom: 1em;
    display: flex;
    flex-wrap: wrap;
  }

  body.kilopop h3.bgpaleyellow {
    width: 80%;
    margin: 1em auto;
    max-width: 800px;
  }

  body.kilopop>main>article>section {
    width: 650px;
    max-width: 90%;
    margin: 1em auto;
    padding: 0 1em 1em 1em;
  }

}