/* colours */
@import url("/styles/_colours.css");

/* fonts */
@import url("/styles/_fonts.css");

/* Styling for components */
@import url("/styles/_welcomePage.css");
@import url("/styles/_header.css");
@import url("/styles/_calculator.css");
@import url("/styles/_createGamePage.css");
@import url("/styles/_joinGamePage.css");
@import url("/styles/_confirmationSend.css");
@import url("/styles/_confirmationReceive.css");
@import url("/styles/_confirmationEnd.css");
@import url("/styles/_playerPage.css");
@import url("/styles/_qrCodePage.css");

/* general */
* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	letter-spacing: -0.01em;
	line-height: 90%;
	font-family: "geometric";
	color: white;
	user-select: none;

}

/* headings */
h1 {
	font-size: clamp(1rem, 15vw, 6rem);
}

h2 {
	font-size: clamp(4rem, 5.5vw, 5rem);
}

h3 {
	font-size: clamp(2rem, 2.5vw, 5rem);
	text-shadow: var(--black-950) -4px 4px 0;
}

p {
	font-size: 2rem;
}

/* Styling for multiple tags, classes, ids */
h1, h2, .button--large, .button--small{
	text-shadow: var(--black-950) -4px 4px 0;
	text-transform: uppercase;
}

p, .button--player{
	text-shadow: var(--black-950) -2px 2px 0;
}

body {
	width: 100vw;
	height: 100vh;
	background-image: var(--pattern-mint);
	background-size: 26px 26px;
	background-position: 0 0,13px 13px;
}

/* buttons */
.button--large{
	background: linear-gradient(var(--red-100), var(--red-200));
	border: 0.25rem solid var(--white-200);
	border-radius: 0.5rem;
	box-shadow: var(--black-950) -8px 8px 0;
	padding: 1rem 0.5rem;
	font-size: clamp(2rem, 250%, 4rem);
	width: clamp(12rem, 15vw, 15rem);
}

input{
	border: 3px solid var(--white-200);
	width: 100%;
	border-radius: 0.50rem;
	box-shadow: inset -4px 4px #7F7F7F;
	text-align: end;
	padding-right: 1rem;
	font-size: clamp(3.5rem, 5vw, 6.5rem);
	color: var(--black-950);
	letter-spacing: -0.01em;
}

.button-keypad.selected{
	outline: 4px solid var(--red-200);
}

#root {
	overflow: hidden;
	display: grid;
	& > * {
		grid-area: 1 / -1;
		transition: all .5s ease-in-out;

		background-image: var(--pattern-mint);
		background-size: 26px 26px;
		background-position: 0 0,13px 13px;
		box-shadow: #111111 0px 0px 5vw 2vw;
	}
	& > *[class*="--active"] {
		transform: translateX(0);
		transform: translateY(0);
	}
}