@font-face {
    font-family: 'Roboto';
    src: url('zasoby/Roboto-Regular.ttf');
    font-weight: 400;
    font-style: normal;
    font-display: swap
}
* {
	box-sizing: border-box;
}
body {
	font-family: Roboto, Arial, sans-serif;
	color: #333333;
	margin: 0;
	padding: 0
}
h1 {
	font-weight: 400;
	text-transform: uppercase;
    letter-spacing: 3px;
	font-size: 25px;
	text-align: center;
}
input {
	display: block;
	font-size: 25px;
	text-align: center;
	margin: 10px auto;
	max-width: 100vw;
	width:  500px;
	line-height: 50px;
}
button {
	font-size: 20px;
	margin: 10px auto;
	max-width: 100vw;
	width:  500px;
	background: red;
	border: 0;
	color: #FFFFFF;
	line-height: 50px;
	cursor: pointer;
}
form {
	text-align: center;
}
.drtab, .drwynik {
	width: 500px;
	max-width: 100vw;
	margin: 0 auto;
	min-height: 50px;
	text-align: center;
	position: relative;
}
.drtab p {
	display: flex;
	justify-content: space-between;
}
.drtab p span {
	text-align: right;
}
.drloading:after {
	content: '';
	display: block;
	position: absolute;
	border-radius: 50%;
	border: dotted 5px #ff0000;
	width: 50px;
	height: 50px;
	-webkit-animation: spin 2s linear infinite; /* Safari */
	animation: spin 2s linear infinite;
	left: 50%;
	transform: translateX(-50%);
	top: 0;
}

/* Safari */
@-webkit-keyframes spin {
	0% {
		-webkit-transform: translateX(-50%) rotate(0deg);
	}
	100% {
		-webkit-transform: translateX(-50%) rotate(360deg);
	}
}

@keyframes spin {
	0% {
		transform: translateX(-50%) rotate(0deg);
	}
	100% {
		transform: translateX(-50%) rotate(360deg);
	}
}