html {
	line-height: 1.15;
	-webkit-text-size-adjust: 100%
}

body {
	margin: 0
}

h1 {
	font-size: 2em;
	margin: .67em 0
}

hr {
	box-sizing: content-box;
	height: 0;
	overflow: visible
}

pre {
	font-family: monospace, monospace;
	font-size: 1em
}

a {
	background-color: transparent
}

abbr[title] {
	border-bottom: none;
	text-decoration: underline;
	text-decoration: underline dotted
}

b,
strong {
	font-weight: bolder
}

code,
kbd,
samp {
	font-family: monospace, monospace;
	font-size: 1em
}

small {
	font-size: 80%
}

sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline
}

sub {
	bottom: -.25em
}

sup {
	top: -.5em
}

img {
	border-style: none
}

button,
input,
optgroup,
select,
textarea {
	font-family: inherit;
	font-size: 100%;
	line-height: 1.15;
	margin: 0
}

button,
input {
	overflow: visible
}

button,
select {
	text-transform: none
}

button,
[type="button"],
[type="reset"],
[type="submit"] {
	-webkit-appearance: button
}

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
	border-style: none;
	padding: 0
}

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
	outline: 1px dotted ButtonText
}

fieldset {
	padding: .35em .75em .625em
}

legend {
	box-sizing: border-box;
	color: inherit;
	display: table;
	max-width: 100%;
	padding: 0;
	white-space: normal
}

progress {
	vertical-align: baseline
}

textarea {
	overflow: auto
}

[type="checkbox"],
[type="radio"] {
	box-sizing: border-box;
	padding: 0
}

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
	height: auto
}

[type="search"] {
	-webkit-appearance: textfield;
	outline-offset: -2px
}

[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none
}

::-webkit-file-upload-button {
	-webkit-appearance: button;
	font: inherit
}

details {
	display: block
}

summary {
	display: list-item
}

template {
	display: none
}

[hidden] {
	display: none
}

* {
	-webkit-box-sizing: border-box;
	box-sizing: border-box
}

html,
body {
	height: 100%
}

body {
	margin: 0;
	padding: 0;
	font-size: 65px;
	min-width: 320px
}

.textArea {
	position: absolute;
	left: 50%;
	top: 50%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	font-weight: 400;
	text-align: center;
	color: white
}

.textArea p {
	margin-top: 0;
	margin-bottom: 30px;
	line-height: 65px
}

.button {
	display: block;
	margin: 0 auto;
	width: 310px;
	background-color: white;
	text-align: center;
	padding: 13px;
	line-height: 60px;
	color: #3486f7;
	text-transform: capitalize;
	border-radius: 5px;
	text-decoration: none;
	font-size: 50px
}

.arrow-container {
	position: absolute;
	z-index: 99;
	top: 150px;
	left: 70px;
	text-align: center;
	width: 300px
}

.arrow {
	width: 100px;
	height: 170px;
	-webkit-animation: mover 0.5s infinite alternate;
	animation: mover 0.5s infinite alternate
}

.arrow-text {
	margin-top: 20px;
	color: #fff;
	font-size: 23px;
	line-height: 24px
}

@-webkit-keyframes mover {
	0% {
		-webkit-transform: translateY(0);
		transform: translateY(0)
	}
	100% {
		-webkit-transform: translateY(-30px);
		transform: translateY(-30px)
	}
}

@keyframes mover {
	0% {
		-webkit-transform: translateY(0);
		transform: translateY(0)
	}
	100% {
		-webkit-transform: translateY(-30px);
		transform: translateY(-30px)
	}
}

@media (max-width:1250px) {
	body {
		font-size: 45px
	}
	.textArea {
		max-width: 310px
	}
	.textArea p {
		line-height: 50px
	}
	.button {
		width: 310px;
		padding: 10px;
		line-height: 50px;
		font-size: 40px
	}
	.arrow-container {
		left: 50px;
		width: 200px
	}
	.arrow {
		width: 80px;
		height: 140px
	}
	.arrow-text {
		margin-top: 10px;
		font-size: 19px;
		line-height: 22px
	}
}

@media (max-width:800px) {
	.textArea {
		top: 70%;
		-webkit-transform: translate(-50%, -70%);
		-ms-transform: translate(-50%, -70%);
		transform: translate(-50%, -70%)
	}
	.arrow {
		right: -10px;
		position: absolute;
	}
}

@media (max-width:480px) {
	.textArea {
		width: 300px;
		top: 10px;
		-webkit-transform: translate(-50%, 0);
		-ms-transform: translate(-50%, 0);
		transform: translate(-50%, 0)
	}
	.button {
		width: 300px
	}
	.arrow-container {
		left: 50%;
		top: auto;
		bottom: 10px;
		-webkit-transform: translateX(-50%);
		-ms-transform: translateX(-50%);
		transform: translateX(-50%);
		width: 300px;
		height: auto
	}
	.arrow {
		width: 33px;
		height: 58px;
	}
	.arrow-text {
		margin-top: 5px;
		margin-bottom: 0;
		font-size: 17px;
		line-height: 20px
	}
}

html,
 :not(:root):fullscreen::backdrop {
	background: url('./bg.jpg') no-repeat;
	background-size: cover;
}

body,
 :not(:root):fullscreen::backdrop {
	background-color: #607d8bba;
}