@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');

:root {
	--inner-width: 900px;
	--font-heading: "Lato", sans-serif;
	--font-body: "Lato", sans-serif;
	--purple: purple;
	--pink: #ffe9ed;
	--buttonover: rebeccapurple;
}

* {
    box-sizing: border-box;
}

html, body{width:100%; height: 100%; margin: 0; box-sizing: border-box}
body{font-family: var(--font-body); position: relative; font-size:16px; overflow-x: hidden; background-color: #000; color: #fff; background-image: url("../img/bg.webp"); background-position: bottom center; background-size: cover; background-repeat: no-repeat; background-attachment: fixed}

div{box-sizing: border-box}
p{line-height: 1.6; font-size:1.2rem}
p:empty{display:none}
a{color: var(--pink); transition:all 300ms ease}
a:hover{color: #fff !important}

h1, h2, h3, h4, h5{font-family:var(--font-heading); line-height: 1.2; color: #fff}

h1{text-align: center; font-size: 2.2rem; line-height: 1.2; padding: 0; margin: 50px 0; text-transform: uppercase; letter-spacing: 15px}
h2{font-size: 1.8rem; padding: 0; margin: 50px 0 30px; text-transform: uppercase; letter-spacing: 6px}
h3{font-size: 1.4rem; padding: 0; margin: 0 0 15px; text-transform:uppercase}
h4{font-size: 1.2rem; padding: 0; margin: 0 0 15px}

hr{max-width: 300px; margin: 40px auto; border-radius: 2px; border:2px solid var(--pink)}

input{box-sizing: border-box}
input[type="text"], input[type="email"], input[type="number"], input[type="password"]{padding:11px; border:1px solid #000} 
input[type=submit]{background: var(--pink); color: #fff; font-size:1rem}
textarea{font-family: var(--font-body); box-sizing: border-box; padding: 10px}

audio{margin: 30px 0}
audio::-webkit-media-controls-panel {
  background-color: var(--pink);
}
audio::-webkit-media-controls-play-button {
  background-color: var(--pink);
  border-radius: 50%;
}

audio::-webkit-media-controls-timeline {
  background-color: var(--pink);
}


.content{max-width: 960px; margin: 0 auto; padding: 0 30px 60px; min-height: calc(100vh - 350px); z-index: 1}

#mastheadwrap{background: #000; width:100%; z-index: 1}
#masthead{display: flex; justify-content: space-between; align-items: center; max-width: 1200px; margin: 0 auto; font-size: 1.6rem}
#masthead > div{width:100%}
#masthead > div:first-of-type{max-width:300px; padding: 0 0 0 30px}
#masthead > div:first-of-type img{object-fit: contain; width:100%; height: 100%; object-position: center}
#masthead > div:last-of-type{padding:0 30px; text-align: center; text-transform: uppercase; letter-spacing: 6px}

.center, .centre{text-align: center !important}
.alignright{float:right; max-width: 50%; margin: 10px 0 30px 30px}

#mobnavbutton{width:30px; position: fixed; right:15px; top:20px; transition:all 300ms ease; cursor:pointer; text-align: center; z-index: 3; display: none}
#mobnavbutton > div{margin: 0 auto 5px; transition:all 300ms ease; border:1px solid #fff}

#mobnav{width:100vw; height: 100vh; position:fixed; left:0; top:0; padding-top: 50px; background: #000; color: #fff;  z-index: 2; background-image: url("../img/bg.webp"); background-size: cover; display: none}
#mobnav a{color: #fff; padding: 5px 30px 7px; margin:0 0 5px; text-decoration: none; border:1px solid #fff; background-color: #1e005a; border-top-left-radius:100px; border-bottom-left-radius:100px}
#mobnav ul{list-style: none; padding: 5px 0 5px 10px; margin: 0; display: block; text-align: right}
#mobnav li{display: block; margin: 0}

#mobnav ul ul{display: none}
#mobnav ul > li{cursor: pointer}
#mobnav ul > li > a{display: inline-block; position: relative; font-size:1.6rem}
#mobnav ul > li > a::after{top:7px; right:5px; font-size:1.1rem}
#mobnav ul > li > a:hover{color: #fff !important; background: #000 !important}
#mobnav ul ul{position: relative; top:inherit; left: inherit; margin: 0 0 20px}
#mobnav ul ul > li{ max-width: 100% !important; min-width:100% !important}
#mobnav ul ul a{text-align: center; border:0; box-shadow:none; font-size:1.2rem}
#mobnav ul ul a:hover{background-color: #000 !important; color: #fff !important}


#mainnav .menu-main-menu-container{text-align: center; margin: 30px auto 50px}
#mainnav .menu-main-menu-container > ul{list-style: none; padding: 0; margin: 0; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; grid-gap: 15px}
#mainnav .menu-main-menu-container > ul > li{display: inline-block; padding: 0; margin:0; position: relative; cursor:pointer}
#mainnav .menu-main-menu-container > ul > li > a{color: #fff; text-decoration: none; padding: 8px 30px 10px; display: block; border:1px solid #fff; background-color: #443b71; box-shadow:2px 2px 5px #000; transition:all 100ms ease-in-out}
#mainnav .menu-main-menu-container > ul > li > a:hover{transform:scale(1.1)}

#mainnav .menu-main-menu-container > ul > li > ul{position: absolute; top:60px; left:0; list-style: none; padding: 0; margin:0; border:1px solid #fff; background: #443b71; min-width:200px; display:none}
#mainnav .menu-main-menu-container > ul > li > ul.submenu-active{display: block}
#mainnav .menu-main-menu-container > ul > li > ul > li{padding: 0; margin: 0}
#mainnav .menu-main-menu-container > ul > li > ul > li > a {display: block; padding: 10px; text-decoration: none; text-align: left}

.menu-item-has-children > a {
    position: relative;
}

.menu-item-has-children > a::after {
    content: "";
    display: inline-block;
    margin-left: 6px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid currentColor;
    vertical-align: middle;
}


#mainnav .current-menu-item a{background-color: #14102c !important}
#mainnav .current-menu-item{}

.post-edit-block{text-align: center}
.post-edit-link{text-align:center; font-size:12px; color: #B866FF}

footer{display: flex; align-items:center; justify-content: center; grid-gap: 30px; padding: 30px; background-color: rgb(0,0,0,0.8); clear: both}
footer > div{width:100%; max-width: 600px}
footer > div:last-of-type{text-align: right}

#credit{background-color: rgb(0,0,0,0.8); text-align: center; font-size:0.6rem; padding: 0 0 30px; color:rgb(255,255,255,0.6);}
#credit a{color:rgb(255,255,255,0.6)}

.socials{display: flex; justify-content: center; align-items: center; flex-wrap:wrap; grid-gap: 15px}
.socials > div{border:3px solid #fff; position: relative; width:40px; height: 40px; border-radius:100px}
.socials > div{display: flex; justify-content: center; align-items: center}

.video-block{margin: 0 auto; max-width: 900px}
.videowrapper{width:100%; position: relative; padding-bottom: 56%; margin: 0 auto 30px}
.videowrapper iframe{width:100%; height: 100%; position: absolute; top:0; left:0; border:0}

#scrollup{position: fixed; right:0; bottom:100px; font-size:2.4rem; background-color: var(--pink); color: #000; cursor: pointer; transition:all 600ms ease-in-out; width:50px; height: 50px; border-top-left-radius:5px; border-bottom-left-radius:5px; opacity: 1; box-shadow:-1px 1px 3px rgb(0,0,0,0.2)}
#scrollup i{position: absolute; top:7px; left:10px}
#scrollup:hover{color: var(--pink)}
#scrollup.notvisible{right:-60px; opacity: 0; transition:all 600ms ease-in-out}


#modal{position: fixed; width:100vw; height:100vh; max-height: 100vh; z-index: 1000; background: rgb(0,0,0,0.9); display: none; justify-content: center; align-items: center}
#modal > div{background:#fff; box-shadow:1px 1px 15px rgb(0,0,0,0.6); padding: 30px; aspect-ratio:4/3; width:100%; max-width: 900px; position: relative; border-radius:5px}
#modal > div .fas{position: absolute; top:5px; right: 5px; font-size:1.8rem; cursor:pointer; transition:all 300ms ease; color: #000}
#modal > div .fas:hover{opacity: 0.8; transform:rotate(90deg)}
#modal h2{font-size:2rem; text-align: center}


.gallery {
    max-width:1200px;
    margin:0px auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 5px;
}

.gallery img {
    width: 100%;
    height: 100%;
    object-fit: cover;

    transition:all 300ms ease-in-out;
    cursor:pointer;
}
.gallery img:hover{
    transform:scale(1.1);
    box-shadow:3px 3px 5px rgb(0,0,0,0.7);
}

.lightbox-img{width:100%; aspect-ratio: 4/3; margin: 0 auto; position: relative; max-height: 100%}
.lightbox-img img{object-fit: contain; object-position: center; width:100%; height: 100% ;border-radius:4px}
.lightbox-caption{width: calc(100% - 20px); text-align: center; padding: 10px; position: absolute; left:10px; bottom: 15px; background: rgb(255,255,255,0.8); border-radius:5px; font-weight:700; color: #000; font-size: 1.4rem}



@media (max-width:900px) {
	#mainnav .menu-main-menu-container{display: none}
	#mobnavbutton{display: block}
	#masthead{font-size: 1.2rem}
	footer{flex-direction: column}
	footer > div{text-align: center; max-width:100%}
}
@media (max-width:800px) {

}

@media (max-width:700px) {
	#masthead{flex-direction: column}
	#masthead > div{max-width: 100% !important; text-align: center}
	#masthead > div:first-of-type{height: 300px; padding: 0}
	#masthead > div:last-of-type{padding: 0 30px 50px}
}

@media (max-width:600px) {
	#masthead > div:first-of-type{height: 200px}
	h1{font-size: 1.4rem; line-height: 1.4}
	.content{min-height: inherit}
	.alignright{float:none; max-width:100%; margin: 0 auto 50px; display: block}
}