/* style.css */
:root {
	--padding: 25px;
	--padding-mobile: 15px;
	--accent: white;
	--accent-complement: gray;
	--bg: black;
	--color: #B6F655;
}

/* reset */
html {
	box-sizing: border-box;
	font-size: 16px;
}

*,
*:before,
*:after {
	box-sizing: inherit;
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ol,
ul {
	margin: 0;
	padding: 0;
	font-weight: normal;
}

ol,
ul {
	list-style: none;
}

img {
	max-width: 100%;
	height: auto;
}

/* custom */
@font-face {
    font-family: 'AnkaCoderBold';
    src: url('/assets/static/fonts/AnkaCoderBold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'AnkaCoderBoldItalic';
    src: url('/assets/static/fonts/AnkaCoderBoldItalic.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: 'AnkaCoderItalic';
    src: url('/assets/static/fonts/AnkaCoderItalic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'AnkaCoderRegular';
    src: url('/assets/static/fonts/AnkaCoderRegular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

::selection {
	background-color: var(--accent);
	color: var(--bg);
}

html {
	height: 100%;
}

body {
	color: var(--accent);
	font-family: 'AnkaCoderRegular';
   	font-weight: normal;
   	font-style: normal;
	background-color: var(--bg);
}

canvas {
	margin-top: var(--padding);
	margin-bottom: var(--padding);
	image-rendering: crisp-edges;
}

main {
	padding: var(--padding);
	display: grid;
    grid-template-columns: 1fr 5fr;
	grid-template-rows: 100%;
    grid-gap: 100px;
}

a {
	background-color: var(--accent);
	color: var(--bg);
	text-decoration: none;
}

a:hover {
	background-color: black;
	color: var(--accent);
	text-decoration: underline;
	text-underline-position: under;
}

ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

li {
	padding: 5px;
	padding-left: 0;
}

li, i {
	display: block;
	color: var(--accent-complement);
}

#footer {
	margin-bottom: var(--padding);
	color: var(--accent-complement);
}

#footer a {
	color: var(--accent-complement);
	background-color: transparent;
}

#footer a:hover {
	color: var(--accent);
}

#haxor:after {
	content: "InfoSec Analyst & Researcher";
}

#haxor:hover:after {
	content: "Hacker";
}

.meta {
	
}

.content {
	/*max-width: 650px;*/
	text-align: justify;
	line-height: 1.5;
	scrollbar-color: var(--accent) var(--bg);
	scrollbar-width: 10px;
}

@media only screen and (max-width: 900px) {
	main {
		grid-template-columns: 100%;
    	grid-template-rows: auto auto;
   		height: auto;
		grid-gap: 50px;
	}
}