/* Общие стили для тела страницы */
body {

	font-family: 'Noto Sans', sans-serif;

    background-color: #FFFFE0;
    margin: 0;
    padding: 0;
}

header {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    height: 80px;
    border-bottom: 4px solid #DEB887;
	background: rgb(255, 188, 88); /*итоговый background-color: #FFEBCD;*/
    background-image: url('bowed-string-instrument-violin-family-musical-instrument-slide-guitar-viola-violin-1406489-pxhere.com.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    position: relative; /* для псевдоэлемента */
    z-index: 0;
}

header::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.7);
    z-index: -1;
}

/* Стили для заголовка сайта */
header h1 {
    margin: 0;
    text-align: center;
    z-index: 1;
}

.title {
    /*font-size: 50px;*/
    line-height: 56px;
    color: #000;
}

.title span {
    padding: 10px; /* Добавляем отступы вокруг текста */
    background: rgba(255, 255, 255, 0.77); /* Белый фон с прозрачностью */
	border-radius: 5px; /* Закругленные углы */
}

/* Навигация */
nav {
    background-color: #FFEBCD;
    padding: 10px 0;
    border-bottom: 4px solid #DEB887; /* Рамка между nav и main */
}

/* Горизонтальное меню */
.menu {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: center;
}

/* Пункты меню */
.menu-item {
    display: inline-block;
    position: relative;
    margin: 0 7px;
}

/* Ссылки меню */
.menu-item > a {
    text-decoration: none;
    color: #444444;
    padding: 8px 12px;
    border-radius: 4px;
    font-weight: bold;
    cursor: pointer;
    user-select: none;
}

/* Hover эффект для пунктов меню */
.menu-item:hover > a {
    background-color: #d8d8d3;
    color: #444444;
}

/* Подменю */
.submenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #d8d8d3;
    list-style: none;
    padding: 0;
    margin: 0;
    border-radius: 4px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    z-index: 1000;
    width: auto;

    /* Добавлено: минимальная ширина подменю равна ширине родительского пункта меню */
    min-width: 100%;
}

/* Показывать подменю при наведении */
.menu-item:hover .submenu {
    display: block;
}

/* Элементы подменю */
.submenu-item {
    padding: 8px 12px;
    color: #444444;
    text-decoration: none;
    display: block;
    white-space: nowrap; /* Предотвращаем перенос текста */
    text-align: left; /* Выровнять текст по левой стороне */
}

/* Hover эффект для подменю */
.submenu-item:hover {
    background-color: #bcbcb4;
    color: #444444;
}

.submenu-item a:hover {
    /*text-decoration: underline;  Добавляем подчеркивание при наведении (по желанию) */
    color: #444; /* Устанавливаем более светлый цвет при наведении (по желанию) */
}

/* Основной контент */
main {
    display: flex;
    justify-content: center;
    padding: 10px 0;
    border-bottom: 4px solid #DEB887; /* Рамка между main и footer */
}

.content h2 {
    text-align: center;
    margin: 0;
	padding-top: 10px;
    padding-bottom: 10px;
}

.content h3 {
    text-align: center;
    margin: 0;
	padding-top: 10px;
    padding-bottom: 10px;
}

.content {
    background-color: #fffffa;
    padding: 20px;
	padding-bottom: 40px;
    width: 60%;
    text-align: justify;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    border-radius: 8px;
}

.content p {
    line-height: 1.4;
}

.content h2 {
    text-align: center;
}

.content h4 {
    margin-bottom: 1px; /* Установите нужное значение */
}

.content a:hover {
    /*text-decoration: underline;  Добавляем подчеркивание при наведении (по желанию) */
    color: #444; /* Устанавливаем более светлый цвет при наведении (по желанию) */
}


.annotation-image {
    
    margin-right: 10px; /* Отступ справа от изображения */
    margin-top: 15px;
    margin-bottom: 10px; /* Отступ снизу от изображения */
    width: 140px; /* Ширина изображения, можно изменить по необходимости */
    height: auto; /* Автоматическая высота для сохранения пропорций */
    display: block;  /* чтобы блок занимал место как изображение */
}

.annotation-image-author {
    
    margin-right: 10px; /* Отступ справа от изображения */
    margin-top: 15px;
    margin-bottom: 10px; /* Отступ снизу от изображения */
    width: 130px; /* Ширина изображения, можно изменить по необходимости */
    height: auto; /* Автоматическая высота для сохранения пропорций */
    display: block;  /* чтобы блок занимал место как изображение */
}

.columns {
    display: flex; /* Используем flexbox для создания колонок */
    margin-top: 10px; /* Отступ сверху для разделения заголовка и колонок */
}

.left-column {
    width: 160px; /* Фиксированная ширина для левой колонки */
    margin-right: 20px; /* Отступ между колонками */
    margin-left: 5px; /* Добавьте отступ слева, если нужно */
}

.right-column {
    flex-grow: 1; /* Правая колонка занимает оставшееся пространство */
    margin-right: 5px; /* Отступ справа для всего контента */
}

.custom-hr {
    border: none;
    height: 1px;
    background-color: #000;
    width: 80%;
}


.contacts {
	line-height: 1.4;
}

.contacts a {
	text-decoration: none; /* Убираем подчеркивание */
}

.contacts a:hover {
	text-decoration: underline; /* Добавляем подчеркивание при наведении (по желанию) */
}


ul {
    list-style-type: none; /* Убираем маркеры списка */
}

footer {
    padding: 10px;
    background-color: #FFEBCD;
}


.footer-content {
    background-color: #FFEBCD; /* Цвет фона */
    /*padding: 20px;  Внутренние отступы */
    text-align: left; 
    /*box-shadow: 0 2px 6px rgba(0,0,0,0.1); /* Тень */
    border-radius: 8px; /* Скругленные углы */
    margin: 0px auto; /* Авто отступы для центрирования */
    width: 60%; /* Ширина контейнера */
}

footer a {
    /*color: #000;  Устанавливаем цвет текста черным */
    text-decoration: none; /* Убираем подчеркивание */
}

/* Эффект при наведении курсора */
footer a:hover {
    text-decoration: underline; /* Добавляем подчеркивание при наведении (по желанию) */
    color: #444; /* Устанавливаем более светлый цвет при наведении (по желанию) */
}

.flag-icon {
    width: 20px;
    height: 12px; /* пропорции примерно 4:3, можно подстроить */
    vertical-align: middle; /* выравнивание по тексту */
    margin-right: 0px; /* отступ справа, чтобы отделить флаг от текста */
}

.footer-content a {
    margin-right: 10px; /* или любое нужное вам значение */
    display: inline-block; /* чтобы margin работал */
}




/* Медиазапрос для устройств с шириной экрана до 480px 
@media (max-width: 480px) {

}*/

/* Медиазапрос для устройств с шириной экрана до 768px */
@media (max-width: 768px) {
    
	    header {
        /*height: auto; /* Уменьшаем высоту заголовка */
        padding: 10px; /* Уменьшаем отступы */
    }

    .title {
        font-size: 30px; /* Уменьшаем размер шрифта заголовка */
    }

    nav {
        padding: 5px 0; /* Уменьшаем отступы в навигации */
    }

    .menu-item {
        margin: 0 5px; /* Уменьшаем отступы между пунктами меню */
    }


	
	
	header {
        text-align: center; /* Центрируем текст заголовка */
    }

    .content {
        width: 100%; /* Ширина контента равна 100% */
        box-shadow: none; /* Убираем тень для контента */
        border-radius: 0; /* Убираем скругления углов */
		padding: 15px; /* Уменьшаем отступы внутри контента */
    }
	



	
	.columns {
        flex-direction: column; /* Изменяем направление на вертикальное */
		display: flex;
		justify-content: center; /* Центрируем содержимое */
		align-items: center; /* Выравниваем по вертикали */
		margin-top: 10px; /* Отступ сверху для разделения заголовка и колонок */
    }

    .left-column {
		width: auto; /* Убираем фиксированную ширину */
		margin-left: 0; /* Убираем отступ для мобильных устройств */
        margin-right: 0; /* Убираем отступ для мобильных устройств */
        margin-bottom: 10px; /* Добавляем отступ снизу для разделения колонок */
		
    }
	
.right-column {
    flex-grow: 1; /* Правая колонка занимает оставшееся пространство */
    margin-left: 3px; /* Отступ справа для всего контента */    
    margin-right: 3px; /* Отступ справа для всего контента */
}


	.annotation-image {
		float: none;
		display: block; /* Убедитесь, что изображение блочное */
		width: 100%; /* Устанавливаем ширину 100% для адаптации к экрану */
		height: auto; /* Автоматическая высота для сохранения пропорций */
		margin: 0 auto; /* Центрируем изображение */
		max-width: 140px; /* Устанавливаем максимальную ширину, если нужно */
		
	}



    .content p {
        clear: both; /* Убираем обтекание текста вокруг изображения */
    }
}






@media (min-width: 769px) and (max-width: 900px) {
    .content {
        width: 70%; 
    }
}




@media (min-width: 1420px) {
    .content {
        width: 55%; 
    }
}

@media (min-width: 1520px) {
    .content {
        width: 50%; 
    }
}

@media (min-width: 1620px) {
    .content {
        width: 45%; 
    }
}

/* Медиазапросы для .footer-content */

@media (max-width: 768px) {
    .footer-content {
        width: 100%; /* Ширина на мобильных устройствах */
        border-radius: 0; 
    }
}

@media (min-width: 769px) and (max-width: 900px) {
    .footer-content {
        width: 70%; 
    }
}

@media (min-width: 1420px) {
    .footer-content {
        width: 55%; 
    }
}

@media (min-width: 1520px) {
    .footer-content {
        width: 50%; 
    }
}

@media (min-width: 1620px) {
    .footer-content {
        width: 45%; 
    }
}