/* ======================================== */
/* ==  Red Ant Retro CSS Style Settings  == */
/* ======================================== */
/* ==      Last Updated 10 Jun 2024      == */
/* ======================================== */



/*  =======    NEW HOTNESS    =======  */
/*  =======    NEW HOTNESS    =======  */
/*  =======    NEW HOTNESS    =======  */

* {
    font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
    color: whitesmoke;
}

body {
    background: black;
}

/* === Page Headers & Footer === */
header {
	width: 100%;
	height: 100px;
	background-image: url("../images/background01.png");
	background-position: center;
	background-size: cover;
}

/* Footer & Copyright Info */
footer {
	clear: both;
    padding: 30px;
	margin-top: 20px;
	background-color: #700;
    text-align: center;
    font-weight: bold;
	color: white;
	transition: margin 300ms;
	transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
	transition-delay: 100ms;
}

/*  ======= General Styling =======  */

/* Main section */
main {
	max-width: 1280px;
	margin-left: auto;
	margin-right: auto;
}

/* Headings */
h1 {
	margin: 20px 8% 24px 8%;
	color: darkred;
	font-size: 24px;
	font-weight: bold;
    /* I made it outlined using the 'ole shadow trick! This method is used in game
       programming too btw. We just draw the same image/text 4 times underneath :) */
    text-shadow: -1px -1px 0 white, 1px -1px 0 white, -1px 1px 0 white, 1px 1px 0 white;
	transition: margin 300ms, font-size 350ms;
	transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
	transition-delay: 100ms;
}

h2 {
	padding: 20px 8% 5px 8%;
	color: orange;
	font-size: 20px;
	font-weight: bold;
	transition: padding 300ms, font-size 350ms;
	transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
	transition-delay: 100ms;
}

h2 em {
	font-style:oblique; /*italic;*/
	color: coral;
}

h3 {
	padding: 15px 8% 5px 8%;
	color: dodgerblue;
	font-size: 16px;
	font-weight: bold;
	font-style: italic;
	transition: padding 300ms, font-size 350ms;;
	transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
	transition-delay: 100ms;
}

h4 {
	padding: 15px 8% 5px 8%;
	color: yellowgreen;
	font-size: 14px;
	font-weight: bold;
    text-shadow: -1px -1px 0 darkblue, 1px -1px 0 darkblue, -1px 1px 0 darkblue, 1px 1px 0 darkblue;
	transition: padding 300ms, font-size 350ms;;
	transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
	transition-delay: 150ms;
}

/* Text */
p {
	margin: 10px 8%;
	font-size: 16px;
	line-height: 1.2em;
	transition: margin 300ms, font-size 400px;
	transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
	transition-delay: 100ms;
}

.note-title {
	margin-right: 10px;
	font-weight: bold;
	font-style: italic;
	color: crimson;
    text-shadow: -1px -1px 0 antiquewhite, 1px -1px 0 antiquewhite, -1px 1px 0 antiquewhite, 1px 1px 0 antiquewhite;
	transition: margin 300ms;
	transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
	transition-delay: 100ms;
}

.note {
	margin: 30px 12%;
	transition: margin 300ms;
	transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
	transition-delay: 100ms;
}

.align-center {
	position: relative;
	clear: both;
	margin-left: auto;
	margin-right: auto;
	padding: 0px;
	width: auto;
	text-align: center;
	float: none;
}

/* Links */
a {
	text-decoration: none;
    /* nice pretty colour fade so everything is nice and smooth. not jerky to the eye. */
    transition: color 200ms, background-color 250ms;
}

a:link {
	color: aqua;
}
a:visited {
	color: cadetblue;
}
a:hover {
	color: royalblue;
}
a:active {
	color: mediumslateblue;
	transition: color 0ms, background-color 0ms; /* Switch right away when clicked */
}

/* Lists */
ul, ol {
	margin: 10px 20px;
	padding: 10px 8%;
	font-size: 17px;
	list-style: circle;
	caret-color: aqua;
	transition: padding 400ms;
	transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
	transition-delay: 100ms;
}

li {
	margin: 5px 0px;
}

/* Semantic Tags */
article {
	clear: both;
}

figure {
	clear: right;
	align-content: center;
	display: inline;
	position: relative;
	margin: 0px 20px;
	max-width: 35vw;
	font-size: 10px;
/*	max-width: 33.33vw;*/
	transition: margin 250ms, font-size 350ms;
	transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
	transition-delay: 100ms;
}

figure img {
	vertical-align: top;
	margin-left: auto;
	margin-right: auto;
	margin-top: 14px;
	height: 100%;
	width: 200px;
	object-fit: cover;
	max-width: 100%;
	max-height: auto;
	transition: height 250ms;
	transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
	transition-delay: 100ms;
}

.video-container {
	clear: both;
	position: relative;
	margin: 8px 4% 8px 8px;
	height: 250px;
	width: 99%;
	z-index: -1;
	transition: height 250ms, width 200ms, margin 300ms;
	transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
	transition-delay: 100ms;	
}

figure figcaption {
	clear: both;
	color: burlywood;
	font-size: 12px;
	text-align: center;
	padding: 5px;
	transition: padding 250ms, font-size 250ms;
	transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
	transition-delay: 100ms;
}

.affiliate-logo {
/*	clear: both;*/
	width: 100%;
	max-width: 40vw;
	height: 100%;
	margin: auto;
	transition: height 300ms, margin 400ms;
	transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
	transition-delay: 100ms;
}

.logo-box {
	float: right;
	width: 200px;
	height: auto;
	margin: 0px 8% 0px 20px;
	transition: width 300ms, height 250ms, margin 400ms;
	transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
	transition-delay: 100ms;
}

.social-icon-row {
	margin: 20px 8% 15px 8%;
	transition: margin 300ms;
	transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
	transition-delay: 100ms;	
}

.social-icon {
	margin: 400px 12px 20px 12px;
	transition: padding 300ms, margin 450ms;
	transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
	transition-delay: 100ms;
}

/*
@keyframes affiliate-logo {
	0% {
		transform: scale(1);
	}

	12% {
		transform: scale(0.89);
	}

	24% {
		transform: scale(0.56);
	}

	36% {
		transform: scale(0.02);
	}

	54% {
		transform: scale(0.25);
	}

	74% {
		transform: scale(0.02);
	}

	82% {
		transform: scale(0.06);
	}

	92% {
		transform: scale(0.01);
	}

	96% {
		transform: scale(0.02);
	}

	100% {
		transform: scale(0);
	}
*/

.figure-left {
	float: left;
}

.figure-right {
	float: right;
}



/* ----- Nav Menu Stuff ----- */
/* Desktop / Tablet Navigation Bar */
/* I made the nav stick to the top as you scroll,
   but I had to move it out of the header         */
nav {
    position: sticky; /* so cool! :) */
    top: 0;
}

/*    -=  ==================  =-   */
/*  --=== |  Navbar Class  | ===-- */
/*    -=  ==================  =-   */
/* Seemed to have trouble when I tried to assign these properties directly onto the <nav> tag */
.navbar {
    background-color: black;
    overflow: hidden;
	transition: height 600ms;
	transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
	transition-delay: 100ms;
}

/* changes active menu Button to highlight Current Page */
.navbar .nav-highlight {
    color: red;
}

.responsive .nav-option {
    float: none;
    display: block;
}

.navbar .responsive {
	position: relative;
}



/* Nav Button */
.navbar a {
    color: white;
    text-align: left;
	vertical-align: middle;
    text-decoration: none;
    font-size: 16px;
    font-weight: bold;
    padding: 14px 16px;
	height: 100%;
}

.navbar a img {
	height: 20px;
	margin: 16px 0px;
/*    padding: 14px 16px;*/
	max-height: 100%;
}

/* Nav Button Link (Button) States */
.navbar a:hover {
    background-color: navy;
    color: gold;
}

.navbar a:active {
    background-color: gold;
    color: navy;
	transition: color 0ms, background-color 0ms; /* Switch colour right away when clicked */
}

/* do not highlight logo in menu */
.navbar .nav-logo:hover {
    background-color: black;
}

.navbar .nav-icon {
    display: inline-block;
	float: right;
	height: 52px;
	vertical-align: middle;
}

.responsive .nav-icon {
	position: absolute;
    right: 0;
    top: 0;
}

.nav-option {
    display: none;
}

.navbar .responsive a {
    float: none;
    display: block;
    text-align: left;
}


/* --==-==--  --*--  ==  --*--  --==-==-- */
/* --==-==-- Tablet screen size --==-==-- */
/* --==-==--  --*--  ==  --*--  --==-==-- */
/*@media only screen and (min-width: 768px) {*/
@media only screen and (min-width: 890px) {
	
    /* Footer Element */
	footer {
		margin-top: 25px;
	}
	
	/* Text Elements */
	/* resize margins and fonts for larger screen */
	p {
		margin: 12px inherit;
		font-size: 17px;
	}
	
	.note_title {
		margin-right: 12px;
	}
	
	/* Semantic Tags */
	/* resize figures and images for larger screen */
	figure {
		margin: 0px 30px;
		max-width: 40vw;
		font-size: 12px;
	}

	figure img {
		width: 100%;
		height: 100%;
		max-width: 300px;
		max-height: 500px;
		object-fit: cover;
		resize: both;
	}

	.video-container {
		clear: both;
		position: relative;
		margin: 0px 4% 10px 10px;
		width: auto;
		height: 225px;
		max-width: 30vw;
		float: right;
		transition: height 250ms, margin 300ms;
		transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
		transition-delay: 100ms;	
	}

	figure figcaption {
		padding: 10px;
	}
	
	.logo-box {
		width: 200px;
	}
	
	.social-icon {
		padding: 24px 15px;
		padding: 28px 15px 24px 15px;
	}
	
	.navbar {
		height: 64px;
	}
	
	.navbar a {
		color: white;
		text-align: center;
		vertical-align: middle;
		text-decoration: none;
		font-size: 16px;
		font-weight: bold;
		float: left;
		padding: 14px 16px;
		width: 16.66%;
		height: 100%;
	}
	.navbar a img {
		margin: auto 0px;
	}
	
	.navbar .nav-icon {
		display: none;
	}
	
	.nav-option {
		display: inline;
	}

}

/* --==-==--===---=---          ---=---===--==-==-- */
/* --==-==-- Desktop / Laptop screen size --==-==-- */
/* --==-==--===---=---          ---=---===--==-==-- */
@media only screen and (min-width: 1024px) {
	
    /* Footer Element */
	footer {
		margin-top: 30px;
	}
	
	/* Text Elements */
	/* resize margins and fonts for larger screen */
	p {
		margin: 14px inherit;
		font-size: 19px;
	}
	
	.note_title {
		margin-right: 16px;
	}
	
	/* Semantic Tags */
	/* resize figures and images for larger screen */
	figure {
		margin: 0px 34px;
		font-size: 14px;
	}

	figure img {
		height: 100%;
		width: 300px;
		object-fit: cover;
	}
	
	.video-container {
		margin: 0px 4% 20px 20px;
		width: auto;
		height: 250px;
	}
	
	figure figcaption {
		padding: 12px;
	}
	
	.logo-box {
		width: 225px;
	}
	
	.social-icon {
		padding: 34px 30px 30px 30px;
	}
}

/* --==-==--===---=---                             ---=---===--==-==-- */
/* --==-==-- Desktop / Laptop (wide enough for no wrapping)) --==-==-- */
/* --==-==--===---=---                             ---=---===--==-==-- */
@media only screen and (min-width: 1330px) {
	
    /* Footer Element */
	footer {
		margin-top: 30px;
	}
	
	/* Text Elements */
	/* resize margins and fonts for larger screen */
	p {
		margin: 16px inherit;
		font-size: 18px;
	}
	
	.note_title {
		margin-right: 20px;
	}
	
	/* Semantic Tags */
	/* resize figures and images for larger screen */
	figure {
		margin: 0px 40px;
		font-size: 16px;
	}

	figure img {
		height: 100%;
		width: 400px;
	}

	.video-container {
		margin: 0px 4% 30px 30px;
		width: auto;
		height: 300px;
	}

	figure figcaption {
		padding: 18px;
	}
	
	.logo-box {
		width: 250px;
	}	
	
	.social-icon {
		padding: 50px 30px 40px 30px;
	}
	
	/* shorten Nav Bar: No need to wraping menu buttons */
	.navbar {
		height: 48px;
	}
}