@font-face {
	font-family: bodypixel;
	src: url("fonts/Pixeled.ttf");
}
@font-face {
	font-family: headingpixel;
	src: url("fonts/upheavtt.ttf");
}
body {
	background-image:url("files/all pages/BKGD.jpg");
	background-attachment: fixed;
	color:#00ff8a;
	text-shadow: -2px 0 #ff00ea, 0 2px #ff00ea, 2px 0 #ff00ea, 0 -2px #ff00ea;
	height: 100%;
	margin: 0px;
}

body, html {
  height: 100%;
  margin: 0;
}
h1 {
	font-family: headingpixel;
	font-size: 60px;
	text-align: center;
	background-color: black;
	border-radius:20px;
	margin: 10px 80px;
	padding: 60px 30px;
	background-image: url("files/all pages/banner.jpg");
	color:#ff00ea;
	text-shadow: -2px 0 #00ff8a, 0 2px #00ff8a, 2px 0 #00ff8a, 0 -2px #00ff8a;
	outline: ridge 10px #00ff8a;
	position:relative;
	z-index: -1;
	}

h2 {
	font-family: headingpixel;
	font-size: 35px;
}
h3 {
	font-family: headingpixel;
	font-size: 20px;
}
h4 {
	font-family: headingpixel;
	font-size: 15px;
}
P, pre {
	font-family: bodypixel;
	font-size: 8px;
}
a {
	color:#00ff8a;
	text-shadow: -2px 0 #ff00ea, 0 2px #ff00ea, 2px 0 #ff00ea, 0 -2px #ff00ea; 
	font-family: bodypixel;
	font-size:10px;
	}

ul, li, dd {
	list-style-type: square ;
	font-family: bodypixel;
	font-size: 10px;
}
video {	border: #00ff8a 5px solid;
	border-radius: 10px;}
.top
	{
	text-align: center;
	background: rgba(0,0,0,0.00);
	}


.gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
align-items: center;
} 

div.gallery-item {  
  margin: 3px;
  border: 10px solid transparent;
  width: 32%;
  align-items: center;
	padding:2px }

div.gallery-item:nth-child(even) { 
.inspo-image{
		width: 100%;
		height:75%;
	    border-radius: 5px;
}
.img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius:10px;
	}

.overlay {
background-color:#00ff8a;
position: absolute;
transition:0.5s ease;	
opacity: 0;
margin: 1px;
height: 30%;
padding: 5px 5px 0px 5px;
border-radius: 10px;
width: 29%;

	}
.text {
	top: 50%;
	width: 100%;
	font-family: bodypixel;
	font-size: 10px;
	}

.inspo-image:hover .overlay {
		opacity: 1;
	}
.inspo-container {
	color:#ff00ea;
	text-shadow: -2px 0 #00ff8a, 0 2px #00ff8a, 2px 0 #00ff8a, 0 -2px #00ff8a;
	background: rgba(255, 0, 234, 0.5) ;
	padding: 10px;
	border: solid 3px #00ff8a;
	height: 300px;
	width: 100%;
	border-radius: 10px;
	}
}
div.gallery-item:nth-child(odd) { 
.inspo-image{
		width: 100%;
		height:75%;
	    border-radius: 5px;
}
.img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius:10px;
	}

.overlay {
background-color:#ff00ea;
position: absolute;
transition:0.5s ease;	
opacity: 0;
margin: 1px;
height: 30%;
padding: 5px 5px 0px 5px;
border-radius: 10px;
width: 29%;
	}
	
.text {
	top: 50%;
	width: 100%;
	font-family: bodypixel;
	font-size: 10px;
	}

.inspo-image:hover .overlay {
		opacity: 1;
	}
.inspo-container {
	color:#00ff8a;
	text-shadow: -2px 0 #ff00ea, 0 2px #ff00ea, 2px 0 #ff00ea, 0 -2px #ff00ea;
	background: rgba(0, 255, 138, 0.5) ;
	padding: 10px;
	border: solid 3px #ff00ea;
	height: 300px;
	width: 100%;
	border-radius: 10px;
	}
}

.logo {
	float: left;
	height: 5vw;
}

.likes {
	th, tr, td {
	font-family: bodypixel;
	padding: 3px;
	font-size: 10px;
	border: 2px solid #00ff8a;
	border-collapse: collapse;
	background-color: rgba(255, 0, 234, 0.3);
}
table {border: 4px solid #00ff8a;
	border-collapse: collapse;
	width: 100%;
}
td{
	width:50%;
}
th {
background-color: rgba(255, 0, 234, 0.5);	
}
}

.bubble {
	background-color: rgba(255, 0, 234, 0.5);	
	border: #00ff8a solid 5px;
	border-radius:20px;
	width: 110%;
	padding: 5px;
	text-align: left; 
}

.useless {
	text-align: center;
	background-color: rgba(0, 255, 138, 0.5);	
	border: #ff00ea solid 5px;
	border-radius:10px;
	background-size: 100%;
	color:#ff00ea;
	padding: 10px;
	font-family: bodypixel;
	width: 100%;	
}

.useless:hover {
	background-color: #00ff8a;
	transition:0.5s ease;
}

.pupper {;
position: 0,0  ;
position: absolute;
opacity: 0.95;
animation-name: dog ;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: ease-in-out;
left: 9%;
}

.muzik{
	background-color: rgba(0, 255, 138, 0.5);	
	border: #ff00ea solid 5px;
	border-radius:20px;
	background-size: 100%;
	padding: 5px;
	text-align: left; 
}
.contact{
	background-color: rgba(255, 0, 234, 0.5);	
	border: #00ff8a solid 5px;
	border-radius:20px;
	background-size: 100%;
	padding: 5px;
	text-align: left; 
}

.splitcontainer {
	display: flex;
	
}
.splitcontainer div.split {
	align-content: center top;
	padding: 20px;
	
}
.border {
	border-top:10px solid transparent;
	padding: 15px;
	border-image: url("IMAGES/all pages/border-top.png") 30 stretch;
	border-image-width: 50px;	
}

.blogpost:nth-child(odd){
	background-color: rgba(0, 255, 138, 0.5);	
	border: #ff00ea solid 5px;
	border-radius:20px;
	margin: 20px;

}
.blogpost:nth-child(even){
	background-color: rgba(255, 0, 234, 0.5);	
	border: #00ff8a solid 5px;
	border-radius:20px;
}

* {box-sizing: border-box}

/* Style tab links */
.tablink {
background-color: rgba(0, 255, 138, 0.5);
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
font-size: 17px;
width: 25%;
color:#ff00ea;
text-shadow: -2px 0 #00ff8a, 0 2px #00ff8a, 2px 0 #00ff8a, 0 -2px #00ff8a;
border-radius: 20px 20px 0px 0px;
height: 45px;
font-family: headingpixel;
}

.tablink:hover {
	background-color:#00ff8a;
}

.tabcontent {
	padding: 20px;
	border-radius: 0px 0px 20px 20px;
	transform: translateY(45px)
}
.poem-container{
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
align-items: center;
}

.poem-item {
	background-color: #00ff8a;
	border: solid 5px #ff00ea;
	background-clip: content-box;
	height: 5.5vw;
	width: 70vw;
	margin: 1vw 11.5vw 1vw 11.5vw;
	font-family: headingpixel;
	text-align: center;
	color:#00ff8a;
	text-shadow: -2px 0 #ff00ea, 0 2px #ff00ea, 2px 0 #ff00ea, 0 -2px #ff00ea;
	border-radius: 15px;
}
.poem-item-p{
	background-color: #ff00ea;
	border: solid 5px #00ff8a;
	color:#ff00ea;
	text-shadow: -2px 0 #00ff8a, 0 2px #00ff8a, 2px 0 #00ff8a, 0 -2px #00ff8a;
	background-clip: content-box;
	height: 5.5vw;
	width: 70vw;
	margin: 1vw 11.5vw 1vw 11.5vw;
	font-family: headingpixel;
	text-align: center;
	border-radius: 15px;
}

.poem-display{
	background-color:rgba(255, 0, 234, 0.75);
	padding: 2vw;
	border-radius: 40px;
	top: 0.1vw;
	width: 96%;
	background-blend-mode: multiply;
	transition: width 0.5s;
	display: none;
}
.poem-display.active{
	display: block;
}


.x-left{
	height: 0.5vw;
	width:3vw;
	background-color:#00ff8a; 
	transform: rotate(45deg);
	position: absolute;
}
.x-right{
	height: 0.5vw;
	width:3vw;
	background-color:#00ff8a; 
	transform: rotate(-45deg);
	position: absolute;
}
.x{
	position: absolute;
	right: 12%;
}
.art-gallery{
display: flex;
flex-wrap: wrap;
}

.art-item{
	width:100%;
	height: 100%;
	object-fit: cover;
	border-radius: 3vw;
	border: solid 5px #ff00ea;
	background-clip:padding-box;
}
.art-item-2 {
	width:100%;
	height: 100%;
	object-fit: cover;
	border-radius: 3vw;
	border: solid 5px #00ff8a;
	background-clip:padding-box;
}

.art-overlay{
background-color:rgba(255, 0, 234, 0.5);
position: absolute;
height: 107%;
width: 22%;
padding: 1vw;
opacity: 0;
transition: 1s ease;
border: solid 0.5vw #00ff8a;
border-radius: 3vw;
}

.art-overlay-2{
background-color:rgba(0, 255, 138, 0.5);
position: absolute;
height: 107%;
width: 22%;
padding: 1vw;
opacity: 0;
transition: 1s ease;
border: solid 0.5vw #ff00ea;
border-radius: 3vw;
color:#ff00ea;
text-shadow: -2px 0 #00ff8a, 0 2px #00ff8a, 2px 0 #00ff8a, 0 -2px #00ff8a;
}
.art-overlay:hover{
	opacity: 1;
}
.art-overlay-2:hover{
	opacity: 1;
}

.art-gallery-item{
	width:25%;
	padding: 1%;
	height: inherit;
}
}


#artContent { 
background-image: linear-gradient(to top, rgba(0, 255, 138, 0.5), rgba(255, 0, 234, 0.5));
display: none;}
#musicContent {
	background-image: linear-gradient(to top, rgba(0, 255, 138, 0.5), rgba(255, 0, 234, 0.5));
	display: none;
}
#poemsContent {
	background-image: linear-gradient(to top, rgba(0, 255, 138, 0.5), rgba(255, 0, 234, 0.5));
	display: none;
}
#zinesContent {
	background-image: linear-gradient(to top, rgba(0, 255, 138, 0.5), rgba(255, 0, 234, 0.5));
	display: none;
}
#txt{
	font-family: bodypixel;
	font-size: 20px;
}


@keyframes dog {
	0%{ transform: rotate(10deg);}
	100%{ transform: rotate(-10deg);}
}

@media only screen and (max-width: 768px) {
  div.gallery-item {width: calc(30% - 20px);}
	div.overlay { width: calc(30% - 30px) }


@media only screen and (max-width: 480px) {
  div.gallery-item {width: calc(100% - 20px);}
 div.overlay { width: calc(95% - 30px) }
}.