index.sass

// Use `sass src-styles/index.sass:templates/styles/index.css` to build

@import "./material-color.scss"
@import "./admonitions.scss"

$media-desktop: "only screen and (max-width : 1024px)"
$media-tablet: "only screen and (max-width : 768px)"
$media-mobile: "only screen and (max-width : 600px)"
$media-mobile-sm: "only screen and (max-width : 480px)"

*
	font-family: 'Tilt Neon', cursive

@media #{$media-desktop}
	p
		font-size: 20px

@media #{$media-tablet}
	p
		font-size: 19px

@media #{$media-mobile}
	p
		font-size: 16px

@media #{$media-mobile-sm}
	p
		font-size: 18px

h1, h2, h3, h4, h5, h6
	font-family: 'Italiana', serif

.wrapper
	display: grid
	overflow: hidden
	grid-template-columns: 15% 85%
	gap: 1vw

.cutesidebar
	height: 100%
	border-right: 1px solid
	border-image: linear-gradient(to bottom, #DBBFFF, #A66FED) 1 100%
	height: 100vw

	ul
		padding-left: 5%
	
	li
		list-style: none
		a
			font-family: "Tilt Neon", cursive
			opacity: 80%
			color: black

		a:link
			text-decoration: none
			background: transparent

		a:hover
			background-image: linear-gradient(to right, rgb(219, 191, 255, 0.8), rgb(166, 111, 237, 0.8)) 
			text-decoration: dashed


.main-content
	height: 100vh
	padding-left: 10vw
	padding-right: 10vw

code *
	font-family: 'Courier New', Courier, monospace

span .katex *
	font-family: "Playfair Display", serif
	font-size: x-large