* { --mbg: #0D0D0D; /* main bg */ --sbg: #1b1a1a; /* second bg */ --carbut: #1F2A44; /* primary card button bg */ --textsmain: #3A4F8F; /* headings, text color */ --buttons: #6C3BBF; --hovers: #9A4DFF; --lightbg: #E2D9FF; /* light bg for cards and sections */ --textcontrast: #FFFFFF; /* text color on dark backgrounds */ font-family: 'Montserrat', sans-serif; background-color: var(--mbg); } .header__main { background-color: var(--mbg); color: var(--sbg); padding: 20px 0; } .header__container { max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; } .header__logo { width: 180px; height: 100px; transform: scale(1); transition: transform 0.4s ease; cursor: pointer; } .header__logo:hover { transform: scale(1.05); transition: transform 0.4s ease; } .header__nav {} .header__menu { display: flex; gap: 30px; list-style: none; margin: 0; padding: 0; } .header__menu li a { color: white; text-decoration: none; font-size: 18px; font-weight: 700; transition: transform 0.4s ease, font-size 0.4s ease; } .header__menu li a:hover { color: var(--buttons); transform: scale(1.05); font-size: 20px; } .header__button_start { background-color: var(--buttons); color: white; padding: 10px 20px; border-radius: 6px; text-decoration: none; font-weight: 600; transform: scale(1); transition: transform 0.4s ease; } .header__button_start:hover { background-color: var(--hovers); transform: scale(0.9); transition: transform 0.4s ease; } /* Стили для основного контента */ .main__main { padding: 60px; } .main__container { position: relative; max-width: 1200px; margin-inline: auto; display: flex; justify-content: space-between; align-items: center; } .main__content { max-width: 600px; padding-block: 10px; } .main__text { color: var(--textcontrast); } .main__title { font-family: 'Montserrat', sans-serif; font-weight: bold; font-size: 80px; letter-spacing: -2.5px; line-height: 77px; color: var(--textcontrast); max-width: 500px; } .main__desc { font-family: 'Montserrat', sans-serif; font-weight: 500; font-size: 20px; letter-spacing: -0.65px; line-height: 30px; color: var(--textcontrast); margin-top: 30px; max-width: 500px; } .main__buttons { margin-top: 50px; display: flex; gap: 40px; } .main__button { background-color: var(--buttons); color: white; padding: 10px 20px; border-radius: 6px; text-decoration: none; font-weight: 600; transform: scale(1); transition: transform 0.4s ease; } .main__button:hover { background-color: var(--hovers); transform: scale(0.9); transition: transform 0.4s ease; } .main__button__ip { /* background-color: var(--buttons); */ border: 3px solid; color: white; padding: 10px 20px; border-radius: 6px; text-decoration: none; font-weight: 600; transform: scale(1); transition: transform 0.4s ease; cursor: pointer; width: 200px; height: 40px; } .main__button__ip:hover { border: 3px solid; transform: scale(0.9); transition: transform 0.4s ease; } .main__image { position: absolute; top: 0; right: -80px; width: 600px; height: 600px; } /* Пересечение с футером и хедером */ .main__separator { border: none; height: 7px; border-radius: 5px; background-color: var(--sbg); margin: 40px 150px; } /* Пробел между страницами */ .space__gr { height: 200px; } /* Сервера проекта */ .main__servers { padding-block: 32px; } .servers__container { position: relative; max-width: 1200px; max-height: 1200px; margin-inline: auto; display: grid; gap: 40px; } /* SERVER 1 */ .servers__server__text { color: var(--textcontrast); font-weight: 600; font-style: bold; font-size: 25px; margin: 0 auto; } .servers__items { position: relative; max-width: 600px auto; display: flex; flex-direction: row; justify-content: space-between; /* justify-content: center; */ /* СТАВИМ АЙТЕМОВ БОЛЬШЕ 3. */ align-items: center; /* flex-wrap: wrap; */ /* СТАВИМ АЙТЕМОВ БОЛЬШЕ 3. */ /* margin: 0 auto; */ /* СТАВИМ АЙТЕМОВ БОЛЬШЕ 3. */ /* gap: 20px; */ /* СТАВИМ АЙТЕМОВ БОЛЬШЕ 3. */ } .servers__server__item1 { background-color: var(--sbg); border-radius: 15px; padding: 20px; width: 300px; height: 300px; } .servers__item1__title_text { font-size: 24px; font-weight: 700; color: var(--textcontrast); margin: auto; background-color: var(--sbg); } .servers__item1__title { display: flex; align-items: center; background-color: var(--sbg); margin-bottom: 15px; } .servers__item1__anonce { background-color: var(--sbg); } .servers__item1__anonce p { font-size: 16px; font-weight: 700; border-radius: 10px; color: var(--textcontrast); background-color: var(--textsmain); padding: 5px 10px; display: flex; justify-content: center; } .servers__item1__image { width: 60px; height: 60px; background-color: #2f303d; background-size: 100px; border-radius: 15px; transition: 0.5s ease; } .servers__item1__desc { background-color: var(--sbg); line-height: 24px; margin: 0; border-radius: 10px; overflow: hidden; text-overflow: ellipsis; } .servers__item1__desc p { background-color: var(--sbg); font-size: 16px; font-weight: 200; color: var(--textcontrast); width: 300px; height: 125px; margin: 0; } .servers__item1__buttons { display: flex; gap: 20px; margin-top: 15px; background-color: var(--sbg); justify-content: center; } .servers__items__button { background-color: var(--buttons); color: white; padding: 10px 110px; border-radius: 6px; text-decoration: none; cursor: pointer; border: none; display: flex; justify-content: center; font-weight: 600; transform: scale(1); transition: transform 0.4s ease; } .servers__items__button:hover { background-color: var(--hovers); transform: scale(0.9); transition: transform 0.4s ease; } /* SERVER 2 */ .servers__server__item2 { background-color: var(--sbg); border-radius: 15px; padding: 20px; width: 300px; height: 300px; } .servers__item2__title_text { font-size: 24px; font-weight: 700; color: var(--textcontrast); margin: auto; background-color: var(--sbg); } .servers__item2__title { display: flex; align-items: center; background-color: var(--sbg); margin-bottom: 15px; } .servers__item2__anonce { background-color: var(--sbg); } .servers__item2__anonce p { font-size: 16px; font-weight: 700; border-radius: 10px; color: var(--textcontrast); background-color: var(--textsmain); padding: 5px 10px; display: flex; justify-content: center; } .servers__item2__image { width: 60px; height: 60px; /* background-color: #122b29; */ background-color: #c2dfd3; /* box-shadow: 0px 5px 5px #0D0D0D; */ background-size: 100px; border-radius: 15px; } .servers__item2__desc { background-color: var(--sbg); line-height: 24px; margin: 0; border-radius: 10px; overflow: hidden; text-overflow: ellipsis; } .servers__item2__desc p { background-color: var(--sbg); font-size: 16px; font-weight: 200; color: var(--textcontrast); width: 300px; height: 125px; margin: 0; } .servers__item2__buttons { display: flex; gap: 20px; margin-top: 15px; background-color: var(--sbg); justify-content: center; } /* SERVER 3 */ .servers__server__item3 { background-color: var(--sbg); border-radius: 15px; padding: 20px; width: 300px; height: 300px; } .servers__item3__title_text { font-size: 24px; font-weight: 700; color: var(--textcontrast); margin: auto; background-color: var(--sbg); } .servers__item3__title { display: flex; align-items: center; background-color: var(--sbg); margin-bottom: 15px; } .servers__item3__anonce { background-color: var(--sbg); } .servers__item3__anonce p { font-size: 16px; font-weight: 700; border-radius: 10px; color: var(--textcontrast); background-color: var(--textsmain); padding: 5px 10px; display: flex; justify-content: center; } .servers__item3__image { width: 60px; height: 60px; /* background-color: #122b29; */ background-color: #c2dfd3; /* box-shadow: 0px 5px 5px #0D0D0D; */ background-size: 100px; border-radius: 15px; } .servers__item3__desc { background-color: var(--sbg); line-height: 24px; margin: 0; border-radius: 10px; overflow: hidden; text-overflow: ellipsis; } .servers__item3__desc p { background-color: var(--sbg); font-size: 16px; font-weight: 200; color: var(--textcontrast); width: 300px; height: 125px; margin: 0; } .servers__item3__buttons { display: flex; gap: 20px; margin-top: 15px; background-color: var(--sbg); justify-content: center; } /* SERVER 4 */ .servers__server__item4 { background-color: var(--sbg); border-radius: 15px; padding: 20px; width: 300px; height: 300px; } .servers__item4__title_text { font-size: 24px; font-weight: 700; color: var(--textcontrast); margin: auto; background-color: var(--sbg); } .servers__item4__title { display: flex; align-items: center; background-color: var(--sbg); margin-bottom: 15px; } .servers__item4__anonce { background-color: var(--sbg); } .servers__item4__anonce p { font-size: 16px; font-weight: 700; border-radius: 10px; color: var(--textcontrast); background-color: var(--textsmain); padding: 5px 10px; display: flex; justify-content: center; } .servers__item4__image { width: 60px; height: 60px; /* background-color: #122b29; */ background-color: #c2dfd3; /* box-shadow: 0px 5px 5px #0D0D0D; */ background-size: 100px; border-radius: 15px; } .servers__item4__desc { background-color: var(--sbg); line-height: 24px; margin: 0; border-radius: 10px; overflow: hidden; text-overflow: ellipsis; } .servers__item4__desc p { background-color: var(--sbg); font-size: 16px; font-weight: 200; color: var(--textcontrast); width: 300px; height: 125px; margin: 0; } .servers__item4__buttons { display: flex; gap: 20px; margin-top: 15px; background-color: var(--sbg); justify-content: center; } .modal1 { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.5); transform: scale(1); transition: transform 0.5s ease-in; } .modal__content1 { background-color: var(--sbg); margin: 10% auto; padding: 20px; border-radius: 6px; width: 100%; max-width: 575px; height: 520px; position: fixed; right: 0; left: 0; top: -70px; } .modal__content1 h2 { background-color: var(--sbg); color: var(--textcontrast); position: absolute; top: 10px; } .modal1__image__protocol { width: 575px; height: 300px; border-radius: 15px; margin-top: 50px; overflow: hidden; text-overflow: ellipsis; } .modal__content1 p { background-color: var(--sbg); color: var(--textcontrast); margin-bottom: 15px; } .modal1__buttons { background-color: var(--sbg); margin-top: 25px; height: 30px; width: 575px; } .modal1__buttons a { text-decoration: none; } .modal1__button__buy { background-color: var(--buttons); transform: scale(1); transition: transform 0.3s ease; color: var(--textcontrast); cursor: pointer; padding: 10px 20px; border-radius: 10px; margin: 15px; transition: 0.3s ease; } .modal1__button__buy:hover { background-color: var(--hovers); transition: 0.3s ease; } .modal1__button__buy__disabled { background-color: var(--carbut); color: var(--textsmain); cursor: pointer; padding: 10px 20px; border-radius: 10px; } /* Кнопка закрытия */ .close1 { color: var(--buttons); position: absolute; top: 10px; right: 15px; /* margin-top: 10px; */ font-size: 48px; font-weight: bold; cursor: pointer; background-color: var(--sbg); } .close1:hover { color: var(--hovers); background-color: var(--sbg); } /* SCROLL BAR */ ::-webkit-scrollbar { width: 10px; } ::-webkit-scrollbar-track { background-color: var(--mbg); } ::-webkit-scrollbar-thumb { background: var(--sbg); border-radius: 10px; } /* HOW TO PLAY Страница */ .HTS__main { text-decoration: none; color: var(--textcontrast); margin: 0 170px 0 170px; display: flex; justify-content: left; max-width: 1200px; height: auto; } .HTS__main__container { position: relative; margin-inline: auto; justify-content: space-between; align-items: center; } .HTS__main__content { max-width: 1200px; padding-block: 10px; } .HTS__main__text { font-family: 'Montserrat', sans-serif; } .HTS__main__text h3 { font-weight: 700; font-size: 48px; } .HTS__main__text h2 { font-weight: 700; font-size: 36px; } .HTS__main__text p { font-weight: 400; font-size: 20px; margin: 20px; } .HTS__main__text li { margin-left: 20px; font-size: 20px; } .info__exq { background-color: rgba(125, 125, 223, 0.171); font-weight: bold; border-radius: 10px; width: 800px; padding: 10px; } /* 404 страницы */ .error__body { background-color: var(--mbg); text-decoration: none; } .error__div__main { display: flex; justify-content: center; align-items: center; flex-direction: column; text-align: left; } .error__div__main h4 { color: var(--textcontrast); text-align: left; font-family: 'Montserrat', sans-serif; font-size: 48px; } .error__div__main a { color: var(--textcontrast); text-decoration: none; font-family: 'Montserrat', sans-serif; font-size: 24px; transform: scale(1); transition: transform 0.3s ease; } .error__div__main a:hover { color: var(--hovers); text-decoration: double; font-family: 'Montserrat', sans-serif; font-size: 24px; transform: scale(0.9); transition: transform 0.3s ease; } .error__image__cr { position: absolute; background-color: transparent; width: 700px; height: 465px; top: 225px; right: auto; bottom: auto; left: auto; } /* Стили для футера */ .footer__main { background-color: var(--sbg); color: var(--textcontrast); text-align: center; padding: 20px 0; border-radius: 15px; margin: 0 150px; } .footer__container { max-width: 1200px; background-color: var(--sbg); margin: 0 auto; } .footer__text { margin: 0; background-color: var(--sbg); border-radius: 10px; } .footer__image__main_edit { width: 50px; height: 50px; position: absolute; top: 1640px; bottom: 0px; left: 170px; background-color: var(--sbg); } .footer__image__main_edit_hts { width: 50px; height: 50px; position: absolute; top: 1588px; bottom: 0px; left: 170px; background-color: var(--sbg); }