@import url("https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,700;1,300;1,400&display=swap");

body {
	margin: 0;
	padding: 0;
	font-family: "Ubuntu", sans-serif;
	display: flex;
	justify-content: center;
	align-items: center;
}

.btn {
	background-color: rgb(15, 153, 188);
	border: rgb(43, 196, 235);
}

.btn:hover {
	background-color: rgb(13, 97, 118);
	border: rgb(43, 196, 235);
}

main {
	padding-bottom: 10px;
}

.card-header {
	font-size: 32px;
	font-weight: 600;
	color: rgb(117, 117, 117);
}

.card-title {
	font-weight: 600;
}

.card-thumbnail {
	max-height: 250px;
	overflow: hidden;
}
.p-grid {
	display: grid;
	grid-column: auto;
	grid-row: auto;
}

#myBtn {
	width: 48px;
	height: 48px;
	display: none; /* Hidden by default */
	position: fixed; /* Fixed/sticky position */
	bottom: 35px; /* Place the button at the bottom of the page */
	right: 20px; /* Place the button 30px from the right */
	z-index: 99; /* Make sure it does not overlap */
	border: none; /* Remove borders */
	outline: none; /* Remove outline */
	background-color: rgb(15, 153, 188); /* Set a background color */
	color: white; /* Text color */
	cursor: pointer; /* Add a mouse pointer on hover */
	padding: 5px; /* Some padding */
	border-radius: 50%; /* Rounded corners */
	font-size: 18px; /* Increase font size */
}

#myBtn:hover {
	background-color: rgb(15, 112, 137); /* Add a dark-grey background on hover */
}

footer {
	padding: 5px;
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	background-color: rgb(239, 239, 239);
	color: rgb(93, 93, 93);
	text-align: center;
}

footer > a {
	text-decoration: none;
	color: rgb(15, 153, 188);
	font-weight: bold;
}

footer > a:hover {
	color: rgb(17, 105, 128);
}
footer > a:visited {
	color: rgb(15, 153, 188);
}

@media screen and (max-width: 600px) {
	main {
		margin-top: 8%;
	}
}