/* CSS Variables: */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

:root {
	 --clr1: #4d90fb;
	 --clr2: gold;
	 --clr3:  red;
}

::-webkit-scrollbar {
	width: 20px;
}

::-webkit-scrollbar-track {
	background: white;
	/*border-radius: 50px;*/
}

::-webkit-scrollbar-thumb {
	background: gold;
	border-radius: 50px;
}

html, body {
	height: 100%;
}

/* navigation CSS */
.navbar-brand {
	margin-left: auto;
	margin-right: auto;
}

.navbar-toggler {
	margin-left: auto;
	margin-right: auto;
}

.navbar {
	background-color: var(--clr1);
	border-bottom: 5px solid gold;
	z-index: 99;
	box-shadow: 0px 15px 10px gray;
}

.navbar h1 {
	color: white;
	font-family: 'Beau Rivage', cursive;
	text-shadow: 0.10em 0.08em 10px black;
} 

.nav-item a:hover {
	color: black;
	text-decoration: underline;
	transition: opacity 0.15s ease-in-out;
}

.dropdown:hover .dropdown-menu {
	display: block;
	margin-top: 0.125em;
  }

/* MAIN CONTENT CSS*/

body {
	background-color: #ffffff;
	background-image: url('sky_transp.png');
	background-attachment: fixed;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

#hd_font {
	font-family: 'Beau Rivage', cursive;
}

/* Population Bar */
.population {
	position: relative;  
	background-color: rgba(77, 144, 251, 0.7);
	font-size: 1.5rem;
	padding-top: 0.5em;
	padding-bottom: 0.2em;
	width: 100%;
}

#population {
	color: white;
	margin: auto;
}

#population em {
	color: white;
	font-weight: 600;
}

.bkgd {
	background-color: rgba(77, 144, 251, 0.7); 
}

/* icons */
#anchor {
	height: 100px;
	margin: auto;
	padding-top: 20px;
}

#ancient::first-letter {
	font-size: 300%;
	font-family: 'Beau Rivage', cursive;
	font-weight: 700;
}

#battle p::first-letter {
	font-size: 300%;
	font-family: 'Beau Rivage', cursive;
	font-weight: 700;
}

.largswide1 {
	clip-path: polygon(0 15%, 100% 0%, 100% 85%, 0% 100%);
	background-repeat: no-repeat;
	background-size: cover;
}

#wheel {
	max-width: 45%;
	margin: auto;
	margin-top: 7em; 
	padding-bottom: 20px;
}

/* The flip box container - set the width and height to whatever you want. 
We have added the border property to demonstrate that the flip itself goes out of the box on hover 
(remove perspective if you don't want the 3D effect 
.flip-box {
  background-color: transparent;
  width: 50%;
  height: 500px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 100px;
  perspective: 1000px; /* Remove this if you don't want the 3D effect 
}

/* This container is needed to position the front and back side 
.flip-box-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container 
.flip-box:hover .flip-box-inner {
  transform: rotateY(180deg);
}

/* Position the front and back side 
.flip-box-front, .flip-box-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari 
}

/* Style the front side 
.flip-box-front {
  /*background-color: #bbb;  /* add image here 
  background-image: url("auberyold1.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  color: black;
}

/* Style the back side 
.flip-box-back {
  background-color: #4d90fb;  /* image here 
  color: white;
  transform: rotateY(180deg);
} */


/*  typewriter effect formatting
#demo {
	font-family: 'courier new';
	font-size: 1.5rem;
	font-weight: 750;
	margin-left: auto;
  	margin-right: auto;
  	margin-bottom: 100px;
	width: 75%;
	text-align: left;
} */

/* Parallax Image 
.bg-image {
	background-image: url("waverley_largs_bg.jpg");
  /* Add the blur effect 
  filter: blur(4px);*/

  /* Center and scale the image nicely 
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
} */

/* CSS for Footer section */
footer #svg {
	z-index: -100;
	margin: 0 auto;
	width: 100vw;
}

footer {
	width: 100%;
	color: white;
	text-align: center;
	position: absolute;
	margin-bottom: 0;
}

footer #below-border {
	background-image: linear-gradient(to right, #002bdcff, #002bdc88, #32ded466, #32ded488);
	padding-top: 25px;
	border-top: 5px solid gold;
	z-index: 1000;
} 

footer #weblink {
	color: white;
	text-decoration: none;
}

footer #weblink:hover {
	color: black;
} 

#footer-menu {
	justify-content: center;
	padding-bottom: 1rem;
}

#footer-menu a {
	color: white;
}

#footer-menu a:hover {
	color: black;
	text-decoration: underline;
	transition: opacity 150ms ease-in-out;
}