@import url('https://fonts.googleapis.com/css2?family=Georama&display=swap');
/* All Pages */
* {
  color: black;
  font-family: 'Georama', sans-serif;
}

.hero-text {
  color: white;
}

.content {
  margin-left: 1rem;
}

p, li, h1, h2 {
  margin-left: 1rem;
}

.centered {
  text-align: center;
}

.padding {
  padding-top: .5rem;
  padding-bottom: .5rem;
}

/* Only shows if user has no JavaScript running */
.javascript {
  background-color: white !important;
  color: white;
  border: 1.5px solid blue;
  outline: 1.5px solid red
}

/* For background color */
.backdrop {
  background-color: black;
}

.backdrop-blue {
  background-color: #0f2f4e;
}

#myImg {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
  max-height: 40rem;
}

.box {
  background: #0f2f4e;  
  text-align: center;
}

/* Style the navbar */
#navbar {
  background: #0f2f4e;
  border: 1px solid white; 
  position: sticky;
}

.menu-options {
  color: white !important;
  margin: 0;
}

/* Navbar links */
#navbar a {
  float: none;
  padding: 14px;
  text-decoration: none;
}

/* The sticky class is added to the navbar with JS when it reaches its scroll position 
Code adapted from https://www.w3schools.com/howto/howto_js_navbar_sticky.asp */
.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

/* Add some top padding to the page content to prevent sudden quick movement 
(as the navigation bar gets a new position at the top of the page (position:fixed and top:0) 
Code adapted from https://www.w3schools.com/howto/howto_js_navbar_sticky.asp  */
.sticky + .content {
  padding-top: 50px;
}

/* The following css is required when the new HTML is loaded via javascript */
#second-section {
  background-color: black;
}

#menu-content {
  background-color: white;
  padding-bottom: 1rem;
}

.menu-text {
  color: white;
}

/* For the project images loaded via javascript */
.project-main-image {
  background: no-repeat center center fixed;
  background-size: cover;
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 75%;
  height: auto;
  margin-top: 1rem;
}

/*, .carousel-indicators. Code copied from the following: - https://stackoverflow.com/questions/46249541/change-arrow-colors-in-bootstraps-carousel 
Used on the individual projects in the Projects page */
.carousel-control-next,
.carousel-control-prev  {
    filter: invert(100%);
}

.container-fluid {
  padding-top: 15px;
}

.field {
  margin-bottom: 1rem;
}

/* For the Contact Us form loaded via javascript */
.submit:hover {
  background-color: white; 
  color: black; 
  border: 2px solid #008CBA;
}

.submit {
  background-color: #008CBA;
  color: white;
  text-align: center;
}

.cancel:hover {
  background-color: white; 
  color: black; 
  border: 2px solid #f44336;
}

.cancel {
  background-color: #f44336;
  color: white;
  text-align: center;
}

#errors {
  background-color: lightcoral;
  margin: 0;
}

#success {
  background-color: lightblue;
  margin: 0;
}

/* For the map at the bottom of the Projects page and Contact Us page */
#map {
  height: 100%;
  width: 100%;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border: 1.5px solid blue;
  outline: 1.5px solid red
}

div#map {
  min-height: 360px;
}

#iframe {
  height: 100%;
  width: 100%;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border: 1.5px solid blue;
  outline: 1.5px solid red
}