/*  Strona stworzona przez Jędrzeja Bakalarskiego */

body{
    background: rgb(0, 20, 3);
    background: linear-gradient(90deg, rgb(0, 20, 3) 0%, rgb(22, 20, 0) 100%);
}

h1, h2, h3{
    color: rgb(255, 255, 255);
    font-family: geologica;
}

h2, h3{
    animation: tekstAnim 0.75s ease 0s 1 normal forwards;
    padding: 0 5px;
}

p{
    color: rgb(255, 255, 255);
    font-family: geologica;
    animation: tekstAnim 0.75s ease 0s 1 normal forwards;
    padding: 0 5px;
    font-size: 22px;
    font-weight: bold;
    margin: 0 10px 20px 5px;
}

a:link, a:visited, a:hover, a:active{
    color: rgb(165, 255, 180);
    text-decoration: underline;
}

.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

#tytul {
    font-family: troika;
    font-size: 75px;
    letter-spacing: 2px;
    word-spacing: 0px;
    background: linear-gradient(90deg, rgb(208, 0, 255) 0%, rgb(0, 213, 255) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-style: normal;
    font-variant: small-caps;
    text-align: center;
    animation: tytulAnim 1s ease 0s 1 normal forwards;
}

img{
    animation: tytulAnim 1s ease 0s 1 normal forwards;
}

@font-face {
    font-family: troika;
    src: url(fonts/troika.otf);
}

@font-face {
    font-family: geologica;
    src: url(fonts/geologica.ttf);
}

footer{
    text-align: right;
    margin: 0 5px 0 0;
    animation: stopkaAnim 0.75s ease 0s 1 normal forwards;
    color: rgb(255, 255, 255);
}

.topnav {
    background-color: #003603;
    overflow: hidden;
}

.topnav a {
    float: left;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
    font-family: troika;
}
  
.topnav a:hover {
    background-color: #ffffff;
    color: black;
}
  
.topnav a.active {
    background-color: #00ff37;
    color: rgb(0, 0, 0);
}

@keyframes tytulAnim {
	0% {
		transform: scale(0);
	}

	100% {
		transform: scale(1);
	}
}

@keyframes tekstAnim {
	0% {
		opacity: 0;
		transform: translateX(-250px);
	}

	100% {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes stopkaAnim {
	0% {
		opacity: 0;
		transform: translateX(250px);
	}

	100% {
		opacity: 1;
		transform: translateX(0);
	}
}