body, html {
  height: 100%;
  margin: 0;
}

.showcase{
  background:url('../music/music_sc.jpg') no-repeat;
  background-position:center;
  background-size: cover;
  color:#fff;
}

.showcase h1{
  font-size:40px;
  font-weight:bold;
  text-transform: uppercase;
}

.showcase hr{
  width:100px;
  margin:auto;
  border-width:3px;
  border-color:#fff;
}

.showcase p{
  font-size:16px;
  padding-bottom:20px;
  font-weight:bold;
}


.music_artist {
  box-sizing: border-box;
}

body {
  margin: 0;
}

/* Create three equal columns that floats next to each other */
.music_artist {
    font-family: "Lato";sans-serif
}

.music_artist p {
  font-size: small;

}

.column {
  float: left;
  width: 33.33%;
  padding: 15px;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width:600px) {
  .column {
    width: 100%;
  }
}

.flip-card {
  background-color: transparent;
  position: relative
  width: 300px;
  height: 300px;
  perspective: 1000px;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.flip-card-front {
  color: black;
  background-position:center;
  background-size: cover;
}

.flip-card-back {
  transform: rotateY(180deg);
}

header,h1,h2,h3,h4,h5,h6{font-size:large}
body,h1,h2,h3,h4,h5,h6{font-family: "Lato", sans-serif;font-size:large}
.w3-bar,h1,button {font-family: "Montserrat", sans-serif}
body, html {height: 100%}
p {line-height: 2}