body {
  background-image: url(./images/background4.jpg);
  background-repeat: repeat;
  background-size: 200px 200px;
  scrollbar-color: transparent transparent;
  
  height: 100px;
  display: grid;
  justify-content: center;
}

/* fonts */

@font-face {
  font-family: MyCustomFont;
  src: url('./fonts/graphicoreBitmapFont0-Book.otf');
}

@font-face {
  font-family: MyCustomFont2;
  src: url('./fonts/graphicoreBitmapFont0-medium.otf');
}

@font-face {
  font-family: MyCustomFont3;
  src: url('./fonts/graphicoreBitmapFont1-Demi-Bold.otf');
}


/* text stuff */
/* h1 is usually 35px */

h1 {
  font-family: MyCustomFont;
  font-size: 35px;
  text-align: center;
     margin-top: 30px;
    margin-bottom: -5px; 
  color: blue; 
}

h3 {
  font-family: MyCustomFont3;
  text-align: center;
  color: blue;
  z-index: 900;
}

p {
  font-family: 'Arial', sans-serif;   ;
  font-weight: bold;
  font-size: 15px;
  text-align: center;
  position: relative;
  z-index: 900;
}

u {
  color: blue;
}

p:hover {
    color:blue;
}

a {
  font-family: 'Arial', sans-serif;  
  font-weight: bold;
  font-size: 15px;
  text-align: left;
}

a:hover {
    font-style: italic;
}

a:visited {
  color: royalblue;
}



/* main box thing */


.parent {  
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px 15px;
  grid-template-areas:
    "a b c"
    "d e f"
    ". h i";
}

.parent div {
    background: #ffffff;
    border-radius: 5px;
    padding: 8px;
    line-height: 1.3;
    text-align: center;
}

.parent img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.a { grid-area: a; 
justify-self: right;
 border: 4px dotted #000000;
}

.b { grid-area: b; 
 border: 4px dotted #000000;
}

.c { grid-area: c;
 border: 4px dotted #000000;
 justify-self: start;
 height: 150px;

}

.d { grid-area: d;
    justify-self: right;
     border: 4px dotted #000000;
}

.e { grid-area: e; 
width:500px; 
justify-self: center;
 border: 4px dotted #000000;
}

.f { grid-area: f;
 border: 4px dotted #000000;
  position: relative;
 bottom: 252px;
}

.h { grid-area: h;
justify-self: center;    
width: 300px;
 border: 4px dotted #000000;
}

.i { grid-area: i;
justify-self: left;    
width: 300px;
 border: 4px dotted #000000;
   position: relative;
 bottom: 252px;
}

/* music */


.marquee {
    --gap:1rem;
  display: flex;
  overflow: hidden;
  white-space: nowrap;
  width: 94%;
}
.marquee__content {
  display: flex;
  flex-direction: row;
  object-fit: cover;
  padding: 5px;
  gap:var(--gap);
  animation: marquee linear 20s infinite;
  list-style: none;
  justify-content: space-around;
  border: 2px solid black;
}

a,
img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  
}


.marquee:hover .marquee__content {
  animation-play-state: paused;
}
     
@keyframes marquee {
  from {
    transform: translateX(0%);
  }
  to {
     transform:translateX(calc(-100% - var(--gap)))
  }
}

/* music2 */

lol {}

lol,
.img2 {
  /* album cover */
  position: relative;
  width: 30px;
  height: 30px;
  background-color: white;
  color: white;
  z-index: 999;
}

.img1 {
  position: absolute;
  max-width: 100%;
  left: 95px;
  bottom: 23px;
  z-index: 800;
  -webkit-animation: spin 2s linear infinite;
  -webkit-animation: spin 4s linear infinite;
  -moz-animation: spin 4s linear infinite;
  animation: spin 4s linear infinite;
}

.img1 hover {
  cursor: help;
}

@-moz-keyframes spin {
  100% {
    -moz-transform: rotate(360deg);
  }
}

@-webkit-keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
  }
}

.img1:hover {
  -webkit-animation: pop 0.3s ease;
}

/* button */

.mybuttoncopy {
  background-color: white;
  color: black;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1px;
  margin-top: -5px;
  width: 100px;
  align-self: center;
}

/* pagedoll */

.div {
    background: transparent;
    border-radius: 5px;
    padding: 8px;
    line-height: 1.3;
    text-align: center;
}