/* @NOTE: shader for when hovered over a button? like the rainbow one I made */
html {
  height : fit-content;
}

body {
  margin : 0;
  background: rgb(26, 24, 29);

  width: 100%;
  height : 100vh;
  min-height: 100vh;

  display: flex;
  flex-direction: column;

  padding-top: 100px;
  padding-bottom: 100px;

  position : relative;
}

/* Contact Page */
#form-submit-container {
  align-self: center;
	width : 80%;
	height : 100vh;

	display : grid;
	place-items : center;
}

#form-submit-container h1 {
  color: rgb(215, 205, 180);
  font-weight: bold;
}

#form-submit-container form {
	width : 90%;
	max-width : 800px;
}

.input-group {
	margin-bottom : 30px;
	position: relative;
}

.input-group select {
	width : 100%;
	padding : 10px;
	outline : 0;

	font-size : 15px;

	background-color : #454545;
	color : white;
}

.input-group input, .input-group textarea {

	width : 100%;
	padding : 10px;
	outline : 0;

	font-family : sans-serif;
	font-size : 15px;

	background-color : #454545;
	color : white;
}

.input-group label {
	left : 0;
	top : -30px;
	height: 100%;
	position: absolute;
	font-size : 14px;
	padding : 10px;
	color : white;
	cursor : text;
  font-weight: bold;

	transition: 0.2s;
}

#form-submit-container button {
	padding: 10px 0;
	outline: none;

	background-color : #454545;
	border: 1px solid #fff;
	width: 100%;
	cursor: pointer;

  color: #f1f1f1;
  font-size: 20px;
  font-weight: bold;

  transition: 0.3s;
}

#form-submit-container button:hover,
#form-submit-container button:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
	background-color : white;
}