@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400;700&display=swap')
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500&display=swap')

$fonts: "Noto Sans", "Fira Code", monospace
$background-color: #1e1e2e
$foreground-color: #b4befe
$overlay: #7f849c
$text: #1e1e2e
$subtext: #cdd6f4

body
	background-color: $background-color
	font-family: $fonts
	color: $text

	padding: 10px

	p,li
		font-size: 16px

	h1
		font-size: 24px

footer
	font-size: 12px
	color: $subtext

	display: flex
	align-items: center
	justify-content: center

.container
	background-color: $foreground-color

	display: flex
	flex: 1 1 auto
	flex-direction: column
	align-items: center
	justify-content: center

	width: fit-content
	min-width: 33%

	margin-left: auto
	margin-right: auto
	margin-top: 2%

	border-radius: 3%

.content
	display: inline-block
	text-align: center

	margin: 5px
	padding: 5px

.headerbar
	background-color: $foreground-color

	display: flex
	flex-direction: column
	align-items: center
	justify-content: center

	width: fit-content
	height: 30px

	margin-left: auto
	margin-right: auto
	margin-top: 2%

	border-radius: 5px
	padding: 10px

#blogpost
	min-width: 50%

#commitText
	width: fix-content

	padding: 5px

#indexHeader
	background-color: $background-color
	color: $subtext

	border-radius: 5px
	padding: 5px

#gifs
	background-color: $background-color
	display: inline-block
	text-align: center

	margin: 20px
	margin-top: 0
	padding: 20px

	box-shadow: 7px 10px 1px $overlay
	border-radius: 5px

#vidya
	display: flex
	justify-content: center
	padding: 5px
	margin: 5px