@import url("https://use.typekit.net/acs2ygb.css");
          @import url("https://use.typekit.net/acs2ygb.css");

        * {box-sizing: border-box;}
        body {font-family: "magistral", sans-serif;}
        .mySlides {display: none;}
        img {vertical-align: middle;}
        body {text-shadow: 4px 4px 12px #05384c;}

        /* Slideshow container */
        .slideshow-container {
          max-width: 3000px;
          position: fixed;
          margin: auto;
          object-fit: cover;
        }

        /* Caption text */
        .text {
          color: #f2f2f2;
          font-size: 15px;
          padding: 8px 12px;
          position: absolute;
          bottom: 8px;
          width: 100%;
          text-align: center;
        }

        /* Number text (1/3 etc) */
        .numbertext {
          color: #f2f2f2;
          font-size: 12px;
          padding: 8px 12px;
          position: absolute;
          top: 0;
        }

        /* The dots/bullets/indicators */
        .dot {
          height: 15px;
          width: 15px;
          margin: 0 2px;
          background-color: #bbb;
          border-radius: 50%;
          display: inline-block;
          transition: background-color 0.6s ease;
        }

        .active {
          background-color: #717171;
        }

        /* Fading animation */
        .fade {
          animation-name: fade;
          animation-duration: 1.5s;
        }

        @keyframes fade {
          from {opacity: .4}
          to {opacity: 1}
        }

        /* On smaller screens, decrease text size */
        @media only screen and (max-width: 300px) {
          .text {font-size: 11px}
        }
        .dropdown {
          position: relative;
          display: inline-block;
        }

        .dropdown-content {
          display: none;
          position: absolute;
          background-color: #4a56a5;
          min-width: 160px;
          box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
          padding: 12px 16px;
          z-index: 1;
        }

        .dropdown:hover .dropdown-content {
          display: block;
        }
        .p{
          color: #ddd;
        }

        text {
          text-align: right;
        }

        body {
        margin: 0;
        font-family: "magistral", sans-serif;
        background-size: cover;
        background-repeat: no-repeat;
        background-attachment: fixed;
        font-weight: 400;
        font-style: normal;
        font-size: 17px;
        text-align: center;
        background-color: #0F1926;
        color: #fff;
        }

        #earth {
        background-image: url("images/earthheader1.jpeg"); 
        }

        #jupiter {
        background-image: url("images/jupiterheader1.jpeg");
        }

        #mercury {
        background-image: url("images/mercuryheader.jpeg");
        }

        #neptune {
            background-image: url("images/neptuneheader.jpeg");
        }

        #saturn {
            background-image: url("images/saturnheader.jpeg");
        }

        #venus {
            background-image: url("images/jupiterheader.jpeg");
        }

        #mars {
            background-image: url("images/marsheader2.jpeg");
        }

        #uranus {
            background-image: url("images/uranusheader.jpeg");
        }

        #moon {
            background-image: url("images/moonheader.jpeg");
        }
        
        #planets {
          background-image: url("images/planetheader.jpeg");
        }

        #sun {
          background-image: url("images/sunheader.jpeg");
        }

        #galaxy {
          background-image: url("images/galaxyheader.jpeg");
        }

        #moon {
          background-image: url("images/moonheader.jpeg");
        }

        #stars {
          background-image: url("images/starheader.jpeg");
        }
        
        #starformation {
          background-image: url("images/starheader.jpeg");
        }

        #galaxy {
          background-image: url("images/galaxyheader.jpeg");
        }

        #comets {
          background-image: url("images/cometheader.jpeg");
        }

        #meteor {
          background-image: url("images/meteorheader.jpeg");
        }

        main {
            position: relative;
            height: 100vh;
        }

        .overlay {
            position: absolute;
            width: 100%;
            height: 100%;
            z-index: 1;
            padding: 10%;
        }

        .overlay-content {
            width: 100%;
            margin: 0 auto;
            position: relative;
            top: calc(50% - 100px);
            color: #fff;
        }
        h1 {
          font-family: "sofachrome", sans-serif;
          font-weight: 500;
          font-style: normal;
          font-size: 50px;
          text-align: center;
          padding: 77px;
          text-shadow: 4px 4px 12px #05384c;
        }
/*
        nav {
            text-align: center;
            background-color: rgba(15, 25, 38, 0.5);
            background-size: 40px;
            padding: 5px;
            display: inline-block;
            margin: auto;
        } */
        nav {
          text-align: center;
          background-color: rgba(15, 25, 38, 0.5);
          background-size: 40px;
          padding: 5px;
          display: flex;
          margin: auto;
          justify-content: center;
      }
        nav>* {
            padding: 10px 20px;
        }

        nav a {
            text-decoration: none;
            color: #fff;
            margin: 10px;
        }

        nav a:hover{
            background-color: rgba(0,0,0,.3);
            color: rgb(0, 213, 206);
        }

        nav .overlay-content {
            background-color: rgba(15, 25, 38, 0.5);
            background-size: 60px;
            padding: 5px;
            display: inline-block;
            margin: auto;
            width: 100%;
        }

        p {
            width: 480px;
            margin: auto;
            line-height: 1.5;
        }

        .flex-container {
          display: flex;
          flex-wrap: wrap;
          justify-content: center;
        }

        .flex-item {
          background-color: #0F1926;
          /* margin shorthand TOP RIGHT BOTTOM LEFT */
          margin: 0px 10px 20px 10px;
          width: 260px;
        }

        .flex-item img {
          display: block;
          margin: 12px auto;
          border: 4px solid #fff;
        }