/*
	Website Name: Rob Androus
	Description: Bootstrap Custom CSS for RobAndrous.com
	Author: PointDomain.com
	Version: 11/12/25
*/

/* FONTS ==================================================================== */

@import url('https://fonts.googleapis.com/css?family=Armata&display=swap');
@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');

/* VARIABLES ================================================================ */

:root {
	--font-navigation: 'Armata';
	--font-content: 'Armata';
	--font-content-header: 'Armata';
	--font-copyright: 'Open Sans';
	--background-color-header: #ffffff;
	--background-color-navigation: #222222;
	--background-color-content: #ffffff;
	--background-color-footer: #222222;
	--background-color-copyright: #111111;
	}

/* HEADER =================================================================== */

.header {
	background-color: var(--background-color-header);
	padding: 20px 0px 20px 0px;
	text-align: center;
	}

/* NAVIGATION =============================================================== */

.navigation {
	background-color: var(--background-color-navigation);
	font-family: var(--font-navigation), sans-serif;
	margin: 0;
	padding: 4px;
	}

@media (min-width: 768px) {

	.navigation {
		position: sticky;
		position: -webkit-sticky;
		top: 0px;
		z-index: 1;
		}

}/* @media */

.navigation ul {
	list-style-type: none;
	margin: 0px;
	padding: 0px;
	text-align: center;
	}

.navigation ul li {
	display: inline;
	}

.navigation ul li a {
	color: #cccccc;
	font-size: 120%;
	font-weight: normal;
	letter-spacing: 2pt;
	line-height: 2.5;
	margin: 4px;
	padding: 10px 12px 6px 12px;
	text-decoration: none;
	text-transform: uppercase;
	transition: 0.2s;
	}

.navigation ul li a:hover {
	color: #ffffff;
	}

@media (max-width: 768px) {

	.navigation ul li {
		display: list-item;
		}

	.navigation ul li a {
		font-size: 120%;
		padding: 8px 12px 4px 12px;
		}

}/* @media */

button {
	background-color: var(--background-color-navigation);
	border: 0;
	cursor: pointer;
	padding: 10px 12px 6px 12px;
	width: 100%;
	}

button a,
button a:visited {
	color: #999999;
	font-size: 200%;
	text-decoration: none;
	transition: 0.2s;
	}

button a:hover {
	color: #cccccc;
	text-decoration: none;
	}

@media (min-width: 768px) {

		button {
		display: none;
		}

}/* @media */

.js .nav-collapse {
	max-height: 0;
	overflow: hidden;
	}

.nav-collapse.opened {
	max-height: 9999px;
	}

@media screen and (min-width: 768px) {

	.js .nav-collapse.closed {
	max-height: none;
	}

}/* @media */

/* CONTENT ================================================================== */

.content {
	background-color: var(--background-color-content);
	font-family: var(--font-content-header), sans-serif;
	margin: 0;
	padding: 20px 20px 20px 20px;
	}

.content h1, h2, h3, h4, h5, h6 {
	color: #666666;
	font-family: var(--font-content-header), sans-serif;
	font-weight: 400;
	letter-spacing: 1pt;
	}

.content p {
	color: #333333;
	font-weight: normal;
	line-height: 140%;
	}

.content a,
.content a:visited {
	color: #004080;
	text-decoration: none;
	}

.content a:hover {
	color: #004080;
	text-decoration: underline;
	}

.content hr {
	background: #cccccc;
	border: none;
	height: 2px;
	}

/* AUDIO ==================================================================== */

audio {
	background-color: #111111;
	width: 100%;
	}

audio:hover, audio:focus, audio:active {
	}

/* FOOTER =================================================================== */

.footer {
	background-color: var(--background-color-footer);
	padding: 10px 0px 10px 0px;
	text-align: center;
	}

.footer a,
.footer a:visited {
	color: #999999;
	padding: 0px 20px 0px 20px;
	text-decoration: none;
	transition: 0.2s;
	}

.footer a:hover {
	color: #ffffff;
	}

.footer hr {
	background: #333333;
	border: none;
	height: 2px;
	}

/* COPYRIGHT ================================================================ */

.copyright {
	background-color: var(--background-color-copyright);
	font-family: var(--font-copyright), sans-serif;
	padding: 10px 0px 50px 0px;
	text-align: center;
	}

@media (min-width: 768px) {

	.copyright {
		padding: 10px 0px 2px 0px;
		}

}/* @media */

.copyright p {
	color: #999999;
	font-size: 85%;
	text-decoration: none;
	}

.copyright a,
.copyright a:visited {
	color: #666666;
	text-decoration: none;
	transition: 0.2s;
	}

.copyright a:hover {
	color: #cccccc;
	text-decoration: none;
	}