---
# Jekyll requires this front matter, including the "#" sign, to convert main.scss to main.css.
---

@import url('https://fonts.googleapis.com/css2?family=Caveat&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Caveat&family=Grandstander&display=swap');
$font: 'Caveat', cursive;
$font2: 'Grandstander', cursive;

$font-size-mobile: 16px;
$mobile-width: 850px;

@import "constants";  // will be created during compilation
@import "header";
@import "footer";

body {
  
	// remove the unwanted margin
	margin: 0;

	// keep showing the scrollbar to prevent glitching
	overflow-y: scroll;

	background-color: hsl($hue-signature, 15%, 85%);

	font-family: $font;

	// main scrollbar
	&::-webkit-scrollbar {
		width: 7px;
		background-color: hsl($hue-signature, 15%, 85%);
	}
	&::-webkit-scrollbar-thumb {
		background-color: hsl($hue-signature, 42%, 66%);
	}
	&::-webkit-scrollbar-thumb:hover {
		background-color: hsl($hue-signature, 42%, 71%);
	}
}

main {
	min-height: 100vh;

	width: 68%;
	@media (max-width: $mobile-width) {
		width: 91%;
	}

	margin: 0 auto;
	margin-top: 58px;

	font-family: $font2;
}