/* This file is for custom CSS */

#hero-image {
    /* Use "linear-gradient" to add a darken background effect to the image (photographer.jpg). This will make the text easier to read */
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.8)), url("./Images/iss-img.jpg");
  
    /* Set a specific height */
    height: 40vh;
  
    /* Position and center the image to scale nicely on all screens */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    margin-top: 10px;
  }

  
  /* Place text in the middle of the image */
  .hero-text {
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
  }

  /*setting padding for the first <p> below image*/
  .accordion  {
    padding-top: 35px;
  }

  /* setting space between ISS info and footer */
  #infoDiv{
    margin-bottom: 120px;
  }

  /* style for ISS Info heading */
  #iss-info {
    font-weight: 500;
    font-size: 2em;
  }
  /* Top Margin for map */
  #mapDiv {
    margin-top: 35px;
    display: none;
  }

  /* set map to 100% continer width */
  #map {
    width: 100%;
    height: 300px;
  }

  footer {
    display: flex;
    flex-direction: column;
  }

  footer div p {
    margin: 0 auto;
    display:block ;
    padding: 10px;
    color: black;
  }

  /* day and night mode classes */
  
  .dark-mode{
      background-color: #191919;
      color: aliceblue !important;
  }

  .day-mode{
    background-color: #f7f7f7;
    color: black;
  }