* {
	font-family: Arial, Helvetica, sans-serif;
	color: #CCCC99;
	margin: 0px;
	padding: 0px;
}

body{
	background-color: black;
	display: flex;
}

.wrapper{
	width: 0px;
}

.main-area {
    margin: 0 auto; 
    width: 100%;
}

/* --------------------------------------- */
.header {
	background-image: url(./img/background/back-second.jpg);
	background-repeat: no-repeat;
	background-position: center;
	height: auto;
	text-align: center;
}

.header h3{
	font-size: 60px;
	padding-top: 60px;
}

.header p{
	font-size: 20px;
}

.header div a{
	margin: 0px 4px;
}

/* ✅ FIX 1 — убрали глобальное влияние */
.header h3,
.header p,
.header div {
	margin-bottom: 25px;
}

/* --------------------------------------- */
.content {
	height: auto;
	background-image: url(./img/background/back.jpg);
	background-position: center top;
	background-repeat: no-repeat;
}

.content .content-books, .content-text{
	margin: auto;
	width: 909px;
}

.content .content-books div{
	display: flex;
	justify-content: center;
	margin-bottom: 5px;
}

.content .content-books div a{
	font-size: 12px;
	width: 150px;
    height: 250px;
	margin: 5px;
	text-align: center;
}

.content .content-books div a img{
	width: 140px;
    height: 210px;
	padding: 3px;
	border: 0.1px solid ;
}

.content .content-books .bookB:hover{
	background-color: #CCCC99;
}

/* --- */
.content .content-text .content-text-el{
	margin: 25px;
}

.content .content-text p {
	text-indent: 25px;
	text-align: justify;
	line-height: 1.5;
}

.content .content-video .content-video-el{
    display: flex; 
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
	height: auto;
	border: 3px solid ;
}

.content .content-video{
	margin: auto;
	width: 900px;
}

.content .content-video h2{
	margin: 25px;
}

.line {
    margin-top: 20px;    
}

    .copyright {
        display: block !important;
        margin-top: 15px !important;
        font-size: 14px !important;
        text-align: center !important;
            margin-bottom: 20px;
    }

    .copyright a {
        color: #ffcc00 !important;
        text-decoration: underline;

    }

    .copyright a:hover {
        color: #ffffff;
    }

/* --------------------------------------- */
.footer {
	height: auto;
	text-align: center;
}

/* ✅ FIX 2 — не трогаем copyright */
.footer div:not(.copyright){
	justify-content: center;
	margin: 10px;
	font-size: 12px;
	column-gap: 12px;
	padding: 0;
}

/* ================= MOBILE ================= */
@media (max-width: 735px) {
    body {
        display: block !important;
        width: 100% !important;
    }

    .main-area, 
    .content .content-books, 
    .content-text, 
    .content .content-video {
        width: 100% !important; 
        max-width: 100% !important;
        margin: 0 auto !important;
        padding: 0 !important;
    }

    .header h3 { font-size: 30px; padding-top: 30px; }
    
    .header .header-desc { 
        font-size: 14px; 
        padding: 0 20px; 
        text-align: center; 
        line-height: 1.4;
    }

    .content .content-books div {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        width: 100%;
    }

    /* ✅ FIX 3 — текст 12px даже после JS */
    .text-wrapper,
    .text-wrapper * {
        font-size: 12px !important;
        text-align: justify !important;
    }

    .content .content-books div a {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        width: 42% !important; 
        height: auto !important;
        margin: 10px 5px;
        font-size: 13px;
    }

    .content .content-books div a img {
        width: 120px !important;
        height: 180px !important;
        margin-bottom: 5px;
    }

    .content-video .content-video-el {
        width: 90% !important;
        margin: 0 auto !important;
    }

    video {
        width: 100% !important;
        height: auto !important;
    }

    .footer div:not(.copyright) {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
        padding: 0 20px;
    }

    .footer div a {
        color: #CCCC99;
        text-decoration: underline;
        font-size: 14px;
        white-space: nowrap;
    }

    .footer div p {
        display: none; 
    }

    .footer img { 
        width: 200px !important; 
        margin-bottom: 15px; 
            margin-top: 20px;  
    }

    .text-wrapper {
        margin: 2px 15px !important;
    }

}