/* Google font family import for collective site  */	
		
			@import url('https://fonts.googleapis.com/css2?family=Special+Elite&display=swap');
			
			
/* Hero image, Body, Footer stylings */					
					
		body{	  
		background-color: black;
		background-size: cover;
		
		/* Hero image styling & Scaling */	
		.hero{
		display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 90%;
  margin: 20px auto;
		}
		
		/* Default body text styling */
		
		h1, h2{
		text-align: center;
				font-family: "Special Elite", system-ui;
				padding-bottom: 30px;
								color: white;
				}
		}
		
		footer{
		text-align: center;
				font-family: "Special Elite", system-ui;
				padding-bottom: 30px;
								color: white;
		}

/* Main webite navigation bar, Text links with hover animation */
		
#navbar{
background-color: inherit;

		text-align: center;
		font-family: "Special Elite", system-ui;
		font-weight: 400;
		font-style: normal;	
		
		a {
		color: white;
	font-size: 30px;
	padding-right: 30px;
	}
	
	a:hover {
	color: f9b00c;
}
  
		}
		
/* snav = "Socials Navigation" Sticky social media navigation bar - Styled Logo Icons w/ shadow hover animation */
		
#snavtab{
background-color: f9b00c;
padding: 5px;
border-radius: 8px;
			position: fixed;
			top: 20;
			right: 20;
			z-index: 1;
			
	#socialnav{
		cursor: pointer;
		margin: 15px;
  -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s;
		}
		
		.button2:hover {
 
  filter: drop-shadow(6px 6px 8px black); 
        }
		
		}
		
		
		

/* Homepage - Promotion header div styling*/

#promo{
	
	img{
		padding: 20px;
	}
	
  display: flex;
  align-items: center;
  justify-content: center;
		
	}


/* Music - Spotify embed div styling */

	#embed{
			h2{
			text-align: left;
			padding-bottom: 0px;
			}
			width: 60%;
			margin: auto;
		}

/* Contact - Form styling */

form {
  max-width: 500px;
  margin: 60px auto;
}

fieldset {
color: white;
font-family: "Special Elite", system-ui;
  padding: 30px;
}

input,
textarea,
button {
font-family: "Special Elite", system-ui;

  width: 100%;
}

/* Archive - Gallery arrangement and styling */

		.row {
		margin: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 0 4px;
  padding-bottom: 30px;
}

/* Create four equal columns that sits next to each other */
.column {
  flex: 25%;
  max-width: 25%;
  padding: 0 4px;
}

.column img {
  margin-top: 8px;
  vertical-align: middle;
  width: 100%;
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
  .column {
    flex: 50%;
    max-width: 50%;
  }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
    flex: 100%;
    max-width: 100%;
  }
}