:root {
    --main-website-color: #11111b;
}

.table {
    --bs-table-bg: var(--main-website-color);
    --bs-table-striped-bg: #1b1b28;
    --bs-table-hover-bg: #1e1e2e;
}

body {
    min-height: 100vh;
    background: linear-gradient(135deg, #1e1e2e 0%, #11111b 50%, #1e1e2e 100%);
    background-size: 300% 300%;
    animation: gradientMove 18s ease infinite;
    color: #ebebeb;
    font-family: sans-serif;
    margin: 0;
}

@keyframes gradientMove {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.card {
    background: #1a1a28;
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.7);
}

h1 {
    font-size: 70px;
    background: -webkit-linear-gradient(#e0e0e0, #ffffff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

a {
    color: white;
}

.btn-primary {
    color: black !important;
    background-color: white !important;
    border-color: white !important;
}

.btn-primary:hover {
    color: rgb(0, 0, 0) !important;
    background-color: rgb(244, 244, 244) !important;
    border-color: rgb(189, 189, 189) !important;
}

.btn-check:checked + .btn-primary {
    color: rgb(0, 0, 0) !important;
    background-color: rgb(240, 240, 240) !important;
    border-color: rgb(189, 189, 189) !important;
}

.big-h1 {
	font-size: 70px;
}

.big-p {
	font-size: 50px;
}

@media (max-width: 767.98px) {
	.big-h1 {
		font-size: 50px;
	}

	.big-p {
		font-size: 30px;
	}
}