/* styles created for shuffler */
* {
	margin: 0;
	padding: 0;
	/* background-color: rgb(0, 0, 0); */
}


body {
	font-family: "Avenir Next", "Avenir", Helvetica, sans-serif;
	/* font-size: medium; */
	font-size: 3.0vh;
    /* background-color: #f7f7f7; */
    align-items: left;
    justify-content: left;
    height: 100vh;
    text-align: left;

}

@font-face {
  font-family: 'Avenir Next';
  /*
  src: url("AvenirNext.ttc"); 
  */
  src: url("AvenirNext-Regular-08.woff2"); /* font file */
  }

img {
  max-width: 100%;
  max-height: 90%;
  height: auto;
  float: left;
  vertical-align: top;
  background-color: rgb(0, 0, 0);
}
.container {
    display: flex;
    flex-wrap: wrap;
    gap: 0px;
    justify-content: left;
    max-width: 100%;
    margin-top: 0px;
}
.overlay {
  position: relative;
  top: 50%; 
  left: 0em; 
  background-color: #000000; 
  color: #fff; 
  padding: 2px 2px; 
  /* font-size: 25px; */
  font-size: 3.0vh;
  text-align: left;
  }
  .genre {
  padding: 20px 20px; 
    /* font-size: 50px;  */
  font-size: 7.0vh;
  text-align: left;
  }
  #flick {
  position: absolute;
  /* top: 10.1%;  */
  top: 90%; 
  left: 0em; 
	padding: 0px 20px; 
	font-size: 2.0vh;
	text-align: left;
   background-color: white;
}