/*@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@*/
/*@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@     youtube part     @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@*/
/*@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@*/
/**/
/**/
/*                    */
/*    main setting    */
/*                    */
#youtubePart_ID {/*@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@  outermost div   */
  /*border: 3px solid rgb(181, 0, 0);/* for debug */
  margin: 0px;/* dummy */
  /*background: rgb(113, 113, 113);/* back ground color */
}
#youtubePart_ID > div {/*@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@   div   */
  /*border: 3px solid rgb(15, 0, 183);/* for debug */
  /*----------*/
  /* flex box */
  display: flex;/* set flex box*/
  flex-direction: row;/* row or column */
  justify-content: space-between;/* <============== (or) */
  align-items: start;/* vertical position */
  /*----------*/
  width: 94%;/**/
  max-width: 1000px;/**/
}
@media screen and (max-width: 640px) {/* for smart phone */
  #youtubePart_ID > div {
    flex-direction: column;/* row column */
  }
}
/**/
/**/
/*                                  */
/*     set each chunk of margin     */
/*                                  */
/*@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@   div  div  */
#youtubePart_ID > div > div:first-child {/*=================================  the 1st div */
  /*border: 3px solid rgb(26, 255, 0);/* for debug */
  margin: 0px 10px 0px 0px;/**/
  width: 33.3%;/**/
}
#youtubePart_ID > div > div:not(:first-of-type):not(:last-of-type){/*=======  middle divs */
  /*border: 3px solid rgb(16, 165, 0);/* for debug */
  margin: 0px 10px 0px 10px;/**/
  width: 33.3%;/**/
}
#youtubePart_ID > div > div:last-child {/*==================================  the last div */
  /*border: 3px solid rgb(9, 86, 0);/* for debug */
  margin: 0px 0px 0px 10px;/**/
  width: 33.3%;/**/
}
@media screen and (max-width: 640px) {/*===================== for smart phone */
  #youtubePart_ID > div > div:first-child,
  #youtubePart_ID > div > div:not(:first-of-type):not(:last-of-type),
  #youtubePart_ID > div > div:last-child {
    /*border: 3px solid rgb(5, 46, 0);/* for debug */
    margin: 0px 0px 20px 0px;/**/
    width: 100%;/**/
  }
}
/*                            */
/*     setting each class     */
/*                            */
#youtubePart_ID > div > div > 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 > div > div > 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 > div > div > div:nth-child(2) {/*@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@   title  */
  /*border: 3px solid rgb(160, 160, 160);/* for debug */
  /*background: rgb(146, 146, 146);/**/
  /*color: rgb(250,250,250);/* font color */
  color: rgb(245, 245, 245);/* font color */
  color: rgb(10, 10, 10);/* font color */
  font-size: 1.0em;/* font size */
  /*font-weight: bold;/* font weight */
  border-radius: 4px;/* round corner */
  text-align: center;/* centering text */
  margin: 6px 0px 6px 0px;/**/
  padding: 4px 10px 4px 10px;/**/
}
#youtubePart_ID > div > div > div:nth-child(3) {/*@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@   description  */
  /*border: 3px solid rgb(160, 160, 160);/* for debug */
  /*background: rgb(80,80,80);/**/
  /*color: rgb(250,250,250);/* font color */
  color: rgb(39, 39, 39);/* font color */
  font-size: 0.8em;/* font size */
  border-radius: 6px;/* round corner */
}
/**/
/**/
/*@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@*/
/*@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@*/
/*@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@*/