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

:root {	
	--nav-bar-background: rgba(6, 6, 6, 0.75);
	--member-label-background: rgba(6, 6, 6, 0.9);
	--announcement-background: rgba(6, 6, 6, 0.5);

	--text-color-primary: #FFF5C8;
	--text-color-primary-alt: #F9F9F9;
	--text-color-hover: #ED768A;
	--text-color-secondary: #A5A5A5;
	--text-color-secondary-hover: #F5F5F5;

	--background: #060606;
	--background-alt: #0A0A0A;

	/* Text Sizes */
	--title-large: 28px;
	--title-medium: 24px;
	--title-small: 20px;	
	--body: 16px;
	--footer: 12px;

	/* Spacings */
	--nav-bar-height: 48px;

	--spacing-xlarge: 64px;
	--spacing-large: 32px;
	--spacing-medium: 16px;
	--spacing-small: 8px;
	--spacing-xsmall: 4px;
	--spacing-xxsmall: 2px;
}

/* Foundation  */

h1, h2, h3 {
	margin: 0px;
}

h1 {
	font-size: var(--title-large) !important;
}

h2 {
	font-size: var(--title-medium) !important;
}

h3 {
	font-size: var(--title-small) !important;
}

body, html {
	margin: 0px;
	width: 100vw;
	height: 100vh;
	color: var(--text-color-primary);
	font-family: 'Aboreto', helvetica, sans-serif !important;
	background: var(--background);
}

nav {
	width: 100%;	
	display: flex;
	flex-wrap: wrap;	
	position: fixed;
	align-items: center;
	align-content: center;		
	height: var(--nav-bar-height);
	justify-content: space-evenly;
	background: var(--nav-bar-background);
}

iframe {	
	height: auto;
	aspect-ratio: 16/9;
}

a {	
	text-decoration: none;
	color: var(--text-color-primary);	
	font-size: var(--title-medium);
	transition: color 0.5s ease-in-out;
}

a:hover {
	color: var(--text-color-hover);
	transition: color 0.5s ease-in-out;
}

table {		
	text-align: center;

	padding: var(--spacing-small);
	border-radius: var(--spacing-medium);
	background: var(--announcement-background);
}

p {
	font-size: var(--body);
}

.highlight {
	color: var(--text-color-hover);
}

.left {
	text-align: left;
}

.right {
	text-align: right;
}

.centered {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	flex-direction: column;
	justify-content: center;
}

.vertical {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	flex-direction: row;
	justify-content: center;
}

.nav-item {
	text-align: center;
}

.gig-buttons {
	display: flex;
	flex-direction: column;
}

/* Items  */

div.announcement {
	width: 100%;
	color: var(--text-color-primary-alt);
	background: var(--announcement-background);
}

div.section {
	width: 100%;
	min-height: 100vh;	

	overflow-x: scroll;

	background: var(--background-alt);
	background-repeat: no-repeat;	
	background-position: center;
	background-attachment: fixed;
	background-size: auto 100%;

	padding-top: var(--nav-bar-height);
}

div.section.band {
	background-image: url("../images/band.png");
}

div.section.skulls {	
	background-color: var(--background);
	background-image: url("../images/hero-min.png");
}

.grayscale {
	filter: grayscale(100%);
}

a.gig-button {	
	font-size: var(--body);

	padding: var(--spacing-xsmall);
	border-radius: var(--spacing-xxsmall);	
	
	transition: color 0.5s ease-in-out, background 0.5s ease-in-out, border-color 0.5s ease-in-out;
}

a.gig-button.primary {
	margin-bottom: var(--spacing-small);

	color: var(--background-alt);
	background: var(--text-color-primary);

	border: var(--spacing-xxsmall) solid var(--text-color-primary);
}

a.gig-button.primary:hover {
	color: var(--text-color-primary-alt);
	background: var(--text-color-hover);

	border: var(--spacing-xxsmall) solid var(--text-color-hover);

	transition: color 0.5s ease-in-out, background 0.5s ease-in-out, border-color 0.5s ease-in-out;
}

a.gig-button.secondary {
	color: var(--text-color-primary-alt);
	border: var(--spacing-xxsmall) solid var(--text-color-primary-alt);
}

a.gig-button.secondary:hover {
	color: var(--text-color-hover);
	border: var(--spacing-xxsmall) solid var(--text-color-hover);

	transition: color 0.5s ease-in-out, background 0.5s ease-in-out, border-color 0.5s ease-in-out;
}

div.media {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-content: center;
    align-items: center;
    flex-direction: row;
}

div.footer {
	text-align: center;
	font-size: var(--body);
	color: var(--text-color-secondary);
}

a.footer {	
	padding: var(--spacing-small);
	font-size: var(--footer);
	color: var(--text-color-secondary);
	transition: color 0.5s ease-in-out;
}

a.footer:hover {
	color: var(--text-color-secondary-hover);
	transition: color 0.5s ease-in-out;
}

a.media-link {
	font-size: var(--title-small);
}

div.member {
    display: flex;    
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;	
}

div.member-label {
	width: 100%;
	padding: var(--spacing-medium);
	background-color: var(--member-label-background);
}

div.members-grid-desktop {       
    margin: auto;
    display: flex;    
    flex-wrap: wrap;
    align-items: center;
    flex-direction: row;
    justify-content: space-evenly;  
}

div.member-desktop {
	width: 50%;
	background: var(--background);
	background-repeat: no-repeat;	
	background-position: top;
	background-attachment: local;
	background-size: cover;
}

div.members-grid-mobile {
	width: 80%;
	margin: auto;
    display: flex;    
    flex-wrap: wrap;
    align-items: center;
    flex-direction: column;
    justify-content: space-evenly;
}

div.member-mobile {
	width: 100%;
	height: 80vw;
	background: var(--background);
	background-repeat: no-repeat;	
	background-position: top;
	background-attachment: local;
	background-size: cover;
}

@media only screen and (max-width: 900px) { /* Mobile */
	.safe { width: 80%; }
	.desktop { display: none !important; }
	table { width: 90%; }
}

@media only screen and (min-width: 900px) { /* Desktop */
	.safe { width: 40%; }	
	.mobile { display: none !important;  }

	table { width: 90%; }

	div.members-grid-desktop {
		width: 80%;   
    	margin: var(--title-small) 10%;
	}

	div.member-desktop { height: 40vw; }
}

@media only screen and (min-width: 1800px) { /* Ultrawide / 2K / 4K  */
	.safe { width: 40%; }	
	.mobile { display: none !important;  }

	table { width: 50%; }

	div.members-grid-desktop {
		width: 50%; 
    	margin: var(--title-small) 25%;
	}

	div.member-desktop { height: 25vw; }
}