html {
    scroll-behavior:smooth;
    overflow-x:hidden;
}
body {
    background-color:black;
}
#header {
    color:red;
    background-color:yellow;
    text-align:center;
    text-transform:uppercase;
    text-decoration:underline;
    animation-name:tlotekst;
    animation-duration:1s;
    animation-iteration-count: infinite;
}
#tekst {
    animation-name:animowanietekstu;
    animation-duration:4s;
    animation-iteration-count: infinite;
    animation-timing-function:linear;
    letter-spacing:10px;
}

@keyframes tlotekst {
    0% {background-color: yellow;}
    50% {background-color: violet;}
    100% {background-color: rgb(0, 255, 47);}
}

@keyframes animowanietekstu {
    0% {
        transform: translateY(0px);
    }
    25% {
        transform: translateX(650px);
    }
    50% {
        transform: translateY(0px);
    }
    75% {
        transform: translateX(-650px);
    }
    100% {
        transform: translateY(0px);
    }
}

#guzik {
    justify-content:center;
    display:flex;
}

button {
    background-color:magenta;
    color:cyan;
    border-radius:10px;
    font-size:60px;
    border:3px solid cyan;
    height:150px;
    width:700px;
    cursor:pointer;
    transition:1s;
}

button:hover {
    background-color:cyan;
    color:magenta;
    border:3px solid magenta;
    transform:scale(1.2);
    transition:1s;
}

#ckotki {
    width:100%;
    height:500px;
    margin-top:50px;
    align-items:center;
    display:flex;
    justify-content:center;
}
img {
    height:500px;
}

#footer {
    color:red;
    text-align:center;
    font-size:30px;
    width:100%;
}