html {
  box-sizing: border-box;
}

*, *:before, *:after {
	margin: 0;
	padding: 0;
	border: 0;
	box-sizing: inherit;
	text-decoration: none;
	color: #fff;
}

/*****************
 TYPOGRAPHY
 ****************/

body, input::placeholder, button {
	font-size: 16px;
	font-family: 'Montserrat', sans-serif;
}

h1 {
	font-size: 3rem; /* 48px */
	font-weight: 700;
}

button, li, input::placeholder, p {
	font-weight: 700;
}

button, input::placeholder {
	font-size: .875rem; /* 14px */
}

p {
	font-size: 1.125rem; /* 18px */
}

li {
	font-size: 1.5rem; /* 24px */
}


/*****************
 COLOR
 ****************/

h1, p {
	color: #4B6584;
}

li, button {
	color: #FFF;
}

input::placeholder {
	color: #778CA3;
}


/*****************
 BACKGROUND
 ****************/

body {
	background-color: #FED330;
	background-image: url("data:image/svg+xml,%3Csvg width='64' height='64' viewBox='0 0 64 64' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 16c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm0-2c3.314 0 6-2.686 6-6s-2.686-6-6-6-6 2.686-6 6 2.686 6 6 6zm33.414-6l5.95-5.95L45.95.636 40 6.586 34.05.636 32.636 2.05 38.586 8l-5.95 5.95 1.414 1.414L40 9.414l5.95 5.95 1.414-1.414L41.414 8zM40 48c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm0-2c3.314 0 6-2.686 6-6s-2.686-6-6-6-6 2.686-6 6 2.686 6 6 6zM9.414 40l5.95-5.95-1.414-1.414L8 38.586l-5.95-5.95L.636 34.05 6.586 40l-5.95 5.95 1.414 1.414L8 41.414l5.95 5.95 1.414-1.414L9.414 40z' fill='%239C92AC' fill-opacity='0.4' fill-rule='evenodd'/%3E%3C/svg%3E");
}

.topbar {
	background-color: #FFF;
}

button {
	background-color: #778CA3;
}

.registration-box {
	background-color: #D1D8E0;
}

ul {
	list-style-position: inside;
	list-style-type: square;
	list-style-image: url("../images/tick.svg");
	text-indent: -3em;
	padding-left: 3em;
}

/*****************
 DIMENSIONS
 ****************/

.login-button {
	width: 300px;
	height: 36px
}

.topbar {
	height: 82px;
	width: 100%;
}

.logo {
	width: 207px;
	height: 30px;
}

.preview-screenshot {
	width: 100%;
	height: auto;
}

.registration-box input,
.registration-box button {
	width: 100%;
	height: 54px;
}

@media screen and (min-width: 900px) {
	.preview-screenshot {
		width: 50%;
		height: auto;
	}

	.registration-box {
		max-width: 1050px;
		height: auto;
	}

	.registration-box input,
	.registration-box button {
		width: 332px;
	}
}




/*****************
BORDER-RADIUS
******************/

.login-button {
	border-radius: 36px;
}

.registration-box {
	border-radius: 54px;
}

.registration-box input,
.registration-box button {
	border-radius: 54px;
}

@media screen and (min-width: 900px) {
	.registration-box {
		border-radius: 154px;
	}

	.registration-box input,
	.registration-box button {
		border-radius: 0;
	}

	.registration-box :first-child {
		border-top-left-radius: 54px;
		border-bottom-left-radius: 54px;
	}

	.registration-box :last-child {
		border-top-right-radius: 54px;
		border-bottom-right-radius: 54px;
	}
}


/*****************
 BOX-SHADOW
 ****************/

.topbar, button, .preview-screenshot, input, .registration-box {
 	box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
 }


/*****************
 LAYOUT
 ****************/

header, .content, .registration-box form {
 	display: flex;
 	flex-wrap: wrap;
 	align-items: center;
 }

header {
	justify-content: flex-end;
}

.login-button {
	margin-right: 32px;
}

main {
	padding: 50px;
	padding-bottom: 0px;
}

@media screen and (min-width: 900px) {
	main {
		padding-right: 0;
		padding-left: 83px;
		padding-top: 72px;
	 }

	header, .content, .registration-box form {
	 	display: flex;
	 	flex-wrap: nowrap;
	 	align-items: center;
	}
}

.content {
	justify-content: space-between;
}

h1 {
	margin: 44px 0;
}

li {
	margin-bottom: 16px;
}

.registration-box {
	padding: 22px 22px;
	margin: 36px 20px;
}

.registration-box form {
	margin: 0 auto;
}

@media screen and (min-width: 900px) {

	footer {
		margin: 83px 0 0;
	}

	.registration-box {
		padding: 22px 60px;
		margin: 36px auto;
	}
}

.registration-box p {
	padding: 10px;
	text-align: center;
 	justify-content: center;
 	margin-bottom: 30px;
}

.registration input,
.registration button {
	margin: 5px;
}

.registration-box input::placeholder {
	text-indent: 42px;
}

.registration-box input {
	margin-bottom: 20px;
}

@media screen and (min-width: 900px) {
	.registration-box input {
		margin-bottom: 0;
	}

	.registration-box input:not(:last-child) {
		margin-right: 16px;
	}

}