@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

.mi {
	font-family: 'Material Icons'; font-weight: normal; font-style: normal; font-size: 24px; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr; -webkit-font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased;
	max-width: 1em; overflow: hidden;
}

:root {
	--glass: #222e;
	--green: #0f5;
	--brightGreen: #0f9;
	--gradient: linear-gradient(30deg, #0f5 0%, #0f9 100%);
}

body {
	background: linear-gradient(210deg, #222 0%, #070707 100%); color: #fff;
	font-family: "Poppins", sans-serif; font-weight: 400; line-height: 1.5;
	font-size: 15px; text-align: center; margin: 0;

	-webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-touch-callout: none; touch-action: manipulation;

	height: 100vh; /*To show BG in firefox*/
}
::-webkit-scrollbar {width: 3px;} ::-webkit-scrollbar-track {background: transparent;} ::-webkit-scrollbar-thumb {background: #fff2;} ::-webkit-scrollbar-thumb:hover {background: #fff2;}
::selection {color: var(--green); background: #111;}

a {
	color: var(--green); text-decoration: none; transition: all 0.1s;
}

b {
	font-size: 18px; color: #fff; font-weight: 700;
}
.title {
	font-size: 30px; font-weight: 700; width: 100%; position: relative; text-align: center; display: inline-block; margin-bottom: 20px;
}
.bodyOuter > div > .title:first-of-type {
	font-size: 50px; margin: 50px 0 5px 0;
}

.btn {
	color: #fff !important; position: relative; float: left; padding: 5px 12px; background-color: #fff1; border-radius: 8px 2px; font-weight: 600;
}

.bodyOuter {
	position: fixed; top: 80px; bottom: 0; left: 0; right: 0; overflow: auto;
}
.bodyOuter > div {
	position: relative; display: inline-block; width: 80%; max-width: 800px;
}
.card {
	position: relative; display: inline-block; margin-top: 50px; padding: 30px 50px; background-color: var(--glass); border-radius: 20px 5px; text-align: left; width: calc(100% - 100px); overflow: hidden;
}
.hl {
	position: relative; display: inline-block; width: 100%;
}

.cmrk:after {
	background-image: url(_assets/img/x.png); background-size: contain; background-repeat: no-repeat; display: inline-block; width: 18px; height: 20px; content:""; margin-right: 2px;
}

@media not all and (pointer:coarse) {
	a:hover {color: var(--brightGreen);}
	.btn:hover {background-color: #fff2;}
	.footerLink:hover {color: #fffb !important;}
}

@media (max-width: 640px) {
	.bodyOuter > div {width: 100%;}
	.bodyOuter > div > .title:first-of-type {max-width: 90%;}
	.card {border-radius: 0; margin-top: 30px; background-color: #222;}
	::-webkit-scrollbar {display: none;}
}

@media (max-width: 450px) {
	.card {padding-left: 30px; padding-right: 30px; width: calc(100% - 60px);}
}