@import url("roboto.css");
html {
	scroll-behavior: smooth;
}
body {
	--br: 7px;
	--r1: 4px;
	--r2: calc(var(--r1) * 2);
	--r3: calc(var(--r1) * 3);
	--r4: calc(var(--r1) * 4);
	--r5: calc(var(--r1) * 5);
	--r6: calc(var(--r1) * 7);
	--r7: calc(var(--r1) * 10);
	--r8: calc(var(--r1) * 15);
	--r9: calc(var(--r1) * 25);
	--r10: calc(var(--r1) * 40);
	--r11: calc(var(--r1) * 60);
	--base-size: 9px;
	--scale-factor: 1.6180339887;
	--s1: calc(var(--base-size) * 1);
	--s2: calc(var(--s1) * var(--scale-factor));
	--s3: calc(var(--s2) * var(--scale-factor));
	--s4: calc(var(--s3) * var(--scale-factor));
	--s5: calc(var(--s4) * var(--scale-factor));
	--s6: calc(var(--s5) * var(--scale-factor));
	--s7: calc(var(--s6) * var(--scale-factor));
	--s8: calc(var(--s7) * var(--scale-factor));
}
body {
    margin: 0;
    background-color: #000;
	color: #fff;
    font-family: 'Roboto', sans-serif;
    font-size: var(--s3);
	height: 100vh;
	position: relative;
	--dmarg: calc(22vw - 44px);
}
#username-div,#password-div {
	display: flex;
	flex-direction: column;
}
#main {
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	z-index: 3;
}
#username-input,#password-input {
	font-size: var(--s3);
	border-radius: 16px;
	border: 3px solid #fff;
	background-color: #aaa;
	padding: 5px;
	margin: 4px 0 14px 0;
}
#username-label,#password-label {
	margin-left: 3px;
	z-index: 2;
}
#login-button,#file-input,#upload-button {
	font-size: calc(var(--s3) * 0.8);
	color: #fff;
	background-color: #000;
	border: 2px solid #fff;
	border-radius: 20px;
	padding: 7px 25px;
	cursor: pointer;
	margin: 10px 0 0 0;
}
#login-form.wrong #username-input,#login-form.wrong #password-input {
	border: 3px solid rgb(165, 12, 12);
}