/* CORE CSS FOR BUILD BUDDIES */

* {
	box-sizing: border-box; /* APPLIES TO ALL HTML ELEMENTS - Ensures all element total width is a product of itself plus any applied padding */
	-webkit-tap-highlight-color: transparent;
}

/* Set light and dark mode, and create global variables for colours */
:root {
	color-scheme: light dark;
	
	--bg: #ffc;
	--font: #111;
	--font-title: #111;
	--highlight: #880;
	--link: rgba(100, 100, 255, 1.0);
	--link-highlight: #00FFFF;
	--link-lowlight: #066;
	--borders: black;
	--backdrop-glass: rgba(220, 220, 220, 0.7);
	--backdrop-glass1: rgba(128, 185, 255, 0.7);
	--backdrop-herotext: rgba(180, 180, 180, 0.8);
	--backdrop-button: rgba(190, 190, 190, 0.7);
	--backdrop-title: rgba(128, 185, 255, 1.0);
	--backdrop-vid: rgba(128, 185, 255, 0.7);
	--button-active: #0FF;
	--container-bd: #EEE;
	--shadow: rgba(0, 0, 0, 0.8);
	--invert: invert(100%);
	--invert-flip: none;
	--hide-light: none;
	--hide-dark: inline-block;
}

[data-theme="dark"] {  /* Light theme uses blue links, dark theme uses orange) */
	--bg: #113;
	--font: #eee;
	--font-title: #111;
	--highlight: #880;
	--link: rgba(200, 200, 0, 1.0);
	--link-highlight: #FFFF00;
	--link-lowlight: #660;
	--borders: white;
	--backdrop-glass: rgba(40, 40, 40, 0.7);
	--backdrop-glass1: rgba(255, 255, 0, 0.7);
	--backdrop-herotext: rgba(0, 0, 0, 0.8);
	--backdrop-button: rgba(80, 80, 80, 0.7);
	--backdrop-title: rgba(255, 255, 0, 1.0);
	--backdrop-vid: rgba(0, 40, 80, 0.7);
	--button-active: #ff0;
	--container-bd: #111;
	--shadow: rgba(128, 128, 128, 0.8);
	--invert: none;
	--invert-flip: invert(100%);
	--hide-light: inline-block;
	--hide-dark: none;
}

body {
	color: var(--font);
	background-color: var(--bg);
	margin: 0;
	font-size: 1.0em;
	font-family: Arial, Helvetica, sans-serif;
	transition: all 1s ease;
}

a {
	text-decoration: none;											/* Hide underlines on hyperlinks */
	color: var(--link);				/* Set colour of hyperlink text */
	transition: all 0.5s ease;
}

a:hover {
	text-decoration: none;
	color: var(--highlight);	/* Colour of hyperlink text when the mouse is over them */
}

hr {
	width: 100%;
	margin: 15px;
}

h1, h2, h3, h4, h5 {
	display: inline-block;
	margin: 0;

}

img {
	opacity: 100%;
	transition: all 1s ease;
}

button {
	opacity: 100%;
	transition: all 1s ease;
}



/* ###--- ALIGNMENT TOOLS - START ---### */

.pad-screen { 		/* Use this DIV to pad out empty-ish screens so that the footer is at the bottom of the page */
	width: 100%;
	height: 95vh;
	background-color: rgba(0,0,0,0);
}

.clearFloat:after {
	content: "";
	clear: both;
	display: table;
}

.floatRight {
	display: inline-block;
	float: right;
	max-width: 48%;
}

.floatLeft {
	display: inline-block;
	float: left;
	max-width: 48%;
}


/* ###### ALIGNMENT TOOLS - END ###### */



/* ###--- STYLE TOOLS - START ---### */

.container {
	overflow: hidden;
	width: 90%;
	max-width: 1200px;
	border: none;
	border-radius: 10px;
	padding: 10px;
	margin: auto;
	margin-top: 16px;
	margin-bottom: 16px;
	background-color: var(--container-bd);
	box-shadow: 4px 8px 32px var(--shadow);
	z-index: 10;
}

.titleHolder {
	width: 100%;
	margin: 0px auto;
	padding: 8px;
	align-items: center;
	border-radius: 16px;
	color: var(--font-title);
	background-color: var(--backdrop-title);
}

.titleHolder h1,h2,h3,h4,h5 {
	display: inline-block;
    float: left;
}

.hideOnNarrow-block {
    display: block;
}

.hideOnNarrow-inline {
    display: inline-block;
}

/* ###### STYLE TOOLS - END ###### */



/* ###--- NAVBAR STYLING - START ---### */	
#topnav {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-evenly;
	align-items: flex-start;
	height: 50px;
	background-color: var(--backdrop-glass); 
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
	border-bottom: 2px solid var(--backdrop-button);
	position: fixed; /* Make it stick/fixed */
	top: 0; /* Stay on top */
	width: 100%;
	transition: data-theme 0.5s; /* Transition effect */
	box-shadow: 0 8px 32px var(--shadow);
	z-index: 1000;
}

#topnavLogo {
	/* display: flex; */
	flex-basis: 170px;
	padding: 2px 2px; /* top/bottom - right/left */
	margin: 0px;
	transform: translateY(-20px) rotate(-30deg);
	height: 100px;
	text-decoration: none;
	border: none;
}

#topnavCentered {
	float: none;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	vertical-align: center;
	align-self: center;
	padding: 0px;
	margin: auto;
	/* transform: translateY(18px); */
	height: 40px;
	text-decoration: none;
	border: none;
}

.navTextLogo {
	display: inline-block;
	margin: 0;
	padding: 0px;
	height: 40px;
}

#topnav p {
	top: 0;
	overflow: hidden;
}

#topnav-links {
	flex-basis: 170px;
	/* display: block; */
	float: right;
	margin: auto;
	margin-right: 0;
	align-content: center;
	align-self: center;
	height: auto;
}

#topnav-links button {
	float: right;
	width: 150px;
	align-content: center;
	height: auto;
	box-shadow: 0 4px 8px #222;
}

#topnav-links button.menu {
	opacity: 1;
	float: right;
	width: 150px;
	align-content: center;
	height: auto;
	z-index: 1024;
}

#dropdownMenu {
	display: block;
	opacity: 0.5;
	transform: translateY(-500px);
	transition: opacity 1s ease, transform 1s ease;
	z-index: 900;
}

/* ###### NAVBAR STYLING - END ###### */



/* ###--- BUTTON STYLING - START ---### */

.button-bar { /* Use for multiple buttons, where they are the same width and automatically resize or start a new row where required */
	padding: 0;
	vertical-align: middle;
	max-width: 800px;
	z-index: 1010;
}


/* ## GLOWING BUTTONS CSS START ## */
/* 
  Project: CSS Glowing Button
  Created: Sunday, 06 March 2022
  Author: Jamshid Elmi 
  Tutorial: https://youtu.be/b_8fHNIHFk4
*/
/* button styling */
.glow {
  margin: 5px;
  padding: 10px 10px;
  border: none;
  outline: none;
  color: var(--font-title);
  cursor: pointer;
  position: relative;
  z-index: 0;
  border-radius: 32px;
}
.glow::after {
  content: "";
  z-index: -1;
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: var(--backdrop-glass1);
  left: 0;
  top: 0;
  border-radius: 32px;
}
/* glow styling */
.glow::before {
  content: "";
  background: linear-gradient(
    45deg,
    #FF0000, #FF7300, #FFFB00, #48FF00,
    #00FFD5, #002BFF, #FF00C8, #FF0000
  );
  position: absolute;
  top: -2px;
  left: -2px;
  background-size: 600%;
  z-index: -1;
  width: calc(100% + 4px);
  height:  calc(100% + 4px);
  filter: blur(8px);
  animation: glowing 20s linear infinite;
  transition: opacity .3s ease-in-out;
  border-radius: 32px;
  opacity: 0;
}

@keyframes glowing {
  0% {background-position: 0 0;}
  50% {background-position: 400% 0;}
  100% {background-position: 0 0;}
}

/* hover */
.glow:hover::before {
  opacity: 1;
}

.glow:active:after {
  background: transparent;
}

.glow:active {
  color: var(--button-active);
}

/* ## GLOWING BUTTONS CSS END ## */

/* ###### BUTTON STYLING - END ###### */



/* ###--- FOOTER STYLING - START ---### */

#footer { 
	position: flow;
	bottom: 0;
	margin-top: 24px;
	width: 100%;
	left: 0;
	background: var(--backdrop-glass);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	padding: 8px; 
	text-align: center;
	font-size: 1.1em;
	color: var(--dk-font);
	padding-bottom: 8px;
	padding-top: 4px;
	border-top: 2px solid var(--borders);
}

.footerImg {
	max-width: 100%;
	float: right;
}

#footer a { 
	color: var(--font); 
	transition: all 0.5s ease;
}

#footer a:hover {
	color: var(--link); 
	text-shadow: 0px 0px 8px var(--link-highlight);
}

#footer a.active { color: var(--link); }

/* ###### FOOTER STYLING - START ###### */



/* ###--- IMAGE STYLING - START ---### */	

.hero-img {
	position: relative;
	overflow: hidden;
	text-align: center;
	color: white;
	width: 100%;
	top: 0px;
	margin: 0;
	margin-bottom: 16px;
	padding: 0;
	height: 100vh;
	z-index: 1;
	box-shadow: 0 8px 32px var(--shadow);
}

.hero-img img {
	width: 100%;
	height: 100vh;
	z-index: 2;
	object-fit: cover;
}

.hero-text {			/* Centred text for ".hero-image" container.  Must be within the ".hero-image" <div> tags */
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 3rem;
	padding: 16px;
	border: 0px;
	border-radius: 16px;
	color: var(--font);
	background-color: var(--backdrop-herotext);
	z-index: 3;
}
	
.bigimg-container {		/* Container to hold a large image */
	position: relative;
	overflow: hidden;
	text-align: center;
	color: white;
	height: auto;
	width: 100%;
	top: 0px;
	margin: 0 auto;
	padding: 8px;
	z-index: 1;
}

.bigimg-container img {
	height: auto;
	width: 100%;
	opacity: 1.0; 		/* ADJUST WHEN DONE TESTING ##### */
	z-index: 2;
	object-fit: contain;
}

.light-img {
	display: var(--hide-light);
}

.dark-img {
	display: var(--hide-dark);
}

.fade-in {
	position: relative;
	animation: fadeIn ease 1s;
	-webkit-animation: fadeIn ease 1s;
	-moz-animation: fadeIn ease 1s;
	-o-animation: fadeIn ease 1s;
	-ms-animation: fadeIn ease 1s;
}

@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@-moz-keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@-webkit-keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@-o-keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@-ms-keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

/* ###### IMAGE STYLING - END ###### */



/* ###--- YOUTUBE VIDEO STYLING - START ---### */
.ytItemBox {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.ytVid {
	padding: 16px;
	text-align: center;
	font-size: 1.5em;
	flex: 60%;
}

.ytText {
	padding: 16px;
	text-align: left;
	font-size: 1em;
	flex: 40%;
}

iframe {
    aspect-ratio: 16 / 9;
    width: 100% !important;
	box-shadow: 0 8px 16px var(--shadow) inset;
	border-radius: 8px;
}


/* ###### YOUTUBE VIDEO STYLING - END ###### */



/* ###--- THREE COLUMN STYLING - START ---### */
.threeColRow {
	left: 50%;
	transition: translateX(-50%);
	width: 90%;
	max-width: 1100px;
	text-align: left;
	margin: auto;
	opacity: 1;
}

.threeColumn {
	float: left;
	width: 33.33%;
	min-width: 200px;
	padding: 10px;
	opacity: 1;
	align-content: left;
}

.threeColumn.middle {
    width: 33.33%;
    min-width: 200px;
    padding: 10px;
	text-align: center;
	align-content: center;
}


.threeColumn.right {
    width: 33.33%;
    min-width: 200px;
    padding: 10px;
	float: right;
	text-align: right;
	align-content: right;
}

/* ###### THREE COLUMN STYLING - END ###### */



/* ###--- VIDEOS LAYOUT STYLING - START ---### */

/* Sort out order of contents so that when width is reduced the title becomes the first item, then image with description, then price
It is something to do with the flex order that might allow this */


/* ########## CHANGE BELOW TO HAVE TITLE ON TOP, THEN IMAGE, THEN BRIEF DESCRIPTION ######### */
.vid-container {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	align-content: flex-start;
	align-items: stretch;
	gap: 8px;
	max-width: 1200px;
	margin: auto;
	margin-top: 8px;
	margin-bottom: 8px;
	padding-top: 8px;
	padding-bottom: 8px;
}

	.vid-item {
		width: 300px;
		flex-grow: 1;
		flex-shrink: 0;
		border: 1px solid var(--borders);
		border-radius: 8px;
		background-color: var(--backdrop-vid);
		padding: 8px;
	}

		.vid-Title {
			display: block;
			width: 100%;
			float: left;
			padding-bottom: 8px;
			font-size: 1.2rem;
			font-weight: bold;
		}
		
		.vid-Image {
			display: block;
			text-align: center;
			width: 90%;
			max-width: 300px;
			max-height: 300px;	
			margin: auto;
		}

		.vid-Image img {
			max-width: 90%;
			max-height: 300px;
			margin: auto;
		}

		.vid-Desc {
			display: block;
			text-align: justify;
			width: 100%;
			margin: auto;
			padding-top: 8px;
		}



/* ###### DESIGNS LAYOUT STYLING - END ###### */


/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 1900px) {
	.hero-container img { height: auto; }
}

@media screen and (max-width: 800px) {
	button.large { flex: 50%; max-width: 50%; }
	.threeColumn { width: 49%; text-align: left; }
	.threeColumn.middle { width: %49; text-align: right; align-content: right; float: right;}
	.threeColumn.right { width: 100%; float: none; text-align: center; align-content: center;}
    .hideOnNarrow-block { display: none; }
	.hideOnNarrow-inline { display: none; }
	.hero-text { font-size: 1.5rem; padding: 8px; border-radius: 8px; }
	.ytVid { flex: 100%; }
	.ytText { flex: 100%; }
}

/* Responsive layout - makes columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
	button.large { flex: 100%; max-width: 100%; }
	#topnav img { height: 60px; transform: translateY(10px); }
	.threeColumn { width: 100%; text-align: center; align-content: center; }
	.threeColumn.middle { width: 100%; text-align: center; align-content: center; }
	.threeColumn.right { width: 100%; float: none; text-align: center; align-content: center; }
    .hideOnNarrow-block { display: none; }
	.hideOnNarrow-inline { display: none; }
	.dList-Desc p { display: none; }
	.dList-Image { width: 100%; }
	.ytVid { flex: 100%; }
	.ytText { flex: 100%; }

}