/* Smooth scroll behaviour used mainly to help people navigate a large
 * single page with a lot of content. This rule can be removed if the
 * page is split and each single page only shows one unit of content.
 */
html {
  scroll-behavior: smooth;
}

/* Do not add a margin especially above the top menu. */
body {
  margin: 0px;
}

/* Top menu setup.
 * See also the size-dependent customizations later.
 */
#top-menu {
  text-align:   center;
  margin-top:   0px;
  margin-left:  auto;
  margin-right: auto;

  /* This color is chosen based on the color produced in combination
   * between the background picture of the home section and the overlay
   * on top of it.
   *
   * You can either the same, if the top row of the picture has a fixed
   * color, or chose one that shows some clear contrast if not.
   */
  background-color: rgba(85,93,105,1.0);
}

#top-menu h2 {
  margin-top:    0px;
  margin-bottom: 0px;
  padding-top:   38px;
  font-size:     30px;
}

#navbar a {
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
}

/* Content of each section */
.content {
  max-width:    800px;
  margin-left:  auto;
  margin-right: auto;
}

/* Generic customizations for sections depending on the shade of the background */
.sec-dark-bg {
  color: #fff;
}

.sec-light-bg a {
  color: #0B3D91;
}

.sec-light-bg a:visited {
  color: #0B3D91;
}

.sec-light-bg a:active {
  color: #0B3D91;
}

/* Generic font for all text */
.content {
  font-family: 'Open Sans', sans-serif;
}

/* Add an image to signal that the page is external */
.content a:not([href*=".nasa.gov/"])::after {
  content: url('exlink.gif');
  alt: "[*]";
}

/* We prefix li with content to make sure we do not match the lists that define
 * the top-level navigation menu.
 */
.content li {
  margin: 5px 0px;
}

h1 {
  font-family: 'Merriweather', serif;
  font-size: 8vw;
}
@media screen and (min-width: 1200px) {
  h1 {
     font-size: 50px;
  }
}

h2 {
  font-family: 'Merriweather', serif;
  font-size: 6vw;
}
@media screen and (min-width: 1200px) {
  h2 {
     font-size: 40px;
  }
}

/* We assume we operate on a dark background.
 */
a {
  text-decoration: none;
  color: #ffffff;
}

a:visited {
  color: #ffffff;
}

a:active {
  color: #040404;
}

/* We make the hover color !important so that it
 * takes precedence over :visited
 */
a:hover {
  color: #040404 !important;
}

p {
  font-family: 'Open Sans', sans-serif;
}

.notice{
  color:       #0B3D91;
  font-weight: 700;
}

/* Customizations for each section */

/* Sections: Home */
#sec-home {
  background:          linear-gradient(0deg, rgba(141,153,174,.6), rgba(141,153,174,.6)), url(langleyresearch2.jpg);
  background-position: center center;
  background-repeat:   no-repeat;
  background-size:     cover;
  width:               100%;
  margin-left:         auto;
  margin-right:        auto;
  padding:             20px;
}

/* Customize content sections */
#sec-home-content {
  text-align:     center;

  padding-top:    38px;
  padding-bottom: 38px;
}

.notice {
  font-size: 14px;
}

#home-nasa-logo {
  max-width: 300px;
}

/* Sections: anything between home and the footer */
.content:not(#sec-home-content) {
  padding-left:  20px;
  padding-right: 20px;
}

/* Sections: footer */
#sec-footer-content {
  padding-top:    38px;
  padding-bottom: 38px;

  text-align:     center;
}

#footer-nasa-logo {
  max-width: 200px;
}

#sec-schedule td {
  padding: 0.5% 1% 0.5% 1%;
  text-align: center;
}

#sec-schedule .talk {
  text-align: left;
}

#sec-schedule .day {
  padding: 2% 2% 2% 2%;
  font-weight: bold;
}

#sec-schedule .row1 {
  background-color: gainsboro;
}

#sec-schedule .row2 {
  background-color: rgb(238, 238, 238);
}

#sec-schedule .subtitle {
  font-size: 80%;
}

/* Visibility preferences for large screens.
 *
 * We show the menu in a row with all elements present at all times.
 */
@media screen and (min-width: 1200px) {

  /* Show menu in one row when the screen is large */
  #top-menu ul {
    display:         inline-block;
    list-style-type: none;
  }

  #top-menu ul li {
    float: left;
  }

  #top-menu ul li a {
    padding:     0.75em 1em;
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
  }

  /* Hide the menu button when the screen is large */
  #top-menu .close {
    display: none;
  }

  /* Hide the menu button when the screen is large */
  .burger {
    display: none;
  }
}

/* Visibility preferences for small screens.
 *
 * We show the menu separately (as a hamburger menu),
 * and slide it down when the menu button is clicked.
 */
@media screen and (max-width: 1200px) {

  /* Close button and burger icon */
  .burger, .close {

    /* Button visual aspect */
    border:   none;
    cursor:   pointer;

    /* Fixed button size */
    width:    36px;
    height:   36px;

    /* Manually position burger in the top right corner. */
    position: absolute;
    top:      20px;
    right:    20px;
  }

  /* Make the image use the complete button size available. */
  .burger img, .close img {
    width:  100%;
    height: 100%;
  }

  /* Parent of the navigation menu.
   *
   * We use a parent so that it takes up the whole screen and we can
   * reduce the space occupied by the navbar itself (which is an il)
   * while using even spacing between items.
   */
  #navbar-parent {
    /* Make menu appear above other elements */
    z-index:          1000;

    /* Occupy the whole screen */
    position:         absolute;
    top:              0;
    left:             0;
    width:            100%;
    height:           100vh;
    overflow:         hidden;

    /* background-color: #888f9b; */
    background-color: rgba(85,93,105,1.0);

    /* Slide vertically */
    transform:  translateY(-100%);
    transition: transform 0.25s ease;
  }

  .navbar {

    /* No spacing on the left */
    padding-left:    0;

    /* No bullets */
    list-style:      none;

    /* Vertical layout */
    display:         flex;
    flex-flow:       column nowrap;

    /* Horizontal alignment */
    align-items:     center;

    /* Vertical alignment */
    justify-content: space-evenly;
    height:          80%;
  }

  /* Show menu on screen */
  #navbar-parent:target {
    transform: translateY(0);
  }

  /* Improve font visibility in menu */
  #navbar a {
    font-size:   5vw;
    font-weight: 600;
  }
}