/******* COLOR SCHEME  *********
BLUE LETTERS: #5ce1e6
Dove blue: #38b6ff
Dove Turquoise: #5ce1e6
*/

/********Letter type*************
Logo WORSHIP TEAM: Alex Brush at 59.5
Logo ASCRIBING GLORY TO GOD: Raleway at 10.8

WEDNESDAY NIGHT MUSIC : Voga at 56.7 but now changed to Merriweather

song name tempo and key: Montserrat light at 14
*/

/*** Rules from fonts.google.com on how to specify font families
font-family: 'Alex Brush', cursive;
font-family: 'Merriweather', serif;
font-family: 'Montserrat Alternates', sans-serif;
font-family: 'Raleway', sans-serif;
*/
html, body {
  margin: 0;
  padding: 0;
  height: 100% ;
  min-height: 100%;
  text-align: center;
  justify-content: center;

  /* takes the horizontal scrolling out */
  overflow-x: hidden;  
}
body{
  background-color: white;
  background-image: url("https://transparenttextures.com/patterns/crossword.png");
}

a{
  font-family: 'Raleway', sans-serif;
  text-decoration: none;
  color: #000;
}


hr{
        height: 5px;
        margin-left: auto;
        margin-right: auto;
        background-color: #f7c94b;
        border: 0 solid;
}

/* NAV BAR SECTION */
.navbar-container{
  padding: 0 50px 0 10px; 
}
.navbar-title{
  font-family: 'Raleway', sans-serif;
  font-size: 1.5rem;
}
.nav-item{
  font-weight:600;
  padding: 0 20px;
}

/* HEADER SECTION */
.top-container{
  margin: 0 auto;
  text-align: center;
}
/* HEADER SECTION for practice page */
.top-container-practice{
  margin: auto;
  font-family: 'Raleway', sans-serif;
  font-size: 400% ;
}

/* CONTAINER FOR VIDEOS AND SONG TITLES */
.video-title-main-container{
  width: 95%;
  overflow: hidden; 
  padding-top: 10px;
  padding-bottom: 10px;
  border-radius: 15px;
  background-color: #c7ebff;
  background-image: url("https://transparenttextures.com/patterns/ice-age.png");
  
}
.video-title-container{
  font-family: 'Raleway', sans-serif;
  text-decoration: none;
  color: #000;
  margin: auto;
  text-align: center;
  padding: 10px;
}
.video-container{
  margin: auto;
  text-align: center;
  border-radius: 15px;
  padding: 10px;
}
.title-card-header{
  background-color: #f7c94b;
  box-shadow: 5px 5px 5px #fae19e;
  cursor: pointer;
  color: #01477c;
  border-radius: 15px;
  padding: 10px;
}
.title-card-header:hover,
.title-card-header:focus {
transition: background-color 0.3s;
background-color: #ff7d8f !important;
box-shadow: 10px 10px 5px #f1c2c9;
transform: translateY(-4px);
}
.title-card-header:active {
  transform: translateY(4px);
}

/* youtube iframe size */
.responsive-iframe{
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
}

/* audio player setting */
audio{
  width: 100%;
}

/* MAIN PAGE BODY SECTION */
.middle-container{
  margin: 0px auto 0px;
  text-align: center;
}

/* CONTAINER FOR MUSIC PORTION OF PAGE */
.music-container{
  margin: 3% auto;
}

.day-btn{
  /* display: block; */
  margin: 20px auto;
  border-radius: 10px;
  background-color: #f7c94b;
  box-shadow: 5px 5px 5px #fae19e;
  cursor: pointer;
}
/* button:hover,
button:focus, */
.day-btn:hover,
.day-btn:focus {
background-color: #ff7d8f !important;
box-shadow: 10px 10px 5px #f1c2c9;
transform: translateY(-4px);
}
.day-btn:active {
  transform: translateY(4px);
}

/* THIS ARROW SECTION IS FOR RETURNING PAGE TO TOP */
.up-arrow{
  color:#38b6ff; 
}
.up-arrow:hover{
  color:#01477c; 
}
.arrow-container{
  position: sticky;
  bottom: 125px;
}

/* FOOTER SECTION */
.bottom-container{
  background-color: #38b6ff ;
  background-image: linear-gradient(to bottom, white, #38b6ff );
  height: 80px;
  text-align: center;
  display: flex;
  justify-content: space-around; 
  padding-top: 30px;
  position:sticky;
  bottom: 0;
  width: 100%;
}
.trademark-signature{
  font-size: 16px ;
}

/* for the chorpro stuff */
.chordSheetViewer .paragraph {
  color: black;
}

.paragraph{
  font-size: 3vw; ;
}

.comment{
   background-color: #f0f0f0; 
   font-style: italic; 
   padding: 4px; 
  width: 100%;
   
}
.chord{
  font-weight: bold;
}

/* Schedule style */
.schedule-card{
  padding: 10px;
}
.schedule-card-header{
  background-color: #38b6ff;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.6);
  color:#f0f0f0
}
.schedule-card-body{
  background-color: #f7c94b;
  color: #01477c;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius:5px;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.6);
}
.schedule-card-button{
  background-color: #01477c;
  color:#f0f0f0;
  transition-duration: 0.2s;
}
.schedule-card-button:hover {
  background-color: #38b6ff !important;
  color:#f0f0f0 !important;
}