///////////////////////////////////////////////////////////
//////////// general layout and overall styles ////////////
///////////////////////////////////////////////////////////



.central-column-wrapper
	width: 100%
	max-width: $central-column-wrapper
	margin-left: auto
	margin-right: auto

.central-column-wrapper-wide
	@extend .central-column-wrapper
	max-width: $central-column-wrapper-wide


.columns-2
	display: grid
	grid-template-columns: auto auto
	grid-gap: $padding
	@media (max-width: $tablet-portrait)
		grid-template-columns: auto



.hidden--small-screen
	@media (max-width: $tablet-landscape)
		display: none !important

.hidden--non-small-screen
	@media (min-width: $tablet-landscape + 1)
		display: none !important

#wrapper
	min-height: calc(100vh - #{$header-height})
	display: grid
	grid-template-columns: 260px 1fr
	// grid-template-areas: ". content"
	position: relative
	// margin: $padding
	// padding: calc(5vw + #{$header-height}) $padding 5vw
	// display: block





.document
	padding-top: $header-height
	min-height: 100vh

#intro
	padding: 2em $padding
	// text-align: center
	border-bottom: $border
	background: $dark-navy
	width: 100%
	min-height: calc(90vh - #{$header-height})
	margin: auto
	display: flex
	align-items: center

	img
		display: block
		width: 100%
		margin-left: auto
		margin-right: auto
		margin-bottom: 10vh
		transition: .25s ease
		max-width: 100vw

		@media (min-width: $tablet-landscape)
			transition: .25s ease
			max-width: 90vw
	p
		margin:0
		margin-bottom:$padding
		max-width: 55ch
		color: $lighter-gray

		a
			color: $lighter-gray
			border-bottom: 1px solid $lighter-gray

			&:hover
				color: $green 
				border-bottom: 1px solid $green

	ul
		margin:0
		display: flex
		justify-content: space-between
		justify-items: flex-end
		flex-flow: row wrap 
		max-width: 400px
	li
		display: inline-block
		list-style: none
		margin-bottom:$padding

	.columns-2
		grid-template-columns: 2fr 1fr
		margin-left: auto
		margin-right: auto
		.button
			float: right
			
		@media (max-width: $tablet-landscape)
			grid-template-columns: auto

			.button
				float: left





.button #download
		// margin-right: 2em




.toctree-wrapper
	ul
		text-indent: 0

#designers, #developers
	display: inline-block
	vertical-align: top
	width: 48%

#developers
	float: right

#footer
	@extend #header
	height: $footer-height
	position: absolute
	z-index: 1
	width: 100%
	padding: $padding*1.5 $padding

	&>div
		display: flex
		align-items: flex-start
		justify-content: space-between

		@media (max-width: $tablet-landscape)
			flex-flow: row wrap 
		a
			width: 100%
			
		p
			margin: 0

		div:first-child
			order: 2

			@media (max-width: $tablet-landscape)
				order: 0
				padding-bottom: 1em

#home_button
	position: fixed
	bottom: 1em
	right: 1em
	z-index: 4
	opacity: .15
	background: black
	padding: 20px
	border-radius: 12px
	color: white
	transition: opacity .75s
	&:hover
		opacity: 1

.icon-24
	// max-width: 24px
	// max-height: 24px
	width: 24px
	height: 24px

// overriding styles in injected readthedocs versions toggle

.rst-versions 
	position: absolute !important
	bottom: -$footer-height !important
	right: $padding !important
	font-size: 1rem !important
	z-index: 1 !important
	width: auto
	border-radius: .5rem
	margin: 1rem 0
	.rst-current-version
		width: auto
		height: 2rem
		border-radius: .5rem

/* ---------- media queries ---------- */


@media screen and (max-width: $tablet-landscape)
	#wrapper
		// display: block
		grid-template-columns: 1fr
	#designers, #developers
		display: block
		width: 100%
	#content
		// margin-right: $contentWidth
		width: 100vw
		order: -1
	#sidebar
		display: block
		width: 100%
		min-height: none
	#sidebar-inner-wrapper
		position: relative

