* {
  box-sizing: border-box;
}

body{
  margin: 0;
  padding: 0;
  width: 100%;
  font-family: 'Roboto', sans-serif;
  scroll-behavior: smooth;
}

h1 {
  font-size: 55px;
  text-align: center;
  color: white;
 }

h2 {
  font-size: 40px;
  text-align: center;
  color: white;
}

/* Header */
.flex-container  {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: url('images/header-bg.png');
  box-shadow: 0 1px 8px #ddd;
  width: 100%;
  height: 80px;
  position: fixed;
}

/* Navigation */
#logo {
  margin: 0 0 0 1.60em;
  text-decoration: none;
  font-size: 30px;
  font-weight: bold;
  color: white;
}

#logo a {
  color: white;
}

#logo, #nav {
  list-style: none;
}

#logo , #nav a {
  text-decoration: none;
  letter-spacing: .25rem;
}

#nav {
  display: flex;
}

#nav a {
  display: block;
  padding: 1em;
  color: white;
}

#header .icon {
  display: none;
}

#nav a:hover {
  background: #015470;
}

/* Page Elements */
section { 
  width: 100%;
  height: 100%; 
}

.content { 
  margin: 0 auto; 
  width: 70%; 
  display: flex;
}

/* Slides */
#slide1 {
  background:url('images/nightsky.jpg') 50% 0 no-repeat fixed;
  color: black;
  margin: 0;
  padding: 200px 0;
  background-size: cover;
}

#slide2 {
  background-color: rgb(1, 1, 68);
  color: white;
  margin: 0 auto;
  padding: 200px 0;
  display: block;
}

#slide3 {
  background: url('images/sunset.jpg') 50% 0 no-repeat fixed;
  color: white;
  padding: 200px 0;
  background-size: cover;
  display: block;
  background-color: orange;
}

#slide4 {
  background-color: rgb(1, 1, 68);
  color: white;
  padding: 200px 0;
}

#slide5 {
  background-color: rgb(49, 48, 133);
}

.quotes {
  font-family: 'Raleway', sans-serif;
  font-weight: normal;
  font-size: 30px;
  text-align: left;
  margin: 50px auto;
  color: white;
}

.pglogo {
  background-color: grey;
}

/* Google Map */
:root {
  /* Font Color */
  --light-theme: #f8f9fa;
  --dark-theme: #67819b;
  
  /* Circle Width */
  --circle-diameter: 300px;

  /* Font Family */
  --fonts-style-x: 'neuzeit-grotesk', sans-serif;
  --fonts-style-y: 'neuzeit-grotesk', sans-serif;

  /* Font Weight */
  --light: 300;
  --regular: 400;
  --bold: 700;
  --black: 900;
}

/* ------------- */
/* Basic Setting */
/* ------------- */
*, *::before, *::after {
  box-sizing: inherit;
}

.map-effect {
  position: static;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 80%;
  height: 80vh;
  margin: auto;
  min-height: 500px;
  background-color: var(--light-theme);
}

::selection {
  color: #fff;
  background-color: var(--dark-theme);
}

/* ------------- */
/* Content Style */
/* ------------- */
.google-map {
  position: static;
  display: flex;
  justify-content: center;
  align-items: center;
  width: var(--circle-diameter);
  height: var(--circle-diameter);
  overflow: hidden;
  border-radius: var(--circle-diameter);
  background-color: #eee;
  transition: 5000ms;
  cursor: grab;
}

.google-map .map-frame {
  width: 80vw;
  height: 80vh;
  background-color: var(--light-theme);
}

.google-map iframe {
  position: static;
  width: 80vw;
  height: 80vh;
  pointer-events: visibleStroke;
}

/* ------------------ */
/* Interactive Effect */
/* ------------------ */
.google-map:hover {
  width: 80vw;
  height: 80vh;
  border-radius: 0;
}

#footer { 
  background-color: rgb(1, 1, 68);
  color: white; 
  font-family: "Wellfleet"; 
  font-size: 14px; 
  padding: 10px; 
  text-align: center; 
}

/* *********** media queries *********** */
@media all and (max-width: 990px) {
  .flex-container {
    flex-direction: column;
  }
  #logo {
  margin: 0;
  }
  #nav  {
    width: 100%;
    justify-content: space-around;
  }
}


@media screen and (max-width: 600px) {
  .nav-links {
    font-size: 12px;
  }
  .nav-links:hover {
    font-size: 16px;
  }
}