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

/* global */

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

html,
body {
	font-size: 18px;
	font-family: 'Bai Jamjuree', sans-serif;
	overflow-x: hidden;
}

h1 {
	color: hsl(210, 10%, 33%);
}

p {
	font-size: 16px;
	color: hsl(201, 11%, 66%);
}

.btn-ios {
	color: whitesmoke;
	background: hsl(171, 66%, 44%);
	border-radius: 25px;
	box-shadow: 0 3px 2px hsl(171, 60%, 40%);
	transition: transform 0.5s;
}

.btn-mac {
	color: whitesmoke;
	background: hsl(233, 100%, 69%);
	border-radius: 25px;
	box-shadow: 0 3px 2px hsl(233, 94%, 65%);
	transition: transform 0.5s;
}

.btn-ios:hover,
.btn-mac:hover {
	color: whitesmoke;
	transform: translateY(-10%);
}

footer {
	background: rgb(240, 240, 240);
}

footer img {
	max-width: 60px;
}

ul,
li a {
	list-style-type: none;
	text-decoration: none;
	cursor: pointer;
}

li {
	transition: transform 1s;
}

li:hover {
	color: hsl(171, 66%, 44%);
	transform: translateY(-15%);
}

/* divs */

.logo {
	background-image: url('/images/bg-header-desktop.png');
	background-repeat: no-repeat;
	background-size: contain;
}

.keep-track-info img {
	max-width: 100%;
	position: relative;
	left: -70px;
}

.access-clipboard img {
	max-width: 70%;
}

.card {
	border: none;
}

.social-media-links li {
	display: inline;
}

.social-media-links img {
	padding: 10px;
	max-width: 40px;
	height: auto;
	margin: auto;
}

.svg-filter {
	transition: transform 1s;
}

.svg-filter:hover {
	filter: invert(58%) sepia(81%) saturate(382%) hue-rotate(122deg)
		brightness(89%) contrast(91%);
	transform: translateY(-15%);
}

@media (max-width: 792px) {
	footer {
		font-size: 0.7rem;
	}
}

@media (max-width: 575px) {
	footer {
		text-align: center;
		font-size: 1rem;
	}
}

@media (max-width: 1090px) {
	.btn-ios {
		width: 90%;
		margin: 0 auto 25px;
	}

	.btn-mac {
		width: 90%;
	}

	.keep-track-info {
		text-align: center;
		padding: 0;
	}

	.keep-track-info img {
		position: static;
		width: 90%;
		margin: auto;
		padding: 0;
	}
}