/* таблица стилей оформления сайта паэта */
/* автор и разработчик сайта - Юрий Паэт Меркулов */

/* A */
/* создаем особое выделение для ссылок */
a
{
 	color: #0F0; /* Цвет обычной ссылки */
	/* padding: 2px; /* Поля вокруг текста */ */
  
	 
}
/* Убираем подчеркивание у ссылок */
/* Цвет посещенной ссылки */
a:visited
{
	color: #060;
}  
a:hover
{
	text-decoration: none; /* Убираем подчеркивание */
    color: #0f0; /* Цвет ссылки при наведении курсора мыши */ 
	width: 1.2 ;
    background: #0f0; /* Цвет фона текста или обьекта при наведении мыши */

	
}


/* создаём правило для тега body*/
body
{
	background-color: black;
    margin: 1%;
	line-height:1.2;
	text-align: center;
}

/* контейнер двухколоночного макета*/
#container
 {
/* Общая ширина колонок */ 
    position: relative;
	width: 90%;
	

}
/* Левая колонка*/ 
#leftcol
{             
    width: auto; /* Ширина слоя */ 
    height: 50%;
	float: left; /* Состыковка с соседним слоем */ 
    color: white; /* Цвет текста*/ 
    margin-left: 5.5%;
	text-align: left;


	
}
/* Правая колонка*/ 
    #rightcol  
{	text-align: right;
    margin-left: 16%;
}

/* стиль для элемента div */
div
{
	width: 90%;	/* Ширина блока */
	height: 90%;  /* Высота блока */
    background-color: black;
	line-height:1.5
}
/* модификация div для колонок */
div.colonki
{	 
    width: 45%; 
    background: #f00;
    padding: 10,10,10,10;
    /* padding-right: 20px;  */
    border: solid 1px black; 
    float: left;
    
}
/* cоздание нового класса фреймов */
.frame
 {
    overflow: auto; 
    width: 90%; 
    height: 300px; 
    text-align: justify; 
    padding: 15px; 
    border-left: #000000 1px solid; 
    border-right: #000000 1px solid; 
    border-top: #000000 1px solid; 
    border-bottom: #000000 1px solid; 			
    scrollbar-face-color: #DF0000; 
    scrollbar-highlight-color: #FF0000; 
    scrollbar-shadow-color: #BB0000; 
    scrollbar-3dlight-color: #660000; 
    scrollbar-arrow-color: #FFFFFF; 
    scrollbar-track-color: #F5F5F5; 
    scrollbar-darkshadow-color: #660000;
}
.framev
 {
	   
	overflow: auto; 
    /* width: 200px;  */
	width: 500px;
    height: 500px; 
    text-align: justify; 
    padding: 15px;
	position: repeat; 
    border-left: #000000 1px solid; 
    border-right: #000000 1px solid; 
    border-top: #000000 1px solid; 
    border-bottom: #000000 1px solid; 			
    scrollbar-face-color: #DF0000; 
    scrollbar-highlight-color: #FF0000; 
    scrollbar-shadow-color: #BB0000; 
    scrollbar-3dlight-color: #660000; 
    scrollbar-arrow-color: #FFFFFF; 
    scrollbar-track-color: #F5F5F5; 
    scrollbar-darkshadow-color: #660000;
}

.framewhite
 {
	   
	background-color:white;
	overflow: auto; 
    /* width: 200px;  */
	width: 75%;
    height: 75%; 
    text-align: justify; 
    padding: 15px;
	position: repeat; 
    border-left: #000000 1px solid; 
    border-right: #000000 1px solid; 
    border-top: #000000 1px solid; 
    border-bottom: #000000 1px solid; 			
    scrollbar-face-color: #DF0000; 
    scrollbar-highlight-color: #FF0000; 
    scrollbar-shadow-color: #BB0000; 
    scrollbar-3dlight-color: #660000; 
    scrollbar-arrow-color: #FFFFFF; 
    scrollbar-track-color: #F5F5F5; 
    scrollbar-darkshadow-color: #660000;
}

/* переопределение стиля заголовков H */
h4
{   
	color: white;
	text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
	text-align: center;
	font-size: 1em;
	font-style: bold;
    font-stretch: ultra-condensed;
    font-weight: 100;
	text-decoration: underline overline;
	text-decoration-style: wavy;
	
}

/* h5
{	color:white;
	text-align: center;
	font-size: 1em;
	font-style: normal;
	line-height: 1.5em;	
	font-family: doublespace;
	text-decoration: underline overline;
	text-decoration-style: wavy;
} */

h5
{	color:white;
	text-align: center;
	font-size: 0.5 em;
	font-style: normal;
	line-height: 1.0em;	
	font-family: doublespace;
	text-decoration: overline;
	/* text-decoration-style: wavy; */
}

h6
{
	color: white;
	font-size: 0.6em;
	text-align: center;
    
}

h7
{
	color: black;
	/* font-size: 0.6em; */
	/* font-family:cursive; */
    
}


h8
{
	color: white;
	font-size: 0.6em;
	font-family:cursive;
    
}

/* высвечивание текста при фокусе на ссылку */
.akkords
{
	color: black;
	font-size: 1em;
	font-size-adjust: center;
		
}

/* зе енд */

/* p */

{ /* Обычный абзац */ 
    /* text-align: justify; /* Выравнивание текста по ширине */ 
	
   }

   p.cite { /* Абзац с классом cite */
   text-align: left; /* Выравнивание текста по ширине */
   color: white; /* Цвет текста */
   margin-left: 20px; /* Отступ слева */
   border-left: 1px solid navy; /* Граница слева от текста */
   padding-left: 15px; /* Расстояние от линии до текста */
   } 

.shadow
{
	text-shadow: 2px 2px 2px green, 2px 2px 1em green; /* Параметры тени */
    color: white; /* Белый цвет текста */
    font-size: 1em; /* Размер надписи */
	font-weight: 500;	
}

/* тонкая красная линия */
hr
{	color: #f00;
	width: 99%;
}

/* модификация тега img для постера статьи */
img.poster
{
	/* width: 300px; */
	/* height: 300px; */
	width: 50%;
	/* height: 300px; */
	hspace: 2%;
	vspace: 2%;
	align: center;
	alt: ...куда-то подевалась картинка;
}

/* модификация тега img для постера композиции в альбоме*/
img.kom_poster
{
	width: 99%;
	/* height: 99%; */
}



/* модификация тега подстрочного комментария */
sub
{
	color: #555; 
	font-size: 0.9em;
	font-size: 0.9em;
	font-style: normal;
    font-weight: 800;
	line-height: 1.0;
	text-decoration: none;
	font-family:cursive;
	text-shadow: 1px 1px 1px white, 0 0 1em red, ; 

}


/* модификация тега таблицы table
создание контейнера таблицы из трех столбцов для песен альбома */
   table
{
    border: 0px double #333; /* Рамка вокруг таблицы */ 
    border-collapse: separate; /* Способ отображения границы */ 
    width: auto; /* Ширина таблицы */ 
    border-spacing: 55px 55px; /* Расстояние между ячейками */ 
}
   td
{
    padding: 5px; /* Поля вокруг текста */ 
    border: 5px solid #000000; /* Граница вокруг ячеек */ 
}



.div {
width:100%;
overflow:hidden;
white-space:nowrap;
border:0px solid black;
/* background-color: white;  */
}
.div div {float:center;}



audio
 {
	
	width: 50%;
	color: green;
	font-size: 1.9em;
	font-style: normal;
    font-weight: 800;
    font-weight: 800;
	line-height: 3.0;
	text-decoration: none;
	font-family:cursive;
	text-shadow: 3px 3px 3px red, 3px 3px 1em blue, ;
	border:1px solid green;
	background-color: white;
 }
 
 controls
 {
	
	width: 50%;
	color: green;
	font-size: 1.9em;
	font-style: normal;
    font-weight: 800;
    font-weight: 800;
	line-height: 3.0;
	text-decoration: none;
	font-family:cursive;
	text-shadow: 3px 3px 3px red, 3px 3px 1em blue, ;
	border:1px solid green;
	background-color: white;
 }
 


/* br */
/* { */
/* line-height: 0.5em; */
/* } */

<style>
            .grid-container {
                border: solid 2px #000;
                display: grid;
            }
            .grid-item {
                text-align:center;
                font-size: 1.1em;
                padding: 1.5em;
                color: white;
            }
 
            .color1 {background-color: #675BA7;}
            .color2 {background-color: #9BC850;}
            .color3 {background-color: #A62E5C;}
            .color4 {background-color: #2A9FBC;}
        </style>