:root {
    --bg: #010602;
    --container_max_width: 1280px;
    --container_padding: 15px;
    --primary_font: "AvernusURWBol",Arial,sans-serif;
    --text: #ffe7b9
}

@font-face {
    font-family: 'AvernusURWBol';
    src: url('/fonts/subset-AvernusURW-Bol.woff2') format('woff2'),url('/fonts/subset-AvernusURW-Bol.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'AvernusURWBol';
    src: url('/fonts/subset-AvernusURW-Bol.woff2') format('woff2'),url('/fonts/subset-AvernusURW-Bol.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'AvernusURWBol';
    src: url('/fonts/subset-AvernusURW-Bol.woff2') format('woff2'),url('/fonts/subset-AvernusURW-Bol.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: CookieRunOTF;
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    src: url('/fonts/subset-CookieRunOTF-Regular00.woff2') format("woff2"),url('/fonts/subset-CookieRunOTF-Regular00.woff') format("woff")
}

@font-face {
    font-family: CookieRunOTF;
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    src: url('/fonts/subset-CookieRunOTF-Bold00.woff2') format("woff2"),url('/fonts/subset-CookieRunOTF-Bold00.woff') format("woff")
}

@font-face {
    font-family: CookieRunOTF;
    font-weight: 900;
    font-style: normal;
    font-display: swap;
    src: url('/fonts/subset-CookieRunOTF-Black00.woff2') format("woff2"),url('/fonts/subset-CookieRunOTF-Black00.woff') format("woff")
}


*,::after,::before {
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

body,html {
    height: 100%;
    margin: 0;
    padding: 0;
    scrollbar-color: var(--accent) var(--accent_2);
    scrollbar-width: thin
}

html {
    scroll-behavior: smooth
}

.page {
    font-family: var(--primary_font);
    font-size: clamp(16px,1.675vw,22px);
    font-weight: 400;
    line-height: 1.46;
    overflow-x: hidden;
    color: var(--text);
    background-color: var(--bg);
    -webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;
    -ms-text-size-adjust: none;
    text-size-adjust: none
}

.page__content {
    overflow: hidden;
    max-width: 1920px;
    margin-right: auto;
    margin-left: auto
}

.container {
    max-width: var(--container_max_width);
    margin-right: auto;
    margin-left: auto;
    padding-right: var(--container_padding);
    padding-left: var(--container_padding)
}

.h1,.h2,.h3,h1,h2,h3 {
    font-size: clamp(24px,3.125vw,40px);
    line-height: 1.33333;
    margin-top: 0;
    margin-bottom: .66667em
}

.h1,.h2,h1,h2 {
    font-weight: 900;
    text-transform: uppercase
}

.h3,h3 {
    font-weight: 400
}

img {
    max-width: 100%;
    height: auto
}

svg {
    -webkit-transition: fill .3s;
    transition: fill .3s
}

:focus {
    outline: 0
}

button,input,textarea {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    color: inherit
}

p {
    margin-top: 0;
    margin-bottom: 0;
}

p:last-child {
    margin-bottom: 0
}

ol:not([class]),ul:not([class]) {
    margin-top: 0;
    margin-bottom: 1.5em
}

ol:not([class]):last-child,ul:not([class]):last-child {
    margin-bottom: 0
}

ol:not([class]) li:not(:last-child),ul:not([class]) li:not(:last-child) {
    margin-bottom: 1em
}

ul {
    padding-left: 1.5em
}

ol {
    list-style-position: inside
}

.text-center {
    text-align: center
}

.text-right {
    text-align: right
}


.section_1 {
	position: relative;
    padding-top: 15%;
    padding-bottom: 75%;
    background: url('/images/section_1.jpg') no-repeat 50% 0/cover
}
.section_1:after {
	content:'';
	position: absolute;
	width: 100%;
	height: 100px;
	background: linear-gradient(to top, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
	bottom: 0;
	left: 0;
	z-index: 1;
}

.section_1__text-block {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: center;
}

.section_1__text {
    text-align: center;
}
.section_1__text p {
    /*max-width: 52ch;*/
}

.section_2 {
	position: relative;
    padding-top: 75%;
    padding-bottom: 15%;
    background: url('/images/section_2.jpg') no-repeat 50% 0/cover;
	background-position: center; 
}
.section_2:before {
	content:'';
	position: absolute;
	width: 100%;
	height: 100px;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
	top: 0;
	left: 0;
	z-index: 1;
}
.section_2:after {
	content:'';
	position: absolute;
	width: 100%;
	height: 400px;
	background: linear-gradient(to top, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
	bottom: 0;
	left: 0;
}

.section_2 h2 {
	position: absolute;
    top: 14%;
    left: 0;
	z-index: 3;
    text-align: center;
    width: 100%;
}
.section_2 .video_block {
	position: absolute;
    top: 25%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    width: 680px;
    height: 480px;
    background-image: url('/images/ui_book.png');
    background-repeat: no-repeat;
    background-size: contain;
    
	display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
}
.section_2 .video_block .title {
    position: absolute;
    top: -4%;
    left: 50%;
    transform: translateX(-50%);
	z-index: 1;
    height: 70px;
    width: 326px;
    background: url('/images/ui_title.png') no-repeat 50% 0 / cover;
	color: #111;
    font-size: 36px;
    font-style: italic;
    line-height: 70px;
    text-transform: uppercase;
    text-align: center;
}
.section_2 .video_block iframe {
    border-radius: 10px;
    margin-top: -30px;
	background: #333;
}
.section_2 .container {
    position: relative;
    z-index: 2;
	text-align: center;
}
.section_2 .btn_steam {
	position: relative;
	display: inline-block;
	border: 1px dashed #938569;
    border-radius: 10px;
    padding: 12px 20px 12px 60px;
    color: var(--text);
	font-size: 21px;
	text-decoration: none;
    line-height: 1;
	margin-top: 20px;
}
.section_2 .btn_steam:hover {
    border-color: var(--text);
}
.section_2 .btn_steam:before {
    content: '';
	position: absolute;
    top: 3px;
    left: 10px;
    width: 38px;
    height: 38px;
	background: url('/images/logo_steam.png') no-repeat 50% 0 / cover;
}


.section_3 {
	position: relative;
    max-height: 1900px;
    background: url('/images/section_3.jpg') no-repeat 50% 0/cover;
	background-position: center; 
}
.section_3:before {
	content:'';
	position: absolute;
	width: 100%;
	height: 100px;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
	top: 0;
	left: 0;
	z-index: 1;
}
.section_3:after {
	content:'';
	position: absolute;
	width: 100%;
	height: 400px;
	background: linear-gradient(to top, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
	bottom: 0;
	left: 0;
}

.section_3 .container {
    position: relative;
    z-index: 2;
	min-height: 900px;
}

.section_3 h2 {
	text-align: center;
}
.section_3 h3 {
    font-size: 21px;
    text-transform: uppercase;
	margin-bottom: 5px;
    line-height: 1.1;
}
.section_3 .team p {
    font-size: 18px;
    line-height: 1.2;
}

.section_3 .team_note {
	text-align: center;
}
.section_3 .team_list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: center;
    align-items: flex-start;
	margin: 100px 0;
}
.section_3 .team  a {
	color: #783828;
	font-size: 18px;
	text-decoration: none;
}
.section_3 .team  a:hover {color: #333;}
.section_3 .team {
	/*
	position: absolute;
	background: #00000095;
    padding: 25px;
    border-radius: 25px;
	*/

	position: relative;
	width: 350px;
    height: 150px;
    background-image: url('/images/ui_title_card.png');
    background-repeat: no-repeat;
    background-size: contain;
	padding: 30px 0 0 110px;
    color: #444;
	margin: 20px;
}
.section_3 .team:before {
	content:'';
	position: absolute;
	left: 20px;
    top: 30px;
	width: 72px;
	height: 72px;
	background-image: url('/images/ui_team_default.png');
    background-repeat: no-repeat;
    background-size: contain;
}

.section_3 .team_1:before {
	background-image: url('/images/ui_team_1.png');
}
.section_3 .team_2:before {
	background-image: url('/images/ui_team_3.png');
}
.section_3 .team_4:before {
	background-image: url('/images/ui_team_4.png');
}
.section_3 .team_5:before {
	background-image: url('/images/ui_team_5.png');
}

.section_3 .team__danya:before {
	background-image: url('/images/ui_team__danya.png');
}
.section_3 .team__albina:before {
	background-image: url('/images/ui_team__albina.png');
}
.section_3 .team__anna:before {
	background-image: url('/images/ui_team__anna.png');
}
.section_3 .team__magragine:before {
	background-image: url('/images/ui_team__magragine.png');
}
.section_3 .team__nastya:before {
	background-image: url('/images/ui_team__nastya.png');
}
.section_3 .team__vlad:before {
	background-image: url('/images/ui_team__vlad.png');
}
/*
.section_3 .team_1 {
	top: 10%;
    left: 0;
}
.section_3 .team_2 {
	top: 40%;
    left: 0;
}
.section_3 .team_3 {
	top: 10%;
    right: 0;
}
.section_3 .team_4 {
	top: 40%;
    right: 0;
}
.section_3 .team_5 {
	top: 50%;
    left: 50%;
	transform: translateX(-50%);
	text-align: center;
}
*/

.section_4 {
	position: relative;
    max-height: 900px;
    background: url('/images/section_4.jpg') no-repeat 50% 0/cover;
	background-position: center; 
}
.section_4:before {
	content:'';
	position: absolute;
	width: 100%;
	height: 100px;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
	top: 0;
	left: 0;
	z-index: 1;
}
.section_4:after {
	content:'';
	position: absolute;
	width: 100%;
	height: 400px;
	background: linear-gradient(to top, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
	bottom: 0;
	left: 0;
}

.section_4 .container {
    position: relative;
    z-index: 2;
	min-height: 900px;
}
.section_4 h2 {
	text-align: center;
}
.section_4 .social_block {
	position: absolute;
	top: 15%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    width: 425px;
    height: 300px;
    background-image: url('/images/ui_book.png');
    background-repeat: no-repeat;
    background-size: contain;
    
	display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 0 50px;
	
	color: #222;
}
.section_4 .social_block  p {
	font-size: 26px;
    text-align: center;
    line-height: 1;
    margin: 0 0 40px;
}
.section_4 .social_block  ul {
	list-style-type: none;
}
.section_4 .social_block  ul li {
	font-size: 18px;
	margin-bottom: 0.3em;
}
.section_4 .social_block  a {
	color: #783828;
	text-decoration: none;
}
.section_4 .social_block  a:hover {color: #333;}


@media (min-width: 1400px) {
    .section_1 {
        padding-top: 5%;
        padding-bottom: 40%;
    }
    .section_2 {
        padding-top: 45%;
        padding-bottom: 5%;
    }
    .section_3 {
        min-height: 900px;
		padding-top: 10%;
    }
    .section_4 {
        min-height: 600px;
		padding-top: 10%;
    }
}

@media (max-width: 1023.98px) {
    .section_1__text-block {
        -webkit-box-orient:vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center
    }

    .section_1__text {
        margin-bottom: 1.5em;
        text-align: center
    }

    .card {
        max-width: 345px
    }
}

@media (max-width: 767.98px) {
    .section_1 {
		min-height: 100dvh;
    }
	.section_2 {
		min-height: 100dvh;
		padding-top: 150%;
		padding-left: 20px;
		padding-right: 20px;
    }
	.section_2 h2 {
		top: 18%;
	}
	.section_2 .video_block {
		max-width: 98%;
		width: 98%;
		height: auto;
		padding: 100px 0;
		top: 30%;
	}
	.section_2 .video_block iframe {
		max-width: 80%;
		width: 100%;
		height: auto;
	}
	
	.section_3 h2 {
		padding: 110px 0 0;
	}
	.section_3 .team_list {
		margin: 25px 0;
	}
	.section_4 h2 {
		padding: 80px 0 0;
	}
}