@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

:root {
    --main-color: #338DCC;
    --main-hover-color: #5BA3D6;
    --secondary-color: #A5AA50 ;
    --secondary-hover-color: #B7BB72 ;
    --third-color: #E76999 ;
    --third-hover-color: #EB87AD ;
    --disabled-color: #CCCCCC;
    --link-color: #00599E;
    --link-hover-color: #327AB1;
    --success-color: #99C24D;
    --error-color: #FF5A5F;
    --error-hover-color: #FF7A7E;
    --text-main-color: #000000;
    --text-secondary-color: #FFFFFF;
}

body {
	margin: 0;
	font-family: "Roboto";
	cursor: default;
}

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

		#connect {
			width: 400px;
		}

			#banner {
				position: relative;
				width: 400px;
			}

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

				#by {
					position: absolute;
					right: 55px;
					width: 120px;
					font-weight: bold;
					font-style: italic;
				}

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

				#information input {
					width: calc(100% - 18px);
					height: 24px;
					margin-bottom: 20px;
					font-family: "Roboto";
					font-size: 18px;
					border-radius: 0;
					border: none;
					border-bottom: 1px solid var(--main-color);
				}

			#buttons {
				display: flex;
				flex-direction: column;
			}

				button {
					width: calc(100% - 20px);
					padding: 5px 0;
					margin: auto;
					color: #000000;
					font-family: "Roboto";
					font-size: 16px;
					border: none;
					background-color: var(--disabled-color);
				}

					button:not([disabled]) {
						background-color: var(--main-color);
						color: #FFFFFF;
						cursor: pointer;
					}

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

					#azure {
						margin-top: 10px;
					}