/* General styling */
/*
					Variables
					Initialise settings
					Embedded WP Galleries
					Buttons
					Header
					Slider
					Scroll To
					Front page
					Search Options
					Press
					Content Blocks Body  ////////
					Footer
					wysiwyg editor fonts
					Uber & Mobile Menu
					Timeline
					SVG
					Seach Page
					Responsive Video
					Parallax
					Grids
					Hover Blocks
					Cookie
					Accordian
					Progress Circle
					TimeLine (content block)
					Share Icons
					Contact 7 Forms
					Maps
					Plant & Equipment
					Animation
					Company Structure
					FlipBook
					Blog
					Text Editor Elements
					Individual Blocks
*/
/* #################################################################### */
/* ########################## PARALLAX TEST ############################ */
/* #################################################################### */


/* #################################################################### */
/* ########################## Main Body    ############################ */
/* #################################################################### */
:root {

	color-scheme: light dark;
	/* Essential for light-dark() to work */

	/* Rory's colour scheme  */
	--s-grey: #f2d9de;
	--navbar-background: #111111;
	--navbar-height: 8vh;
	--navbar-img-height: 9vh;
	/* --navbar-img-height: calc(var(var(--navbar-height)) - 10%); */
	--slatebackground: #3c4652;
	--slatedarkblue: #3C3F52;
	--slatedarkgreen: #3C5250;
	--slatesteelgrey: #403C52;
	--charcoal: #36454F;
	--charcoal-xp: #36454FE6;

	/* These are for dark mode (e.g. dark backgrounds, light text) */
	--d-rory-primary-text-emphasis: #ffffff;
	--d-rory-primary-bg-subtle: linen;
	--d-rory-primary-text-default: #ffffff;
	--d-rory-default-background-color: darkslategrey;
	--dt-rory-default-background-color: red;
	--d-rory-background-color2: lightslategrey;
	--d-rory-background-color3: midnightblue;
	--d-rory-background-color4: navy;
	--d-rory-background-color5: slategrey;

	/* These are for light mode (e.g. light backgrounds, dark text) */
	--l-rory-primary-text-emphasis: midnightblue;
	--l-rory-primary-bg-subtle: lightseagreen;
	--l-rory-primary-text-default: darkslategrey;
	--l-rory-default-background-color: linen;
	--l-rory-background-color2: antiquewhite;
	--l-rory-background-color3: snow;
	--l-rory-background-color4: whitesmoke;
	--l-rory-background-color5: papayawhip;


	/* ################################ RORY SETTINGS  */

	/* LIGHT Colour Scheme Option #1*/
	--s-rory-primary-text-emphasis: #9a8f97;
	--s-rory-primary-bg-subtle: #c3baba;
	--s-rory-primary-text-default: #736f72;
	--s-rory-light-background-colour: #e9e3e6;
	--s-rory-background-colour-2: #b2b2b2;

	/* DARK1 Colour Scheme Option #2*/
	--t-rory-primary-text-emphasis: #D5a021;
	--t-rory-primary-bg-subtle: #a49694;
	--t-rory-primary-text-default: #Ede7d9;
	--t-rory-default-background-colour: #4b4237;
	--t-rory-background-colour-2: #736b60;

	/*Colour Scheme Option #3*/
	--u-rory-primary-text-emphasis: #447604;
	--u-rory-primary-bg-subtle: #6cc551;
	--u-rory-primary-text-default: #9ffcdf;
	--u-rory-default-background-colour: #52ad9c;
	--u-rory-background-colour-2: #47624f;

	/* DARK2 Colour Scheme Option #4*/
	--v-rory-primary-text-emphasis: #415a77;
	--v-rory-primary-bg-subtle: #1b263b;
	--v-rory-primary-text-default: #e0e1dd;
	--v-rory-default-background-colour: #0d1b2a;
	--v-rory-background-colour-2: #778da9;

	/*Colour Scheme Option #5*/
	--w-rory-primary-text-emphasis: #4ecdc4;
	--w-rory-primary-bg-subtle: #ff6b6b;
	--w-rory-primary-text-default: #ffffff;
	;
	--w-rory-default-background-colour: #292f36;
	--w-rory-background-colour-2: #ffffff;

	/*Colour Scheme Option #6*/
	--x-rory-primary-text-emphasis: #eb5e55;
	--x-rory-primary-bg-subtle: #c6d8d3;
	--x-rory-primary-text-default: #3a3335;
	--x-rory-default-background-colour: #Fdf0d5;
	--x-rory-background-colour-2: #d81e5b;

	/*Colour Scheme Option #7*/
	--y-rory-primary-text-emphasis: #eb5e55;
	--y-rory-primary-bg-subtle: #c6d8d3;
	--y-rory-primary-text-default: #3a3335;
	--y-rory-default-background-colour: #Fdf0d5;
	--y-rory-background-colour-2: #d81e5b;

}

/* welcome section, section 2, 3 and 4 */
/* Grouped into heading, and section 3
Section 2 and 4 */

/* Standard Styling Elements */
/* start with a dark setting by default */
body {
	/* background: light-dark(navy, var(--charcoal)); */
	/* color: light-dark(var(--charcoal), linen); */
	font: 18px aptos, sans-serif;
	line-height: 1.2em;
	-webkit-font-smoothing: antialiased;
	font-weight: 400;
	margin: 0;
	margin-top: calc(var(--navbar-height));
	padding: 0;
}

/* These turn on at specific media breakpoints */
.large, .medium, .mysmall, .xtrasmall {
	display: none;
}

#gohomediv {
	text-align: center;
}

#returnarrow {
	border: 2px solid rgb(101, 221, 161);
	/* Define your border style */
	border-radius: 50%;
	/* Makes the border perfectly round */
}

.eightypercent {
	height: 100vh;
	background-image: url('../img/matrix.webp');
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	object-fit: cover;

	/* background-attachment: scroll; */

	h1 {
		padding-top: 10vh;
		font-size: 5rem;
		font-weight: 700;
		text-transform: uppercase;
		color: white;
	}

	h2 {
		font-size: 4rem;
		font-weight: 500;
		color: palegreen;
	}

	h3 {
		font-size: 3rem;
		font-weight: 300;
		color: goldenrod;
	}

	h1, h2, h3 {
		text-align: center;
	}
}

.errorstats {
	text-align: left;
	;
}

/* CV styling section  */
/* Elements below are part of responsive CV */
#introducing {
	color: wheat !important;
	font-size: 3rem;
	font-weight: 800;
}

.contactinfo-a {
	text-decoration: none;
}

.skillstable.card {
	font-size: 0.7rem;
}

#employment, #myskills, #mytitles, #mydesign, #myexperience {
	color: var(--charcoal);
}

.skilltable-text {
	color: wheat;
	font-size: 0.8rem;
}

.cv-responsive-container {}

#readcv, #downloadcv {
	text-decoration: none;
	color: linen;
	font-size: 0.7rem;
}

.referee-info {
	font-size: 0.8rem;

	b {
		color: gold;
	}
}

.heading-wrapper {
	background-color: lightgrey !important;
}

.cv-container {
	background-color: var(--charcoal) !important;
	color: linen !important;

	p {
		color: linen;
	}

	.cv-h2 {
		color: blue;
	}

	/* background-color: linen; */
	/* h1, h2, h3, p {
		color: darkgoldenrod;
	} */
	.card-text {
		color: linen;
	}

	.card-body {
		color: linen;
	}

	/* color: var(--charcoal); */
	h1 {
		color: white;
	}

	h2 {
		color: linen;
	}

	.addressheader {
		text-align: right;
	}

	.address {
		text-align: right;
		font-size: 0.8rem;
		/* display: inline-block;
		vertical-align: middle; */
	}

	.nobullet-list {
		list-style-type: none;
	}
}

/* Change the box colour shadow to white if dark mode selected */
.roryphotos {
	/* height: 100%;
	width: auto; */
	max-width: 80% !important;
	max-height: 200px;
	border-radius: 50%;
	border-width: 5px;
	border-style: solid;
	border-color: green;
	box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
	display: flex;
	justify-content: center;
	/* Centers horizontally */
	align-items: center;
	/* Centers vertically */
}

#myphoto {
	display: flex;
	justify-content: center;
	/* Centers horizontally */
	align-items: center;
	/* Centers vertically */
}


/* end of CV styling */

.noaccess403 {
	height: 100vh;
	background-image: url('../img/noaccess.webp');
	background-color: grey;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	object-fit: cover;

	/* background-attachment: scroll; */
	h1 {
		padding-top: 10vh;
		font-size: 4rem;
		font-weight: 700;
		text-transform: uppercase;
		color: white;
	}

	h2 {
		font-size: 3rem;
		font-weight: 500;
		color: palegreen;
		background-color: var(--charcoal-xp)
	}

	h3 {
		font-size: 2rem;
		font-weight: 300;
		color: rgb(235, 47, 63);
		background-color: var(--charcoal-xp)
	}

	h1, h2, h3 {
		text-align: center;
	}
}


/* Colour changing themes start */
/* these light-dark options only work for the windows settings, not for the document bs-data-theme */


/* These colours override the the 'user-prefers' settings that are set for the system.
We do NOT want to use light-dark, as this conflicts with the in-system settings here. */

/* ######################### DARK ####################### */
[data-bs-theme="dark"] {

	/* Set the background and foreground default, and the background and foreground secondary */
	/* Light text used for dark theme */
	/* ######################### DARK ####################### */
	.welcome-section, .section-3 {
		background-color: var(--charcoal);
		color: antiquewhite;
	}

	h2.opening-slideshow {
		color: antiquewhite;
	}

	/* ######################### DARK ####################### */
	.section-2, .section-4 {
		background-color: #363D4F;
		/* color: var(--t-rory-primary-text-default); */
		color: antiquewhite;
	}

	.contactinfo-icon {
		color: white;
	}

	.contactinfo-icon:hover {
		color: yellow;
	}

	/* You can override other specific text-related CSS variables here */
	#moonicon {
		color: silver;
		text-shadow: 0 0 10px rgb(196, 240, 76),
			0 0 20px rgba(5, 160, 75, 0.7),
			0 0 30px rgba(78, 211, 149, 0.5);
	}

	.welcome-section, .section-3 {
		/* background-color: var(--t-rory-default-background-colour);
			color: linen; */

		p {
			/* color: var(--v-rory-primary-text-default); */
		}

		h1, h2, h4, p, li {
			/* color: var(--v-rory-primary-bg-subtle); */
		}
	}

	.footer {
		background-color: black;
	}

	#me {
		color: antiquewhite;
	}

	#myrole {
		color: grey;
	}

	#aboutme {
		color: antiquewhite;
	}

	.eightypercent {
		height: 100vh;

		h1 {
			padding-top: 10vh;
			font-weight: 700;
			text-transform: uppercase;
			color: white;
		}

		h2 {
			color: palegreen;
		}

		h3 {
			color: goldenrod;
		}

		h1, h2, h3 {
			text-align: center;
		}
	}

	.noaccess403 {
		height: 100vh;
		background-image: url('../img/noaccess.webp');
		background-color: grey;
		background-position: center center;
		background-repeat: no-repeat;
		background-size: cover;
		object-fit: cover;

		/* background-attachment: scroll; */
		h1 {
			padding-top: 10vh;
			font-size: 4rem;
			font-weight: 700;
			text-transform: uppercase;
			color: white;
		}

		h2 {
			font-size: 3rem;
			font-weight: 500;
			color: palegreen;
			background-color: var(--charcoal-xp)
		}

		h3 {
			font-size: 2rem;
			font-weight: 300;
			color: rgb(235, 47, 63);
			background-color: var(--charcoal-xp)
		}

		h1, h2, h3 {
			text-align: center;
		}
	}
}

/* Color Theme Settings */
[data-bs-theme="light"] {

	/* ######################### LIGHT ####################### */
	.welcome-section, .section-3 {
		background-color: #dadada;
		color: darkgrey;
	}

	.noaccess403 {
		height: 100vh;
		background-image: url('../img/noaccess.webp');
		background-color: linen;
		background-position: center center;
		background-repeat: no-repeat;
		background-size: cover;
		object-fit: cover;

		/* background-attachment: scroll; */

		h1 {
			padding-top: 10vh;
			text-transform: uppercase;
			color: black;
		}

		h2 {
			color: palegreen;
			background-color: var(--charcoal-xp)
		}

		h3 {
			color: rgb(235, 47, 63);
			background-color: var(--charcoal-xp)
		}

		h1, h2, h3 {
			text-align: center;
		}
	}

	.eightypercent {
		h1 {
			padding-top: 10vh;
			font-weight: 700;
			text-transform: uppercase;
			color: white;
		}

		h2 {
			font-size: 4rem;
			color: palegreen;
		}

		h3 {
			font-size: 3rem;
			color: goldenrod;
		}

		h1, h2, h3 {
			text-align: center;
		}
	}


	.navbar {
		/* background-color: linen !important; */
	}

	/* ######################### LIGHT ####################### */
	.section-2, .section-4 {
		background-color: #b4b4b4;
		/* color: var(--t-rory-primary-text-default); */
		color: #222222;
	}

	/* ######################### LIGHT ####################### */
	#moonicon {
		color: grey;
		text-shadow: none;
	}

	/* Adjust primary color for light theme if needed */
	.rorysopening {
		p {
			color: linen !;
		}
	}

	input::placeholder {
		opacity: 0.5;
		color: var(--charcoal);
	}

	#aboutrory {
		p {
			color: linen;
		}

		li {
			color: linen;
		}
	}

	.welcome-section {
		/* background-color: linen; */

		h1, h2, h4, p {
			color: rgb(78, 77, 77);
		}

		#me {
			color: rgb(90, 90, 90);
		}

		#myrole {
			color: var(--charcoal);
		}

		h1, h2, h4, p, li {
			color: black;
		}

		h3 {
			color: linen;
		}
	}

	h1, h2, h4, p, li {
		color: var(--charcoal);
	}

	.card-text {
		color: var(--charcoal);

		p {
			color: rgb(12, 1, 1);
		}
	}

	.card-title {
		color: navy;
		font-weight: 800;
	}

	h2.opening-slideshow {
		color: rgb(43, 34, 34);
	}

	#me {
		color: linen;
	}

	#myrole {
		color: linen;
	}

	h3 {
		color: azure;
	}

	.text-primary {
		color: rgb(43, 34, 34);
		/* Ensure the primary color is applied */
		--bs-text-opacity: 0.8;
		/* Adjust opacity if desired */
	}

	.footer {
		background-color: darkgrey;

		#signoff {
			color: white;
		}
	}

	/* CV Section LIGHT MODE */

	.referee-info {
		b {
			/* color: skyblue;
			color: #06402B; */
			color: #4f7942;
		}
	}

	.contactinfo-icon {
		color: var(--charcoal);
	}

	.contactinfo-icon:hover {
		color: rgb(29, 155, 12);
	}

	#introducing {
		color: black !important;
	}

	.heading-wrapper {
		background-color: grey !important;
		color: lightblue !important;
	}

	#employment, #myskills, #mytitles, #mydesign, #myexperience {
		color: powderblue;
	}

	.cv-container {
		background-color: linen !important;
		/* background-color:white !important; */

		color: var(--charcoal) !important;

		p {
			color: var(--charcoal);
		}


		h1, h2, h3, p {
			color: navy;
		}

		.card-text {
			color: var(--charcoal);
		}

		.card-body {
			color: var(--charcoal);
		}

		/* color: var(--charcoal); */
		h1 {
			color: var(--charcoal);
		}

		h2 {
			color: var(--charcoal);
		}

		.addressheader {
			text-align: right;
		}

		.address {
			text-align: right;
			font-size: 0.8rem;
			/* display: inline-block;
		vertical-align: middle; */
		}

		.nobullet-list {
			list-style-type: none;
		}
	}
}

/* Styles for light mode */
@media (data-bs-theme: light) and (data-bs-theme: light) {
	body {
		/* background-color: #000000; */
		/* Black background */
		/* color: linen; */
		/* White text */
	}
}

/* ########################## COLOUR ENDS ############################ */
/* Colour changing themes end */

html {
	scroll-behavior: smooth;
}

/* Page 1 styling */
.heading-section {
	padding-top: 5vh;
}

.section-1, .section-2, .section-3, .section-4 {
	scroll-margin-top: var(--navbar-height);
	/* padding-top: var(--navbar-height); */
	padding-top: 2vh;
	/* scroll-padding-top: 50px; */
	/* Adds 50px of padding at the top of the scrollport */
}

#employment, #titles, #skills, #design {
	scroll-margin-top: var(--navbar-height);
	/* padding-top: var(--navbar-height); */
	/* padding-top: 2vh; */
	/* scroll-padding-top: 50px; */
	/* Adds 50px of padding at the top of the scrollport */
}


.engineimages {
	/* max-width: 100%; */
	/* height: 100px; */
	width: auto;
	max-width: 80%;
	height: 80%;
}

#myvideo {
	width: 50%;
}

.imagerow.col img {
	align-items: center;
	justify-content: center;
}

.threeimages {
	justify-content: center;
	display: flex;
}

#me {
	font-weight: 700;
	font-size: 4rem;
	text-align: center;
	font-stretch: expanded;
	letter-spacing: 3.5px;
	text-transform: uppercase;
}

#myrole {
	font-weight: 200;
	font-size: 3.5rem;
	text-align: center;
	letter-spacing: 2.5px;
}

h2 {
	font-weight: 600;
	font-size: 1.4rem;
	text-align: left;
}

.carousel-control-prev-icon {
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23ff0000' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E");
}

.carousel-control-next-icon {
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23ff0000' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E");
}

.carousel-control-prev-icon, .carousel-control-next-icon {
	height: 50px;
	width: 50px;
	outline: black;
	background-color: rgba(0, 0, 0, 0.5);
	background-size: 100%, 100%;
	border-radius: 50%;
	position: absolute;
	/* Allows for precise placement */
	top: 50%;
	/* Vertically centers the arrows */
	transform: translateY(-50%);
	/* Adjusts for the arrow's own height to perfectly center */

	/* border: 1px solid black; */
}

/* Inverts the colors */
/* .carousel-control-prev-icon,
.carousel-control-next-icon {
	filter: invert(1);
} */

.carousel-control-prev {
	left: -7vw
		/* left: -100px; */
		/* Adjust as needed for left positioning */
		/* right: 3vw; */
		/* Ensure it's not also positioned from the right */
}

.carousel-control-next {
	/* right: -100px; */
	right: -7vw
		/* Adjust as needed for right positioning */
		/* left: auto; */
		/* Ensure it's not also positioned from the left */
}

.carousel-caption {
	/* position: absolute; */
	/* z-index: 1; */
	/* display: table; */
	/* width: 100%;
	height: 100%; */

	h1 {
		color: black;
		text-align: center;
		background-color: rgb(247, 244, 244, 0.9);
		border-radius: 20px;
		box-shadow: 0 5px 10px 0 rgba(141, 138, 132, 0.5);
	}

	p {
		text-align: left;
		color: white;
		background-color: darkslategray;
		font-weight: 400;
		padding: 5%;
		border-radius: 20px;
	}
}

.carousel-inner {
	li {
		text-align: left !important;
		font-weight: 600;
	}
}

#aboutme {
	font-weight: 500;
	text-align: center;
	text-transform: uppercase;
	font-size: 2rem;
}

.opening-slideshow {
	font-weight: 400 bold;
	text-align: center;
}

.carousel-item img {
	border-radius: 5%;
	border: 1px solid #b6b5b5;
	box-shadow: 0 0 5px rgba(2, 94, 29, 0.5);
	/* Smooth transition for the glow effect */
	/* transition: box-shadow 0.3s ease-in-out; */
}

.footer {
	text-align: center;
	font-weight: 400;
	font-size: .7rem;
}

.half-width {
	width: 60%;
	text-align: center;
	margin: 0 auto;
	height: 15px;
	border: none;
	/* Remove default border */
	border-top: 2px solid rgb(255, 255, 255);
	/* Set thickness, style, and color */
}

toggle-lightness .toggle-container {
	display: flex;
	align-items: center;
	position: relative;
	vertical-align: middle;
	width: 60px;
	height: 30px;
	/* Vertically aligns icons and switch */
	gap: 5px;
	/* Provides space between the items */
}

.toggle-lightness {
	margin-bottom: 3px;
}

/* Styling for the toggle  */
/* Custom toggle switch styling (basic example) */

.RivalStars-Slideshow {
	width: 80%;
}

/* Navbar links */

/* Navbar Styling Elements */

.navbar-collapse, .form-check {
	vertical-align: top;
}

.logoimg img {
	/* max-width: 15%; */
	height: var(--navbar-img-height);
}

.navbar {
	position: fixed;
	top: 0;
	width: 100vw;
	transition: top 0.3s;
	min-width: 354px;
	z-index: 100;
	background-color: var(--navbar-background);
	height: var(--navbar-height);
}

.navbar a {
	float: left;
	/* text-align: center; */
	/* padding: 10px; */
	color: rgb(239, 255, 233);
	text-decoration: none;
	/* Font size for the navbar link text */
	font-size: .8rem;
	font-weight: 600;
}

/* Navbar links on mouse-over */
.navbar a:hover {
	/* background-color: #888888; */
	text-decoration: underline;
	text-underline-offset: 7px;
	text-decoration-color: var(--s-green);
	text-decoration-thickness: 3px;
}

.nav-link .active {
	color: var(--s-green);
	/* font-size: 1.5em; */
	/* font-size: transform: scale(1.6); */
}

.navbar .active i {
	/* The line below puts a line under the FontAwesome icon in the navbar, not something I need */
	/* text-decoration: underline; */
	text-underline-offset: 7px;
	/* text-decoration-color: white; */
	text-decoration-color: var(--p-yellow);
	text-decoration-thickness: 5px;
	color: var(--p-yellow);
}

#moonicon {
	padding-top: 4px;
}

/* Footer */
.social-media {
	text-decoration: none;
	padding-top: 0;

	a {
		text-decoration: none;
		color: white;
	}
}


/* Contact Form Styling  */
#myForm {
	/* background-color: lightblue; */
	margin-left: 10px;
}

.form-elements input, textarea {
	background-color: #f0f0f0;
	/* Light gray background */
	color: #333;
	/* Dark gray text */
}

#checkboxes label {
	float: left;
}

#checkboxes ul {
	margin: 0;
	list-style: none;
	float: left;
}

.form-row {
	display: flex;
	flex-wrap: wrap;
	/* Allows columns to wrap on smaller screens */
	margin-bottom: 15px;
	gap: 20px;
	/* Spacing between columns */
}

.form-column {
	flex: 1;
	/* Allows columns to grow and shrink */
	min-width: 200px;
	/* Minimum width for columns before wrapping */
}

.form-row.full-width {
	display: block;
	/* For single-column elements like subject and message */
}

.contact-form label {
	display: block;
	margin-bottom: 5px;
	font-weight: bold;
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form textarea {
	width: 100%;
	padding: 10px;
	border: 3px solid #ddd;
	border-radius: 4px;
	box-sizing: border-box;
	/* Include padding and border in element's total width */
}

.contact-form textarea {
	resize: vertical;
	/* Allow vertical resizing of textarea */
}


#joinin {
	background-color: #007bff;
	color: white;
	padding: 5px 10px;
	border: none;
	border-radius: 7px;
	cursor: pointer;
	font-size: 1rem;
	text-decoration: none;
}

#joinin:hover {
	background-color: green;
}

.contact-form button {
	background-color: #007bff;
	color: white;
	padding: 5px 10px;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	font-size: 1rem;
}

#submitForm {
	float: left;
}

/* Changes when viewport changes  */
@media screen and (max-width: 768px) {
	.cv-container {
		.addressheader {
			text-align: center;
		}

		.address {
			text-align: center;
			font-size: 0.8rem;
		}
	}

	.contactinfo-icon {
		font-size: 150%;
	}

	.engineimages {
		/* max-width: 100%; */
		/* height: 100px; */
		width: 30%;
		height: auto;
	}

	.medium {
		display: block;
		background-color: gold;
		color: black;
		font-size: 1rem;
	}

	/* reset the height of the sections, as it doesn't like 100vh on mobile */
	.container {
		display: flex;
		flex-direction: column;
		/* or grid properties */
	}

	#social {
		font-size: 0.7rem;
	}

	.noaccess403 {
		height: 100vh;
		background-image: url('../img/noaccess.webp');
		background-color: grey;
		background-position: center center;
		background-repeat: no-repeat;
		background-size: cover;
		object-fit: cover;

		/* background-attachment: scroll; */
		h1 {
			padding-top: 10vh;
			font-size: 1rem;
			font-weight: 700;
			text-transform: uppercase;
			color: white;
		}

		h2 {
			font-size: 0.8rem;
			font-weight: 500;
			color: palegreen;
			background-color: var(--charcoal-xp)
		}

		h3 {
			font-size: 0.7rem;
			font-weight: 300;
			color: rgb(235, 47, 63);
			background-color: var(--charcoal-xp)
		}

		h1, h2, h3 {
			text-align: center;
		}
	}


	.eightypercent {
		height: 100vh;
		background-image: url('../img/matrix.webp');
		background-position: center center;
		background-repeat: no-repeat;
		background-size: cover;
		object-fit: cover;
		background-attachment: scroll;

		h1 {
			padding-top: 1vh;
			font-size: 1rem;
			font-weight: 500;
			text-transform: uppercase;
			color: white;
		}

		h2 {
			font-size: 0.9rem;
			font-weight: 400;
			color: palegreen;
		}

		h3 {
			font-size: 0.8rem;
			font-weight: 300;
			color: goldenrod;
		}

		h1, h2, h3 {
			text-align: center;
		}
	}

	.carousel-caption {

		/* width: 100%; */
		h1 {
			font-size: 0.8rem;
			font-weight: 500;
			line-height: 1em;
		}

		p {
			font-size: 0.6rem;
			font-weight: 300;
			opacity: 0.9;
			line-height: 0.9em;
		}
	}

	#aboutme {
		font-size: 1.2rem;
	}

	.section-1, .section-2, .section-3, .section-4 {
		/* scroll-padding-top: var(--navbar-height); */
		padding-top: 10px;
		margin-bottom: 0;

		/* scroll-padding-top: 50px; */
		/* Adds 50px of padding at the top of the scrollport */
	}

	.section-1, .section-2, .section-3, .section-4, .welcome-section {
		/* scroll-padding-top: var(--navbar-height); */
		height: auto;
		/* padding-bottom: 30px; */
		/* scroll-padding-top: 50px; */
		/* Adds 50px of padding at the top of the scrollport */
	}

	.carousel-control-prev-icon, .carousel-control-next-icon {
		height: 25px;
		width: 25px;
	}

	.logoimg img {
		display: none;
	}

	.navbar {
		display: flex;
	}

	/* Page 1 styling */
	.heading-section {
		padding-top: 3vh;
	}

	#me {
		font-weight: 700;
		font-size: 2rem;
		text-align: center;
		font-stretch: expanded;
		letter-spacing: 1px;
		text-transform: uppercase;
	}

	#myrole {
		font-weight: 200;
		font-size: 1.5rem;
		text-align: center;
		letter-spacing: 1px;
	}

	h2 {
		font-weight: 600;
		font-size: 1rem;
		text-align: left;
	}

	p, li {
		font-size: 0.8rem;
	}

}

/* Responsive adjustments for smaller screens */
@media (max-width: 600px) {

	.mysmall {
		display: block;
		background-color: goldenrod;
		color: black;
		font-size: 0.9rem;
	}

	.form-row {
		flex-direction: column;
		/* Stack columns vertically on small screens */
		gap: 1px;
		/* Remove gap when stacking */
	}

	.carousel-indicators {
		display: none;
	}

	.form-column {
		margin-bottom: 15px;
		/* Add spacing between stacked fields */
	}

	.eightypercent {
		h1 {
			padding-top: 10vh;
			font-size: 3rem;
			font-weight: 700;
			text-transform: uppercase;
			color: white;
		}

		h2 {
			font-size: 2rem;
			color: palegreen;
		}

		h3 {
			font-size: 1rem;
			color: goldenrod;
		}

		h1, h2, h3 {
			text-align: center;
		}
	}

}

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

	/* The div displays at all resolutions, and only applies the characteristics below at 1025 and up */
	.vlarge {
		display: block;
		background-color: linen;
		color: black;
		font-size: 1.5rem;
	}
}

@media screen and (max-width: 992px) {

	.engineimages {
		/* max-width: 100%; */
		/* height: 100px; */
		width: 45%;
		height: auto;
	}
}

@media screen and (max-width: 1024px) {

	.large {
		display: block;
		background-color: linen;
		color: black;
		font-size: 1.3rem;
	}

	.engineimages {
		/* max-width: 100%; */
		/* height: 100px; */
		width: 60%;
		height: auto;
	}
}

@media only screen and (max-width: 375px) {

	/* .xtrasmall {
		display: block;
		background-color: magenta;
	} */
}

@media only screen and (max-width: 375px) {

	.xtrasmall {
		display: block;
		background-color: yellow;
		color: black;
		font-size: 0.7rem;
	}

	.carousel-caption {
		position: sticky;
	}

	.carousel-indicators {
		display: none;
	}

	.section-2 {
		padding-bottom: 0 !important;
	}

	.footer {
		padding-bottom: 0;
		margin-bottom: 0;
		line-height: 1em;

		p {
			margin-bottom: 0 !important;
			padding-bottom: 0 !important;
		}
	}

	button.navbar-toggler.collapsed {
		padding-top: 0 !important;
		margin-top: 0 !important;
	}

	.navbar-toggler {
		padding: 0 !important;
	}

	.navbar-toggler-icon {

		transform: scale(0.5);
	}

	.noaccess403 {
		height: 100vh;
		background-image: url('/img/noaccess.webp');
		background-color: grey;
		background-position: center center;
		background-repeat: no-repeat;
		background-size: cover;
		object-fit: cover;

		/* background-attachment: scroll; */

		h1 {
			padding-top: 1vh;
			font-size: 2rem !important;
			font-weight: 500;
			text-transform: uppercase;
			color: yellow !important;
		}

		h2 {
			font-size: 1rem !important;
			font-weight: 400;
			color: palegreen;
			background-color: var(--charcoal-xp)
		}

		h3 {
			font-size: .8rem !important;
			font-weight: 300;
			color: rgb(235, 47, 63);
			background-color: var(--charcoal-xp)
		}

		h1, h2, h3 {
			text-align: center;
		}
	}


	.eightypercent {
		background-attachment: scroll;

		a, #returnarrow {
			text-align: center;
		}

		h1 {
			padding-top: 10vh;
			font-size: 1rem;
			font-weight: 700;
			text-transform: uppercase;
			color: white;
		}

		#banner-h2 {
			font-size: 0.9rem;
			color: palegreen;
		}

		#banner-h3 {
			font-size: 0.8rem;
			color: goldenrod;
		}

		h1, h2, h3 {
			text-align: center;
		}
	}
}

/* Footer Stuff */
#signoff {
	font-size: 0.6rem;
	margin-bottom: 0 important !;
}

#social {
	font-size: 0.6rem;
	padding-top: 0 important !;
	padding-bottom: 0 important !;
}

.successH1 {
	font-size: 6rem;
	font-weight: 800;
	padding: 4vh;

}

.successH2 {
	font-size: 3rem;
	padding: 3vh;
	line-height: 3rem;
}

.success-block {
	background-color: rgb(40, 68, 68, 0.9);
	border-radius: 10px;
}

.failure-block {
	background-color: rgb(25, 32, 32, 0.9);
}

.successH1, .successH2 {
	color: rgb(236, 233, 229);
}

.parallax-section {
	height: 100vh;
	/* Full viewport height */
	display: flex;
	flex-flow: column wrap;
	justify-content: center;
	align-items: center;
	text-align: center;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	background-attachment: fixed;
	padding: 0px;
	/* min-width: 360px; */
	/* overflow:hidden; */
}

.parallax-bg-git {
	background-image: url('../img/getintouch.webp');
	background-attachment: fixed;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}

.parallax-bg-sad {
	background-image: url('../img/sadface.webp');
	background-attachment: fixed;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}