body {
 background-image: url(../img/bg.jpg);
 background-attachment: fixed;
 background-size: auto;
}


a, h3, ol { /* Через запятую - это группировка. То есть, эти параметры для всех перечисленных будут установлены.*/
 font: bold italic 25pt/25pt sans-serif;
}



a {
 -webkit-text-stroke: 1px black;
/* font-size: 190%;*/
 text-decoration: none
}

a:hover { 
 text-decoration: underline; /* Добавляем подчеркивание при наведении курсора на ссылку */
 color: red; /* Ссылка красного цвета */
 -webkit-text-stroke: 0;
}

a:link {
 color:      white;
}

a:visited {
 color:     #f3f70a;
}

.brd h3 {
 font-size: 230%;
 color: white;
 -webkit-text-stroke: 1px green;
}

h3.films {
 -webkit-text-stroke: 1px black;
 text-align: center;
}

.brd ol { /* Это вложенность. Ol должен быть вложен в .brd. Только в этом случае будет применён стиль. */
 color: yellow;
 -webkit-text-stroke: 1px green;
}


.brd {
 position: relative;
/* background-image: url("../img/kino_bg.jpg");  */
 background-attachment: fixed;
 display: inline-block; /* В этом случае размер блока, а значит и рамки вокруг, будут зависеть от содержимого блока. */
 border: solid  white 1pt;
 border-collapse: collapse; /* Если два блока рядом, то между ними граница будет одниарная, а не у каждого своя. */
 border-radius: 10px; /* Уголки */
 text-align: left;
/* background-size: cover;*/
/* filter: blur(5px); */

 padding: 20px; 
 box-sizing: content-box; 
 z-index: 3;

/* background: #fc3; /* Цвет фона */
}

.brd h3 {
 text-align: center;
}



.myaudio {
 position: absolute;
 top: 20;
 left: 75%;
 right: 5%;
 color: black;
/* border: 1px solid white; */
}

audio {
 display: block;
}

#container {
  height: 180px;
  width: 180px;
  background: rgba(255,255,255,.8);
  border-radius: 24px;
  position: relative;
  box-shadow: 0 0 20px 0 rgba(0,0,0,.15);
  transition: .5s linear;
}
#container:before {
  content: "\f001";
  font-family: FontAwesome;
  /*font-family: Times New Roman;*/
  font-size: 70px;
  background: -webkit-linear-gradient(50deg, #FD9F85 50%, #E837C2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #FF7E24;
  position: absolute;
  line-height: 180px;
  left: 60px;
}
#container:hover #disc {
  margin-left: 510px;
  transform: rotate(360deg);
}
#disc {
  position: absolute;
  height: 140px;
  width: 140px;
  z-index: -1;
  border-radius: 50%;
  background: transparent;
  margin: 20px;
  transition: 5.9s linear;
  box-shadow:
    0 8px 6px -8px rgba(0,0,0,0.5),
    0 0 1px 1px rgba(0,0,0,0.5),
    0 0 0 1px #666 inset,
    0 0 0 2px #222 inset,
    0 30px 0px -29px #444 inset,
    0 -30px 0px -29px #444 inset,
    0 0 0 3px #333 inset,
    0 0 0 4px #222 inset,
    0 0 0 5px #333 inset,
    0 33px 0px -27px #444 inset,
    0 -33px 0px -27px #444 inset,
    0 0 0 6px #222 inset,
    0 0 0 7px #333 inset,
    0 0 0 8px #222 inset,
    0 34px 0px -25px #444 inset,
    0 -34px 0px -25px #444 inset,
    0 0 0 9px #333 inset,
    0 0 0 10px #222 inset,
    0 0 0 11px #333 inset,
    0 35px 0px -23px #444 inset,
    0 -35px 0px -23px #444 inset,
    0 0 0 12px #222 inset,
    0 0 0 13px #333 inset,
    0 0 0 14px #222 inset,
    0 36px 0px -21px #444 inset,
    0 -36px 0px -21px #444 inset,
    0 0 0 15px #333 inset,
    0 0 0 16px #222 inset,
    0 0 0 17px #333 inset,
    0 37px 0px -19px #444 inset,
    0 -37px 0px -19px #444 inset,
    0 0 0 18px #222 inset,
    0 0 0 19px #333 inset,
    0 0 0 20px #222 inset,
    0 38px 0px -17px #444 inset,
    0 -38px 0px -17px #444 inset,
    0 0 0 21px #333 inset,
    0 0 0 22px #222 inset,
    0 0 0 23px #333 inset,
    0 39px 0px -15px #444 inset, 
    0 -39px 0px -15px #444 inset, 
    0 0 0 24px #222 inset,
    0 0 0 25px #333 inset,  
    0 0 0 26px #222 inset,
    0 40px 0px -13px #444 inset,
    0 -40px 0px -13px #444 inset,
    0 0 0 27px #333 inset,
    0 0 0 28px #222 inset,
    0 0 0 29px #333 inset,
    0 41px 0px -11px #444 inset,
    0 -41px 0px -11px #444 inset,
    0 0 0 30px #222 inset,
    0 0 0 43px #333 inset,
    0 0 0 45px #AF2A10 inset,
    0 0 0 47px #333 inset,
    0 0 0 62px #AF2A10 inset,
    0 0 10px 78px rgba(0,0,0,0.5) inset;
}



































