.LookForThisCoolWebsite {
  font-size: 2em;
  text-align: center;
  background-color: #000;
}
.LookForThisCoolWebsite a{
color: #FF0000;
}



/* <!-- first slider start-->  */

.slider { /* блок */ 
  background: rgba(240,240,240,.5);
  text-align: center;
}

/* резиновый iframe: чтобы видео занимало всё доступное пространство и пропорционально уменьшалось/увеличивалось при изменении экрана монитора */ 
.slider div {
  position: relative;
  padding-top: 56.25%;
}
.slider iframe {
  position: absolute;
  top: .5%;
  left: .5%;
  width: 99%;
  height: 85%;
}

/* стиль CSS для кнопок-переключателей (я немного побаловалась), который можно изменять или вовсе не использовать */ 
.slider a {  /* вид кнопок */ 
  display: inline-block;
  padding: 0 .5em;
  text-decoration: none;
  color: blue;
}
.slider a:visited {  /* вид кнопок просмотренных видео */ 
  color: rgb(204,204,203);
}
.slider a:hover {  /* вид кнопок при наведении */ 
  transform: scale(1.5);
}
.slider a:not(:active):focus {  /* блокировка второго клика, но не третьего */ 
  pointer-events: none;
}
.slider a::before {  /* из-за Mozilla Firefox приходится использовать псевдоэлемент */ 
  content: "\25cf";
  position: absolute;
  color: rgba(0,0,1,.1);
  transition: color 0s 9999999s;  /* нужен, чтобы запомнился цвет после нажатия кнопки, подробнее про transition */ 
}
.slider a:nth-of-type(1)::before {  /* вид первой кнопки при загрузки страницы */ 
  color: rgb(0,129,0);
}
.slider span:active a::before {  /* для неактивных кнопок псевдоэлемент не нужен */ 
  color: rgba(0,0,0,0);
  transition: color 0s;
}
.slider span:active a:nth-of-type(1)::before {  /* вид неактивной первой кнопки, чтобы она выглядела как посещённая */ 
  color: #ccc;
  transition: color 0s;
}
.slider span:active a:active::before {  /* вид нажатой кнопки [в Internet Explorer отсутствует всплытие :active] */ 
  color: green;
  transition: color 0s;
}




/* <!-- second slider -->  */
.carousel1 {
  padding: .3em .3em 0;
  background: rgb(240,240,240);
  text-align: center;
}
.carousel1 div {
  position: relative;
  margin-bottom: .3em;
  padding-top: 56.25%;
}
.carousel1 iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.carousel1 span {
  display: inline-block;
  word-spacing: 1em;  /* расстояние между картинками */

/* прокрутка миниатюр при необходимости */
  overflow: auto;
  white-space: nowrap;
  word-wrap: normal;

}
.carousel1 a {
  position: relative;
  display: inline-block;
  max-width: 120px;  /* максимальная ширина миниатюр */
  width: 25%;  /* ширина миниатюр */
  border: 1px solid blue;  /* рамка вокруг миниатюр */
  opacity: .7;  
  text-decoration: none;
}
.carousel1 a:visited,
.carousel1 a:nth-of-type(1) {
  border-color: #555;  /* рамка вокруг миниатюр просмотренных видео */
}
.carousel1 a:hover { 
  opacity: 1;
}
.carousel1 a:not(:active):focus {
  pointer-events: none;
}
.carousel1 a::before {
  content: "";
  position: absolute;
  top: 0em;
  right: 0em;
  bottom: 0em;
  left: 0em;
  background: rgba(0,0,1,.1);
  transition: background 0s 9999999s;
}
.carousel1 a:nth-of-type(1)::before {
  background: rgba(255,255,254,.7);
}
.carousel1 span:active a::before {
  background: rgba(0,0,0,0);
  transition: background 0s;
}
.carousel1 span:active a:active::before {
  background: rgba(255,255,255,.7);
  transition: background 0s;
}
.carousel1 img {
  max-width: 100%;
  vertical-align: middle;  /* убрать нижний отступ до рамки под картинкой */
}


/* <!-- third slider -->   */

.gallery {
  display: flex;
  flex-flow: wrap;
  border: solid rgb(240,240,240);
}
.gallery div {  /* блоки видео + списков */
  flex: 150px;
  position: relative;
  text-align: center;
}
.gallery div:nth-of-type(1) {
  flex: 10000 1 300px;  /* если ширина менее 300 + 150 = 450px , то списки миниатюр смещаются на нижний ряд, подробнее про свойство flex */
}
.gallery div::before {
  content: "";
  display: block;
  padding-top: 100px;
}
.gallery div:nth-of-type(1)::before {
  padding-top: 56.25%;
}
.gallery iframe,
.gallery span {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
}
.gallery a {  /* для разнообразия, иконки не затемнены, так проще оценить код галереи видео */
  display: inline-block;
  margin-top: 5px;
}
.gallery a:last-child {
  margin-bottom: 5px;
}
.gallery iframe,
.gallery img {
  max-width: 100%;
  vertical-align: middle;
}