@import "/css/fonts.css";

html, body, .navigation-overlay
	min-height: 100vh
//	min-width: 100vw

body > canvas
	position: fixed
	height: 100vh
	width: 100vw
	left: 0
	top: 0
	z-index -2

.navigation-overlay
	position absolute
	transition: .7s;
	opacity 0
	z-index -1000

.open-nav
	opacity 1
	z-index 1000

.cross
	cursor pointer
	position absolute

	left 2vh
	top 2vh
	.idle
		opacity: 1
		position: absolute
		left: 0
		transition: .5s
		width max(2vw, 1.5em)
		height max(2vw, 1.5em)
	.active
		opacity: 0
		position: absolute
		left: 0
		transition: .5s
		width max(2vw, 1.5em)
		height max(2vw, 1.5em)
	img
		max-width: inherit
	&:hover .active
		opacity: 1
	&:hover .idle
		opacity: 0

.menu-btn
	left 3vh
	top 3vh

#root
	transition .6s
	min-height 100vh
//	min-width 100vw
	& canvas
		position: absolute
		left: 0
		top: 0
		width: 100vw
		height: 100vh
		z-index -1


:root
	--color-primary: #D73648
	--color-lightGrey: #d2d6dd
	--color-grey: #747681
	--color-darkGrey: #3f4144
	--color-error: #d43939
	--color-success: #28bd14
	--grid-maxWidth: 120rem
	--grid-gutter: 0rem
	--font-size: 2vw
	--font-family: "Moderat Regular", sans-serif
	--font-family-sans: "Moderat Regular", sans-serif

.darken
	opacity: 0
	z-index: -1

.fullheight
//	width: 100vw
	height: 100vh

.cool-button
	padding: 3rem 9rem
	font-size: calc(var(--font-size) * 0.7)

.smol-button
	background-color: #fff !important
	border: solid 0.5vh var(--color-primary)
	color: #000 !important
	padding: 1rem 3rem

.horizontal-menu
	font-size calc(var(--font-size) / 2)
	position: absolute
	display: flex
	bottom: 5vh
	left: 0
	padding-left: 8vw
	padding-right: 8vw
	width: 100%
	//box-sizing: border-box
	justify-content space-between
	flex-direction row
	align-items baseline
	min-height: 3em;
	& a
		text-decoration underline
		color: #000
		font-size calc(var(--font-size) / 2.4)
		cursor pointer
		transition .2s
		&:hover
			border: solid 2px var(--color-primary)
			opacity: 1 !important

.gay-hr
	width: 10vw;
	height: 0.6vh;
	background-color: var(--color-primary);
	border-radius: 0.3vh

.bg-circle
	background-image: url("/svg/bg-circle.svg")
	background-size: 5em
	background-repeat: no-repeat
	background-position: center center

.bg-square
	background-image: url("/svg/bg-square.svg")
	background-size: 5em
	background-repeat: no-repeat
	background-position: center center

.bg-center
	background-position: center center

.bg-auto
	background-size: auto auto;

.bg-half
	background-size 50%

.smol-video
	width: 42vw

.flexy-boi
	display: flex
	align-items: center
	justify-content: center
	flex-direction column
	line-height 1

.side-line
	display flex
	flex-direction row

.side-line::before
	content: ""
	display: inline
	margin-right 1vw
	box-sizing: border-box
	border: solid 0.125vw var(--color-primary)
	border-radius: 0.125vw

.number-gay
	display flex
	flex-direction row
	align-items center
	line-height 1
	margin-bottom: 4vh
	margin-right: 2vw
	margin-left: 2vw
	margin-top: 8vh
	& span
		color var(--color-primary)
		font-size calc(var(--font-size) * 2.2)
	& p
		font-size calc(var(--font-size) / 2.3)
		margin-bottom 0
	& li
		font-size calc(var(--font-size) / 2.6)
	& ol
		margin-top 0
		margin-left 2vw
		& li
			counter-increment: list
			list-style-type: none;
			position: relative;
			&:before
				font-size 110%
				font-weight 900
				color: var(--color-primary);
				content: counter(list, lower-alpha) ") ";

.row
//	width: 100vw
	text-transform none

.hover-man
	transition: .3s
	&:hover
		filter brightness(.7) contrast(.7)

.down
	display flex
	flex-direction column

.right
	align-items center
	display flex
	flex-direction row

.no-underline
	a
		text-decoration none !important

.clicked {
	background-color: #888 !important;
	color: #fff !important;
	border-color: #888 !important;
}

.spacer {
    height:5em;
}

.particles-js-canvas-el {
    position: fixed;
}