@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+Antique:wght@300&display=swap');
@import url('https://api.studio.petesteege.com/brandassets/brand/3/css');


:root {
--var-col-darker-white: rgba(255,255,255,70%);
--var-col-blue-hightlight: #87c3e6;
--var-col-blue-bg:rgb(48, 86, 106);
--var-col-blue-bg-o:rgba(48, 86, 106,0.7);
--var-col-dimwhite: rgb(180,180,180);
--var-col-dimwhite-a: rgb(180,180,180,0.2);
--var-col-lightblack: rgb(12,12,10);
--var-col-bg-black: rgb(19,19,19);
--var-col-blue: rgba(238, 255, 238, 0.90);

/* : url("https://petesteege.com/wp-content/uploads/2025/01/bg_main-scaled.jpg"); */

}

 

/* Apply the Google Font to headings */

* {
font-family: 'Zen Kaku Gothic Antique', sans-serif !important;
}


body {
font-weight: 100 !important;
}

h1{
font-weight: 200 !important;
}


#scrollUp {
margin-right: 2% !important;
margin-bottom: 5% !important;
}


   .editor-styles-wrapper {
           background-color: red !important;

}

    body {
        font-weight: 100 !important;
		background-color: var(--col-background) !important;
    }
    
/* LOGO */

.logopf {
	font-family: 'Zen Kaku Gothic Antique', sans-serif !important;
	color: white;
	position: fixed;
	top: 45% !important;
	left: 24%;
	z-index: -1;
	/* Base layer */
	font-size: 70px;
	line-height: 70px;
}

.logopf .h-pete {
	position: relative;
	/* Ensure it's positioned */
	z-index: 3;
	/* Higher than .music and .line */
	animation: fadeInOut 6s ease-in-out infinite;
	/* Apply animation */
	animation-delay: 3s;
	/* Different delay for "MUSIC" */
}

.logopf .h-steege {
	position: relative;
	/* Ensure it's positioned */
	z-index: 3;
	/* Higher than .music and .line */
	animation: fadeInOut 6s ease-in-out infinite;
	/* Apply animation */
	animation-delay: 7s;
	/* Different delay for "MUSIC" */
}

.logopf .music {
	position: relative;
	color: transparent;
	-webkit-text-stroke-width: 2px;
	-webkit-text-stroke-color: white;
	animation: fadeInOut 6s ease-in-out infinite;
	animation-delay: 1s;
	z-index: 2;
}

.logopf .line {
	position: relative;
	margin-top: 15px;
	left: -645px;
	width: 410%;
	height: 1.5px;
	background-color: var(--var-col-dimwhite);
	animation: fadeInOut 6s ease-in-out infinite;
	animation-delay: 0s;
	z-index: 1;
/*	box-shadow: 2px 5px 10px Gainsboro; */
}

@keyframes fadeInOut {
	0% {
		opacity: 0.7;
	}

	25% {
		opacity: 0.8;
	}

	75% {
		opacity: 1;
	}

	100% {
		opacity: 0.7;
	}
}

/* ----- */
/* pages */
/* ----- */

/* set fullscreen back page */
div#content.site-content:not(.page-id-734 .site-content) {
    padding-top: 60px !important;
    min-height: calc(100vh - 100px);
}



/* ----------------- */
/* contact form */
/* ----------------- */


.podio-webform-container {
  display:none;
}

/* ----------------- */
/* FP background */
/* ----------------- */

 

 

/* set a static background */
div#page.site div.custom-header.header-media {
background-image:none!important;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
background-position: center !important;
}


/* background animation */

.site-content-contain {
z-index: 10
}

.site-content-contain {
box-shadow: 0 0 1000px rgba(150, 150, 200, 0.3);

}

 

.site-content-contain::before {
white-space: pre;
content: "﹀";
font-weight: 800 !important;
font-size: 40px !important;
position: absolute;
top: -20%;
left: 49.5%;
z-index: 1000 !important;
}

 

 


/* Define the element with the background image */
div#page.site div.custom-header.header-media div.custom-header-overlay {
position: fixed !important;
width: 100vw;
height: 100vh;
background-image:var(--var-img-bg-main);
background-size: cover;
background-position: center center; /* Center the background image */
animation: scaleAnimation 30s infinite alternate; /* Apply the animation */
}

 

/* Define the animation */
@keyframes scaleAnimation {
0% {
transform: scale(1); /* Initial size */
}
100% {
transform: scale(1.1); /* Scaled size (you can adjust this) */
}
}

 


/* ------ */
/* HEADER */
/* ------ */

/* line under header */
.site-header {
border-bottom: 1px solid var(--var-col-dimwhite-a);
background-color: rgba(10,10,4,0.4);
position: fixed !important;
width: 100% !important;
z-index: 1000;
transition: background-color 1s ease-in-out ,border-bottom 0.5s ease-in-out;

}

/* new hovering value */
.site-header:hover {
border-bottom: 1px white solid;
background-color: rgba(10,10,4,0.95);
}

/* 'MUSIC' title add */
.site-title {
display: none !important;
}

 

 


/* ------- */
/* MENUS */
/* ------- */

/* MENU item hover colour */
button#menu-toggle.menu-toggle,
.menu-item:hover a {
color: var(--var-col-dimwhite) !important;
}

/* change the item colour */
.menu-item a{
color: whitesmoke !important;
opacity: 70% !important;
}

/* focus colour */


/* Margin abouve page title */
.site-content {
margin-top:0px;
}



/* ---------------- */
/* COPYRIGHT INFO */
/* ---------------- */

.site-info {
font-size:0 !important;
}

.site-info:after {
content: "Copyright ©️ Pete Steege Music, 2024. All rights reserved";
font-size:14px !important;
color:white;
opacity: 30% !important;
}

/* ----- */
/* pages */
/* ----- */

* ---------- Set the background colour for pages ---------- */

div#site-content-wrapper {
    background-color: var(--col-background);
}


/* set fullscreen back page */
div#content.site-content:not(.page-id-734 .site-content) {
padding-top: 60px !important;
min-height: calc(100vh - 100px);
}

 
.entry-content {
  margin-top: 47px !important;
}
 

 /* -------- featured hover -------- */
 


.cola:hover {
  
  background-color: pink;
}