@import "keyframes.scss";
@import "colors.scss";

* {
	box-sizing: border-box;
	outline: 0;
	margin: 0;
	padding: 0;
}

html,
body {
	height: 100%;
	width: 100%;
	color: $black;
	background-color: $light-grey;
	font-family: "Poppins", sans-serif;
	padding: 0;
	margin: 0;
	overflow: hidden;
}

#__next {
	height: 100%;
	width: 100%;
	display: flex;
	align-items: center;
	flex-direction: column;
}

.App {
	height: 100%;
	width: 1280px;
	padding: 10px;
	display: flex;
	justify-content: center;
	animation: fadein 250ms both;
}

a {
	width: fit-content;
	color: $blue;
	border-bottom: 1px solid transparent;
	text-decoration: none;
	transition: 0.15s;

	&:hover,
	&:focus {
		color: $dark-blue;
		border-bottom: 1px solid $dark-blue;
	}
}

h1,
h2,
h3,
h4,
h5,
h6 {
	color: $blue;
}

ul,
li {
	list-style: none;
}

/* width */
::-webkit-scrollbar {
	width: 7px;
}

/* Track */
::-webkit-scrollbar-track {
	background: $light-grey;
	border-radius: 2px;
}

/* Handle */
::-webkit-scrollbar-thumb {
	background: $blue;
	border-radius: 2px;

	&:hover {
		background: $dark-blue;
	}
}

button:not(.reset) {
	cursor: pointer;
	width: 100%;
	color: $white;
	background: $blue;
	padding: 10px;
	border: 1px solid $blue;
	border-radius: 3px;
	transition: 0.15s;

	&:disabled {
		cursor: default;
		opacity: 0.5;
	}

	&:not(:disabled):hover {
		box-shadow: $dark-blue 0 0 3px 1px;
		background: $dark-blue;
		color: $white;
	}
}
button.red-btn {
	cursor: pointer;
	width: 100%;
	color: $white;
	background: $red;
	padding: 10px;
	border: 1px solid $red;
	border-radius: 3px;
	transition: 0.15s;

	&:disabled {
		cursor: default;
		opacity: 0.5;
	}

	&:not(:disabled):hover {
		box-shadow: $red 0 0 3px 1px;
		background: $red;
		border: 1px solid $light-red;
		color: $white;
	}
}

input:not(.nostyle) {
	color: $black;
	background: $white;
	padding: 10px;
	border: 1px solid $lightest-grey;
	border-bottom: 3px solid $lightest-grey;
	transition: 0.15s;

	&:focus {
		border-bottom: 3px solid $blue;
	}
}

input::placeholder {
	font-style: italic;
	color: $lightest-grey;
}

.input-field {
	& label,
	& input,
	& select {
		width: 100%;
	}
}

.checkbox-field {
	display: flex;
	align-items: center;
	gap: 5px;
}

select:not(.nostyle) {
	color: $black;
	background: $white;
	padding: 10px;
	border: 1px solid $lightest-grey;
	border-bottom: 3px solid $lightest-grey;
	transition: 0.15s;

	&:focus {
		border-bottom: 3px solid $blue;
	}
}

.reset {
	background-color: inherit;
	color: inherit;
	padding: 0;
	margin: 0;
	border: 0;
}

kbd {
	text-shadow: 0 1px 0 #fff;
	color: rgb(51, 51, 51);
	background-color: rgb(247, 247, 247);
	padding: 0.25em 0.5em;
	border-radius: 3px;
	border: 1px solid rgb(204, 204, 204);
	box-shadow: 0 1px 0px rgba(0, 0, 0, 0.2), 0 0 0 2px #ffffff inset;
	display: inline-block;
}

@media (max-width: 1280px) {
	.App {
		width: 100%;
	}
}