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

body, html {
		height: 100%;
		background-color: #f4f4f4;
}

.top-bar {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		background-color: #ffffff;
		display: flex;
		align-items: center;
		padding: 10px 18px;
		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
		z-index: 10;
}

.top-bar-logo {
		display: flex;
		align-items: center;
		text-decoration: none;
		color: #000;
}

.top-bar-logo svg {
		margin-right: 10px;
}

.main-container {
		position: relative;
		width: 100vw;
		min-height: 100vh;
		padding-top: 48px; 
		background-color: #dbddbb; 
		background-image: 
				radial-gradient(circle at 80% 10%, #6ba587 0%, transparent 60%), 
				radial-gradient(circle at 20% 90%, #d5d88d 0%, transparent 60%), 
				radial-gradient(circle at 90% 90%, #88b884 0%, transparent 60%);
		display: flex;
		justify-content: center;
		align-items: flex-start;
		overflow: hidden;
		padding-top: 124px;
		padding-inline: 20px;
}

.main-container::before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-image: url('./images/pattern.svg');
		background-size: 320px;
		background-repeat: repeat;
		opacity: 0.15; 
		z-index: 1;
}

.card-wrapper {
		position: relative; 
		z-index: 2;
		display: flex;
		justify-content: center;
		background: transparent;
}

.card-base-image {
		width: 100%;
		height: auto;
		display: block;
		border-radius: 16px;
}


.card-button-link {
		position: absolute;
		bottom: 48px; 
		left: 50%;
		
		transform: translateX(-50%); 
		
		display: block;
}

.card-button-image {
		width: 236px;
		height: auto;
		display: block;
}

@media (max-width: 460px) {
	.card-button-link {
		bottom: 30px;
	}
}