@import url("https://fonts.googleapis.com/css2?family=Montserrat&display=swap");
:root {
	--primary-color: #198754;
	--secondary-color: #212529;
	--primary-gradient-light: #198653cc;
	--primary-gradient-dark: #093420;
}

* {
	font-size: 16px;
	font-family: "Montserrat", sans-serif;
}

.navbar-toggler {
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2835, 85, 34, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
	border: var(--primary-color);
}

.jebacina {
	height: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	background: linear-gradient(
			225deg,
			var(--primary-gradient-light) 20%,
			var(--primary-gradient-dark) 100%
		),
		url(../../assets/images/bass123.jfif) top / cover no-repeat;
}

.page1 {
	height: 100vh;
	width: 100%;
	text-align: center;
	color: white;
}

.page1 .k {
	margin-top: 1.5rem;
}

.welcome {
	color: whitesmoke;
	font-optical-sizing: auto;
	font-weight: bold;
	font-style: normal;
}
.baStuff {
	display: flex;
	margin-top: 4.5rem;
	justify-content: space-evenly;
	align-items: center;
	position: static;
}

.baStuff .l {
	width: 18rem;
	background-color: var(--secondary-color);
	border-radius: 0.4rem;
	padding: 15px;
}

.baStuff .l img {
	width: 100%;
}

.baStuff .l h1 {
	background-color: var(--secondary-color);
	text-align: center;
	font-size: 32px;
}

.l {
	position: relative;
	overflow: hidden;
	border-radius: 15px;
	transition: all 0.5s ease;
}

.l::before {
	background: linear-gradient(
		0deg,
		transparent,
		transparent 30%,
		rgba(0, 255, 255, 0.3)
	);
	transform: rotate(-45deg);
	transition: all 0.5s ease;
	opacity: 0;
}

.l:hover {
	text-transform: bold;
	color: green;
	box-shadow: 0 0 20px rgba(0, 255, 255, 0.5);
}

.l:hover::before {
	opacity: 1;
	transform: rotate(-45deg) translateY(100%);
}

/* .l:nth-child(even) {
	color: red;
}

.l img {
} */

@media only screen and (max-width: 768px) {
	.baStuff {
		display: flex;
		justify-content: space-around;
		flex-direction: column;
		margin-top: 10px;
	}
	.l {
		margin-bottom: 10px;
	}
	.page1 {
		height: auto;
	}
}

@media screen and (min-width: 1000px) and (min-height: 900px) {
	.baStuff {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: repeat(2, auto);
		gap: 2rem;
		justify-items: center;
		align-items: start;
	}
}

.baStuff {
	transition: all 0.4s ease;
	opacity: 1;
	transform: scale(1);
}

.baStuff.grid-mode {
	animation: fadeZoomIn 0.4s ease forwards;
}

@keyframes fadeZoomIn {
	0% {
		opacity: 0;
		transform: scale(0.95);
	}
	100% {
		opacity: 1;
		transform: scale(1);
	}
}