/* This is where everything is nested */
.container {
      display: flex;
      justify-content: center;
      gap: 1rem;
    }
  /* This sections left and right */
.listy {
      display: inline-block;
    }

   /* This is the three-paragraph bio on the right of the container */
.paragraphy {
      border-style: solid;
      border-width: medium;
      background-color: white;
      max-width: 700px;
    }

    /* This is the image that appears on the left of the container */
img.sidey {
      background-size: 100%;
      height: 700px;
      width: 450px;
    }

    /* This is the one with the "dob/origin/instruments" it will have a different color depending on which page you are on. */
    .infobox {
      border-style: solid;
      border-width: medium;
      max-width: 360px;
    }

    /* This is the collapsable that appears on the left of the container, for now it contains songs that the person sings */
details {
      max-width: 450px
    }

 details>summary {
      padding: 4px;
      width: 210px;
      border: none;
      cursor: pointer;
    }

details>p {
      background-color: pink;
      padding: 4px;
      margin: 0;
    }

    div {
      padding: 0px 4px;
    }

    @media screen and (max-width: 600px) {
      div.container {
        display: block;
        justify-content: center;
      }
    }

    h1 {text-align: center;}

    /* make these change with each guy aughhh */
a:link {
  color: #FFC0CB;
  background-color: #8C255E;
  text-decoration: none;
  }
  a:visited {
  color: #FFDEE3;
  background-color: #8C255E;
  text-decoration: none;
}
a:hover {
  color: pink;
  background-color: #bb297a;
  text-decoration: underline;
}
a:active {
  color: #ffffff;
  background-color: #bb297a;
  text-decoration: underline;
}