@import url('https://fonts.googleapis.com/css2?family=Young+Serif&display=swap');

html, body{margin: 0; width:100%l; height: 100%}
body{ background-color:#000000; color:#FFFFFF; font-size:14px; font-family: "Young Serif", serif; font-weight: 400; font-style: normal; line-height: 1.4}
h1{ font-size:22px; color:#FFFFFF; text-transform:uppercase}
img{border:0px}

a{color:#FFFFFF}
a:hover{color:#00aa5f}

select{padding:5px; border:1px solid #999999}

#masthead{display: none; text-align: center}
#masthead .logo{text-align: center; aspect-ratio:1/1; background: radial-gradient(circle, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 70%); max-width: 60%; margin: 0 auto}
#masthead .logo img{object-fit: contain; width:100%; height: 100%}

#pos{position:relative; width:978px; height:1px; top:-1px; margin-left:auto; margin-right:auto; border:0px; z-index: 2}

#container{margin: 0 auto; width:100%; max-width:978px; min-height:592px; background-image:url(../images/bgnd_home.jpg), url(../images/general-background.webp); background-repeat: no-repeat, repeat; background-position: center top, center top; display: flex; align-items: stretch; justify-content: flex-start}
#container > div{width:100%; position: relative; box-sizing: border-box}
#container #menu{width:248px; padding-top:90px}
#container #content{padding-top:200px}
#container #sidebar{max-width:230px}

#hamburger{width:50px; position: absolute; top:10px; right:10px; cursor:pointer; display: none; z-index: 15}
#hamburger > div{border:3px solid #fff; margin: 6px}

#mobnav{position:fixed; z-index: 11; background: #000; color: #fff; padding: 30px; top:0; left:0; width:100vw; height: 100vh; display: none; box-sizing: border-box}

#mobnav ul{list-style: none; padding:0; margin:0; z-index: 1}
#mobnav ul li{padding: 0; margin: 0}
#mobnav ul a{display:block; padding:15px; border-bottom:1px solid rgb(255,255,255,0.5); text-decoration: none; }
#mobnav ul a::before{font-family: "Font Awesome 6 Free";
    font-weight: 400;
    content: "\f005"; /* fa-star */
    margin-left: 0.4em;
    display: inline-block;
	color:deepskyblue;
	transform:translate(-10px, 0)
}

#mobnav .mobnav-closer{position: absolute; top:15px; right: 15px; color: #fff; font-size:1.8rem; z-index: 12; font-size:2rem}


.cd-cover{display: none; text-align: center; aspect-ratio:4/3}
.cd-cover img{object-fit: contain; width:100%; height: 100%}

.small{ font-size:11px}
.white{color:#FFFFFF}
.green{color:#00aa5f}

.header-socials{display:flex; justify-content: center; align-items: center; column-gap: 10px; font-size:1rem; position: absolute; top:16px; left: 0; width:100%; max-width:240px}
.header-socials > div{width:100%; max-width:44px; aspect-ratio:1/1; border:3px solid #fff; border-radius:100px; display: flex; justify-content: center; align-items: center}
.header-socials > div{cursor: pointer; transition:all 300ms ease-in-out}
.header-socials > div:hover{transform:scale(1.2)}
.header-socials > div:hover a{color: limegreen}
.header-socials > div a{color: #fff; transition:all 300ms ease-in-out}


.footer-socials{display:none; justify-content: center; align-items: center; grid-gap: 10px; font-size:1.6rem; flex-wrap: wrap; margin: 0 0 30px}
.footer-socials > div{width:100%; max-width:40px; aspect-ratio:1/1; border:3px solid #fff; border-radius:100px; display: flex; justify-content: center; align-items: center}
.footer-socials > div{cursor: pointer}
.footer-socials > div a{color: #fff}

.mobnav-socials{display:flex; justify-content: center; align-items: center; grid-gap: 6px; font-size:1rem; flex-wrap: wrap; width:100%; margin: 30px 0 0}
.mobnav-socials > div{width:100%; max-width:30px; aspect-ratio:1/1; border:3px solid #fff; border-radius:100px; display: flex; justify-content: center; align-items: center}
.mobnav-socials > div{cursor: pointer}
.mobnav-socials > div a{color: #fff}

#subfooter{text-align:center; width:100%; max-width:978px; font-size:11px; padding:5px; margin:15px auto; font-family:Arial, Helvetica, sans-serif}
#buyNowButton{margin-top: 320px; text-align: center}
#supporter{color:#FFFFFF;text-align:center; text-shadow:0px 0px 3px #000; padding: 30px}

#twitter{position:absolute; top:52px; left:110px; z-index:10}
#itunes{position:absolute; top:40px; left:10px; z-index:10}

.homepage{background-image:url(../images/home-bgnd-home4.jpg)!important}
.spacer{height: 30px; display: none}
#buttons{padding:0px; margin:0px; position:absolute; left:235px; top:320px; width:515px}
#buttons img{cursor:pointer}

#paybox{display:none; z-index:500; border:2px solid #a21113; border-radius:10px; background-color:#F7F7F7; color:#333333; padding:30px; width:500px; position:absolute; top:100px; left:200px}
#paybox h2{color:#000000; font-size:22px; border-bottom:1px solid #666666; padding:0 0 10px 0; margin:0 0 10px 0}
#paybox table td{padding:10px 0; border-bottom:1px dotted #999999}
.bold{font-weight:bold; color:#990000}
#paypalB{display:none}
.closer{ width:30px; height:30px; background-image:url(../images/close-icon.png); background-repeat:no-repeat; position:absolute; top:-15px; right:-15px; z-index:10}

#disclaimer{ position:absolute; width:230px; left:15px; top:500px; z-index:10; font-family:Helvetica, Arial, sans-serif; font-size:11px; text-shadow:0px 0px 3px #000}



@media (max-width: 900px) {

	
	body::before {content: ""; position: fixed; top: 0; left: 0; right: 0; bottom: 0; width:100vw; height: 100vh; background-image: url('../images/mobile-bg.webp'); background-size: cover; background-position: center; z-index: -1}
	
	#masthead{display: block}
	
	#hamburger{display: block}

	body{background-position: center top; background-size: cover; background-attachment: fixed}

	#pos{width:100%; max-width: 100%; position: fixed}
	#container{background-image: none !important; display: block; min-height: 0}
	#container > div{max-width: 100% !important; min-height: 0 !important; max-height: inherit !important}
	
	#container #content{padding:30px}
	
	#menu{display: none}
	#buyNowButton{margin-top: 0}
	.header-socials{display: none}
	.spacer{display: block}
	.cd-cover{display: block}
	.socialbutton{display: none}
	.footer-socials{display: flex}
}