body, html {
	font-family: arial;
	margin: 0;
	background: linear-gradient(to bottom, rgba(237,172,198,0) 0%, #edacc6 100%);
	background-image: linear-gradient(#edacc6, #edacc6, #5c90ab); background-repeat: no-repeat;

height: 100%;
 background-attachment: fixed; 
	
}


	.jua-regular {
 font-family: "Jua", sans-serif;
 font-weight: 400;
 font-style: normal;
}
	.diphylleia-regular {
 font-family: "Diphylleia", serif;
 font-weight: 400;
 font-style: normal;
}
.jersey-25-regular {
  font-family: "Jersey 25", sans-serif;
  font-weight: 400;
  font-style: normal;
}

	
	@keyframes queenBeatLogo {
 0% {top: -9px;}
 50% {top: 0px;}
 100% {top: -9px;}
}

.queenbeatlogo {
 width: 300px;
 height: 300px;
 position: relative;
 margin: 0 auto 0 auto;
 animation-name: queenBeatLogo;
 animation-duration: 5s;
 rotate: -5deg;
 animation-iteration-count: infinite;
 z-index: 10;}

img.testshadow{
width: 300px;
height: 300px;
 -webkit-filter: drop-shadow(5px 5px 5px #000);
 filter: drop-shadow(5px 5px 5px #000);
 transition: transform 2s ease-in-out;


}	

img.testshadow:hover
{ -webkit-filter: drop-shadow(5px 5px 50px white);
 filter: drop-shadow(5px 5px 50px white);
 transform: rotate(360deg)}
 
@keyframes headerScroll {
  0% { background-position: 0 0; }
  50%   { background-position: 0 100%; } 
  100% { background-position: 0 0;}}
	
.header {
 width: 100%;
 height: 380px;
 margin: 0;
 background:none;
 position: relative;
 padding: 10px 0;
 text-align: center;
 overflow: hidden;
 border-bottom: 10px solid white;


}

.header::before {
  content: "";
  position: absolute;
  inset: 0;             
  z-index: 0;                 
  pointer-events: none;
  background-image: url('1.png');
  background-repeat: repeat-y;  
  background-size: 100%; background-position: 0px -50px;
  animation: headerScroll 30s linear infinite;
}

.header::after {
 content: "";
 position: absolute;
 left: 0;
 right: 0;
 bottom: 0;
 height: 50px;
 z-index: 2;

 background: linear-gradient(
 to bottom,
 rgba(237, 172, 198, 0) 0%,
 #000000 150%
 );

 pointer-events: none;
}

.navigation {
 position: absolute;
 bottom: 0;
 left: 0;
 width: 100%;

 height: 38px;

 display: flex;
 justify-content: center;
 align-items: center;

 z-index: 5;
 background: transparent;

 box-shadow: none;
}
	
	.navigationlinks {display: flex;gap: 10px;}
	
	.cart {

 background: #FFFFFF;
 padding: 5px;
 border: 2px solid black;
 border-radius: 5px 5px 0px 0px;
 box-shadow: 5px 5px black;
 display: flex;
 align-items: center;
 justify-content: center;
}

	
.navigation a {
 background-color: #FFFFFF;
 color: #000000;
 margin-bottom: px;
 padding: 10px;
 font-family: "Jua";
 border: 2px solid black;
 border-radius: 5px 5px 0px 0px;
 box-shadow: 5px 5px black;
 text-decoration: none;
}

.navigation a:hover, .cart:hover {
 background-image: url('purplegreen_ani-at0mica.gvif');
 background-color: #000;
 color: #fff;
 border: 2px solid white;
 border-radius: 5px 5px 0px 0px;
 box-shadow: 5px 5px white;


}


.main {
width: 95%;
	display: block;
	margin: 20px auto 20px auto;
}

.individual-zine{ display: block;
 justify-content: center;

padding: 0;

 margin: 0 auto 0 auto;
}


.zines {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: center;}
.zine {
 width: calc(25% - 8px);
 box-sizing: border-box;
 padding: 0px;
 margin: 4px;
 border: 1px white dashed;
 font-family: "Diphylleia";
 background-color: #eee;
 font-size: 14pt;
 line-height: 14pt;
}
.zine:hover{background-color: #fff;
text-decoration: underline;
text-decoration-style: dashed;
	box-shadow: 0 0 15px rgba(2, 4, 12, 0.9);
	transition: .2s;
	transform: scale(1.025);
}
	
.zine .thumbnailimg {
 display: block;
 width: 100%;
 height: auto;

}


.thumbnailinfo {
 display: flex;
 justify-content: space-between;
 align-items: center;
 width: 100%;
 box-sizing: border-box;
 padding: 10px;
 min-height: 50px;

}

	
	.thumbnailinfo div {text-decoration: none;}


.window{width:90%;
border-radius:7px;
box-shadow: 10px 10px 0px white;
border:2px solid #5c90ab;
background-color:white;
background-image:url('2.jpg');
margin:0 auto 0 auto;}

.windowtitle{background-color:#5c90ab;

display:block;
border-radius: 5px 5px 0 0;

padding-left:10px;
}

.windowtitleheader {
height:30px;

line-height:30px;
color:#fff;
font-size:14pt;
text-align:left;
padding-left:15px;
display:inline-block;
 font-family: "Jersey 25";}

.butt1 {
    height: 15px;
    background-color: tomato;
    width: 15px;
 margin: 7px 5px 0  0;
    border-radius: 50%;
    display: inline-block;
}
.butt2 {
    height: 15px;
    background-color: #fffe12;
    width: 15px;
    border-radius: 50%;
    display: inline-block;
}
.butt3 {
    height: 15px;
    background-color: lightgreen;
    width: 15px;
    border-radius: 50%;
    margin:0 0 0 5px;
    display: inline-block;
}


h2, h3 {margin:10px;
font-family:"Diphylleia";
text-align:left;
    text-shadow: 3px 0 0 #000, -3px 0 0 #000, 0 3px 0 #000, 0 -3px 0px #000,       2px 2px 0 #000, -2px -2px 0 #000, -2px 2px 0 #000, 2px -2px 0px #000;
color:white;}



p {margin:10px;
font-family:arial}


.footer
{
 height: 10px;
 width:100%;
 margin: 0;
 text-align: center;}