body {
  font-family: Times New Roman;
  font-size: 24px;
  line-height: 1.3;
  background-color: #ffffff;
  color: #000000;
  padding-top: 20px;
}

@font-face {
    font-family: Rafaella Bold;
    src: url(RafaellaBold.ttf);
}

header {
  width: 100%;
  padding: 25px;
/*   z-index: 2; */
}

header h1 {
/*   width: 500px; */
  font-style: italic;
}

header a {
  color: #4b2e83;
}

/* LIST */
.list {
  font-family: Rafaella Bold;
  font-size: 72px;
  line-height: 1.2;
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  z-index: 3;
}

.list a {
  text-decoration: none;
  color: #000000;
  display: block;
}

.list a:hover {
    -webkit-text-stroke: 0.7px black;
  color: rgba(0, 0, 0, 0);
}

a.active {
    -webkit-text-stroke: 0.7px black;
  color: rgba(0, 0, 0, 0);
}

div.desc {
/* 	opacity: 0; */
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 650px;
  padding: 15px;
  transition: opacity 0.3s;
  z-index: -5;
  background-color: lime;
}

div.show {
/*   opacity: 1; */
  display: block;
  z-index: 5;
}

div.desc a {
  display: inline;
  text-decoration: none;
  color: orange;
}

div.desc a:hover {
  color: #4b2e83;
      -webkit-text-stroke: none;
}

div.desc p {
  font-size: 24px;
  font-family: Times New Roman;
}

b {
    font-weight: 700;
}

i {
  font-style: oblique;
}

div.exit {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: none;
}

div.exit-show {
  display: block;
/*   z-index: 2; */
}

/* img.close {
  position: absolute;
  right: 0;
  padding: 20px;
} */

/* div.abt {
  position: relative;
  margin: 30px auto 0 auto;
  width: 650px;
  padding: 15px;
  transition: opacity 0.3s;
  background-color: yellow;
} */

div.abt {
  position: relative;
  margin: 0 auto 0 auto;
  width: 1100px;
  padding: 15px;
  transition: opacity 0.3s;
}

div.abt p {
  font-size: 40px;
}

div.abt a {
  display: inline;
  text-decoration: none;
  color: orange;
}

div.abt a:hover {
  color: lime;
  text-decoration: none;
}

/* sup {
  vertical-align: super;
  font-size: smaller;
} */

.def-cur {
cursor: help;
}

.lis-cur {
cursor: context-menu;
}

.quo-cur {
cursor: grab;
}

.def {
width: 420px;
padding: 20px;
display: none;
  cursor: not-allowed;
}

.abt-list {
width: 475px;
padding: 20px;
display: none;
  cursor: not-allowed;
  position: absolute;
}

.quote {
width: 350px;
padding: 15px;
display: none;
  cursor: not-allowed;
}

.def {
background-color: #4b2e83;
  position: absolute;
}

.abt-list {
background-color: orange;
}

.quote {
background-color: green;
  position: absolute;
}

.def p, .abt-list p, .quote p, ol, blockquote, figcaption {
color: white;
}

.abt-list p {
  font-weight: 700;
}


div.quote p {
font-size: 28px;
  text-align: center;
}

#nextgame {
  background-color: black;
  padding: 5px;
}

/* MEDIA QUERIES */
@media (max-width: 960px) {
  .list {
    padding-left: 20px;
    padding-right: 20px;
  }
  header {
    padding: 20px;
  }
}

@media (max-width: 780px) {
 .list {
  font-size: 48px;
}
}

@media (max-width: 430px) {
  .list {
    font-size: 40px;
    padding-left: 15px;
    padding-right: 15px;
  }
  header {
    padding: 15px;
  }
  
  .list a img {
    width: 375px;
  }
  
    div.desc, div.abt {
    width: 325px;
  }
  
 div.desc p, div.abt p {
    font-size: 18px;
  }
  
  div.abt {
  margin: 20px auto 0 auto;  
  }
  
  .list a img.flowers {
    width: 250px;
  }
  
  footer {
  position: relative;
}
}

.myspace {
  width: 525px;
  margin: 4px;
  background-color: white;
  display: none;
  padding: 5px;
  position: absolute;
}

p.myspace-header {
  background-color: orange;
  color: #DD571C;
  font-weight: 700;
  padding: 2px;
}

p.myspace-movies {
  padding: 2px;
  font-weight: 700;
}

.red-txt {
  color: darkred;
  font-weight: 700;
}

.myspace img {
  width: 125px;
  padding: 3px;
}

.top-8 {
  display: flex;
  flex-wrap: wrap;
}

.myspace p a {
  text-align: right;
}

.hover {
  display: none;
}

div#lfm {
  position: absolute;
  width: 300px;
  height: 225px;
  background-image: url(turntable.gif);
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 998;
}

img.album-art {
  width: 33%;
  position: absolute;
  top: 17px;
  left: 107px;
  transform: skew(-6deg);
  z-index: 999;
}