@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@100;400;600;700&display=swap'); /*ДЕФОЛТ*/ body { padding: 0; margin: 0; font-family: 'Josefin Sans', sans-serif; font-weight: 400; color: #eeeeee; font-size: 24px; background-color: #000; text-transform: none; } * { box-sizing: border-box; } h1, h2, h3, h4, h5, h6{ padding: 0; margin: 0; } a { text-decoration: none; } p { margin: 0; } ul{ list-style-type: none; padding-inline-start: 0px; margin-block-start: 0; margin-block-end: 0; } /**/ h1{ font-style: normal; font-weight: bold; font-size: 48px; line-height: 48px; } h2{ font-style: normal; font-weight: bold; font-size: 27px; line-height: 27px; } h3{ } html, body { scrollbar-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1); scrollbar-width: thin; } /*главная страница*/ .container { width: 1520px; margin: 0 auto; } header{ background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url(pic/bgmain.jpg); background-size: cover; background-position: center; height: 100vh; } .bar{ display: inline-block; text-align: center; padding-top: 150px; padding-right: 10px; padding-left: 10px; } .logo a{ display: flex; } .cross{ padding-top: 8px; margin: 0 auto; } .menu a{ text-decoration: none; color: #eeeeee; transition: 0.1s linear; } .menu a:hover{ color: #eeeeee; opacity: 60%; } .links li{ margin-top: 24px; } /*нав галереи*/ .logo a{ text-decoration: none; color: #eeeeee; transition: 0.1s linear; } .navbar{ background-color: #1b1b1b; padding-top: 26px; padding-bottom: 26px; } #navmenu{ display: flex; margin-left: auto; margin-right: 0; align-items: center; } #navmenu li { margin-left: 40px; } #asd{ display: flex; } /*галерея*/ .clear{ /* clearfix класс */ clear:both; } .nomargin{ /* nomargin класс */ margin-right:0px; } .pic{ float:left; margin:0; width:33.33%; height:400px; } .pic a{ height:400px; text-indent:-99999px; display:block; } /*Скроллбар*/ ::-webkit-scrollbar { width: 8px; position: absolute; } ::-webkit-scrollbar-thumb { background-color: rgba(255, 255, 255, .3); border-radius: 2em; } ::-webkit-scrollbar-thumb:hover { background-color: rgba(255, 255, 255, .45); } /*Адаптив*/ @media screen and (max-width: 425px) { body{ font-size: 16px; } .container { margin: 0 auto; max-width: 95%; } #navmenu{ display: block; } #navmenu li{ font-size: 16px; padding-top: 10px; } .pix>.pic{ height: 150px; } .pix>.pic a{ height:150px; } } @media screen and (max-width: 600px) { .container { margin: 0 auto; width: 95%; } } @media screen and (max-width: 768px) { .container { margin: 0 auto; width: 95%; } body{ font-size: 20px; } .links{ font-size: 36px; } h1{ font-style: normal; font-weight: bold; font-size: 32px; line-height: 32px; } h2{ font-style: normal; font-weight: bold; font-size: 20px; line-height: 20px; } .bar{ align-items: center; display: block; } .links li{ margin-top: 80px; } .pic{ height: 200px; } .pic a{ height:200px; } } @media screen and (max-width: 1024px) { .container { margin: 0 auto; width: 95%; } .links{ font-size: 28px; } h1{ font-style: normal; font-weight: bold; font-size: 32px; line-height: 32px; } h2{ font-style: normal; font-weight: bold; font-size: 20px; line-height: 20px; } .bar{ display: block; } .links li{ margin-top: 60px; } .pic{ height: 300px; } .pic a{ height:300px; } } @media screen and (max-width: 1440px) { .container { margin: 0 auto; max-width: 1200px; } }