@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: 800px;
  max-width: 95%;
  margin: 0 auto 30px;
}

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

/* The band logos are actually h3 headings */
h4 {
  font-size: 50px;
  margin: 0;
}
h4 img {
  vertical-align: middle;   /* so the + is centrally aligned */
}

/* The 'BOOK NOW' links for each format, which are coloured differently depending on whether they're on a white or black background */
div.black a:link, div.white a:link {
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid;
  border-radius: 5px;
  padding: 5px 15px;
  margin: 0 35px;
  letter-spacing: 6px;
  white-space: nowrap;
  transition: all 0.6s;
}
div.black a:link, div.black a:visited {
  color: white;
  border-color: white;
}
div.white a:link, div.white a:visited {
  color: black;
  border-color: black;
}
div.black a:hover, div.white a:hover {
  border-radius: 12px;
}
div.black a:hover {
  background-color: white;
  color: black;
}
div.white a:hover {
  background-color: black;
  color: white;
}

/* There is one div for each format */
div.black, div.white {
  width: 800px;
  max-width: 85%;
  padding: 20px;
  border-radius: 10px;
  margin: 25px auto;
  background-size: cover;
  animation-name: fade-in;
  animation-duration: 2s;
}

/* The blurb for each option */
div p {
  margin: 15px auto 30px;   /* so it's not too close to the link below */
}

/* The TPA option */
div#tpa {
  background-image: url('../images/tpa/background.jpg');
  background-color: black;
  color: white;
}
div#tpa img {
  height: 80px;  /* logo height */
}

/* The TSO option */
div#tso {
  background-image: url('../images/tso/background.jpg');
  background-color: white;
  color: black;
  font-weight: 400;
}
div#tso img {
  height: 120px;  /* logo height */
}

/* The Stingchronicity option */
div#sc {
  background-image: url('../images/sc/background.jpg');
  background-color: black;
  color: white;
}
div#sc img {
  height: 75px;     /* logo height */
  max-width: 95%;   /* this logo can get too wide on small screens */
}