style.css

  body {
    font-family: 'Times New Roman', Times, serif;
    margin: 2;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-color: bisque;
  }

  .container {
    display: flex;
    flex-flow: row wrap;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin: 20px auto;
  }

  .contact {
    display: flex;
    flex-flow: row wrap;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin: 20px auto;
    background-color: palegoldenrod;
    transition: background-color 2s 500ms;
  }

  .contact:hover {
    background-color: darkorange;
  }

  .nasa-container {
    max-width: 900px;
    margin: auto;
    padding: 20px;
    border-radius: 10px;
    background-color: #f4f3f3;
    transition: background-color 2s 500ms;
}

.nasa-container:hover {
  background-color: rgb(0, 166, 255);
}


.nasa-content {
    display: flex;
    align-items: center; 
    gap: 20px; 
    justify-content: center;
}

/* Text Styling */
#nasa-explanation {
    flex: 1; /* Take remaining space */
    text-align: left;
    max-width: 400px;
}

  .grid{
    display: grid;
    grid-template-rows: repeat(auto, auto);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem;
    padding: 2rem;
    justify-items: center;
    align-items: center;
  }

  img {
    width: 100%;
    max-width: 300px;  
    height: auto;
    justify-content: center;
  } 

  video {
    width: 100%;
    max-width: 300px; 
    height: auto;
  }

  a:link,
  a:visited {
    color: #7642fb;
  }