/*************** 2024-05-03  css v2.5  *******************/
/********* change .css?v= after changes to clear caches **********/


/**********************************************/

 * {
	box-sizing: border-box;
	list-style: none;
	margin: 0;
	padding: 0;
	text-decoration: none;
}

a {
/*	color: white;*/
	cursor: pointer;
	list-style: none;
	text-decoration: none;
}

img {
	display: block;
	max-width: 100%;
}

/******** outline divs ************/

/* * {
 	outline: 1px solid green;
 	background-color: green;
}*/

:root {
	--ff: helvetica;
	--ff-logo: Rubik Burned, sans-serif;
	--ff-logo2: Audiowide, sans-serif;
	
	--fs-1: 5rem;
	--fs-2: 3rem;
	--fs-3: 2rem;
	--fs-p: 1rem;
	--fs-ftr: .5em;
	
	--fw-n: 300;
	--fw-m: 600;
	--fw-b: 800;
	
	--primary-clr: white;
	--secondry-clr: red;
	--logo-clr: white;
	--logo-hover-clr: yellow;
	--poly-clr: #1B69B0;
/*	--hover-bc-clr: #FF6200; */
	--hover-bc-clr: red; 

	--hover-gc-clr: white;
	
	--spacer: 1rem;
	--spacer-md: calc(var(--spacer) * 2);
	--spacer-lg: calc(var(--spacer) * 3);
	--spacer-v-lg: calc(var(--spacer) * 4);
	
	--bg-animation: linear-gradient(-45deg, #ee7752, #e73c7e, orange, yellow);
}
		
body {
	background: var(--bg-animation);
	display: grid;
	grid-template-columns: repeat (3, 1fr);
	justify-content: center;
	justify-items: center;
	align-items: center;
	background-size: 400% 400%;
	animation: gradient 9s ease infinite;
	min-height: 100vh;
}

@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

/*************************************************/
/******************* home ************************/
/*************************************************/
	
.logo {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: grid;
	grid-row: 1;
}

.logo h1 {
	font-family: var(--ff-logo);
	font-size: var(--fs-1);
	font-weight: var(--fw-b);
	color: var(--logo-clr);
	text-shadow: 5px 5px 5px #000;
	padding: 0;
	margin: 0;
	text-align: center;
}
 
.logo h2 {
	font-family: var(--ff-logo2);
	font-size: var(--fs-p);
	color: var(--primary-clr);
	text-align: center;
}

a:hover h1{
	color: var(--logo-hover-clr);
	transition: 0.5s;
	opacity: 100%;
}

.electropng {
	width: 300px;
	opacity: 50%;
	position: absolute;
	top: 30%;
	left:50%;
	transform: translate(-50%, -50%);
	z-index: -1;
}

/******************* logo pulse *******************/

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

.logo h1 {
  animation: pulse 2s infinite;
  transition-delay: 1sec;
}

/***************************************************/
/***************************************************/

.buttonAnimation {
	display: grid;
}

.e-button {
	font-family: var(--ff-logo);
	margin: var(--spacer-v-lg);
	background-color: var(--poly-clr);
	clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
	padding: 2%;
	opacity: 55%;
}

.e-button h3 {
	font-size: var(--fs-2);
	color: var(--primary-clr);
	text-align: center;
}

.na {
	position: absolute;
	left: calc(60% - 25px);
    top: calc(9% - 25px);
	animation-name: na;
	animation-timing-function: ease-in-out;
	animation-duration: 6s;
}

@keyframes na {
  0%   {background-color:red; left:50%; top:50%;}
  25%  {background-color:yellow; left:20px; top:50px;}
  50%  {background-color:blue; left:40px; top:70px;}
  75%  {background-color:green; left:80px; top:30px;}
  100% {background-color:red; left: calc(55% - 25px); top: calc(9% - 25px);}
}

.k {
	position: absolute;
	left: calc(10% - 25px);
    top: calc(11% - 25px);
	animation-name: k;
	animation-timing-function: ease-in-out;
	animation-duration: 6s;
}

@keyframes k {
  0%   {background-color:red; left:50%; top:50%;}
  25%  {background-color:yellow; left:70px; top:40px;}
  50%  {background-color:blue; left:20px; top:20px;}
  75%  {background-color:green; left:10px; top:40px;}
  100% {background-color:red; left: calc(10% - 25px); top: calc(11% - 25px);}
}

.ca {
	position: absolute;
	left: calc(-1% - 25px);
    top: calc(50% - 25px);
	animation-name: ca;
	animation-timing-function: ease-in-out;
	animation-duration: 6s;
}

@keyframes ca {
  0%   {background-color:red; left:50%; top:50%;}
  25%  {background-color:yellow; left:60px; top:70px;}
  50%  {background-color:blue; left:180px; top:20px;}
  75%  {background-color:green; left:170px; top:240px;}
  100% {background-color:red; left: calc(-1% 50%); top: calc(50% - 25px);}
}

.mg {
	position: absolute;
	left: calc(37% - 35px);
    top: calc(63% - 25px);
	animation-name: mg;
	animation-timing-function: ease-in-out;
	animation-duration: 6s;
}

@keyframes mg {
  0%   {background-color:red; left:50%; top:50%;}
  25%  {background-color:yellow; left:180px; top:5px;}
  50%  {background-color:blue; left:20px; top:100px;}
  75%  {background-color:green; left:90px; top:20px;}
  100% {background-color:red; left: 37%; top: 63%;}
}

.cl {
	position: absolute;
	left: calc(70% - 25px);
    top: calc(60% - 25px);
	animation-name: cl;
	animation-timing-function: ease-in-out;
	animation-duration: 6s;
}

@keyframes cl {
  0%   {background-color:red; left:50%; top:50%;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left: 70%; top: 60%;}
}

.ph {
	position: absolute;
	left: calc(15% - 25px);
    top: calc(70% - 25px);
	animation-name: ph;
	animation-timing-function: ease-in-out;
	animation-duration: 6s;
}

@keyframes ph {
  0%   {background-color:red; left:50%; top:50%;}
  25%  {background-color:yellow; left:90px; top:17px;}
  50%  {background-color:blue; left:90px; top:30px;}
  75%  {background-color:green; left:70px; top:187px;}
  100% {background-color:red; left: 15%; top: 70%;}
}

.e-button:hover {
	background-color: var(--logo-hover-clr);
	transition: 0.5s;
	opacity: 100%;
}

/************* e-button pulse *******************/

/*@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

.e-button {
  animation: pulse 2s infinite;
  transition-delay: 1sec;
}*/

/************* footer <p> font size only *****************/

footer {
	font-family: var(--ff);
	display: grid;
	grid-column: 1 / -1;
	grid-row: 19;
	text-align: center;
	margin-bottom: 3%;
	}

footer p {
	font-size: var(--fs-ftr);
	color: var(--primary-clr);
/*	padding: 0 0 1% 0;*/
}

/*************************************************/
/******************* bento gigs ************************/
/*************************************************/

.logoGigs {
	display: grid;
	grid-row: 1;
	margin: 4.5em 0;	
}

.logoGigs h1 {
	font-family: var(--ff-logo);
	font-size: var(--fs-1);
	color: var(--logo-clr);
}

.logoGigs h2 {
	font-family: var(--ff-logo2);
	font-size: var(--fs-3);
	color: var(--primary-clr);
	text-align: center;
}

/*.logoGrids:has(:img) {
	position: absolute;
	top: 50%;
	left: -50%;
	transform: translate(-50%, -50%);
	z-index: 1;
}*/

.bentoElectropng {
	width: 11rem;
	position: absolute;
	top: 21%;
	left: 50%;
	opacity: 50%;
	transform: translate(-50%, -50%);
	z-index: -1;
}

.bentoGrid {
	font-family: var(--ff-logo2);
	display: grid;
	grid-row: 2;
	grid-template-columns: repeat (5, 1fr);
	gap: 10px;
	border-radius: 5px;
	width: 80vw;
	margin-bottom: var(--spacer-md);
}

.bentoGrid h2 {
	color: var(--primary-clr);
	text-align: center;
	text-shadow: 1px 1px 1px #000;

}

.cards {
	justify-content: center;
	box-shadow: 0 4px 8px 0 rgba(0,0,0,0.8);
	background-color: rgba(248, 165, 42, .6);
	padding: .675rem;
	border-radius: 5px;
}
 	
.cardText {
	font-family: var(--ff);
	font-size: var(--fs-p);
	color: var(--primary-clr);
	text-align: center;
	padding: 0.325rem;
/*	text-shadow: 1px 1px 1px #000;*/
}

.cards h3 {
	color: var(--primary-clr);
	text-align: center;
	text-shadow: 1px 1px 1px #000;
	}
	
/******* adjust cardOne and cardFive grid-row: depending on number of gigs, and padding on cardOne and cardFive to even up text****************************/

.cardOne {
	grid-column: 1;
	grid-row: 1 / 4;
	padding-top: 2rem;
}

.cardTwo {
	grid-column: 1 / 5;  
	grid-row: 4;
	/********** other cards adjusted for grid-row: 1;single gig only ********/
}

.cardThree {
	grid-column: 2 / 6;
	grid-row: 1 / 3;
}

.cardFour {
	grid-column: 2 / 5;
	grid-row: 3;
}

.cardFive {
	grid-column: 5 / 5;
	grid-row: 3 / 5;
	padding-top: 8rem;
}

.cardTwo:hover,.cardThree:hover,.cardFour:hover {
	background-color: var(--secondry-clr);
	transition: 0.5s;
}

/*************** uncomment when no gigs ***************/

/*@media (hover: hover) {

/*@media (hover: none), (pointer: course) {*!/

 .cards:not(:first-of-type):not(:last-of-type):hover {
	background-color: var(--hover-bc-clr);
	transition: 0.5s;
}*/



/************************* gig details card ********************/

.gigdetailsLogo {
	display: grid;
	grid-column: 1;
	grid-row: 1;
	padding-top: 10rem;
}

.gigdetailsLogo h1 {
	font-family: var(--ff-logo);
	font-size: var(--fs-1);
	color: var(--logo-clr);
}

.gigdetailsLogo h2 {
	font-family: var(--ff-logo2);
	font-size: var(--fs-2);
	color: var(--primary-clr);
	text-align: center;
}

.gigElectropng {
	width: 15rem;
	position: absolute;
	top: 33%;
	left: 50%;
	opacity: 50%;
	transform: translate(-50%, -50%);
	z-index: -1;
}

.gigDetails {
	grid-row: 18;
	grid-template-rows: repeat(2, 1fr);
	align-items: center;
	justify-content: center;
	margin: 3rem 0 1rem 0;
	width: 60vw;
}

.gigCard {
	box-shadow: 0 4px 8px 0 rgba(0,0,0,0.8);
	background-color: orange;
	padding: 1rem;
	border-radius: 5px;
	margin-bottom: 1rem;
}

.gigdetailsCard {
 	box-shadow: 0 4px 8px 0 rgba(0,0,0,0.8);
 	background-color: orange;
 	padding: 1rem;
 	border-radius: 5px;
}

.gigCard h2 {
	font-family: var(--ff-logo2);
	font-size: var(--fs-p);
	font-weight: var(--fw-b);
	color: var(--primary-clr);
	text-align: center;
	text-shadow: 1px 1px 1px #000;
}

@media (hover: hover) {

/*@media (hover: none), (pointer: course) {*/

.cardText a {
	color: #ea4b63;
	text-shadow: none;
}

.gigdetailsCard a:hover {
	color: var(--hover-gc-clr);
}
}
/***********************************************************************/
/***************************** social **********************************/
/***********************************************************************/

.social {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin: 1rem;
	justify-content: center;
/*	display: none;*/
}

/************** adjust bentoGrid bottom margin when social turned on **********************************************************/

.socText {
	font-family: var(--ff-logo2);
	font-size: var(--fs-p);
	color: var(--primary-clr);
	text-align: center;
	padding: 0.325rem;
}

.socOne, .socTwo, .socThree {
	display: flex;
	flex: 1;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 8px 0 rgba(0,0,0,0.7);
	background-color: orange;
	border-radius: 5px;
}

 .socOne:hover {
	background-color: var(--secondry-clr);
	transition: 0.5s;
}

 .socTwo:hover {
	background-color: var(--secondry-clr);
	transition: 0.5s;
}

 .socThree:hover {
	background-color: var(--secondry-clr);
	transition: 0.5s;
}

.social a {
	color: white;
}

/*********************************************************/
/**************** 404 error ******************************/

.oopsLogo {
	grid-column: 1;
	grid-row: 1;
	padding-top: 10rem;
}

.oopsLogo h1 {
	font-family: var(--ff-logo);
	font-size: var(--fs-1);
	color: var(--primary-clr);
}

.oopsLogo h2 {
	font-family: var(--ff-logo2);
	font-size: var(--fs-3);
	color: var(--primary-clr);
	text-align: center;
}

.oopsElectropng {
	width: 10rem;
	position: absolute;
	top: 33%;
	left: 50%;
	opacity: 50%;
	transform: translate(-50%, -50%);
	z-index: -1;
}

.errorCards {
	display: grid;
	grid-row: 2;
	grid-template-rows: repeat(3, 1fr);
}

.errorCards h2 {
	font-family: var(--ff-logo2);
	font-size: var(--fs-3);
	color: var--primary-clr);
	text-align: center;
}

.oopsCard h2{
	font-weight: var(--fw-b);
	color: var(--primary-clr);
	margin-top: var(--spacer-md);
}
 
 .cardError p{
 	font-size: var(--fs-p);
 }
  
 .cardError:hover {
	background-color: var(--secondry-clr);
	transition: 0.5s;
	border-radius: 10px;
}

/********************************************************
/**************** 500 error ******************************/
/*********************************************************/


.500title {
	
}


.500text {
	
}

/*****************************************/
/************* media queries for phone and tablets *************/
/*****************************************/

@media only screen and (max-width:760px) {

:root {
	--fs-1: 3rem;
	--fs-2: 2rem;
	--fs-3: 1rem;
	--fs-p: 0.725rem;
}

.electropng {
	width: 300px;
	position: absolute;
	top: 30%;
	left:50%;
	transform: translate(-50%, -50%);
}

.na {
	position: absolute;
	left: calc(50% - 25px);
    top: calc(70% - 25px);
	animation-name: na;
	animation-timing-function: ease-in-out;
	animation-duration: 6s;
}

@keyframes na {
  0%   {background-color:red; left:50%; top:50%;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left: calc(50% - 25px;) top: calc(10% - 25px);}
}

.k {
	position: absolute;
	left: calc(10% - 25px);
    top: calc(17% - 25px);
	animation-name: k;
	animation-timing-function: ease-in-out;
	animation-duration: 6s;
}

@keyframes k {
  0%   {background-color:red; left:50%; top:50%;}
  25%  {background-color:yellow; left:70px; top:40px;}
  50%  {background-color:blue; left:20px; top:20px;}
  75%  {background-color:green; left:10px; top:40px;}
  100% {background-color:red; left: 10%; top: 17%;}
}

.ca {
	position: absolute;
	left: calc(-3% - 25px);
    top: calc(65% - 25px);
	animation-name: ca;
	animation-timing-function: ease-in-out;
	animation-duration: 6s;
}

@keyframes ca {
  0%   {background-color:red; left:50%; top:50%;}
  25%  {background-color:yellow; left:10px; top:164px;}
  50%  {background-color:blue; left:60px; top:12px;}
  75%  {background-color:green; left:77px; top:270px;}
  100% {background-color:red; left: -3%; top: 50%;}
}

.mg {
	position: absolute;
	left: calc(88% - 35px);
    top: calc(190% - 25px);
	position: relative;
	animation-name: mg;
	animation-timing-function: ease-in-out;
	animation-duration: 6s;
}

@keyframes mg {
  0%   {background-color:red; left:50%; top:50%;}
  25%  {background-color:yellow; left:89px; top:10px;}
  50%  {background-color:blue; left:2px; top:90px;}
  75%  {background-color:green; left:80px; top:10px;}
  100% {background-color:red; left: 88%; top: 190%%;}
}

.cl {
	position: absolute;
	left: calc(70% - 25px);
    top: calc(-40% - 25px);
	position: relative;
	animation-name: cl;
	animation-timing-function: ease-in-out;
	animation-duration: 6s;
}

@keyframes cl {
  0%   {background-color:red; left:50%; top:50%;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left: calc(-35% - 25px); top: calc(60% - 25px);}
}

.ph {
	position: absolute;
	left: calc(-31% - 25px);
    top: calc(-10% - 25px);
	position: relative;
	animation-name: ph;
	animation-timing-function: ease-in-out;
	animation-duration: 6s;
}

@keyframes ph {
  0%   {background-color:red; left:50%; top:50%;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:30px;}
  75%  {background-color:green; left:0px; top:70px;}
  100% {background-color:red; left: calc(-31% - 25px); top: calc(-10% - 25px);}
}

/************* pulse *******************/


/*@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

.e-button {
  animation: pulse 2s infinite;
}*/

/****************** bento gigs - 760px *****************/

.logoGigs {
	margin-top: 5.8em ;
}

.logoGigs h1 {
	font-size: var(--fs-2);
	text-align: center;
}

.logoGigs h2 {
	font-size: var(--fs-3);
	text-align: center;
}

.bentoElectropng {
	width: 9rem;
	position: absolute;
	top: 17%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: -1;
}

.bentoGrid {
	grid-template-columns: 1fr;
	margin-top: 3rem;
}

.cardOne {
	grid-column: 1 / 6;
	grid-row: 1;
	padding-top: 1rem;
}

.cardTwo {
	grid-column: 1 / 6;  
	grid-row: 5;
	/********** other cards adjusted for grid-row: 1;single gig only ********/
}

.cardThree {
	grid-column: 1 / 6;
	grid-row: 2;
}

.cardFour {
	grid-column: 1 / 6;
	grid-row: 3;
}

.cardFive {
	grid-column: 1 / 6;
	grid-row: 6;
	padding-top: 1rem;
}

.socText {
	font-size: var(--fs-ftr);
}

/*@media (hover: hover) {*/

@media (hover: none), (pointer: course) {

 .cards:not(:first-of-type):not(:last-of-type):hover {
	background-color: var(--hover-clr);
	transition: 0.5s;
}
} 

/********************* gigs ************************/

.gigdetailsLogo {
	display: grid;
	grid-column: 1;
	grid-row: 1;
	padding-top: 10rem;
}

.gigdetailsLogo h1 {
	font-size: var(--fs-1);
}

.gigdetailsLogo h2 {
	font-size: var(--fs-3);
}

.gigElectropng {
	width: 200px;
	position: absolute;
	top: 30%;
	left: 50%;
	opacity: 50%;
	transform: translate(-50%, -50%);
	z-index: -1;
}

.gigDetails {
	grid-row: 9;
	width: 90vw;
}

/********************** errors ***********/

/********************* 404 *********************/

.oopsLogo {
	grid-column: 1;
	grid-row: 1;
	padding-top: 10rem;
}

.oopsElectropng {
	width: 10rem;
	position: absolute;
	top: 30%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: -1;
}

.errorCards {
	display: grid;
	grid-template-columns: 1fr;
	grid-row: 2;
	grid-template-rows: repeat(3, 1fr);
}
  
 .cardError:hover {
	background-color: var(--secondry-clr);
	transition: 0.5s;
}
}

/*************************************************
/******************** end *************************/
/**************************************************/