html {
	overflow: hidden;
	background-color: #263d33;
}

body {
	font-family: "Roboto", sans-serif;
}

.menu {
	display: flex;
	justify-content: center;
	align-items: center;
	
	flex-wrap: wrap;
    width: 500px;
	
	position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
	
    gap: 30px 50px;
	
}

.menu a {
    width: 150px;
	padding: 15px 25px;
    font-size: 20px;
	font-weight: 300;
	text-align: center;
    text-decoration: none;
    color: #c0d8ae;
    border-radius: 10px;
}

.menu a:hover {
    opacity: 0.6;
}

#nitka {
    position: absolute;
	z-index: -1;
	offset-path: circle(750px);
	offset-rotate: 0deg;
	animation: ruch1 15s linear infinite;
	width: 500px;
    height: auto;
}

#sznurek {  
    position: absolute;
	z-index: -1;
	offset-path: circle(350px);
	offset-rotate: 0deg;
	animation: ruch2 20s linear infinite;
	width: 300px;
    height: auto;

}

img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
}

@keyframes ruch1 {

    from {
        offset-distance: 0%;
		opacity: 0.3;
    }

    to {
        offset-distance: 100%;
		opacity: 0.3;
    }


}

@keyframes ruch2 {

    from {
        offset-distance: 0%;
		opacity: 0.3;
    }

    to {
        offset-distance: 100%;
		opacity: 0.3;
    }

}