spolky/static/main.styl

@import "/css/fonts.css";

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


p
	text-align justify

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
	& .logo
		position: fixed !important

.open-nav
	opacity 1
	z-index 1000

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

.menu-btn
	left 3vh
	top 3vh

#root
	margin-top: max(3vw, 1.7em)
	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) / 1.7)
	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, & span
		cursor pointer
		color: #000
		font-size calc(var(--font-size) / 1.7)
		cursor pointer
		transition .1s
		box-sizing: content-box
		&:hover
			border-bottom: solid 2px var(--color-primary)
			opacity: 1 !important
	&.no-underline span
		text-decoration none !important
		color: #000
		font-size calc(var(--font-size) / 1.7)
		cursor pointer
		transition .1s
		box-sizing: content-box
		&:hover
			border-bottom: solid 2px var(--color-primary)
			opacity: 1 !important

.thing-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
	& p
		text-align justify

.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-thing
	display flex
	flex-direction row
	align-items center
	line-height 1.6
	margin-bottom: 4vh
	margin-right: 2vw
	margin-left: 2vw
	margin-top: 8vh
	& span, & .down span
		line-height 1
		color var(--color-primary)
		font-size calc(var(--font-size) * 2.2)
	& p, & .down p
		font-size calc(var(--font-size) / 1.7)
		margin-bottom 0
	& li, & .down li
		font-size calc(var(--font-size) / 1.7)
		text-align justify
	& ol, & .down ol
		margin-top 0
		margin-left 2vw
		& li
			counter-increment: list
			list-style-type: none;
			font-size calc(var(--font-size) / 1.7)
			position: relative;
			&:before
				font-size 110%
				font-weight 900
				color: var(--color-primary);
				content: counter(list, lower-alpha) ") ";

.row
	text-transform none

.hover-man
	transition: .3s
	cursor: pointer
	&: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;
}

.video-container { position:relative; }
.video-container video {
    position:relative;
    z-index:0;
}
.video-container .overlay {
    position:absolute;
    top:0;
    left:0;
    z-index:1;
}

.menu .horizontal-menu
	bottom: auto;
	top: 0;
	justify-content: flex-start
	padding-top: max(1vw, 0.4em);
	padding-left: max(4vw, 1.8em);
	box-sizing: border-box;
	padding-right: 1vw;
	& a, & span
		text-decoration none
		margin-right: 2em


.panel .btn .menu-btn {
	left: auto;
	top: auto;
}

.spaced-ul li {
	margin-bottom: 1em
}

@media screen and (max-width: 800px)
	.panel .horizontal-menu
		display: none
	.next
		right: 9vw !important
		top: auto !important
	.prev
		top: auto !important
		left: 9vw !important
	h6
		font-size: calc(var(--font-size) / 1.5)
	h5
		font-size: calc(var(--font-size) / 1.4)
	.smol-video
		width: 100%
	.flexy-boi
		display: flex
		& .horizontal-menu
			flex-wrap wrap
		& .horizontal-menu span
			margin: 10px
			flex: 0 0 21%;
	.cross
		width 6vw
		height 6vw
		& .idle
			width 6vw
			height 6vw
		& .active
			width 6vw
			height 6vw
	.panel
		height: 4em !important
	.big, .cross-og
		width 10vw !important
		height 10vw !important
	.menu
		left: 0 !important
		& .menu-link, & ul li
			font-size: calc(var(--font-size) / 1.5) !important
		& ul
			width 90vw !important