@charset "UTF-8";

:root {
    --shadow: 0 .5rem 1rem rgba(0,0,0,.15);
}

body {
    font-family: 'Open Sans', sans-serif;
    max-width: 1920px;
    margin: 0 auto;
    background-color: #000;
    color: #eee; }

section { 
	padding: 4rem 0; 
	height: 100vh;
	max-height: 900px;
}

b, strong { font-weight: 700; }

h1, h2, h3, h4, h5, h6 { 
    text-transform: uppercase;
    font-weight: 600;
    color: var(--primary); }

h1, h2 {
    text-transform: uppercase;
    margin-bottom: 1rem; }

a {
    text-decoration: none;
    transition: all .15s ease; }

.bi { margin-top: -4px; }

li { list-style-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='red' class='bi bi-dot' viewBox='0 0 16 16'><path d='M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z'/></svg>"); }

.flex-center {
    display: flex;
    justify-content: center;
    align-items: center; }
	
.circle { border-radius: 50%; }
.link-warning { color: #ffffcc !important; }


/* ******************************************** Content ******************************************** */

table {
	caption-side: top;
}

.table>:not(:first-child) {
	border-top: none;
}

/* Navigation - About */

#about-nav ol {
	padding-left: 0;
}


#about-nav ol li {
	list-style: none;
	display: inline-block;
}

/* Navigation - Landing */  
#landing-nav { margin-bottom: 2rem; }
  
#landing-nav img {
    transform: scale(1);
    filter: contrast(100%);
    transition: all .15s ease;
    border-radius: .35rem;
    max-width: 100%;
    height: auto; }
    
#landing-nav .col-3 { overflow: hidden !important; }

#landing-nav img:not(.logo):hover {
    filter: contrast(150%);
    transform: scale(1.1); }

#landing p { color: var(--bs-muted); }

#landing-nav span {
    display: block; 
    margin-top: 1rem;
    color: #fff; }

/* Navigation - Social */
#social-nav {
    margin: 2rem 0;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center; }

#social-nav a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    background-color: rgba(255,255,255,.85);
    border-radius: 50%;
    margin-left: .5rem;
    padding: .5rem; }
	
.bi-instagram, .bi-facebook { margin-top: 1px; }


/* Landing */
#landing {
    padding: 2rem 0;
    text-align: center;
    height: auto; }

#landing img {
	margin-top: -2rem;
}

#landing h2 {
    color: #ffffcc;
    font-size: 20px; }


/* Album */
#albums {
	height: auto;
	
}

#albums h2 {
	background-color: #000;
}

.section img {
    border-radius: .5rem;
    box-shadow: var(--shadow);
    max-width: 100%;
    height: auto; }

.album-wrapper { display: flex; }
ol.stats { padding-left: 0; }

ol.stats li { 
    color: #000;
    list-style: none; }

ol.stats li b { 
    margin-right: .15rem;
    color: #fff; }
    
.table>:not(caption)>*>* { padding: 0.2rem 0.5rem; }

table { 
    font-weight: 300;
    margin-top: 1rem; }

.img-album {
    max-width: 100%;
    height: auto;;
    border-radius: .5rem; }

iframe {
    border-radius: .5rem;
    box-shadow: var(--shadow); }

audio { width: 100%; }

/* Bottom Nav */    
.bottom-nav { margin-top: 1rem;}

.bottom-nav a { 
    margin-right: .35rem;
    font-size: 14px;
    font-weight: 300;
    color: #ffffcc; }
    
.bottom-nav a:hover { color: #fff; }

/* Member bios */
#about, #member-bios {
	background-color: #000;
	background-image: linear-gradient(180deg,#000 0%, #222 100%);
	height: auto; 
	max-height: unset; 
}
	
#about figcaption {
	font-family: var(--bs-font-monospace) !important;
	width: 350px;
	margin-left: 1rem;
	font-size: 14px;
	color: #ffffcc;
}

#Self-titled-album, #three-winters, #invertebrate-psalms, #in-and-between, #the-end {
	display: flex;
	align-items: center;
}

#member-bios img {
	border-radius: 50%;
}
	
/* Ruiner */
#ruiner {
	background-color: #4a4460;
	background-image: linear-gradient(180deg, rgba(74,68,96,1) 0%, rgba(0,0,0,1) 50%); }
}

#ruiner p, #ruiner ol.stats li { color: #fff !important; }

/* Member Bios */
.img-left {
	border-radius: 50%;
	float: left;
	margin-right: 1rem;
	margin-bottom: .5rem;
}

.img-right {
	border-radius: 50%;
	float: right;
	margin-left: 1rem;
	margin-bottom: .5rem;
}

.band {
	float: right;
	margin-left: 1rem;
	margin-bottom: .5rem;
	border-radius:.35rem;
}

.band-wrapper {
	align-items: flex-start;
}



/* Three Winters */
#three-winters {
    background-color: rgb(24,48,56);
    background-image: linear-gradient(180deg, rgba(24,48,56,1) 0%, rgba(18,18,18,1) 25%); }

#three-winters p, #three-winters li, #three-winters .link-light { color: #ccc; }
#three-winters p, #three-winters li, #three-winters .link-light:hover { color: #fff; }
    

/* Invertebrate Psalms */
#invertebrate-psalms {
    background-color: #000;
    background-image: linear-gradient(0deg, rgba(200,200,200,1) 0%, rgba(178,178,178,1) 100%); }

#invertebrate-psalms p, #invertebrate-psalms li, #invertebrate-psalms .link-light { color: #000; }
#invertebrate-psalms .link-light:hover { color: #222; }
#invertebrate-psalms h1, #invertebrate-psalms h2 { color: #000; }

#invertebrate-psalms .bottom-nav a { 
    font-weight: 400;
    color: #000; }
    
#invertebrate-psalms .bottom-nav a:hover { color: #222; }
#invertebrate-psalms ol.stats li b { color: #000; }


/* In and Between */
#in-and-between {
    background-color: rgb(140,138,139);
    background-image: linear-gradient(180deg, #333 0%, #000 100%); }

#in-and-between p, #in-and-between li, #in-and-between .link-light { color: #ccc; }
#in-and-between .link-light:hover { color: #fff; }


/* The End */
#the-end {
    background-color: rgb(140,138,139);
    background-image: linear-gradient(180deg, #2d322e 0%, #000 100%); }

#the-end p, #the-end li, #the-end .link-light { color: #ccc; }
#the-end .link-light:hover { color: #fff; }


/* Self Titled */
#Self-titled-album{
	background-color: rgb(70,74,97);
	background-image: linear-gradient(180deg, #4a4661 0%, #000 100%); }


/* Footer */
footer {
    background-color: #222;
    border-top: solid 1px #000;
    text-align: center;
    padding-top: 2rem;
    padding-bottom: 2rem;
    color: #eee; }

footer p { color: inherit !important; }

.footer-links {
    padding: 0 1rem;
    margin-top: .5rem;
    margin-bottom: .5rem; }

.footer-links a {
    font-size: 18px;
    color: #ffffcc;
    margin-left: .5rem; }

.footer-links a:hover { color: #aaa; }

.footer-links a::before {
    margin-right: .5rem;
    content: "|"; }

.footer-links a:first-child::before { content: ""; }
.footer-links:nth-of-type(2) a:before { display: none; }


/* ******************************************** REPONSIVE ******************************************** */

@media (max-height: 600px), (min-width: 768px) and (max-width: 991px) {
    .container-fluid { max-width: 720px; }
    
    section {
        height: auto;
        max-height: unset; }
    
    #landing { 
        margin-bottom: 2rem;
        height: auto;
        max-height: unset; }
        
    #landing h1 { margin-top: 2rem; }
}

@media (max-width: 767px) {
    section {
        padding: 2rem 0.5rem;
        height: auto;
        max-height: unset; }
    
    .lead { font-size: 18px; }

    /* Navigation */
    #social-nav { 
        margin-top: 0;
        flex-wrap: wrap; }
    
    #social-nav a { 
        margin-top: 1rem;
        margin-left: 0.5rem;
        width: 2.5rem;
        height: 2.5rem; }
        
    /* Landing */
    #landing { 
        margin-bottom: 2rem;
        height: auto;
        max-height: unset; }

    /* Album */
    .img-album { margin-bottom: 1rem; }
    .ratio { margin-bottom: 1rem; }
    .table-active { --bs-table-accent-bg: transparent; }
    .table>:not(caption)>*>* { background-color: #111; }
	
	/* About */
	#about {
		padding-top: 0;
		margin-top: -2rem;
	}
	
	#about figure {
		float: none !important;
	}
	
	#about img {
		margin-left: 0 !important;
	}
	
	#about p {
		font-size: 1rem !important;
	}
	
	
	/* Member Bios */
	#member-bios  svg, #member-bios img {
		float: none !important;
	}
	
	.img-left {
		float: none;
		margin-right: 0;
		margin-bottom: 1rem;
	}
	
	.img-right {
		float: none;
		margin-left: 0;
		margin-bottom: 1rem;
	}
	
	.band {
		float: none;
		margin-left: 0;
		margin-bottom: 0;
	}

    /* Footer */
    footer p, .footer-links a { font-size: 16px !important; }
}