html {
    scroll-behavior: smooth;
    -ms-overflow-style: none;
	scrollbar-width: none;
}

body 
{
	margin: 0px;
	color: white;	
    padding: 0px;
    font-family: 'Montserrat', sans-serif;
	background: linear-gradient(black, rgb(20, 20, 0));
	
}

/* pasek postępu */
.progress-container {
	width: 10px;
	height: 60%;
	position: fixed;
	display: flex;
	flex-direction: column;
	right: 0px;
	top: 25%;
	z-index: 1;
}

.progress-bar-filler
{
	height: 100%;
	width: 1px;
	border-right: dashed 1px orange;
	position: relative;
	left: 3px;
}
  
.progress-bar {
	height: 0%;
	width: 10px;
    display: flex;
	flex-direction: column;

	flex-grow: 0;
	flex-shrink: 0;
}

.circle {
	  width: 5px;
	  height: 5px;
	  border-radius: 50%;
	  background: orange;

      position: relative;
	  left: 2px;

	  flex-grow: 0;
	  flex-shrink: 0;
}

.progress-filler {
	  width: 2.5px;
	  height: 100%;
	  background: orange;
	  position: relative;
	  left: 3px;
}

/* nawigator do początku strony */
.home_arrow
{
	background: url("../img/home_arrow.png");
	width: 22px;
	height: 22px;

	display: none;
	position: fixed;
	bottom: 40px;
	right: 15px;
	opacity: 0;
	background-size: cover;

	z-index: 1;

	animation-name: homeArrowAnimation;
	animation-duration: 3s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}

@keyframes homeArrowAnimation
{
	0% { opacity: 0; }
	100% { opacity: 1;}
}

@-webkit-keyframes homeArrowAnimation
{
	0% { opacity: 0;}
	100% { opacity: 1;}
}

.home_arrow:hover
{
	filter: brightness(70%);
}

/* logo w nagłówku z animacją */
.logo
{
	background: url("../img/logo.png");
    background-color: transparent; /* zapobiega zmianie tła obrazka podczas jego kliknięcia i trzymania */
	width: 0px;
	height: 0px;
	margin: 10px;
    margin-top: 6px;
	background-size: cover;
    
	flex-grow: 0;
	flex-shrink: 0;

    position: absolute;
    right: 0%;
    z-index: 1;
    opacity: 0;

	animation-name: logoAnimation;
	animation-duration: 2s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}

.logo:active, .logo:visited, .logo:link {
    background-color: transparent; /* zapobiega zmianie tła obrazka podczas jego kliknięcia i trzymania */
    -webkit-tap-highlight-color: transparent; /* Usuwa efekt dotyku na urządzeniach mobilnych */
}


@keyframes logoAnimation
{
    40% { opacity: 0.15; }
    70% { opacity: 0.1; }
    100% { opacity: 1; 	width: 42px; height: 42px; }
}

@-webkit-keyframes logoAnimation
{
    40% { opacity: 0.15; }
    70% { opacity: 0.1; }
    100% { opacity: 1; 	width: 42px; height: 42px; }
}

/* nagłówek */
#titler
{
    text-align: center;
    padding-top: 15px;
    padding-bottom: 20px;
    padding-right: 50px;
    padding-left: 50px;
    font-size: 20px;
    line-height: 20px;
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    margin: auto;
    background-image: linear-gradient(to bottom, rgb(60, 108, 199), black); 

    animation-name: titlerAnimation;
    animation-duration: 4s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

@keyframes titlerAnimation
{
    0% { opacity: 0;}
    100% { opacity: 1;}
}

@-webkit-keyframes titlerAnimation
{
    0% { opacity: 0;}
    100% { opacity: 1;}
}

.linkedIn {
	background: url("../img/linkedIn.png");
    background-color: transparent; /* zapobiega zmianie tła obrazka podczas jego kliknięcia i trzymania */
	top: calc(50vh - 47.83px);
	left: -103px;
	width: 139.67px;
	height: 37.67px;
	background-size: cover;
    position: fixed;
	z-index: 50;
	opacity: 0.5;
	transition: left 0.5s ease-in-out, opacity 1s ease-in-out;
	cursor: pointer;
}

.linkedIn:hover {
	left: 0px;
	opacity: 1;
}

.facebook {
	background: url("../img/fb.png");
    background-color: transparent; /* zapobiega zmianie tła obrazka podczas jego kliknięcia i trzymania */
	top: calc(50vh - 10.17px);
	left: -103px;
	width: 139.67px;
	height: 37.67px;
	background-size: cover;
    position: fixed;
	z-index: 50;
	opacity: 0.5;
	transition: left 0.5s ease-in-out, opacity 1s ease-in-out;
	cursor: pointer;
}

.facebook:hover {
	left: 0px;
	opacity: 1;
}

.whatsapp {
	background: url("../img/whatsapp.png");
    background-color: transparent; /* zapobiega zmianie tła obrazka podczas jego kliknięcia i trzymania */
	top: calc(50vh + 27.49px);
	left: -103px;
	width: 139.67px;
	height: 37.67px;
	background-size: cover;
    position: fixed;
	z-index: 50;
	opacity: 0.5;
	transition: left 0.5s ease-in-out, opacity 1s ease-in-out;
	cursor: pointer;
}

.whatsapp:hover {
	left: 0px;
	opacity: 1;
}

.youtube {
	background: url("../img/youtube.png");
    background-color: transparent; /* zapobiega zmianie tła obrazka podczas jego kliknięcia i trzymania */
	top: calc(50vh + 65.16px);
	left: -103px;
	width: 139.67px;
	height: 37.67px;
	background-size: cover;
    position: fixed;
	z-index: 50;
	opacity: 0.5;
	transition: left 0.5s ease-in-out, opacity 1s ease-in-out;
	cursor: pointer;
}

.youtube:hover {
	left: 0px;
	opacity: 1;
}