@font-face {
    font-family: "blocky";
    src: url("/fonts/m6x11plus.ttf");
}

p {
	color: white;
}

a {
	color: cyan;
}

.titleformat {
	position: fixed;
	font-weight: bold;
	font-size: 3.25cqw;
	text-align: center;
}

.shopslogan {
	position: fixed;
	font-family: "blocky";
	font-size: 2cqw;
	text-align: center;
	color: #eeee88;
	text-shadow: 0 0.2cqw 0 black;
	padding: 0;
	letter-spacing: -5px;
}

.fowardlink {
	font-style: italic;
	font-size: 2em;
	text-align: center;
}

.linkdivider {
	width: 100%;
}

body {
	background-color: black;
	background-size: cover;
}

.card {
	position: fixed;
	transition: all 0.1s ease;
}

#musicToggle {
	position: fixed;
	opacity: 0.5;
	transition: all 0.05s ease;
}

#musicToggle:hover {
	opacity: 1;
	cursor: pointer;
	transform: scale(1.05);
	filter: drop-shadow(2cqw 2cqw 2cqw #222222);
}

#musicToggle:active {
        opacity: 0.75;
        cursor: pointer;
        transform: scale(1.00);
	filter: drop-shadow(2cqw 2cqw 2cqw #444444);
}

.card:hover {
	transform: scale(1.05);
}

.card:active {
        transform: scale(1.00);
}

.lore {
	display: inline;
        float: none;
        text-align: center;
	/*margin: 0;
	padding: 0;*/
	position: fixed;
	color: #010101;
	font-family: "blocky";
	font-style: bold;
	font-size: 1.3cqw;
	max-width: 7%;
	word-wrap: break-word;
}

.cardtype {
	display: inline;
        float: none;
        text-align: center;
	/*margin: 0;
	padding: 0;*/
        position: fixed;
        color: white;
        font-family: "blocky";
        font-style: bold;
        font-size: 1.3cqw;
        max-width: 7%;
        word-wrap: break-word;
	text-shadow: 0 0.1cqw 0 darkgray;
}

.biglore {
	display: inline;
        float: none;
        text-align: center;
	/*margin: 0;
	padding: 0;*/
        position: fixed;
        color: white;
        font-family: "blocky";
        font-style: bold;
        font-size: 1.6cqw;
        max-width: 7%;
        word-wrap: break-word;
	text-shadow: 0 0.2cqw 0 black;
}

.lorediv {
	position: fixed;
	display: flex;
	align-items: center;
        justify-content: center;
}

.pj1_lore {
	opacity: 0;
        visibility: hidden;
}

.pj2_lore {
	opacity: 0;
        visibility: hidden;
}

.pj3_lore {
	opacity: 0;
        visibility: hidden;
}

.pj4_lore {
	opacity: 0;
        visibility: hidden;
}

.andy_lore {
	opacity: 0;
        visibility: hidden;
}
/*
#pj1_text {
	opacity: 0;
        visibility: hidden;
}

#pj2_text {
	opacity: 0;
        visibility: hidden;
}

#pj3_text {
	opacity: 0;
        visibility: hidden;
}

#pj4_text {
	opacity: 0;
        visibility: hidden;
}

#andy_text {
	opacity: 0;
        visibility: hidden;
}
*/


#pj1:hover~.pj1_lore,
#pj1:hover~#pj1_div .pj1_lore {
	opacity: 1;
        visibility: visible;
}

#pj2:hover~.pj2_lore,
#pj2:hover~#pj2_div .pj2_lore {
	opacity: 1;
        visibility: visible;
}

#pj3:hover~.pj3_lore,
#pj3:hover~#pj3_div .pj3_lore {
	opacity: 1;
        visibility: visible;
}

#pj4:hover~.pj4_lore,
#pj4:hover~#pj4_div .pj4_lore {
	opacity: 1;
        visibility: visible;
}

#andy:hover~.andy_lore,
#andy:hover~#andy_div .andy_lore {
	opacity: 1;
        visibility: visible;
}
/*
#pj1:hover~#pj1_text {
	z-index: 5;
	opacity: 1;
	visibility: visible;
}

#pj2:hover~#pj2_text {
	z-index: 5;
	opacity: 1;
        visibility: visible;
}

#pj3:hover~#pj3_text {
	z-index: 5;
	opacity: 1;
        visibility: visible;
}

#pj4:hover~#pj4_text {
	z-index: 5;
	opacity: 1;
        visibility: visible;
}

#andy:hover~#andy_text {
        z-index: 5;
	opacity: 1;
        visibility: visible;
}
*/

h1 span {
	animation: bounce 0.5s ease infinite alternate;
}

h1 span:nth-child(2) {
	animation-delay: 0.1s;
}

h1 span:nth-child(3) {
	animation-delay: 0.2s;
}

h1 span:nth-child(4) {
	animation-delay: 0.3s;
}

h1 span:nth-child(5) {
	animation-delay: 0.4s;
}

h1 span:nth-child(6) {
	animation-delay: 0.5s;
}

h1 span:nth-child(7) {
	animation-delay: 0.6s;
}

h1 span:nth-child(8) {
	animation-delay: 0.7s;
}

h1 span:nth-child(9) {
        animation-delay: 0.8s;
}

h1 span:nth-child(10) {
        animation-delay: 0.9s;
}

h1 span:nth-child(11) {
        animation-delay: 1.0s;
}

h1 span:nth-child(12) {
        animation-delay: 1.1s;
}

h1 span:nth-child(13) {
        animation-delay: 1.2s;
}

h1 span:nth-child(14) {
        animation-delay: 1.3s;
}

h1 span:nth-child(15) {
        animation-delay: 1.4s;
}




@keyframes bounce {
	100% {
		margin-top: -0.1%;
	}
}

@keyframes sway {
        100% {
                transform: rotate(1deg) scale(1.05);
        }
}