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

:root {
	--body-back 	: #0B0212;

	--text-color    : #ddd;
	--back-color    : #000; /*#ddd*/
	--accent-color	: #F44141;

	--mono          : monospace;

	--t 			: #C6292966;
	--q 			: linear-gradient(0deg, #C62929 50%, #C6292900 100%);

	--btn-back      : var(--text-color);
	--btn-back2     : black; /* #fcf06a */
	--btn-shad      : #320d46; /* #AE89C3 */
	--btn-shad2     : #AE89C3;

	--grad-color    : #04080D;  /* bottom #355070 #355070 #101B2D #101B2D */
	--grad-color2   : #322D57; /* top #60495a #907ad6 #4A34B2 #3F396E */

	--dark 			: #06040E;
}

body {
	font-family: 'Mukta', sans-serif;
	line-height: 1.4;
	background: fixed url('../img/texture3.png'), var(--body-back);
	overflow-x: hidden;
}

main {
	color: var(--text-color);
    background-color: var(--back-color);
    width: 65%;

    display: grid;
    grid-auto-flow: row;
    margin: 5px auto;
    padding: 25px;
    min-height: 20px;

	box-shadow: 0px 0px 12px -2px rgba(31,13,35,0.75);
	-webkit-box-shadow: 0px 0px 12px -2px rgba(31,13,35,0.75);

    -webkit-transition: 0.4s;
    transition: 0.4s;
}

header {
	color: var(--text-color);
    background-color: var(--back-color);
    width: 65%;
	margin: 5px auto;
	margin-top: 30px;
	padding: 25px;
    min-height: 20px;

	box-shadow: 0px 0px 12px -2px rgba(31,13,35,0.75);
	-webkit-box-shadow: 0px 0px 12px -2px rgba(31,13,35,0.75);
}
footer {
	color: var(--text-color);
    position: relative;
    text-align: center;
    align-self: start;
    font-size: 0.8em;

    margin: auto;
    width: 300px;
    padding: 10px;
    background-color: var(--back-color);

	box-shadow: 0px 0px 12px -2px rgba(31,13,35,0.75);
	-webkit-box-shadow: 0px 0px 12px -2px rgba(31,13,35,0.75);
}
@media only screen and (max-width: 800px) {
	main, header, footer { width: 90% !important; padding: 20px; }
}

/**/

h1 {
	margin: 0;
}

a {
    color: var(--accent-color);
	text-decoration: none;
}
a:hover {
    color: var(--text-color);
    text-decoration: underline var(--text-color) .6px;
}

.center { text-align: center; }

/**/

.badges {
	display: grid;
    grid-auto-flow: column;
    grid-template-columns: auto;

    align-items: center;
    justify-content: center;
    grid-gap: 5px;
}

.badges img {
	display: block;
    margin: 0px auto;
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
}