:root {
	--blue: #7aacef;
	--cyan: #31d9e4;
	--white: #fbfbfb;
	--violet: #8f47ee;
	--skyblue: #9cf0f8;
	--pink: #cf47ee;
}

body { 
	height: 100vh;
	background-image: linear-gradient(45deg,var(--skyblue),var(--cyan),var(--blue),var(--violet));
	display: flex;
	justify-content: center;
	align-items: center;
}

div.box {
	background-color: var(--white); 
	width: 35%;
	font-family: 'Lexend', sans-serif;
	padding: 5rem;
	color: darkgrey;
	border-radius: 5px;
	transition: all 0.1s ease-in-out;
	position: relative;
	overflow: hidden;
	max-width: 350px;
}

h1 {
	color: var(--cyan);
	font-size: 2em;
	margin: 0;
}

.subheading {
	font-size: 14px;
}

section:first-child {
	margin-bottom: 3rem;
}

.input-wrapper {
	border-bottom: 1px solid darkgrey;	
	margin-bottom: 1rem;
	display: flex;
    align-items: center;
}

input {
	font-family: 'Lexend', sans-serif;
	border: none;
    padding: 0.5rem;
    background-color: transparent;
    width: 100%;
}

input::placeholder {
  color: darkgrey;
}

.input-wrapper:focus-within {
	border: none;
    border-bottom: 2px solid var(--skyblue);
}

input:focus {
    outline: none;
}

.forgot-password {
	text-decoration: none;
    color: grey;
    display: block;
    margin: 0.5rem 0;
    font-size: 14px;
    display: flex;
    align-items:center;
}

.login-button {
	width: 100%;
    height: 2.25rem;
    font-size: 1rem;
    background-image: linear-gradient(45deg, var(--pink), var(--violet) 60%);
    color: var(--white);
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

section:nth-child(2) {
	margin-bottom: calc(20px + 0.5rem);
}

section:last-child {
	font-size: 14px;
}

section:last-child > span:last-child > a {
    text-decoration: none;
    color: var(--cyan);
    font-weight: bold;
}

form svg {
	min-width: 18px;
}

.circle {
	width: 12rem;
	height: 12rem;
	background-image: linear-gradient(45deg, var(--skyblue),var(--cyan),var(--blue),var(--violet));
	border-radius: 100%;

}

.circle-right {
	position: absolute;
	top: 20px;
	right: -101px;
	transform: rotate(-109deg);
}

.circle-left {
	position: absolute;
	bottom: 61px;
    left: -105px;
    transform: rotate(-11deg);
    z-index: 1;
}

.small-box {
	z-index: 2;
	position: relative;
}


@media only screen and (max-width: 640px) {
	div.box {
		padding: 1rem;
		width: 80%;
	}

	.circle {
		width: 6rem;
		height: 6rem;
	}

	.circle-left {
		left:-71px;
	}

	.circle-right {
		right: -50px;
	}

	input {
		font-size: 1rem;
	}
}