body {
  background-image: url(bliss-1921.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  position: static;
  background-attachment: fixed;
  display: grid;
  align-content: center;
  justify-content: center;
  height: 95lvh;
}

.question {
  font-weight: bold;
  color: deeppink;
  font-family: Times, serif;
}

.msn-box {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  width: 800px;
  height: 600px;
  border: solid rgba(255, 255, 255, 0.5) 12px;
}

.msn-header {
  grid-column: auto / span 12;
  background-color: rgba(255, 255, 255, 0.5);
  padding: 0px 0px 0px 15px;
}

.msn-nav {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-column: auto / span 12;
  background-color: cornflowerblue;
}

.msn-nav-item {
  grid-column: auto / span 2;
  color: white;
  text-align: center;
  border-right: solid darkblue 1px;
    & a {text-decoration: none; color: white;}
}

.msn-nav-item:hover {background-color: darkblue;}


.msn-body-content {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-column: auto / span 12;
  background-image: url(aero-light-blue-3.jpg);
  background-size: cover;
  overflow: hidden;
}
  
.msn-profile-photo {
  grid-column: auto / span 3;
    & img {
    width: 100%;
    border: solid white 2px;
    border-radius: 7px;
    margin: 10px;
    }
}

.msn-bio-text {
  grid-column: auto / span 9;
  padding: 0px 10px 0px 10px;
  margin: 0px 20px 0px 20px;
  overflow: scroll;
  scrollbar-width: none;
}


  
summary {
  list-style: none
}

@media only screen and (max-width: 800px) {
  .msn-box {width: 90lvw;}
  .msn-bio-text {grid-column: auto / span 12;}
  .msn-profile-photo {grid-column: auto / span 6;}
  .msn-nav-item {grid-column: auto / span 4;}
  .msn-nav-item {border-right: solid white 0px;}
  .msn-box {height: 90svh;}
  .msn-profile-photo img {width: 70%;}
  .msn-body-content {justify-items: center;}
}