* {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0%;

}

body {
    padding-bottom: 50px;
    background-color: #DFD7C3;
}



  /* The navbar */
  .topnav {
    overflow: hidden;
    background-color: #9F5409;
  }
/* top image sytling */
.bgimage img {
  display: block;
  min-height: 150px;
  position: relative;
  top: 1em;
  margin-left: auto;
  margin-right: auto;
  width: 70%;
  box-shadow:  -33px 12px 38px 3px rgba(0,0,0,0.5);

}



  /* Navbar links */
  .topnav {
    display: block;
    position: relative;
    top: 15px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2em;
    width: 70%;
    height: auto;
    box-shadow:  -33px 12px 38px 3px rgba(0,0,0,0.25);
  }
  .topnav a {
    font-family: 'Roboto', sans-serif;
    color: #f2f2f2;
    text-align: center;
    padding: .25em;
    margin-left: auto;
    margin-right: auto;
    width: 70%;
    text-decoration: none;
    font-size: 1.25em;

  }


  .topnav a:hover {
    background-color: #E05D00;
    color: black;
    transition: .7s;
  }

  @media (max-width:800px)
  {
    .topnav a {
      display: flex;
      flex-direction: row;
    }
  }
/*RESIZE TOP IMAGE AND NAVBAR FOR PHONE SCREENS*/

@media (max-width:800px)
{
  .bgimage img {
  width: 100%;
}
  }

  @media (max-width:800px)
  {
    .topnav {
    width: 100%;
    }
    }

/*END RESIZE TOP IMAGE AND NAVBAR FOR PHONE SCREENS*/


/*MAIN CONTENT STYLING*/

.index-title h1 {
font-family: 'Roboto', sans-serif;
  text-align: center;
  font-weight; 200;
  box-sizing: auto;
  top: 20px;
  padding: 10px;
  color: #3b2001;

}

.subheading {
font-family: 'Roboto', sans-serif;
  text-align: center;
  font-size: 20px;
  padding-bottom: 50px;
  color:#9F5409;
}


h1 {
  font-family: 'roboto', sans-serif;
  font-size: 2em;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  width: 85%;
  color: #3b2001;
}

h2 {
  font-family: 'roboto', sans-serif;
  font-size: 1.5em;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  width: 75%;
  margin-top: 2em;
  color: #3b2001;
  min-height: 4rem;

}

.index-body-header img {
  float: left;
  margin-right: 1em;
  margin-top: 1em;
}

@media (max-width:700px)
{
  .index-body-header img {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    margin-top: 1em;
    margin-bottom: 1em;
  }
}
.index-body-header2 p
{
  color: #3b2001;
  display: block;
  font-family: 'Roboto', sans-serif;
  margin-left: auto;
  margin-right: auto;
  width: 80%;
  font-size: 20px;
  height: auto;
  text-align: justify;
  text-justify: inter-word;
  padding: 1rem;
}

.index-body-header2 img {
  float: right;
  margin-left: 1em;
  margin-top: 1em;}

  @media (max-width:700px)
  {
    .index-body-header2 img {
      margin-left: auto;
      margin-right: auto;
      width: 100%;
      margin-top: 1em;
      margin-bottom: 1em;
    }

    .review-cover-art img{
      height: 200px;
      margin-left: auto;
      margin-right: auto;
      width: auto;
      flex-grow: 1;
      order: 1;
    }
  }



.wrapper p {
  display:grid;
  grid-template-columns: 1fr 1fr;
  margin: 20px;
  color: #3b2001;
}
/*TEMPORARY STYLING FOR JAZZ PAGE*/
.image-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 10px;
  align-items: stretch;
}
/*TEMPORARY STYLING FOR JAZZ PAGE*/






/*VIDEOS PAGE STYLING*/

.video-container {
margin-left: auto;
margin-right:auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 2rem;

}

@media (max-width:700px)
{
  .video-container {
    display: grid;
    grid-gap: 1em;
    grid-template-columns: 1fr;
    align-content:space-around;
    margin-left: auto;
    margin-right: auto;
  }
}


/*ANIMATION FOR RECORD FLIPPING*/
.card{
  height: 400px;
  width: 400px;
  position: relative;
  transition: all .4s linear;
  transform-style: preserve-3d;
}


.front,
.back{
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: .9em;
  color: white;
  font-family: 'Roboto';
  padding: 1em;
  position: absolute;
  border-radius: 15px;
}

.front {
    z-index: 2;
    backface-visibility: hidden;
    cursor: pointer;

}
.front img {
  border-radius: 15px;
}

.back {
  background: black;
  z-index: 1;
  backface-visibility: hidden;
  opacity: 1;
}

.hidden {
    opacity: .1;
}

.showme {
  opacity: .8;
}


.flipcontainer {
  margin-right: auto;
  margin-left: auto;
  margin-top: 0rem;
  margin-bottom: 10rem;
  perspective: 1900px;
  height: 400px;
  width: 400px;

}


.album-links a {
  display: flex;
  width: auto;
  height: auto;
  align-self: flex-end;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: auto;
  font-size: 20px;


}

.container {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  margin-bottom: 100px;

}

.myButton {
  display: inline-block;
	box-shadow: 3px 4px 0px 0px #1564ad;
	background:linear-gradient(to bottom, #79bbff 5%, #378de5 100%);
	background-color:#79bbff;
	border-radius:15px;
	border:1px solid #337bc4;
	cursor: pointer;
	color: #ffffff;
	font-family:Arial;
	font-size:17px;
	font-weight:normal;
	padding:12px 44px;
	text-decoration:none;
	text-shadow:2px 1px 0px #528ecc;
  margin-bottom: 1em;
  margin-top: 2px;
  justify-content: center;
}
.highlight {
  color: yellow;
  	box-shadow: 4px 5px 1px 0px #1564ad;
}

.myButton:hover {
	background:linear-gradient(to bottom, #378de5 5%, #79bbff 100%);
	background-color:#378de5;
}
.myButton:active {
	position:relative;
	margin-top: 2px;
  margin-left: 10px;
}

.backButton {
	box-shadow: 3px 4px 0px 0px #1564ad;
	background:linear-gradient(to bottom, #79bbff 5%, #378de5 100%);
	background-color:#79bbff;
	border-radius:15px;
	border:1px solid #337bc4;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:17px;
	font-weight:bold;
	padding:12px 12px;
	text-decoration:none;
	text-shadow:0px 1px 0px #528ecc;
  margin-bottom: 1em;
  margin-top: 2px;
  position: relative;
  margin-left: 30%;
  margin-right: 30%;
}

.backButton:hover {
	background:linear-gradient(to bottom, #378de5 5%, #79bbff 100%);
	background-color:#378de5;
}




/*FUll LENGTH REVIEW STYLING::*/

.review h2 {
  font-size: 2.5em;
  justify-content: left;

}


.review-wrapper {
  display: flex;
  margin-top: 5em;
  flex-wrap: wrap;
}

.review-cover-art img{
  height: auto;
  margin-left: 1em;
  width: auto;
  flex-grow: 1;
  order: 1;
}
.review-header-list {
  margin-left: 1em;
  order: 3;
  flex-grow: 1;
  color: #3b2001;

}
.review-header-advert
{
  display: none;
  order: 2;
  flex-grow: 1;
  justify-content: center;

}

.review-wrapper ul
{

  font-family: 'Roboto', sans-serif;
  color: #black;
  text-align: left;

  text-decoration: none;
  font-size: 1.25rem;
  list-style: none;

  top: 2em;


}

.full-review-content p {
  color: #3b2001;
  display: block;
  font-family: 'Roboto', sans-serif;
  margin-left: auto;
  margin-right: auto;
  width: 90%;
  font-size: 20px;
  height: auto;
  text-align: justify;
  text-justify: inter-word;
  padding: 1rem;
}