@import "style.css";

.slide {
	height: 100vh;
	display: flex;
	/*align-items: center;*/
	justify-content: center;
	text-align: left;
	flex-direction: column;
	padding: 2rem;
	scroll-snap-align: start;

	inner-column {
		margin-inline: 0;
	}

}

body.slides-mode {
	scroll-snap-type: y mandatory;
	overflow-y: scroll;
	height: 100vh;
}

.slides-mode-active {
	background-color: var(--blue);
}

.style-guide {

	section + section {
		margin-top: 24px;

		@media (width >= 1024px) {
			margin-top: 64px;
		}
	}

	ol {
		list-style-type: disk;
		margin-left: 24px;
	}

	inner-column {

		div {
			grid-column: span 3;

			picture {
				@media (width >= 700px) {
					max-width: 75%;
				}
				
			}

			@media (width >= 1024px) {
				grid-column: span 6;
			}

			h2 + p,
			h2 + h3,
			h3 + p,
			h2 + ul,
			h2 + ol,
			li + li,
			p + picture {
				margin-top: 12px;

				@media (width >= 1024px) {
					margin-top: 24px;
				}
			}	
		}

		.colors {
			padding-top: 24px;
			display: flex;
			flex-wrap: wrap;
			gap: 24px;

			.color {
				min-width: 100px;
				padding: 8px;
				border-radius: 8px;
				border: 2px solid transparent;
				text-align: center;
			}

			.white {
				background-color: var(--main-white);
				color: var(--main-black);
			}

			.black {
				background-color: var(--main-black);
				color: var(--main-white);
				border: 2px solid var(--main-white);
			}

			.red {
				background-color: var(--main-red);
				color: var(--main-black);
			}

			.yellow {
				background-color: var(--yellow);
				color: var(--main-black);
			}

			.green {
				background-color: var(--green);
				color: var(--main-black);
			}

			.blue {
				background-color: var(--teal);
				color: var(--main-black);
			}
		}

	}
}