.container { p[2% 4%] bg[#25252598] $container[98%] || lg? $container[90%] }
.rw {$row[100% 10px] bg[white !important] }
.col-50 { $col[50%] tx.al[center] co[maroon] }
.btn-dark{ bg[#303030] co[#999999] p[6px 8px] br[4px] bd[1px solid #40404050] || lg? hover*focus: bg[#fff] co[#505050] }
.card-dark { bg[#303030] bd[1px solid #40404050] co[#909090 !important] p[4px 8px] m[10px 0px] tx.al[jutify] }
.badge { co[blue] }
.w-100::before { w[100%] }
h2, h2 i {co[lightblue !important] }
.ex, .btn-primary{ focus*hover: bg[#0f256e] co[lightblue] bx.sh[2px 2px 3px .2px #12ace930 !important] }
#code { fo.sz[12px !important] ln.h[0.5 !important] }
div>small { fo.sz[12px] ln.h[.8] }
.mt-n2 { m.tp[-20px] }
#col { bg[#80808033] fo.sz[11px] || lg? fo.sz[13px] }
h3 { co[var(--title-color)] }
.input-line { w[100% !important] p*m.tp[6px] p.lf[1rem] h[35px] co[lightgray] bg[#90909010] ot*bd[none] bd.bt[1px solid gray] bx.sz[border-box] && focus: bg[none] bd.co[#505050] || lg? w[49%] }
h6 {m.bt[20px] co[orange]}
h1,h2,h3 {co[var(--title-color)]}
section {m[2rem auto]}
a, input[role=text] {val[top]}

.container {
		padding: 2% 4%;
		background: #25252598;
		box-sizing: border-box;
		width: 98%;
		margin-left: auto;
		margin-right: auto;
}
@media screen and (min-width: 992px) {
	.container {
			box-sizing: border-box;
		width: 90%;
		margin-left: auto;
		margin-right: auto;

		}
}
.rw {
		width: 100%;
		gap: 10px;
		box-sizing: border-box;
		display: inline-flex;
		flex-direction: row;
		flex-wrap: wrap;
		background: white !important;
}
.col-50 {
		flex: 0 0 50%;
		box-sizing: border-box;
		text-align: center;
		color: maroon;
}
.btn-dark {
		background: #303030;
		color: #999999;
		padding: 6px 8px;
		border-radius: 4px;
		border: 1px solid #40404050;
}
@media screen and (min-width: 992px) {
	.btn-dark:hover, .btn-dark:focus {
			background: #fff;
		color: #505050;

		}
}
.card-dark {
		background: #303030;
		border: 1px solid #40404050;
		color: #909090 !important;
		padding: 4px 8px;
		margin: 10px 0px;
		text-align: jutify;
}
.badge {
		color: blue;
}
.w-100::before {
		width: 100%;
}
h2, h2 i {
		color: lightblue !important;
}
.ex, .btn-primary:focus, .ex, .btn-primary:hover {
		background: #0f256e;
		color: lightblue;
		box-shadow: 2px 2px 3px .2px #12ace930 !important;
}
#code {
		font-size: 12px !important;
		line-height: 0.5 !important;
}
div>small {
		font-size: 12px;
		line-height: .8;
}
.mt-n2 {
		margin-top: -20px;
}
#col {
		background: #80808033;
		font-size: 11px;
}
@media screen and (min-width: 992px) {
	#col {
			font-size: 13px;

		}
}
h3 {
		color: var(--title-color);
}
.input-line {
		width: 100% !important;
		padding: 6px;
		margin-top: 6px;
		padding-left: 1rem;
		height: 35px;
		color: lightgray;
		background: #90909010;
		outline: none;
		border: none;
		border-bottom: 1px solid gray;
		box-sizing: border-box;
}
.input-line:focus {
		background: none;
		border-color: #505050;
}
@media screen and (min-width: 992px) {
	.input-line {
			width: 49%;

		}
}
h6 {
		margin-bottom: 20px;
		color: orange;
}
h1,h2,h3 {
		color: var(--title-color);
}
section {
		margin: 2rem auto;
}
a, input[role=text] {
		vertical-align: top;
}