@import url('https://fonts.googleapis.com/css2?family=Slabo+27px&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nunito&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@300&display=swap');


:root {
	--primary-color: #fdfdfd;
	--secondary-color: #ebebeb;
	--secondary-color-hover: #c9c9c9;
	--secondary-color-focus: #dfdedec9;
	--accent-color: #fa1d44;
	--accent-color-hover: #d31739;
	--accent-color-focus: #fa1d4595;
	
	--text-color-dark: #000000;
	--text-color-dark-hover: #424242;
	--text-color-light: #fdfdfd;
	--text-color-gray: #747474;

	--green-color: #5ab190;
	--red-color: #d03035;

	--twitter-color: #1c9bef;
	--twitter-color-hover: #1578b9;
	--twitter-color-focus: #1276b9bb;

	--facebook-color: #435f9c;
	--facebook-color-hover: #3a5285;
	--facebook-color-focus: #314674af;

	--google-color: #DF492F;
	--google-color-hover: rgb(190, 64, 42);
	--google-color-focus: rgba(189, 62, 40, 0.733);

	--serif-font-family: 'Slabo 27px', serif;
	--sans-serif-font-family: 'Nunito', sans-serif;
	--small-caps-font-family: 'Oswald', sans-serif;
}

* {
	margin: 0;
	box-sizing: border-box;
}

*:focus {
	outline: none;
}

html, body {
	height: 100%;
	background: var(--primary-color);
	color: var(--text-color-dark);
	font-family: var(--sans-serif-font-family);
	font-size: 23px;
	scroll-behavior: smooth;
}

h1 {
	font-size: 60px;
	font-family: var(--serif-font-family);
	font-weight: 100;
}

h3 {
	font-family: var(--serif-font-family);
	font-size: 40px;
	font-weight: 100;
	margin-bottom: 30px;
}

h4 {
	font-family: var(--small-caps-font-family);
	font-size: 23px;
}

a {
	font-family: var(--small-caps-font-family);	
	color: var(--text-color-dark);
	text-decoration: none;
	/* height: 32px; */
/*	transition: color 0.2s;*/
}

a span:hover {
	border-bottom: 2px solid var(--accent-color);
	color: var(--accent-color) !important;
}

button {
	border: none;
	border-radius: 40px;
	width: 200px;
	height: 55px;
	font-family: var(--small-caps-font-family);
	font-size: 20px;
	background: var(--accent-color);
	color: var(--text-color-light);
	transition: 0.3s;
	cursor: pointer;
	/* box-shadow: 0 5px 10px rgb(154 160 185 / 25%), 0 15px 40px rgb(166 173 201 / 25%); */
	/* box-shadow: -4px 4px 0 0 var(--accent-color-focus); */
}

button:hover {
	background: var(--accent-color-hover);
	/* top: -5px; */
	transform: translateX(10px) translateY(-10px);
	/* right: -5px; */
	box-shadow: -5px 5px 0 0 var(--accent-color-focus);
}

button:active {
	box-shadow: -2px 2px 0 0 var(--accent-color-focus);
	transform: translateX(4px) translateY(-4px);
}

button:focus {
	/* box-shadow: 0 0 0 5px var(--accent-color-focus); */
	/* box-shadow: 0 0 15px var(--accent-color-focus); */
}

button.secondary {
	background: var(--secondary-color);
	color: var(--text-color-dark);
	/* box-shadow: -4px 4px 0 0 var(--secondary-color-focus);	 */
}

button.secondary:hover {
	background: var(--secondary-color-hover);
	box-shadow: -5px 5px 0 0 var(--secondary-color-focus);
}

button.secondary:active {
	box-shadow: -2px 2px 0 0 var(--secondary-color-focus);
}

button.secondary:focus {
	/* box-shadow: 0 0 0 5px var(--secondary-color-focus); */
	/* box-shadow: 0 0 15px var(--secondary-color-focus); */
}

button.nav-button {
	width: 140px;
	height: 52px;
}

button.small {
	width: 150px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	font-size: 18px;
}

button.icon {
	background: var(--primary-color);
	color: var(--text-color-gray);
	border-radius: 8px;
	font-size: 40px;
	padding: 7px;
	width: 54px;
	height: 54px;
	display: flex;
	justify-content: center;
	align-items: center;
}

button.icon:hover {
	background: var(--accent-color);
	color: var(--text-color-light);
}

input[type="text"], textarea {
	width: 50%;
	height: 50px;
	border-radius: 8px;
	border: 2px solid var(--secondary-color);
	/* border-bottom: 3px solid var(--text-color-gray); */
	transition: border 0.3s;
	font-family: var(--sans-serif-font-family);
	font-size: 20px;
	padding-left: 10px;
}

input[type="text"]:focus, textarea:focus {
	border: 2px solid var(--accent-color);
}

section {
	margin-bottom: 50px;
}

hr {
	width: 430px;
	height: 3px;
	background: var(--accent-color);
	border: none;
	margin: 30px;
}

.accent {
	color: var(--text-color-dark);
}

.subtitle {
	color: var(--text-color-gray);
}

p.small {
	font-size: 18px;
	margin-right: 160px;
	margin-top: 30px;
}

.buttons {
	display: flex;
	gap: 70px;
}


#out {
	width: 100%;
	position: fixed;
	background: transparent;
	height: 100px;
	z-index: 1;
}

#out:hover .nav {
	top: 0 !important;
	border-bottom: none !important;
	background: rgba(253, 253, 253, 0.95) !important;
}

.nav {
	display: flex;
	background: var(--primary-color);
	width: 100%;
	padding: 15px;
	justify-content: center;
	transition: 0.5s;
	border-top: 4px solid var(--accent-color);
	align-items: center;
	position: fixed;
	z-index: 2;
}

.nav:hover {
	/* top: 0 !important; */
	/* border-bottom: none !important; */
}

.nav a.name {
	font-family: var(--serif-font-family);
}

.nav a.name:hover {
	border-bottom: none;
	color: var(--text-color-dark) !important;
}

.nav h3#name {
	margin: 0 0 0 30px;
	cursor: pointer;

}

.nav .links {
	display: flex;
	gap: 40px;
	flex: 4;
	justify-content: center;
}

.nav .links a.nav-link {
	font-family: var(--small-caps-font-family);
	font-size: 23px;
	/* width: fit-content; */
	/* line-height: 25px;	 */
}

.nav .buttons {
	margin-right: 30px;
	gap: 20px;
}

.close {
	display: none;
	flex-direction: column;
	gap: 5px;
	background: none;
	width: inherit;
	border-radius: 50%;
	position: fixed;
	z-index: 2;
}

.close:hover, .close:active, .close:focus {
	background: none;
	box-shadow: none;
	transform: translateX(0) translateY(0);
}

.close .line {
	width: 40px;
	height: 5px;
	background: var(--text-color-dark);
	position: relative;
	transition: 0.5s;
}

.close .line#top {
	/* top: 10px; */
}

.close .line#bottom {
	width: 30px;
	left: 10px;
}

.close .top {
	transform: rotate(45deg);
	top: 10px;
	background: var(--text-color-light) !important;	
	/* animation: t 0.5s; */
}

.close .bottom {
	transform: rotate(-45deg);
	/* top: 10px; */
	left: 0 !important;
	width: 40px !important;
	background: var(--text-color-light) !important;
}

.landing {
	height: 100%;
  background-image: url("landing.png");
  background-repeat: no-repeat;
	background-position: center;
	/* background-position-x: 100px; */
	background-size: 80%;
	display: flex;
	justify-content: center;
	/* width: 100%; */
}

.landing .text {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 50%;
	padding-left: 100px;
	/* padding: 100px 0 0 100px; */
}

.landing .image {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 50%;
	padding-top: 80px;
}

.landing .text p.subtitle {
	margin-top: 70px;
}

.landing .text .buttons {
	margin-top: 50px;
}



.features {
	height: 100%;
  /* background-image: url("features.png"); */
  /* background-repeat: no-repeat; */
	/* background-position: center; */
	/* background-position-y: 300px; */
  /* background-size: cover; */
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	/* width: 100%; */
}

.features .features-container {
	display: flex;
	justify-content: center;
	gap: 50px;
	padding: 30px 100px;
	margin-bottom: 50px;
}

.features .features-container .feature {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 350px;
}

.features .features-container .feature h4 {
	margin: 30px 0;
}

.features .features-container .feature ion-icon {
	font-size: 56px;
	padding: 10px;
	border-radius: 50%;
	background: var(--accent-color);
	color: var(--text-color-light);
}


.demo {
	height: 100%;
  background-image: url("demo.png");
  background-repeat: no-repeat;
	background-position: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}



.about {
	height: 100%;
  /* background-image: url("about.png"); */
  /* background-repeat: no-repeat; */
	/* background-position: center; */
	display: flex;
	/* flex-direction: column; */
	align-items: center;
	justify-content: center;
}

.about .image img {
	margin-left: -500px;
}

.about .text {
	width: 500px;
}

.about .text p.subtitle {
	margin-bottom: 20px;
}




.plans {
	height: 120%;
  background-image: url("plans.png");
  background-repeat: no-repeat;
	background-position: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.plans .plans-container {
	display: flex;
	gap: 100px;
	margin-top: 30px;
}

.plans .plans-container .plan {
	width: 380px;
	height: 590px;
	/* box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); */
	box-shadow: 0 5px 10px rgb(154 160 185 / 20%), 0 15px 40px rgb(166 173 201 / 20%);
	border-radius: 20px;
	/* padding: 20px; */
	display: flex;
	flex-direction: column;
	align-items: center;
	background: var(--primary-color);
	padding-top: 50px;
	transition: 0.3s;
}

.plans .plans-container .plan:hover {
	box-shadow: 0 5px 10px rgb(154 160 185 / 25%), 0 15px 40px rgb(166 173 201 / 25%);
}

.plans .plans-container .plan ion-icon.starter, .plans .plans-container .plan ion-icon.pro {
	font-size: 42px;
	margin: 20px;
}

.plans .plans-container .plan h1 {
	font-family: var(--small-caps-font-family);
}

.plans .plans-container .plan h1 span {
	color: var(--text-color-gray);
	position: relative;
	font-size: 20px;
}

.plans .plans-container .plan h1 span.dollar-sign {
	top: -30px;
}

.plans .plans-container .plan h1 span.month {
	font-size: 30px;
}

.plans .plans-container .plan p.subtitle {
	font-style: italic;
}

.plans .plans-container .plan button {
	margin-top: 20px;
}

.plans .plans-container .plan .bottom {
	border-bottom-right-radius: 20px;
	border-bottom-left-radius: 20px;
	background: var(--secondary-color);
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 200px;
	margin-top: auto;
	gap: 20px;
}

.plans .plans-container .plan .bottom .column {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 30px;
}

.plans .plans-container .plan .bottom .column .feature {
	display: flex;
	gap: 10px;
	align-items: center;
}

.plans .plans-container .plan .bottom .column .feature ion-icon.checkmark {
	color: var(--green-color);
}

.plans .plans-container .plan .bottom .column .feature ion-icon.cross {
	color: var(--red-color);
}



.contact {
	height: 100%;
  background-image: url("contact.png");
  background-repeat: no-repeat;
	background-position: center;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 100px;
}

.contact .text .info-container {
	margin-top: 30px;
}

.contact .text .info-container div {
	display: flex;
	align-items: center;
	gap: 10px;
}

.contact .form {
	display: flex;
	flex-direction: column;
	gap: 30px;
	width: 430px;
}

.contact .form .name {
	display: flex;
	gap: 10px;
}

.contact .form input[type="text"].email {
	width: 100%;
}

.contact .form textarea.message {
	height: 200px;
	width: 100%;
	padding-top: 5px;
	resize: vertical;
	max-height: 400px;
	min-height: 100px;
}




.footer {
	height: 50%;
	background: var(--secondary-color);
	padding: 50px;
	display: flex;
	gap: 30px;
}

.footer .column {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.footer .column.left, .footer .column.right {
	flex: 2;
}

.footer h1 {
	color: var(--accent-color);
}

.footer .icons-container {
	display: flex;
	gap: 20px;
	margin-top: 20px;
}

.footer .icons-container ion-icon {
	font-size: 40px;
}

.footer .column a {
	color: var(--accent-color);
	/* margin-top: 15px; */
}

.footer .column a:hover {
	border-bottom: none;
	cursor: auto;
}

.footer .column a span:hover {
	border-bottom: 2px solid var(--accent-color);
	cursor: pointer;
}

.footer .column.right input[type="text"] {
	margin: 15px 0;
	width: 430px;
}


.sign-up-in {
	height: 100%;
  background-image: url("landing.png");
  background-repeat: no-repeat;
	background-position: center;
	background-size: 80%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.sign-up-in .form {
	width: 430px;
	display: flex;
	flex-direction: column;
	gap: 30px;
	margin: 30px;
}

.sign-up-in .name {
	display: flex;
	gap: 10px;
	width: 100%;
}

.sign-up-in .email {
	width: 100%;
}

.sign-up-in .button-container {
	display: flex;
	gap: 20px;
	margin-top: 20px;
}

.sign-up-in button.small.twitter {
	background: var(--twitter-color);
}

.sign-up-in button.small.twitter:hover {
	background: var(--twitter-color-hover);
	box-shadow: -5px 5px 0 0 var(--twitter-color-focus);
}

.sign-up-in button.small.twitter:active {
	box-shadow: -2px 2px 0 0 var(--twitter-color-focus);
}

.sign-up-in button.small.facebook {
	background: var(--facebook-color);
}

.sign-up-in button.small.facebook:hover {
	background: var(--facebook-color-hover);
	box-shadow: -5px 5px 0 0 var(--facebook-color-focus);
}

.sign-up-in button.small.facebook:active {
	box-shadow: -2px 2px 0 0 var(--facebook-color-focus);
}

.sign-up-in button.small.google {
	background: var(--google-color);
	margin-top: 20px;
}

.sign-up-in button.small.google:hover {
	background: var(--google-color-hover);
	box-shadow: -5px 5px 0 0 var(--google-color-focus);
}

.sign-up-in button.small.google:active {
	box-shadow: -2px 2px 0 0 var(--google-color-focus);
}

.sign-up-in a {
	color: var(--accent-color);
}



@media only screen and (max-width: 825px) {

	html, body {
		font-size: 20px;
	}

	h1 {
		font-size: 50px;
	}
	
	ion-icon, span {
		z-index: auto;
	}
	
	.nav {
		/* visibility: hidden; */
		height: 0;
		overflow: hidden;
		padding: 0;
		/* opacity: 0; */
		transition: visibility 0s, opacity 0.5s linear;
		transition: 0.5s;
		top: 0 !important;
    box-shadow: none !important;
    background: #000 !important;
	}

	.full {
		height: 100%;
		opacity: 1;	
		flex-direction: column;
		align-items: center;
		width: 100%;
		transition: 0.5s;
		background: #000;
	}

	.full h3#name {
		margin: 50px 0;
	}

	.nav.full a.name {
		color: var(--text-color-light) !important;
	}

	.nav .links {
		flex-direction: column;
		justify-content: normal;
		align-items: center;
		text-align: center;
		flex: 0;
	}

	.full a {
		color: var(--text-color-light);
	}

	.full .buttons {
		flex-direction: column;
		gap: 20px;
		margin: 50px 0;
	}

	.full .buttons button.nav-button {
		width: 200px;
	}

	.close {
		display: flex;
		position: fixed;
		top: 20px;
		right: 20px;
	}

	.landing {
		flex-direction: column;
		height: auto;
		background-size: 300%;
	}

	.landing .text {
		text-align: center;
		width: 100%;
		padding: 30px;
	}

	.landing .text .buttons {
    flex-direction: column;
    gap: 20px;
	}

	.landing .image {
		width: 100%;
	}

	.features {
		height: auto;
		padding: 30px;
		text-align: center;
	}

	.features .features-container {
		flex-direction: column;
		align-items: center;
		padding: 0;
	}

	.demo {
		padding: 30px;
    text-align: center;
	}
	
	.demo img {
		width: 100%;
	}

	.about {
		flex-direction: column-reverse;
		padding: 30px;
		text-align: center;
	}

	.about .image img {
		width: 100%;
		margin-left: 0;
	}

	.plans {
		height: auto;
		padding: 30px;
		text-align: center;
		/* margin-bottom: 150px; */
	}

	.plans .plans-container {
		flex-direction: column;
		width: 100%;
		align-items: center;
	}

	.plans .plans-container .plan {
		width: 380px;
		height: auto;
	}

	.plans .plans-container .plan .bottom {
		margin-top: 30px;
		gap: 10px;
	}

	.plans .plans-container .plan .bottom .column .feature {
		gap: 5px;
	}

	.contact {
		flex-direction: column;
		align-items: center;
		text-align: center;
		padding: 30px;
		height: auto;
	}

	.contact .form input[type="text"], .contact .form textarea {
		font-size: 19px;
	}		

	.contact .text .info-container div {
		justify-content: center;
	}

	.footer {
		flex-direction: column;
		height: auto;
		gap: 30px;
	}

	.footer .icons-container ion-icon {
		font-size: 32px;
	}
}

@media only screen and (max-width: 500px) {
	
	#out:hover .nav {
		background: black !important;
	}

	.landing .text {
		margin-top: 30px;
	}

	.landing .image img {
		width: 90%;
	}

	.features .features-container .feature {
		width: auto;
	}

	.about .text {
		width: auto;
	}

	.plans .plans-container .plan {
		width: 100%;
	}

	.contact .text .info-container div {
		flex-direction: column;
	}

	.contact .text .info-container div ion-icon {
		font-size: 32px;
	}

	.contact .form {
		width: 100%;
		padding: 10px;
	}

	.footer .column.right input[type="text"] {
		width: 100%;
	}

	.sign-up-in .form, hr {
		width: 90%;
	}

	.sign-up-in {
		padding-top: 100px;
		height: auto;
	}

	.sign-up-in .subtitle {
		text-align: center;
		margin-top: 30px;
		margin-right: 0;
	}

	.sign-up-in .button-container {
		flex-direction: column;
	}
}


::selection {
	background: var(--accent-color);
	color: var(--text-color-light);
}