@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

*{
	transition: 500ms;
	box-sizing: border-box;
}

html, body {
	font-family: "Roboto", sans-serif; 
	scroll-behavior: smooth; /*płynne przewijanie*/
	font-size: 1rem;
}

body{
    background-color: black;
	overflow-x: hidden;
}

a h1 h2 h3 h4 h5 p{
    text-decoration: none;
}

h1{
    font-size: 5rem;
    color: #6C0C0E;
    font-weight: 600;
}
h2{
    font-size: 3.5rem;
    color:#6C0C0E;
    font-weight: bold;
}
h3{
    font-size: 2.63rem;
    font-weight: 600;
    letter-spacing: 0.5rem;
    text-align: center;
    color: white;
}
h4 {
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: 0.5rem;
    text-align: center;
    color: white;
}
h5 {
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.3rem;
    text-align: center;
    color: white;  
}

sup{
    color:#6C0C0E;
}
p{
    color:white;
    line-height: 2.2rem;
    font-size: 1.28rem;
}

/*mobilna nawigacja*/
.logo-nav-mobile{
    position: relative;
}
.burger{
	display: none;
	position: fixed;
	font-size: 30px;
	padding: 1rem;
	top: .5rem;
	right: .5rem;
	color: white;
	cursor: pointer;
    z-index:1;
}
#MENU{
    z-index: 10;
}
.nakladka{
	position: fixed;
	right: 0;
	background-color: black;
	width: 0%;
	overflow: hidden;
	height: 100%;
	z-index: 1;
	display: flex;
	justify-content: center;
	align-items: center;
}
.nakladka ol{
	width: 100%;
}
.nakladka a{
        font-size: 2rem;
}
.nakladka ol li{}
.nakladka ol li a{
	text-decoration: none;
	color: white;
	padding: 2rem 0;
	display: block;
	margin-bottom: 2vh;
	width: 100%;
	text-align: center;
	font-weight: 600;
    border-bottom: 2px solid #505050;

}
.nakladka ol li a:hover{
	color: #6C0C0E;
	font-weight: 800;
}
.zamknijX{
	text-decoration: none;
	color: #ffffff;
	position: absolute;
	top: .5rem;
	right: .5rem;
	font-size: 4.5rem;
	padding: 1rem;
}

/*desktop[ nawigacja*/
nav{
	position: fixed;
	background-position: center;
	background-size: cover;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 1rem;
	width: 100%;
	z-index: 2;
    background-color: #000000;
}
.buy-inside a{
    font-weight: 800;
}
nav ol{
	margin: 0;
	padding: 0;
	display: flex;
}
nav li{
	margin-left: 1rem;
}
nav a{
	text-decoration: none;
	display: block;
	padding: 1rem 1.5rem;
	font-size: 0.831;
	color: white;
	border-radius: 1rem;
	font-weight: 400;
}
nav a:hover{
	color: #6C0C0E;
	font-weight: 800;
}

/** Wszystkie sekcje**/
section{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.zawartosc{
    max-width: 1600px;
}

hr{
	height: 2px;
	width: 80%;
    background-color: #6C0C0E;
    border:none;
    margin: 1.5rem 0;
}

img {
    display: block;
}

#pierwsza{
min-height: 100vh;
}
#pierwsza .hero{
    display: flex;
    justify-content: center;
    align-items: center; 
    position: relative;
    overflow: hidden;
    flex-direction: column;
}

#fullwidth-video{
    height: 100vh; 
    min-height: 50vh;
    position: relative;
}
#fullwidth-video .fullwidth-video-bg{
	/*filter: saturate(.4) brightness(.4);*/
    position: fixed; 
    z-index: -1; 
    top: 0;
    left: 0; 
    bottom: 0; 
    right: 0; 
    overflow: hidden;
    background-size: cover; 
    background-color: transparent; 
    background-repeat: no-repeat;
    background-position: 0% 50%;   
	z-index: -1;
}
#fullwidth-video video{
    margin: auto;
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 0%;
    transform: translate(0%, -50%);
    visibility: visible;
    opacity: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#pierwsza .logo{
    padding: 3rem 0 5rem 0;
}
#pierwsza-dol{
    background-color: #6C0C0E;
    max-height: 25vh;
    justify-items: center;
    padding: 1.5rem 0 1.5rem 0;
}
#pierwsza-dol .zawartosc{
    display: flex;
	flex-wrap: wrap;
	background: none;
    justify-content:center;
    padding: 1.5rem 0 0.5rem 0;
    max-width: 1600px;
}
#pierwsza-dol .clearfix{
    width: 150px;
    height: 50px;
    display: flex;
    justify-content: center;
    gap: 4.5rem;
}

#druga{
    position: relative;
    padding: 6rem 0;
    background-image: url("../images/bg_still.png");
    background-color: #000000;
    overflow: hidden;
    background-repeat: no-repeat;
    min-height: 100vh;
}
#druga .zawartosc{
	display: inline-flex;
    margin-top: 10rem;
    flex-wrap: wrap;
    flex-direction: row-reverse;
    justify-content: flex-end;
    
}
#druga .pierwsza-kolumna{
    max-width:35%;
    padding: 4rem 0;

}
#druga iframe{
    margin-right: 15rem;
}
#druga .kontener{
    justify-content:center;
    align-items: center;
    display: flex;
}
#druga img{
	max-width: 60%;
}
#druga p{
    font-size: 1.25rem;
    line-height: 1.5rem;
    padding: 2.438rem 0 0 0;
}
#druga .druga-kolumna{
    max-width:40%;
    margin: 6rem 0;
}
#druga-dol{
    background-color: #000000;
    padding-bottom: 7.5rem;
}
#druga_dol article{
    display: flex;
    justify-content: center;
}
#druga_dol .druga-kolumna{
    max-width:40%;
    padding: 4rem 2rem 4rem 2rem;
}
.gifs{
    display: flex;
    justify-content: center;
    margin: 2rem auto;
}
#druga-dol .druga-dol-gifs{
    max-width: 34%;
    padding: 0 1rem;
}

#trzecia {
	min-height: 100vh;
}
#trzecia h1{
    margin-top: 6rem;
}
#trzecia .zawartosc{
    display: flex;
    margin: 10rem auto 0 auto;
}
.recenzje{
    display: block;
    margin: 3rem;
}
.recenzje-ocena{
    margin: 1.25rem 0;
}
.recenzje-kolumna{}
#trzecia p{
    font-size: 1.28rem;
    color: #9DA6A6;
}
#trzecia .kontener{
    margin-top: 1.5rem;
    width: 100%;
}
#trzecia img{
    width: 100%;
/*	background-color: blue;*/
}
#trzecia p{
    text-align: center;
}
#trzecia h4{
    font-size: 2rem;
    color: #6C0C0E;
    letter-spacing: 0.2rem;
}
.recenzja-ocena h3 {
    letter-spacing: 0rem;
}

#czwarta{
    min-height: 100vh;
    background-color: #000000;
}
#czwarta h1{
    color: #6C0C0E;
	margin: 5rem 0 0 0;
}
#czwarta .zawartosc{
    padding: 10rem 0 10rem 0;
	max-width: 1300px;
}
.featured img {
  	width: 100%;
	margin-bottom: 5px;
}
.screen-list{
	display: flex;
	flex-wrap: wrap;
}
.screen-list li {
	flex: 1 1 300px;
	display: block; 
	height: auto;
	float: left;
}
.screen-list li img {
  width: 100%;
  margin: 0 auto; padding: 5px;
  cursor: pointer;
}
.screen-list li img:hover {
  background-color: #ffffff;
}

#pomiedzy {
    background-color: #6C0C0E;
   
}
#pomiedzy h1{
    color: white;
}
#pomiedzy .prawa-kolumna{
    overflow: hidden;
    object-fit: cover;
}
#pomiedzy img{
    width: 278px;
    height: auto;
}
#pomiedzy .zawartosc{
    display: flex;
    align-items: center;
}
#pomiedzy .lewa-kolumna{
    margin-right: 10rem;
}
#pomiedzy .prawa-kolumna{
    overflow: hidden;
    object-fit: cover;
    margin-left:10rem;
}

/* TESTUJEMY */
#piata{
    background: url("../images/Buy_Gif.gif");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    background-color: rgb(0, 0, 0, 0.5);
    min-height: 50vh;
}
#piata h1{
	padding-top: 5rem;
}
#piata .zawartosc{
    margin: 7rem 0 7rem 0;
}
#Kup {
    text-align: center;
}
#company-logos {
display: block;
width: 100%; 
margin-left: auto;
margin-right: auto;
}
#company-logos li {
display: block; 
width: 30%;
height: auto;
margin-bottom: 30px;
padding-left: 90px;
float: left;

}
#company-logos a {
display: block;
text-decoration: none;
margin: 0; padding: 0;
height: 150px;
width: auto;
background-repeat: no-repeat;
background-position: center;
}

.epic{
	background-image: url("../images/icons/Buy/EPIC_Games-01.svg");
	height: 88px;
}
.epic:hover{
	background-image: url("../images/icons/White/EPIC_Games-01.svg");
	height: 88px;
}
.gog{
	background-image: url("../images/icons/Buy/GoG_horizontal-01.svg");
}
.gog:hover{
	background-image: url("../images/icons/White/GoG_horizontal-01.svg");
}
.humble{
	background-image: url("../images/icons/Buy/HumbleStore-01.svg");
}
.humble:hover{
	background-image: url("../images/icons/White/HumbleStore-01.svg");
}
.green{
	background-image: url("../images/icons/Buy/GreenManGaming-01.svg");
}
.green:hover{
	background-image: url("../images/icons/White/GreenManGaming-01.svg");
}
.mac {
	background-image: url("../images/icons/Buy/Mac-01.svg");
}
.mac:hover{
	background-image: url("../images/icons/White/Mac-01.svg");
}
.ps4{
	background-image: url("../images/icons/Buy/PS4-01.svg");
}
.ps4:hover{
	background-image: url("..//images/icons/White/PS4-01.svg");
}
.xbox{
	background-image: url("../images/icons/Buy/XBOXONE-01.svg");
}
.xbox:hover{
	background-image: url("..//images/icons/White/XBOXONE-01.svg");
}
.nintendo{
	background-image: url("../images/icons/Buy/Switch_wide-01.svg")
}
.nintendo:hover{
	background-image: url("..//images/icons/White/Switch_wide-01.svg")
}
.steam{
	background-image: url("../images/icons/Buy/STEAM-01.svg");
}
.steam:hover{
	background-image: url("..//images/icons/White/STEAM-01.svg")
}
#company-logos a img.hover {
display: none;
}
#company-logos a img.origin,
#company-logos a:hover img.hover {
display: block;

}
.mobile-logos {    
display: none;
width: 100%;
margin-top: 55px;
}
.mobile-logos li {
text-align: center;
padding-bottom: 55px;
}
.mobile-logos a {
text-decoration: none;
}
.mobile-logos li a img {
    width: 313px;
    height: 92px;
  }

#szosta{
	background-color: #6C0C0E;
	padding: 5rem 0 0 0;
	min-height: 100vh;
}
#szosta h1{
  color: white;
}
#szosta hr{
    background-color: white;
}
#szosta .kontener{
    margin: 10rem 0;
}
#szosta img {
    width: 100%;
}
#szosta h1 a{
    background: url("../images/8bitlogo.png") center center no-repeat;
	background-size: contain;
  	width: 200px;
  	height: 36px;
  	text-decoration: none;
	display: inline-block;
}

#stopka{
	padding: 4rem 0 3.5rem 0;
	background-color: #000000;
}
#stopka h3{
    color:white;
}
#stopka .zawartosc{
    	display: flex;
	    column-gap: 3vw;
        flex-direction: column;
        align-items: center;

}
#stopka .social{
    display: block;
    text-decoration: none;
    margin: 0; padding: 0;
    margin: 2.5rem 0;
}
#stopka .sociale{
    display: flex;
    gap: 2rem;
}
#stopka form{
    margin-top: 3rem;
}
#stopka form main input{
	font-size: 20px;
	border: 1px solid white;
    display: block;
    background-color: transparent; /* Przezroczyste tło */
    color: white; /* Kolor tekstu */
    padding: 15px; /* Wewnętrzny margines */
	margin-bottom: 1rem;
	width: 100%;
	box-sizing: border-box;
}
.wyslij{
	display: block;
	margin: 40px auto;
	color: #fff;
	border: solid 1px #fff;
	text-decoration: none;
	font-size: 1.5rem;
	text-align: center;
	padding: 25px;
	width: 50%;
	font-weight: 500;
}
.wyslij:hover{
	color: #000000;
	background-color: #fff;
	cursor: pointer;
}

#ostatnie p{
	color: gray;
    background-color: #000000;
}

@media all and (max-width:1400px){
	html{
		font-size: 10px;
	}
	body{
		font-size:1.8rem;
	}
	.burger{
		display: none;
    }
	nav{
		display: flex;
	}
	section{
		padding: 1rem; 
		scroll-margin-top: 0;
	}
	.zawartosc{
		flex-direction: column;
	}
	#pierwsza{
		padding-top: 1vh;
        min-height: 100vh;
	}
    #pierwsza img{
		max-width: 100%;
        height: auto;
	}
    #pierwsza .logo{
		padding: 3rem 0;
	}
	#pierwsza p{
		line-height: 1.5em;
	}
    #pierwsza-dol{
        min-height: 60vh;
    }
    #pierwsza-dol .clearfix{
        flex-direction: column;
        gap: 5rem;
        margin: 1.5rem 0;
    }
    #pierwsza-dol li{}
	#druga{
		background-image: url("../images/bg_still.png");
		padding: 6rem 0 3rem 0;
	}
    #druga .zawartosc{
        display: flex;
        justify-content: center;
        align-items: center;
    }
    #druga .pierwsza-kolumna{
        margin-bottom: 2.5rem;
    }
	#druga article{
		display: block;
		padding: 1rem;
	}
    #druga h2{
        text-align: center;
	}
	#druga article p{
		line-height: 2.6rem;
		padding-bottom: 1rem;
        text-align: center;
	}
    #druga iframe{
        margin: 0;
    }
    #druga .pierwsza-kolumna{
		margin: 0 1rem;
        max-width: 50%;
	}
    #druga .druga-kolumna{
		margin: 0 1rem;
        max-width: 50%;
	}
    #druga-dol{}
    #druga-dol .gifs{
        margin: 0;
        display: flex;
        flex-direction: column;
        gap: 2rem;
        align-items: center;
	}
    #druga-dol .druga-dol-gifs{
        max-width: 76%;
	}
    
    #trzecia {
		overflow-x: hidden;
		padding-top: 1rem;
        padding-bottom: 0;
		line-height: 2.7rem;
	}
    #trzecia .zawartosc{
        align-items: center;
        align-content: center;
    }
	#trzecia article{
		padding: 1rem;
		line-height: 2.7rem;
        max-width: 50%;
	}
	#trzecia article h3{
		padding-top: 2rem;
		padding-bottom: 1rem;
    }
    #trzecia h4{
		font-size: 2.488rem;
    }
    #trzecia .kontener{
        margin: 5rem 0 0 0;
    }
    #trzecia img{
        width: 200%;
    }
	
	#czwarta .zawartosc{
        padding: 15rem 0;
    }
	.featured {
		display: none;
	}
	
    #pomiedzy {
        min-height: 0vh;
        padding: 0;
    }
	#pomiedzy h1{
		padding: 1rem;
	}
    #pomiedzy .zawartosc {
        display: flex;
        flex-direction: row;
    } 
    #pomiedzy .lewa-kolumna {
       margin: 4rem 0;
    }
    #pomiedzy .prawa-kolumna {
        margin: 0;
    }
    #pomiedzy h1{
        text-align: left;
    }
	
    #piata {
		padding-top: 10rem;
		min-height: 50vh;
	}
	#piata h1{
		padding-top: 1rem;
	}
    #piata .zawartosc{}

    #company-logos {
        display: none;
    }
    #piata .mobile-logos {
		display: block;
    }
    
	#szosta {
		min-height: 0;
    }
    #szosta h1{
		padding-top: 1rem;
        text-align: center;
    }
    #szosta hr{}
    #szosta .kontener{
        margin: 15rem 0;
    }
    #szosta img{
        width: 90%;
    }
}

/**Telefon**/
@media all and (max-width:900px){
	html{
		font-size: 10px;
	}
	body{
		font-size:1.8rem;
	}
	.burger{
		display: block;
	}

	nav{
		display: none;
	}
	section{
		padding: 1rem; 
		scroll-margin-top: 0;
	}
	.zawartosc{
		flex-direction: column;
	}
	#pierwsza{
		padding-top: 1vh;
        min-height: 100vh;
	}
    #pierwsza img{
		max-width: 100%;
        height: auto;
	}
    #pierwsza .logo{
		padding: 3rem 0;

	}
	#pierwsza p{
		line-height: 1.5em;
	}
    #pierwsza-dol{
        min-height: 80vh;
    }
    #pierwsza-dol .clearfix{
        flex-direction: column;

        gap: 5rem;
        margin: 1.5rem 0;
    }
    #pierwsza-dol li{}
	#druga{
    	background-image: url("../images/bg_still.png");
	}
    #druga .zawartosc{
        display: flex;
        justify-content: center;
        align-items: center;

    }
	#druga article{
		display: block;
		padding: 1rem;
	}
    #druga h2{
        text-align: center;
	}
	#druga article p{
		line-height: 2.6rem;
		padding-bottom: 1rem;
        text-align: center;

	}
    #druga iframe{
        margin: 0;
    }
    #druga .pierwsza-kolumna{
		margin: 0 1rem;
        max-width: 50%;
	}
	#druga .druga-kolumna{
		margin: 0 1rem;
        max-width: 50%;
	}
    #druga-dol{}
    #druga-dol .gifs{
        margin: 0;
        display: flex;
        flex-direction: column;
        gap: 2rem;
	}
    #druga-dol .druga-dol-gifs{
        max-width: 100%;
	}
    
    #trzecia {
		padding: 1rem;
		line-height: 2.7rem;
	}
	#trzecia article{
		padding: 1rem;
		line-height: 2.7rem;
	}
	#trzecia article h3{
		padding-top: 2rem;
		padding-bottom: 1rem;
    }
    #trzecia h4{
		font-size: 2.488rem;
    }
    #trzecia .kontener{
        margin: 5rem 0 0 0;
    }
    #trzecia img{
        width: 200%;
    }
	#czwarta .zawartosc{
        padding: 15rem 0;
    }
	
    #pomiedzy {
        min-height: 0vh;
        padding: 0;
    }
    #pomiedzy .zawartosc{
        min-height: 0vh;
        padding: 0;
        flex-direction: column;
    }  
    #pomiedzy .lewa-kolumna {
       margin: 4rem 0;
    }
    #pomiedzy .prawa-kolumna {
        margin: 0;
    }
    #pomiedzy h1{
        text-align: center;
    }
    #pomiedzy img{
        width: 230px;
    }
    
	#piata {
        padding: 5rem 0 0 0;
    }
    #piata hr{
        color: #6C0C0E;
    }
    #piata .zawartosc{;
		padding: 5rem 0 5rem 0;
    }
    #company-logos {
        display: none;
    }
    #piata .mobile-logos {
    	display: block;
    }
   
	#szosta {}
    #szosta h1{
        text-align: center;
        padding: 0 4rem;
    }
    #szosta hr{}
    #szosta .kontener{
        margin: 25rem 0;
    }
    #szosta img{
        width: 90%;
    }
}