web/css/assignments.less

@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
@prim: #333333;

*{
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	
	font-weight: 300;
}

body{
	font-family: '', sans-serif;
	color: white;
	font-weight: 300;
	
	::-webkit-input-placeholder { /* WebKit browsers */
		font-family: 'Source Sans Pro', sans-serif;
			color:    white;
		font-weight: 300;
	}
	:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
		font-family: 'Source Sans Pro', sans-serif;
		 color:    white;
		 opacity:  1;
		font-weight: 300;
	}
	::-moz-placeholder { /* Mozilla Firefox 19+ */
		font-family: 'Source Sans Pro', sans-serif;
		 color:    white;
		 opacity:  1;
		font-weight: 300;
	}
	:-ms-input-placeholder { /* Internet Explorer 10+ */
		font-family: 'Source Sans Pro', sans-serif;
		 color:    white;
		font-weight: 300;
	}
}

.wrapper{
	background: #333333;
background: -webkit-linear-gradient(top left, #333333 0%, #333333 100%);
background: -moz-linear-gradient(top left, #333333 0%, #333333 100%);
background: -o-linear-gradient(top left, #333333 0%, #333333 100%);
background: linear-gradient(to bottom right, #333333 0%, #333333 100%);
    position: relative;
	height: 100vh;
	// top: 50%;
	// left: 0;
	// width: 100%;
	// height: 400px;
	// margin-top: -200px;
	overflow: visible;

    &.form-success{
		.container{
			h1{
				transform: translateY(85px);
			}
		}
	}

	&.form-error{
		.container{
			.assignment{
				button{
					animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
					@keyframes shake {
						10%, 90% {
							transform: translate3d(-1px, 0, 0);
						}
						20%, 80% {
							transform: translate3d(2px, 0, 0);
						}
						30%, 50%, 70% {
							transform: translate3d(-4px, 0, 0);
						}
						40%, 60% {
							transform: translate3d(4px, 0, 0);
						}
					}
				}
			}
		}
	}
}

.container{
	max-width: 600px;
	margin: 0 auto;
	padding: 80px 0;
	height: 400px;
	text-align: center;
	
	h1{
		font-size: 40px;
		transition-duration: 1s;
		transition-timing-function: ease-in-put;
		font-weight: 200;
	}
}

.assignment{
	padding: 20px 0;
	position: relative;
	z-index: 2;

	button{
		appearance: none;
		outline: 0;
		// make backgournd color a gradient
		background: #50a3a2;
		background: -webkit-linear-gradient(top left, #50a3a2 0%, #53e3a6 100%);
		background: -moz-linear-gradient(top left, #50a3a2 0%, #53e3a6 100%);
		background: -o-linear-gradient(top left, #50a3a2 0%, #53e3a6 100%);
		background: linear-gradient(to bottom right, #50a3a2 0%, #53e3a6 100%);
		
		border: 0;
		padding: 10px 15px;
		color: @prim;
		border-radius: 3px;
		width: 600px;
		cursor: pointer;
		font-size: 18px;
		transition-duration: 0.25s;
		margin-bottom: 20px;
		
		&:hover{
			// add a shadow
			box-shadow: 0px 5px 10px rgba(0,0,0,0.25);

			// change the background color
			background: #53e3a6;
		}
	}
}