@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');

* {
	margin: 0 auto;
	padding: 0;
	font-family: Courier;
	box-sizing: border-box;
	max-width: 1920px;
	color: white;
}

body {
	/*background: linear-gradient(-45deg, #150040, #260036, #2e002c, #330024, #34001c, #340016, #330510, #300b0b);*/
	background: linear-gradient(-45deg, #150040, #2d003e, #3f003b, #4d0037, #590633, #631230, #6a1f2d, #702b2b);
    background-size: 400% 400%;
    animation: gradient 10s ease infinite;
    cursor: crosshair;
}

@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

header {
	margin: 50px auto;
	text-align: center;
	height: 100px;
}

header h1 {
	margin: 0;
	font-family: 'Montserrat', sans-serif;
	font-size: 70px;
}

header h1 sub {
    font-family: 'Montserrat', sans-serif;
    font-size: 40px;
}

header p {
	font-size: 14px;
}

nav ul {
	list-style: none;
}

nav {
	margin: 120px auto;
	padding: 20px 0;
	width: 200px;
	height: 200px;
	font-size: 18px;
}

nav li {
	padding: 12px 12px 12px 32px;
}

nav a {
	padding: 3px;
}

nav a:hover {
	background-color: rgb(146, 82, 235);
	transition: background-color .5s;
	padding: 3px;
}

#bottom {
	text-align: center;
}

#bottom img {
	margin: 3px;
	border-radius: 5px;
	padding: 5px;
	width: 35px;
	height: 35px;
}

#bottom img:hover {
	background-color: rgb(146, 82, 235);
	transition: background-color .5s;
}

#bottom p {
	font-size: 14px;
	height: 15px;
}

footer {
	margin-top: 85px;
	text-align: center;
}

a {
	text-decoration: none;
}

/* ANIMACJA */

header h1 {
	animation: fadein 1s;
}

#time {
	animation: fadein 7s;
}

nav li:nth-child(1) {
	animation: fadein 3s;
}

nav li:nth-child(2) {
	animation: fadein 4s;
}

nav li:nth-child(3) {
	animation: fadein 5s;
}

#bottom img {
	animation: fadein 6s;
	transition: src 0.5s ease-in-out;
}

#bottom p {
 	opacity: 0;
 	transition: 1s;
}

footer pre {
	animation: fadein 7s;
}

@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}