@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600&display=swap');

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

body {
	background: linear-gradient(#fff, #fff, #eee, #ddd);
	font-family: 'Montserrat', Arial, sans-serif;
	min-height: 100vh;
	text-align: center;
}

a {
	text-decoration: none;
}

ul {
	list-style: none;
}

.header-logo {
	margin: 50px 0;
	max-width: 60%;
}

.container {
	width: 85%;
	margin: 0 auto;
	max-width: 854px;
}

	/* carousel */

	.carousel {
		width: 100%;
	}

	/* button-list */

	.button-list {
		margin: 50px auto;
		max-width: 430px;
	}

		.button {
			color: #333;
			background-color: #fff;
			border-radius: 10px;
			box-shadow: 3px 6px 24px rgba(0,0,0,0.1);
			display: block;
			font-size: 16px;
			margin: 20px 0;
			padding: 16px;
			transition: all ease-in 0.2s;
		}
			.button:hover {
				transform: scale(1.03);
			}

			.button-icon {
				font-size: 12px;
				margin: 0 10px 0 0;
				transition: all ease-in 0.2s;
			}

				.button:hover .button-icon {
					color: #fff;
					margin: 0 15px 0 0;
				}

		/* social media */

		.social-media {
			margin: 40px 0;
		}

		.social-media li {
			display: inline-block;
			margin: 10px;
		}

		.social-media-icon {
			color: #333;
			font-size: 40px;
			transition: all ease-in 0.15s;
		}

			.social-media-icon:hover {
				transform: scale(1.1);
			}

	/* footer */

	.copyrights {
		color: #666;
		font-size: 11px;
		padding: 10px 0 30px;
	}

		.copyrights a {
			color: #666;
			font-weight: 600;
		}

			.copyrights a:hover {
				color: #c80000;
			}


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

	.header-logo {
		margin: 30px 0;
	}

	.button-list {
		margin: 30px auto;
	}

		.button {
			font-size: 15px;
			margin: 25px 0;
		}

		.social-media {
			margin: 30px 0;
		}

			.social-media-icon {
				font-size: 35px;
			}
}


/* custom colors */

.button:hover {
	background-color: #c80000;
	color: #fff;
}

.button-icon,
.social-media-icon:hover {
	color: #c80000;
}