* {
    box-sizing: border-box;
}

body {
    font-size: 16px;
    background-image: url(/img/bg/bg.webp);
    background-repeat: repeat;
}

#install-container {
    max-width: 996px;
    margin: 0 auto;
}

#container {
	padding: 1rem;

	header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 1rem;
	}

	footer {
		margin-top: 4rem;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0.5rem;
		color: rgba(0, 0, 0, 0.65);
		font-size: 0.75rem;
	}

	div#content {
		display: flex;
		flex-direction: row;
		gap: 1rem;

		aside#left {
			flex-grow: 1;
			max-width: 250px;
		}

		aside#right {
			flex-grow: 1;
			max-width: 250px;
		}

		main {
			flex-grow: 1;
		}
	}
}

.form-group {
    margin-bottom: 0.5rem;

    label {
        display: block;
        font-size: 0.8rem;
    }

    input {
        width: 100%;
    }

	&.checkbox {
		display: flex;
		align-items: center;
		gap: 0.5rem;

		input {
			width: auto;
		}

		label {
			display: inline;
		}
	}
}

.text-red {
	color: #d20f39;
}

.mb-1 {
    margin-bottom: 1rem;
}

.mb-2 {
    margin-bottom: 2rem;
}

.my-1 {
	margin-top: 1rem;
	margin-bottom: 1rem;
}

.my-2 {
	margin-top: 2rem;
	margin-bottom: 2rem;
}

div.alert {
	font-size: 0.9rem;
	padding: 0.5rem;
	background-color: gray;

	&.is-danger {
		color: hsl(359deg, 68%, 11%);
		background-color: hsl(359deg, 68%, 71%);
	}
}