:root {
	--default-text-color: #fff;
	--default-background-color: #00031f;
	--default-logo-color: #78CAFF;
}

body, div {margin: 0; padding: 0; background: var(--default-background-color);}
header {height: 50px; width: 100%; display: flex; justify-content: space-between; color: var(--default-logo-color)}
.logo, .logotip {font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif"; font-size: 1.5vw; text-align: center; text-shadow: 1px 1px 2px #7D0FDC; margin-left: 15vw; line-height: 30px}

.back {display: block; height: 50px; width: 50px; border: solid 2px #008BF0; box-shadow: 0px 0px 5px #008BF0; font-size: 40px; color: #008BF0; text-align: center; border-radius: 50%; text-decoration: none; position: relative; top: 1vw; left: 2vw}
footer {font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif"; color: #A3A3A3; line-height: 50px; position: relative; left: 1vw; width: 80vw}
main {width: 1000px; margin: auto; margin-top: 50px; margin-bottom: 50px}
.top {display: flex; font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif"; height: 50px; text-shadow: 1px 1px 2px #7D0FDC; color:var(--default-text-color); border-bottom: solid 1px #0d67c7; text-align: center}
.nazv {font-size: xx-large; font-weight: bold; text-align: center; margin-left: 400px}
.nazv2 {font-size: xx-large; font-weight: bold; text-align: center; margin-left: 320px}
.nazv3 {font-size: xx-large; font-weight: bold; text-align: center; margin-left: 375px}
.zab {font-size: 15px; line-height: 40px; box-shadow: 1px 1px 10px #0d67c7; height: 40px; margin: auto; margin-right: 15px; padding-left: 10px; padding-right: 10px;}
.brain {height: 600px; width: 1000px; display: block; margin: auto;}
.text {font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif"; text-align: justify; text-indent: 30px; color: var(--default-text-color)}
p {margin-top: 5px; margin-bottom: 5px}
.text > div:nth-child(1) {width: 320px; border: solid 1px #0d67c7; border-radius: 5px; padding: 10px; }
.text > div:nth-child(2) {width: 640px; margin-left: 170px; margin-top: 20px; margin-bottom: 20px; border: solid 1px #0d67c7; border-radius: 5px; padding: 10px; }
.text > div:nth-child(3) {width: 320px; margin-left: 658px; margin-bottom: 30px; border: solid 1px #0d67c7; border-radius: 5px; padding: 10px; }

.lit > div:nth-child(1), .movie > div:nth-child(1) {font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif"; font-size: x-large; color: var(--default-text-color); margin-bottom: 30px; text-align: center; border-top: solid 1px #0d67c7; width: 990px; margin-left: 5px; padding-top: 10px}
.img-lit, .mov-video {display: flex}
.mov-video {justify-content: space-between}
.mov-video > iframe:nth-child(1) {margin-left: 50px}
.mov-video > iframe:nth-child(2) {margin-right: 50px}
.img-lit > a { background-size: cover; display: block; height: 300px; width: 200px; box-shadow: 1px 1px 10px #0d67c7; }
.photo1 {background: url("../image/Homo_Mutabilis.png") no-repeat; margin-left: 50px;}
.photo2 {background: url("../image/memento_memory.png") no-repeat; margin: auto; }
.photo3 {background: url("../image/Anatomy_zabl.png") no-repeat; margin-right: 50px;}
.photo4 {background: url("../image/Biology_dobr_and_evil.png") no-repeat;  margin-left: 50px; }
.photo5 {background: url("../image/Brain_history.jpg") no-repeat; margin: auto;}
.photo6 {background: url("../image/Game_of_testosteron.png") no-repeat; margin-right: 50px;}
.photo7 {background: url("../image/Genderny_mozg.jpg") no-repeat; background-size: cover; margin-left: 50px;}
.photo8 {background: url("../image/How_we_see.png") no-repeat; margin: auto;}
.photo9 {background: url("../image/How_work_brain.jpeg") no-repeat; margin-right: 50px;;}
.photo10 {background: url("../image/How_work_your_brain.jpg") no-repeat; margin-left: 50px;}
.photo11 {background: url("../image/I_can't_stop.png") no-repeat; margin: auto;}
.photo12 {background: url("../image/Kak_rojdautsya_emojy.jpeg") no-repeat; margin-right: 50px;}
.photo13 {background: url("../image/Kto_by_mog_pod.jpg") no-repeat; margin-left: 50px;}
.photo14 {background: url("../image/Mozg_i_ego_potr.png") no-repeat; margin: auto;}
.photo15 {background: url("../image/Mozg_materialen.jpg") no-repeat; margin-right: 50px;}
.photo16 {background: url("../image/Mozg_tain_razuma.jpg") no-repeat; margin-left: 50px;}
.photo17 {background: url("../image/Mozg_tonk_nastr.png") no-repeat; margin: auto;}
.photo18 {background: url("../image/Mozgouskor.png") no-repeat; margin-right: 50px;}
.photo19 {background: url("../image/Mozgovodstvo.jpg") no-repeat; margin-left: 50px;;}
.photo20 {background: url("../image/Music_and_brain.png") no-repeat; margin: auto;}
.photo21 {background: url("../image/neiromix.jpeg") no-repeat; margin-right: 50px;}
.photo22 {background: url("../image/nestar_mozg.jpg") no-repeat; margin-left: 50px;}
.photo23 {background: url("../image/predskaz_irracion.png") no-repeat; margin: auto;}
.photo24 {background: url("../image/razv_pamyaty.png") no-repeat; margin-right: 50px;}
.photo25 {background: url("../image/razviv_svoy_mozg.jpg") no-repeat; margin-left: 50px;}
.photo26 {background: url("../image/Run_brain_run.jpg") no-repeat; margin: auto;}
.photo27 {background: url("../image/S_uma_soyty.png") no-repeat;; margin-right: 50px;}
.photo28 {background: url("../image/Seven_and_half.png") no-repeat; margin-left: 50px;}
.photo29 {background: url("../image/V_molekul-ot_bez.png") no-repeat; margin: auto;}
.photo30 {background: url("../image/Volya_i_samokontr.png") no-repeat; margin-right: 50px;}
.photo31 {background: url("../image/Vynos_mozga.jpg") no-repeat; margin-right: 50px;}
.photo32 {background: url("../image/Vzlom_psihology.png") no-repeat; margin: auto;}
.photo33 {background: url("../image/Zagadky_sna.png") no-repeat; margin-right: 50px;}
.tema {height: 50px; width: 50px; position: relative; right: 50px; top: 20px; animation: rotateX 5s linear infinite alternate; background-position: center; background-size: cover; box-shadow: 1px 1px 5px #0d67c7; border-radius: 50%; background-image: url("../image/tema1.png") }

.up {display: block; height: 50px; width: 50px; border: solid 2px #008BF0; box-shadow: 0px 0px 5px #008BF0; font-size: 50px; color: #008BF0; text-align: center; border-radius: 50%; position: fixed; bottom: 20px; right: 20px; text-decoration: none}
.unv2 {display: none;}
.unv {height: 500px; width: 300px; background-color: var(--default-background-color); z-index: 50; position: absolute; top: 160px; right: 5vw; display: block; box-shadow: 1px 1px 10px #0d67c7;}
.unv2 > div {height: 430px; font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif"; text-align: left; margin-top: 20px; padding: 1vw; color: var(--default-text-color); overflow-y: auto; padding-top: 20px; padding-bottom: 20px}
.unv3 { position:fixed; top:0; left:0; width:100vw; height:100vh; overflow:hidden; z-index:49; display:block; background-color:transparent; }

.zab:hover {cursor: pointer; box-shadow: 1px 1px 10px 5px #0d67c7;}
.photo1:hover {cursor: pointer; box-shadow: 1px 1px 10px 5px #0d67c7;}
.photo2:hover {cursor: pointer; box-shadow: 1px 1px 10px 5px #0d67c7;}
.photo3:hover {cursor: pointer; box-shadow: 1px 1px 10px 5px #0d67c7;}
.tema:hover {cursor: pointer}

@keyframes rotateX {
  to { transform: rotateX(360deg); }
}

@media screen and (max-width: 1100px) {
	.nazv, .nazv2, .nazv3 {margin: auto}
	.logo {margin-left: 5vw}
	main {width: 95vw}
	.brain {width: 95vw; background-position: center}
	.text > div:nth-child(1) {width: 90vw; margin: auto}
	.text > div:nth-child(2) {width: 90vw; margin: auto; margin-top: 20px; margin-bottom: 20px}
	.text > div:nth-child(3) {width: 90vw; margin: auto; margin-bottom: 20px}
	.lit > div:nth-child(1), .movie > div:nth-child(1) {width: 93vw; margin-left: 1vw}
	iframe {height: 250px; width: 325px}
}
@media screen and (max-width: 800px) {
	.nazv, .nazv3 {margin: auto; font-size: larger}
	.nazv2 {margin: auto; font-size: 15px}
	.brain {width: 90vw}
	.zab {font-size: 13px}
	.img {background-position: center}
	.img-lit, .mov-video {display: block}
	.photo1, .photo2, .photo3, .photo4, .photo5, .photo6, .photo7, .photo8, .photo9, .photo10, .photo11, .photo12, .photo13, .photo14, .photo15, .photo16, .photo17, .photo18, .photo19, .photo20, .photo21, .photo22, .photo23, .photo24, .photo25, .photo26, .photo27, .photo28, .photo29, .photo30, .photo31, .photo32, .photo33 {width: 300px; height: 450px; margin: auto; margin-bottom: 20px; background-size: cover}
	.logo {font-size: 3vw}
	iframe {margin-bottom: 30px; width: 85vw;}
	.mov-video > iframe:nth-child(1) {margin-left: 5vw}
	.mov-video > iframe:nth-child(2) {margin-right: 0; margin-left: 5vw}
	.tema {right: 10px; top: 5px; height: 44px; width: 44px}	
	.poisk {display: flex}
	.poisk > input:nth-child(2) {margin-right: 20px}
}