:root{
	--vw: 1vw;
	--vh: 1vh;
	--messages_width: calc(var(--vw) * 70);
}

@supports (width: 1dvw) and (height: 1dvh) {
	--vw: 1dvw;
	--vh: 1dvh;
}

*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: Helvetica;
}


body{
	position: relative;
	height: calc(100 * var(--vh));
	width: calc(100 * var(--vw));
	background: linear-gradient(-60.76deg, rgb(150, 121, 255) 0%, rgb(212, 153, 234) 57.96%, rgb(238, 164, 179) 100%);
}

input[type=submit]{
	position: relative;
	height: auto;
	padding: calc(var(--vh) * 1) calc(var(--vh) * 2);
	margin-left: calc(var(--vh) * 1);
	border: none;
	--size: calc(var(--holder_size) * 0.2);
	line-height: calc(var(--holder_size) * 0.4);
	background: rgba(0, 0, 0, 0.3);
	color: white;
	transition: background 0.2s;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: all;
}


form{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	width: 40vw;
	height: auto;
}


@media only screen and (max-height: 1200px){
	form{
		width: calc(50 * var(--vw));
	}
}



input[type=text]{
	flex-grow: 1;
	border: none;
	outline: none;
	padding: calc(var(--vh) * 1) calc(var(--vh) * 2);
	min-width: 0;
}


input{
	border-radius: calc(var(--vh) * 0.5);
	font-size: 1rem;
}