.rubik-<uniquifier > {
 	font-family: "Rubik", sans-serif;
 	font-weight: <weight>;
 	font-style: normal;
 }

 .heebo-<uniquifier > {
 	font-family: "Heebo", sans-serif;
 	font-weight: <weight>;
 	font-style: normal;
 }

 body {
 	font-family: "Heebo", sans-serif;
 	background: url("../img/bac2.png");
 	background-size: cover;
 	background-repeat: no-repeat;
 	margin: 0;
 	padding: 20px;
 	overflow-x: hidden;
 	max-width: 430px;
 	min-height: 90vh;
 }

 .container {
 	display: grid;
 	grid-template-columns: auto 1fr;
 	align-items: center;
 	overflow-x: hidden;
 }

 h1 {
 	margin-bottom: 0px;
 	text-align: justify;
 	border-radius: 9px;
 	font-family: "Rubik", serif;
 	color: #004D5B;
 	text-shadow: 0 1px 8px rgba(0, 0, 0, 0.1);
 }

 h2 {
 	margin: auto auto;
 }

 h4 {
 	font-size: 0.4em;
 	margin: auto auto;
 	text-align: justify;
 	border-radius: 9px;
 	font-family: "Rubik", serif;
 	margin-bottom: 10px;
 	color: #004D5B;
 }


 .yeyeye {
 	text-decoration: none;
 	font-size: 1.0em;
 	margin-bottom: 0px;
 	text-align: justify;
 	border-radius: 29px;
 	padding: 0px 20px;
 	font-family: "Heebo", serif;
 	z-index: 100;
 	height: 100px;
 	background-color: #9FC1CC;
 	box-shadow: 0 10px 22px rgba(0, 0, 0, 0.15);
 }

 .board {
 	position: fixed;
 	top: 0;
 	left: 0;
 	width: 100%;
 	height: 100%;
 	background: rgba(0, 0, 0, 0.5);
 	display: none;
 	justify-content: center;
 	align-items: center;
 	z-index: 1000;
 }

 .board-content {
 	background: #FFF4E9;
 	padding: 2rem;
 	border-radius: 8px;
 	width: 75%;
 	max-width: 500px;
 	position: relative;
 	animation: slideIn 0.3s ease-out;
 	color: #004D5B;
 }

 .close-btn {
 	position: absolute;
 	top: 1rem;
 	right: 1rem;
 	font-size: 1.5rem;
 	cursor: pointer;
 }

 @keyframes slideIn {
 	from {
 		transform: translateY(-50px);
 		opacity: 0;
 	}

 	to {
 		transform: translateY(0);
 		opacity: 1;
 	}
 }

 .bottom-btn {
 	position: fixed;
 	bottom: 20px;
 	left: 50%;
 	transform: translateX(-50%);
 	z-index: 1000;
 	padding: 6px 34px;
 	background: #9FC1CC;
 	color: #E3F2FD;
 	border: none;
 	border-radius: 25px;
 	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
 	cursor: pointer;
 }

 .homeswap {
 	transform: translateX(-50%);
 	color: #FFF4E9;
 	border: none;
 	border-radius: 25px;
 	text-decoration: none;
 	animation: slideIn 0.3s ease-out;
 }

 .btn-confirm {
 	padding: 10px;
 	background: #9FC1CC;
 	color: #FFF4E9;
 	border: none;
 	border-radius: 20px;
 	cursor: pointer;
 	transition: background 0.3s;
 }

 .btn-cancel {
 	padding: 8px;
 	border: none;
 	border-radius: 20px;
 	cursor: pointer;
 	transition: background 0.3s;
 	cursor: pointer;
 }

 /*Start of code from Card*/
 /* card */
 .list-card {
 	position: relative;
 	margin: 15px 0;
 	background: white;
 	border-radius: 12px;
 	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 	transition: transform 0.3s ease;
 }

 .list-card:hover {
 	transform: translateY(-3px);
 }

 .list-actions {
 	position: absolute;
 	top: 10px;
 	right: 10px;
 	display: flex;
 	gap: 8px;
 }

 /*Ends of code from Card*/
 .item-count {
 	font-size: 0.9em;
 	color: #6B7280;
 	margin-top: 5px;
 }

 @media (max-width: 480px) {
 	.list-card {
 		margin: 10px 0;
 	}

 	.list-actions {
 		top: 5px;
 		right: 5px;
 	}

 	.edit-btn,
 	.delete-btn {
 		padding: 3px;
 		font-size: 0.8em;
 	}
 }

 /*Creatcopy*/
 .default-tag {
 	position: absolute;
 	top: 10px;
 	right: 10px;
 	background: #9FC1CC;
 	color: #004D5B;
 	padding: 4px 8px;
 	border-radius: 4px;
 	font-size: 0.8em;
 }

 .list-card {
 	position: relative;
 	border: none;
 	border-radius: 35px;
 	margin: 15px 0;
 	transition: transform 0.3s ease;

 }

 .list-card:hover {
 	transform: scale(1.02);
 }