@font-face {
    font-family: 'Main'; 
    src: url('Assets/Fonts/Pixel Georgia Bold.ttf'); 
}

    @font-face {
    font-family: 'Header'; 
    src: url('Assets/Fonts/PixelatedPusab.ttf'); 
}

        @font-face {
    font-family: 'Thin'; 
    src: url('Assets/Fonts/Pixel Georgia.ttf'); 
}

        @font-face {
    font-family: 'text'; 
    src: url('Assets/Fonts/pixel_operator/PixelOperator.ttf'); 
}

body{
 overflow-y:scroll;
 background-color:#18181F;
 color:#F7F2FF;
 
 font-family:'Thin';
 font-size:12px;
}

.header {text-align:center;padding:2%;}

.Navigation a{
 color:#F7F2FF;
 padding:8px;
 border-radius:2px;
}

.Navigation a:hover{
 color:#2D2838;
 background-color: #FFF28F;
 padding:8px;
 border-radius:2px;
}

.Meat {
  background-image:url('Assets/Images/pexels-lucaspezeta-4028958.jpg');
 background-size:100%;
 background-position:center;
  
 display:flex;
 flex-direction:row;
 height:600px;
 width:1000px;
 border-radius:20px;
 padding:60px;
overflow:hidden;
margin:auto;
border:none;
}
.stuff{
height:700px;
border:none;
}

#movies{
  display:flex;
  flex-direction:column;
   overflow-y:scroll; 
   height:700px;
}
#movies img{
  height:200px;  
  -webkit-filter: grayscale(100%) contrast(150%);
    filter: grayscale(100%) contrast(150%);
  box-shadow: 5px 5px 10px black;
}

#moives img:hover{
-webkit-filter: grayscale(0%);
    filter: grayscale(0%);
}


#lists {
  display:flex;
  flex-direction:column;
   overflow-y:scroll; 
   height:600px;
   padding-bottom:10px;
}
#lists img{
  height:200px;  
  -webkit-filter: grayscale(100%) contrast(150%);
    filter: grayscale(100%) contrast(150%);
  box-shadow: 5px 5px 10px black;
}

#lists img:hover{
-webkit-filter: grayscale(0%);
    filter: grayscale(0%);
}

#muPoster img {height:125px;}

.posters {
 display:flex;
 flex-direction:row;
 height:200px;
 align-items:center;
 align-content:center;
 justify-content:space-around;
 overflow:hidden;
 padding-bottom:10px;

 }

.tab1 {
  float: left;
  background: none;
  width: 30%;
  border:none;
  padding:10px;
  
  }

/* Style the buttons that are used to open the tab content */
.tab1 button {
  display: block;
  background-color: #F7F2FF;
  padding: 10px;
  width: 100%;
  margin-bottom:2%;
  border-radius:20px 20px 20px 20px;
  border: none;
  outline: none;
  text-align: center;
  cursor: pointer;
  transition: 0.3s;
  animation: float 7s ease-in-out infinite;
  font-family:'Thin';
  color:#2D2838;
}

/* Change background color of buttons on hover */
.tab1 button:hover {
  background-color: #2D2838;
  color:#F7F2FF;
}

/* Create an active/current "tab button" class */
.tab1 button.active {
  background-color: #2D2838;
  color:#F7F2FF;
}

/* Style the tab content */
.stuff {
  float: left;
  padding: 0px 12px;
  width: 600px;;
  border-left: none;
  height: 300px;
  display:none;
}

#artPoster {
 display:flex;
 flex-wrap:wrap;
 height:fit-content;
}












#shrines{
height:700px;
}
.tab {
  overflow: hidden;
  
  display:flex; flex-direction:row;
  justify-content:space-between;
  padding-right:50px;
  padding-left:50px;
}

.tab button {
  background: none;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  display:grid;
  align-items:center;
  text-align:center;
  
  color:#F7F2FF;
  font-family:'Thin';
  font-size:9px;
}
.tab img {
  max-width:50px;
  max-height:50px;
  padding:3%;
    
  -webkit-filter:contrast(200%) opacity(80%);
    filter:contrst(200%) opacity(80%);
}

  .tab img:hover {
  
  -webkit-filter:brightness(200%) contrast(150%) opacity(100%);
    filter:brightness(200%) contrast(150%) opacity(100%);
}

/* Create an active/current tablink class */
.tab button.active {
  -webkit-filter:contrast(150%) opacity(100%);
    filter:contrast(150%) opacity(100%);
}

/* Style the tab content */
.content {
  display: none;
  padding: 6px 12px;
  border: 1px solid #F7F2FF;
   height:500px;
  }

#locations {
 overflow-y: scroll;
 background-color:rgba(24, 24, 31, 0.2);;
 height:inherit;
 }
 
 #locations p{
  font-family:'text'; 
  font-size:14px;
 }


@keyframes float {
            0% {
                transform: translateY(0);
            }

            50% {
                transform: translateY(-10px);
            }

            100% {
                transform: translateY(0);
            }
        }

@keyframes marquee-content {
			from {
				transform: translateX( 0% );
			}
			to {
				transform: translateX( -100% );
			}
		}