/*################################################################################################*/
/*##                                                                                            ##*/
/*##                                  CSS for yourube part                                      ##*/
/*##                                                                                            ##*/
/*################################################################################################*/



#youtubePart_ID {
  /*border: 3px solid rgb(206, 0, 0); /* border for checking */
  display: flex;/**/
  flex-direction: column;/**/
  align-items: center;/**/
}
#youtubePart_ID > section {/*@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@   all container  */
  /*border: 3px solid rgb(25, 0, 215); /* border for checking */
  display: flex;/* set to flex box */
  flex-direction: row;/* row or column */
  flex-wrap: wrap;/* set item wrapping */
  /**/
  /* (!) select 1 to set vertical alignment from here */
  /*justify-content: space-around;/**/
  /*justify-content: space-between;/**/
  /*justify-content:flex-end;/**/
  /*justify-content:center;/**/
  /*justify-content:flex-start;/**/
  /**/
  padding: 0px;/**/
  margin: 10px 0px 10px 0px;/**/
  list-style: none;/**/
  width: 94%;/**/
  max-width: 1000px;/* max width */
}
@media screen and (max-width: 640px) {/* for smart phone */
  #youtubePart_ID > section {
    margin: 0px 0px 0px 0px;/**/
  }
}
@media screen and (max-width: 640px) {/* for smart phone */
  #youtubePart_ID > section {
    flex-direction: column;/* row column */
  }
}
#youtubePart_ID > section > article {/*@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@   1 container  */
    /*border: 3px solid rgb(35, 194, 0); /* border for checking */
    padding: 0px;/**/
    width: 31%;/* width <============================(adjust between panels, also how many panels at 1 line.) */
    margin: 0px 0px 0px 0px;/**/
}
@media screen and (max-width: 640px) {/* for smart phone */
  #youtubePart_ID > section > article {
    width: 100%;/**/
    margin: 14px 0px 14px 0px;/**/
  }
}
#youtubePart_ID > section > article > div:nth-child(1) {/*@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@   div that wraps iframe  */
  /*border: 4px solid rgb(60, 60, 60);/* for debug */
  border-radius: 6px;/* round corner */
  background: rgb(60, 60, 60);/**/
  /**/
  /* ----- for youtube ----- */
  position: relative;/**/
  width: 100%;/**/
  padding-top: 56.25%;/**/
  /**/
}
#youtubePart_ID > section > article > div:nth-child(1) > iframe {/*@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@   iframe   */
  /*border: 3px solid rgb(230, 130, 0);/* for debug */
  border-radius: 6px;/* round corner */
  /* ----- for youtube ----- */
  position: absolute;/**/
  top: 0;/**/
  right: 0;/**/
  width: 100%;/**/
  height: 100%;/**/
}
#youtubePart_ID h2 {/*@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@   title   */
  margin: 0px 0px 0px 0px;/**/
  text-align: center;/**/
  font-weight: normal;/**/
}