/* media queries */
  .movies-button{
    position:absolute; width:300px; left:-30px; top:70%; z-index:99;
  }
  .games-button{
    position:absolute; width:300px; left:35px; top:20%; z-index:99;
  }
  .box{
  width: 650px;
  max-width: 70%;
  }
@media only screen and (max-width: 1750px){
  .movies-button{
    left:-30px; top:60%; max-width: 30vw;
  }
  .games-button{
    left:35px; top:10%; max-width: 30vw;
  }
}
@media only screen and (max-width: 600px){
  .center-content{
    display: inline!important;
  }
  .box{
   max-width: 97%; 
  }
  .movies-button{
    position:relative; left: 0; top: 0;
  }
  .games-button{
    position:relative; left: 0; top: 0;
  }
}

/* font */
@font-face {
  font-family: 'Love Ya Like A Sister';
  font-style: normal;
  font-weight: 400;
  src: url('/fonts/love-ya-like-a-sister-v23-latin_latin-ext-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* link colors */
a:visited {
  color:aliceblue;
}
a:link, a:hover{
  color: white;
}
a:active {
  color: silver;
}

/* general */
body {
  background-image: url("/images/background.jpg");
  background-repeat: repeat;
  color: #bfb6a6;
  font-family: 'Love Ya Like A Sister'
}

.image-container img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: flex;
}

img {
  max-width: 90vw;
}

/* div boxes */
.box{
  background-color: #5d3531;
  border: 5px solid #bfb6a6;
  padding: 0;
  display: inline-block;
}

.sidebar{
  position: relative;
  width: 300px;
  max-width: 33%;
}

.center-content {
  display:flex; justify-content:center
}

h1, h2, p{
  padding-left: 10px;
  padding-right:10px;
}

/* buttons and blinkers */

.buttons-n-blinkers {
  overflow: hidden;
  position: relative;
}
@keyframes marquee {
  0% {
    transform: translateX(100%);
  }
  
  100% {
    transform: translateX(-100%);
  }
}
.buttons-n-blinkers > div {
  animation: marquee 30s linear infinite;
  animation-play-state: paused;
  animation-delay: -15s; /* This MUST be -duration/2 */
  width: 100%;
  min-width: fit-content;
  text-wrap: nowrap;
}
.buttons-n-blinkers > div.follower {
  position: absolute;
  top: 0;
  animation-delay: 0s;
}
.buttons-n-blinkers > div.play {
  animation-play-state: running;
  display: flex;
}
.buttons-n-blinkers:hover > div.play {
  animation-play-state: paused;
}

.gallery{
  margin-bottom:10px;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	grid-auto-flow: dense;
}

.movie, .game {
	background-size: 87px;
	background-position: calc(50%) calc(50%);
	background-size: cover;
	filter: drop-shadow(4px 4px black);
	width: 87px;
	height: 125px;
}

.container {
  position: relative;
  margin:10px; margin-bottom: 0;
  gap:10px;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 125px;
  width: 87px;
  opacity: 0;
  transition: .5s ease;
  background-color: #bfb6a6;
  font-size: 11px;
}

.container:hover .overlay {
  opacity: 1;
}

button{
	width: 100%;
	height: 100%;
	border-radius: 0;
	background-color: #bfb6a6;
	color: #5d3531;
	overflow: scroll;
}