:root { --main-bg-color: brown; --radius: 15px; } * { box-sizing: border-box; } html { font-family: 'Jura', sans-serif; font-weight: 400; font-size: 120%; color: white; } body { background-attachment: fixed; background-color: #111111; background-image: url(../img/header_bg.jpg); background-position: center; background-size: cover; background-repeat: no-repeat; } .container { width: 1000px; margin-left: auto; margin-right: auto; padding-left: 15px; padding-right: 15px; } /* Header */ .header { padding-top: 50px; } .logo_link { display: flex; align-items: center; justify-content: center; } .logo { width: 300px; /*width: calc(10% + 300px);*/ display: block; } /* Helper */ .bg { background: rgba(0, 0, 0, 0.83); } .img-res { display: block; width: 100%; max-width: 100%; } .img-lvl { width: 45%; max-width: 45%; margin: 10px; display: inline-block; } .img-fac { width: 46px; max-width: 46px; margin: 10px; display: inline-block; } /* Navigate */ .nav { margin-top: 100px; } .nav_ul { display: flex; list-style: none; margin-bottom: 1px; } .nav_ul_network { display: flex; list-style: none; margin-bottom: 1px; padding-left: 400px; } .nav_item { position: relative; } .nav_link { display: block; padding: 20px; color: white; font-weight: 700; text-decoration: none; text-transform: uppercase; } .active, .nav_link:hover { color: #ce8404; } /* Sub menu */ .nav_sub { position: absolute; list-style: none; border: 2px solid white; background: #000000; padding: 0; margin-top: -10px; margin-left: 0; display: none; } .nav_sub .nav_item { border-bottom: 0.5px solid white; display: block; padding: 0; margin: 0 6px; } .nav_sub .nav_item:last-child { border: none; } .nav_sub .nav_link { padding: 8px 8px 8px 50px; display: block; } /* */ .network{ width: 30px; } ul{ list-style: none; } /*Text*/ .lvl-text{ font-size: 40px; } /* Page */ .page { display: flex; } .col-1 { width: 70%; /* padding: 10px 30px; */ } .col-2 { width: 30%; padding: 10px 30px 10px 0; } /* Article */ .article { background: rgba(0, 0, 0, 0.7); margin-bottom: 10px; padding: 30px; } /*.article_title { }*/ .article_date { margin-bottom: 20px; } .article-content { margin-top: 20px; margin-bottom: 30px; } .lvl-content { width: auto; height: auto; /* Размеры */ outline: 2px solid #fff; /* Чёрная рамка */ border: 3px solid #000; /* Белая рамка */ border-radius: 10px; /* Радиус скругления */ } /* Banner */ .banner .img-res { margin-bottom: 10px; } .banner{ display: block; transition: 0.3s; } .banner:hover { transform: scale(1.03); filter: brightness(150%); } .footer { margin-bottom: 100px; } .footer-item { display: flex; justify-content: center; margin-top: 30px; margin-bottom: 30px; align-items: center; } .footer-item img { padding: 20px; } /* Media and */ @media (max-width: 900px) { .container { width: 100%; } .nav_item { padding: 10px; } .page { flex-direction: column; } .col-1 { width: 100%; } .col-2 { width: 100%; padding: 10px 30px; } .footer { text-align: center; } .footer-item { flex-direction: column; } } /*CSGO-menu*/ #csgo-menu { position: relative; height: 600px; } area { cursor: pointer; } .layer { position: absolute; top: 0; left: 0; } #csgo-view { margin-top: 30px; height: 130px; }