@import url("heading.css");
@import url("animations.css");
@import url("menu.css");
@import url("copyright.css");

/* General stuff */
body {
  background-color: white;
  text-align: center;
  font-family: 'Assistant', sans-serif;
  font-weight: 300;
  font-size: 16px;
  color: black;
  margin: 0;
  padding: 0;
}

/* The blurb at the top */
p {
  width: 650px;
  max-width: 95%;
  margin: 20px auto;
  animation-name: fade-in;
  animation-duration: 1s;
}

/* Links in the blurb */
p a:link, p a:visited, p a:active {
  color: black;
  text-decoration: none;
  font-weight: 600;
}
p a:hover, ul a:hover {
  text-decoration: underline;
}

/* Links in the member sections */
div.member a:link, div.member a:visited, div.member a:active {
  color: white;
  text-decoration: none;
  font-weight: 600;
}
div.member a:hover {
  text-decoration: underline;
}

/* The sections for the band members */
div.member {
  text-align: left;
  width: 800px;
  max-width: 85%;
  padding: 20px;
  border-radius: 10px;
  margin: 25px auto;
  background-size: cover;
  background-color: black;
  color: white;
}

/* The heading that introduces the band members */
h3.the-band {
  font-family: Montserrat, sans-serif;
  font-size: 18px;
  font-weight: 600;
  transform: rotate(0);     /* undo the normal h3 rotation */
  margin: 30px auto -20px;
}

/* Portrait image for member */
div.member img {
  border-radius: 10px;
  float: right;
}
@media screen and (max-width: 600px) {
  div.member img {
    width: 100px;
  }
}
@media screen and (max-width: 350px) {
  div.member img {
    width: 80px;
  }
}

/* The blurb for each member */
div.member p {
  margin: 10px 0;
  width: 100%;
  animation-name: none;
}

/* Each favourite item (favourite song, album etc) is a <div> in order to force line breaks */
div.favourite, div.website {
  margin: 0;
}

/* Put the actual item (song, album etc) in bold */
div.favourite span {
  font-weight: 600;
}

/* Each section has a background image of the relevant band member */
div#pete {
  background-image: url('../images/biog/pete.jpeg');
}
div#tim {
  background-image: url('../images/biog/tim.jpeg');
}
div#adam {
  background-image: url('../images/biog/adam.jpeg');
}
div#julia {
  background-image: url('../images/biog/julia.jpeg');
}
div#nichola {
  background-image: url('../images/biog/nichola2.jpeg');
}

/* The heading for each band member's name/role */
h4 {
  font-family: Montserrat, sans-serif;
  font-weight: 900;
  font-size: 32px;
  letter-spacing: 5px;
  margin: 0;
}

/* Their role is smaller and red */
h4 span {
  color: rgb(255, 51, 51);
  font-size: 24px;
}

/* The sub-heading for the instrument they play */
h5 {
  font-family: Montserrat, sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 3px;
  margin: 0 0 20px 0;       /* top, right, bottom, left */
}

/* The 'instruments' heading */
h6 {
  font-size: 18px;
  font-weight: 600;
  margin: 15px 0 10px;
}

/* The list of each member's instruments */
ul {
  padding-left: 15px;   /* so there isn't too big an indent */
  margin: 0;
}

/* The instrument name is in bold */
ul span {
  font-weight: 600;
}

div.photo-credits {
  margin-top: 10px;
  font-size: 12px;
}