@import url('https://fonts.googleapis.com/css?family=Lato|Montserrat|Shadows+Into+Light | Ubuntu+Condensed');

/* style for the audio bar */


body {
  
  background-color:#f1f1f1;/*#bdc3c7; /*#dfe6e9;*/
  overflow: auto;
  width:100%;
  min-height:100%;
  display: flex;
  flex-direction: column;
}

audio { 
  width:60%; 
  margin:0 auto;
  box-shadow: 5px 5px 20px rgba(0,0,255,0.3);
  transform: scale(1.05);
}

/*style for first container */

.myContainerA {
    float:left;
    width:60%;
    height:auto;
    margin: 0 0 0 15px;
}

/* set P tag */

.myContainerA p {
    margin-bottom:0;
    text-align: justify;
    font-size: 22px;
    color:#2d3436;
    font-weight: 300; /*lighter;*/
    font-family: 'Ubuntu Condensed', sans-serif; 
}

/* style for second container */

.myContainerB {
    float:left;
    width:35%;
    height:auto;
    margin:0 0 0 15px;
    
   /* background-color:forestgreen;*/
}

.myContainerB p {
    margin-bottom:0;
    font-weight:300; /*lighter;*/
    font-family: 'Ubuntu Condensed', sans-serif; 
}

 .myContainerB ul li {
    text-align: justify;
    font-size: 22px;
    color:#2d3436;
    font-family: 'Ubuntu Condensed', sans-serif; 
}

/* container for the video */

 .vidcont {
    float:left;
    width:100%;
  /*  height:150px;*/
    margin:0 10px 40px 10px;
  }

/* style for date and time container */

 .fcontainer { /*wrapper*/
    width: 100%;
    height: 120px;
    margin-top:5px;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
  }
  
  .fcontainer .box h1 {
    color:#ffeaa7;
    font-size:25px;
    font-weight: lighter;
    font-family: 'Ubuntu Condensed', sans-serif;
    margin-top: 13px;
  }

 .fcontainer .box h2 {
    font-size:18px;
    font-weight: lighter;
    font-family: 'Ubuntu Condensed', sans-serif;
    margin-top:-5px;
  }

 .box { /*container for date n time */
  width: 30%;
  height:120px;
  background: #74b9ff;/*#0984e3;/* #dfe6e9; */
  text-align: center;
  margin-top:0;
  box-sizing: border-box;
  border-radius: 50%;
 }

 

/* set the button for trivia */

 button{
    width: 80%;
    height: 50px;
    margin-left:8%;
    font-size:20px;
    background:red;
    color:#fff;
    box-shadow: 5px 5px 20px rgba(0,0,255,0.3);
    cursor: pointer;
 }

 button:hover {
	background: #0984e3;
/*	border-radius: 5%;*/
	border: 1px solid green;
	color: black;
	cursor: pointer;
 }


/* set the footer design */

 footer {
    background:#2d3436;/* #474747;*/
    color: #fff;
    text-align: center;
    padding:2px;
    font-size:18px;
    font-weight:100;
    margin-top:auto;
  }
/* set style for headers (h3 to h5) */

  h4 {
    background-color:#2d3436;
    margin-top: 20px;
    padding: 10px;
    font-size: 32px;
    font-family: 'Lato', sans-serif;
    text-align: center;
    color:#fff;  
  }

/* horizontal line break */

 .hline_color {
   background:#e17055; /*#CFF;*/
   width:100%;
   height:2px;
   text-align: center;
  }

/* clear */

 #row:after {
  content: "";
  display: table;
  clear: both;
}

/* adjust the settings when it is small screen */

@media screen and (max-width:991px) {
    
  .myContainerA{
    float:left;
    width:100%;  
    margin:10px 0 0 0;
  }
   
  .myContainerB{
    float:left;
    width:100%;  
    margin:-30px auto 0;
  }
    
  .myContainerB p, li {
    margin: 0 15px 0 15px;
}
    
  .myContainerA p {
    margin: 0 30px 0 15px;
  }
    
  .vidcont {
   float: left;
    width:95%;
    height:auto;
    margin:0 30px 20px 10px;
   /* margin-left:10px; 
    margin-right:50px;*/
  }
    
  .fcontainer{
    width: 100%;
    height: 120px;
    margin-bottom:20px;
    margin-top:5px;
   }
    
  .fcontainer .box h2 {
   font-size:18px;
   font-weight: 600;
   font-family: 'Ubuntu Condensed', sans-serif;
   margin-top: 20px;
  }
  
  .box{
    width: 20%;
    height:160px;
    margin-top:-10px;
   }
    
} /* end of max-width 991px */


@media screen and (max-width:825px) {
      
      .box{
        width: 30%;
        height:160px;
        margin-top:-10px;
        border-radius:0%;
      }
} 

@media screen and (max-width:500px) {
    
.fcontainer .box h1 {
  color:#eb4d4b; 
  font-size:15px;
  font-weight: 500;
  font-family: 'Ubuntu Condensed', sans-serif;
  margin-top: 30px;
}

.fcontainer .box h2 {
  font-size:12px;
  font-weight: 500;
  font-family: 'Ubuntu Condensed', sans-serif;
  margin-top: 20px;
}
    
}