button.button-main {
	position: relative;
	border: solid 1px rgba(255, 255, 255, 0.3);
	background: none;
	color: rgba(255, 255, 255, 0.5);
	font-family: "Blender Pro Thin", sans-serif;
	text-transform: uppercase;
	font-weight: normal;
	font-size: 1.75vh;
	letter-spacing: 1.8px;
	width: 12.5vw;
	height: 3.75vw;
	padding: 0;
	transition: all 0.25s ease;
	outline: none;
}

button.button-main:before {
	content: "";
	position: absolute;
	top: 0;
	left: 10%;
	width: 60px;
	height: 1px;
	transform: translateY(-1px);
	background: rgba(255, 255, 255, 1);
	transition: all 0.25s ease;
}

button.button-main:after {
	content: "";
	position: absolute;
	bottom: 0;
	right: 10%;
	width: 60px;
	height: 1px;
	transform: translateY(1px);
	background: rgba(255, 255, 255, 1);
	transition: all 0.25s ease;
}

button.button-main:hover {
	box-shadow: 1px 1px 8px rgba(255, 255, 255, 0.3);
	color: rgba(255, 255, 255, 1);
	text-shadow: 0 0 8px rgba(255, 255, 255, 0.4);
	cursor: pointer;
}

button.button-main:active {
	width: 12vw;
	height: 3.5vw;
}

button.button-small {
	position: relative;
	border: solid 1px rgba(255, 255, 255, 0.3);
	background: none;
	color: rgba(255, 255, 255, 0.5);
	font-family: "Blender Pro Thin", sans-serif;
	text-transform: uppercase;
	font-weight: normal;
	font-size: 1.1vh;
	letter-spacing: 1.8px;
	width: 8vw;
	height: 2.25vw;
	padding: 0;
	transition: all 0.25s ease;
	outline: none;
}

button.button-small:before {
	content: "";
	position: absolute;
	top: 0;
	left: 10%;
	width: 30px;
	height: 1px;
	transform: translateY(-1px);
	background: rgba(255, 255, 255, 1);
	transition: all 0.25s ease;
}

button.button-small:after {
	content: "";
	position: absolute;
	bottom: 0;
	right: 10%;
	width: 30px;
	height: 1px;
	transform: translateY(1px);
	background: rgba(255, 255, 255, 1);
	transition: all 0.25s ease;
}

button.button-small:hover {
	box-shadow: 1px 1px 8px rgba(255, 255, 255, 0.3);
	color: rgba(255, 255, 255, 1);
	text-shadow: 0 0 8px rgba(255, 255, 255, 0.4);
	cursor: pointer;
}

button.button-small:active {
	width: 7.5vw;
	height: 2vw;
}

span.span-small-line:before {
	content: "";
	position: absolute;
	bottom: 30%;
	right: 0;
	width: 1px;
	height: 10px;
	transform: translateX(1px);
	background: rgba(255, 255, 255, 1);
	transition: all 0.25s ease;
}

span.span-small-line:after {
	content: "";
	position: absolute;
	top: 30%;
	left: 0;
	width: 1px;
	height: 10px;
	transform: translateX(-1px);
	background: rgba(255, 255, 255, 1);
	transition: all 0.25s ease;
}

button.button-small:hover.button-small:before {
	left: -1px;
	width: 10px;
}

button.button-small:hover.button-small:after {
	right: -1px;
	width: 10px;
}

button.button-small:hover span.span-small-line:before {
	bottom: -1px;
}

button.button-small:hover span.span-small-line:after {
	top: -1px;
}

button.button-main:hover.button-main:before {
	left: -1px;
	width: 20px;
}

button.button-main:hover.button-main:after {
	right: -1px;
	width: 20px;
}

button.button-main:hover span.span-main-line:before {
	bottom: -1px;
}

button.button-main:hover span.span-main-line:after {
	top: -1px;
}

span.span-main-line:before {
	content: "";
	position: absolute;
	bottom: 30%;
	right: 0;
	width: 1px;
	height: 20px;
	transform: translateX(1px);
	background: rgba(255, 255, 255, 1);
	transition: all 0.25s ease;
}

span.span-main-line:after {
	content: "";
	position: absolute;
	top: 30%;
	left: 0;
	width: 1px;
	height: 20px;
	transform: translateX(-1px);
	background: rgba(255, 255, 255, 1);
	transition: all 0.25s ease;
}

button.button-main-dark {
	position: relative;
	border: solid 1px rgba(0, 0, 0, 0.3);
	background: none;
	color: rgba(0, 0, 0, 0.5);
	font-family: "Blender Pro Thin", sans-serif;
	text-transform: uppercase;
	font-weight: normal;
	font-size: 2vh;
	letter-spacing: 1.8px;
	width: 200px;
	height: 60px;
	padding: 0;
	transition: all 0.25s ease;
	outline: none;
}

button.button-main-dark:before {
	content: "";
	position: absolute;
	top: 0;
	left: 10%;
	width: 60px;
	height: 1px;
	transform: translateY(-1px);
	background: rgba(0, 0, 0, 1);
	transition: all 0.25s ease;
}

button.button-main-dark:after {
	content: "";
	position: absolute;
	bottom: 0;
	right: 10%;
	width: 60px;
	height: 1px;
	transform: translateY(1px);
	background: rgba(0, 0, 0, 1);
	transition: all 0.25s ease;
}

button.button-main-dark:hover {
	box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.3);
	color: rgba(0, 0, 0, 1);
	text-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
	cursor: pointer;
}

button.button-main-dark:active {
	width: 180px;
	height: 50px;
}

button.button-main-dark:hover.button-main-dark:before {
	left: -1px;
	width: 20px;
}

button.button-main-dark:hover.button-main-dark:after {
	right: -1px;
	width: 20px;
}

button.button-main-dark:hover span.span-main-line-dark:before {
	bottom: -1px;
}

button.button-main-dark:hover span.span-main-line-dark:after {
	top: -1px;
}

span.span-main-line-dark:before {
	content: "";
	position: absolute;
	bottom: 30%;
	right: 0;
	width: 1px;
	height: 20px;
	transform: translateX(1px);
	background: rgba(0, 0, 0, 1);
	transition: all 0.25s ease;
}

span.span-main-line-dark:after {
	content: "";
	position: absolute;
	top: 30%;
	left: 0;
	width: 1px;
	height: 20px;
	transform: translateX(-1px);
	background: rgba(0, 0, 0, 1);
	transition: all 0.25s ease;
}

button#button-join-room {
	width: 12.5vw;
	height: 3.75vw;

	margin-top: 3.75vw;
	margin-bottom: 1.875vw;
	margin-left: 3.75vw;
	margin-right: 3.75vw;

	font-size: 1vw;
}

button#button-join-room:active {
	width: 12vw;
	height: 3.5vw;

	margin-top: 3.875vw;
	margin-bottom: 2vw;
	margin-left: 4vw;
	margin-right: 4vw;
}

button#button-create-room {
	width: 12.5vw;
	height: 3.75vw;

	margin-top: 1.875vw;
	margin-bottom: 1.875vw;
	margin-left: 3.75vw;
	margin-right: 3.75vw;

	font-size: 1vw;
}

button#button-create-room:active {
	width: 12vw;
	height: 3.5vw;

	margin-top: 2vw;
	margin-bottom: 2vw;
	margin-left: 4vw;
	margin-right: 4vw;
}

input.input-main {
	position: relative;
	border: solid 1px rgba(255, 255, 255, 0.3);
	background: none;
	color: rgba(255, 255, 255, 0.5);
	font-family: "Blender Pro Thin", sans-serif;
	text-transform: uppercase;
	font-weight: normal;
	font-size: 1.5vh;
	letter-spacing: 1.8px;
	width: 12.5vw;
	height: 3.75vh;
	padding: 0;
	transition: all 0.25s ease;
	outline: none;
}

input.input-main:hover {
	box-shadow: 1px 1px 8px rgba(255, 255, 255, 0.3);
	color: rgba(255, 255, 255, 1);
	text-shadow: 0 0 8px rgba(255, 255, 255, 0.4);
	cursor: pointer;
}

input.input-main:active {
	width: 12vw;
	height: 3.5vh;
}

input.input-small {
	position: relative;
	border: solid 1px rgba(255, 255, 255, 0.3);
	background: none;
	color: rgba(255, 255, 255, 0.5);
	font-family: "Blender Pro Thin", sans-serif;
	text-transform: uppercase;
	font-weight: normal;
	font-size: 2vh;
	letter-spacing: 1.8px;
	width: 8vw;
	height: 2.25vh;
	padding: 0;
	transition: all 0.25s ease;
	outline: none;
}

input.input-small:hover {
	box-shadow: 1px 1px 8px rgba(255, 255, 255, 0.3);
	color: rgba(255, 255, 255, 1);
	text-shadow: 0 0 8px rgba(255, 255, 255, 0.4);
	cursor: pointer;
}

input.input-small:active {
	width: 7.5vw;
	height: 2vh;
}