shapes-comic/style.sass

body
	background-color: #10011f
	grid-template-columns: 500px 1fr
	display: grid
	color: white
	font-family: "Generale Station"
	padding-top: 30px
	padding-right: 50px

header
	display: grid
	grid-template-rows: 0fr 0fr 1fr
	text-align: center
	justify-items: center
	padding: 0 40px

	.subtitle
		text-transform: uppercase
		font-family: "Starstreak"
		font-size: 16px
		margin-top: 10px

	nav
		background-color: #332044
		display: flex
		flex-direction: column
		gap: 15px
		margin-top: 30px
		width: 100%
		align-items: center
		font-size: 1.2em

		h3
			text-align: center

		a
			text-align: left
			width: 180px
			color: #dbb7ff

			&::before
				content: "> "

main
	padding: 0 40px

	#panels
		display: grid
		grid-template-columns: 1fr 1fr
		gap: 30px

		img
			width: 100%

	nav
		display: flex
		flex-direction: row
		justify-content: center
		gap: 24px
		margin: 20px 0
		.navsec
			display: flex
			flex-direction: row
			gap: 24px
			background-color: #332044
			padding: 10px 20px
		a
			font-size: 2em
			color: #dbb7ff
			text-decoration: none

@font-face
	font-family: Starstreak
	src: url("starstreak.woff2") format("woff2")

@font-face
	font-family: "Generale Station"
	src: url("generale-station.woff2") format("woff2")