main {
	display: grid;
	height: 100vh;
	width: 100vw;
	align-items: center;
	justify-items: center;
}

	#connect {
		height: 320px;
		width: 380px;
		padding: 10px;
		z-index: 1000;
	}

		#logo {
			height: 65px;
			width: 380px;
			background-image: url("../img/logo.png");
			background-repeat: no-repeat;
			background-size: contain;
			background-position: center center;
			margin: auto;
		}

		#information {
			display: flex;
			flex-direction: column;
			padding-top: 10px;
		}

			#information input {
				width: calc(100% - 22px);
				height: 24px;
				padding: 3px 5px;
				border-radius: 5px;
				border: 1px solid var(--main-color);
				outline: none;
				font-family: "Winky Sans", sans-serif;
				font-size: 18px;
				background-color: var(--text-secondary-color);
				margin-bottom: 10px;
			}

				input:focus {
					outline: none;
				}

		#passw {
			position: relative;
		}

			#forget {
				position: absolute;
				height: 30px;
				top: 27px;
				right: 12px;
				width: 30px;
				text-align: center;
				color: var(--link-color);
				font-size: 28px;
				cursor: pointer;
			}

				#forget:hover {
					color: var(--link-hover-color);
				}

		#buttons {
			display: flex;
			flex-direction: column;
			gap: 10px;
		}

			button {
				position: relative;
				width: calc(100% - 10px);
				height: 32px;
				line-height: 22px;
				padding: 5px 0;
				color: var(--text-main-color);
				font-family: "Winky Sans", sans-serif;
				font-size: 16px;
				border: 1px solid var(--disabled-color);
				background-color: var(--disabled-color);
				color: var(--text-disabled-color);
				border-radius: 5px;
				text-align: center;
			}

				button:not([disabled]) {
					border: 1px solid var(--main-color);
					background-color: var(--main-color);
					cursor: pointer;
				}

					button:not([disabled]):hover {
						background-color: var(--main-hover-color);
					}

				button i {
					position: absolute;
					left: 30px;
					top: 5px;
					font-size: 22px;
				}