:root {

	--primary: rgb(82, 82, 82);

	--secondary: rgb(61, 61, 61);

}


body {

	background-image: url("");

	background-repeat: repeat;

	background-size: 20px;

	animation: animation 100s linear infinite;

}


@keyframes animation {

	100% {

		background-position: -3000px -3000px;

	}

}


.center {

	display: flex;

	align-items: center;

	justify-content: center;

	flex-flow: wrap row;

	width: 100%;

	height: 100vh;

}


.card-row {

	display: flex;

	justify-content: center;

	flex-flow: wrap;

	min-width: 70%;

	gap: 50px;

	height: 60%;

}


.social-logo {

	width: 100px;

}


body {

	margin: 0;

	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;

}


.card {

	background-color: var(--secondary);

	border-radius: 10px;

	min-width: 100px;

	max-width: 500px;

	padding: 20px;

	text-align: center;

	border: 3px transparent solid;

	transition: all ease 0.3s;

	box-shadow: 1px 1px 5px 0 rgb(0 0 0 / 50%);

}


.smol-card {

	background-color: var(--secondary);

	border-radius: 10px;

	min-width: 100px;

	max-width: 700px;

	padding: 20px;

	text-align: center;

	border: 3px transparent solid;

	transition: all ease 0.3s;

	box-shadow: 1px 1px 5px 0 rgb(0 0 0 / 50%);

}


.card:hover,
.smol-card:hover {

	border: 3px rgb(0, 140, 255) solid;

	box-shadow: 1px 1px 30px 0 rgb(0 0 0 / 50%);

	transform: translateY(-5%);

}


a {

	color: white;

	text-decoration: none;

}


.blue {

	color: rgb(0, 140, 255);

}


.white {

	color: white;

}


p.button {

	background-color: rgb(0, 140, 255);

	border-radius: 5px;

	display: block;

	padding: 5px;

	transition: all ease 0.3s;


}


p.button:hover {

	filter: brightness(120%)
}


.t-center {

	text-align: center;

}


.card {
	background-color: rgba(61, 61, 61, 0.7);
	/* Set the background color with transparency */
	border-radius: 10px;
	padding: 20px;
	margin: 10px;
}

.card a {
	color: rgb(255, 255, 255);
	/* Set the color of the links */
	text-decoration: none;
	/* Remove underline from links */
}

.card a:hover {
	text-decoration: underline;
	/* Add underline on hover */
}

.card h3 {
	margin-top: 0;
	/* Remove default margin from heading */
}

.card p {
	margin-bottom: 10px;
	/* Add space between paragraphs */
}

.card img {
	max-width: 100%;
	/* Ensure images do not exceed card width */
	border-radius: 10px;
	/* Apply border-radius to images */
}

.card .button {
	background-color: #007bff;
	/* Set button background color */
	color: white;
	/* Set button text color */
	padding: 10px 20px;
	/* Add padding to the button */
	border-radius: 5px;
	/* Apply border-radius to the button */
	display: inline-block;
	/* Make the button inline */
	text-decoration: none;
	/* Remove underline from button */
}

.card .button:hover {
	background-color: #0056b3;
	/* Change button background color on hover */
}