header {
	min-height: 200svh;

	img {
		position: absolute;
		display: block;
		width: 100vw;
		min-height: 200svh;
		object-fit: cover;
		transform-origin: top;
		opacity: 0;

		@media (max-width:900px) {
			&:not(.mobileCloud) {
				padding-top: 40svh;
				min-height: 130svh;
			}
		}
	}

	.mobileCloud {
		opacity: 1 !important;
		display: none;
		width: 100vw;
		height: 100%;
        min-height: auto;
		padding-top: 22svh;
		background: linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 75%, rgba(255,255,255,1) 80%, rgba(255,255,255,1) 100%);

		@media (max-width:900px) {
			& {
				display: block;
			}
		}
	}

	.parallax {
		z-index: -1;
	}
	
	.parallax:nth-of-type(4) {
		@media (max-width:900px) {
			& {
				display: none;
			}
		}
	}

	.parallax:nth-of-type(4),
	.parallax:nth-of-type(5) {
		min-height: 170svh;
		object-position: left top;

		@media (max-width:900px) {
			& {
				min-height: 160svh;
				object-position: left top;
				padding-top: 24rem;
			}
		}
	}

	.parallax:nth-of-type(6) {
		object-position: right;
        min-height: 240svh;
	}

	.bottom {
		z-index: 0;
		margin-top: 30svh;
	}

	.text {
		z-index: 2;
		position: absolute;
		top: 35svh;
		left: 0;
        padding: 0 10vw;
		max-width: 50rem;
		display: flex;
		flex-direction: column;
		gap: 2rem;

		@media (max-width:1600px) {
			& {
				padding: 0 6vw;
			}
		}

		@media (max-width:900px) {
			& {
				padding: 0 2rem;
                top: 18svh;
                gap: 1.5rem;
			}
		}

		h1 {
			opacity: 0;
			font-size: var(--text-big);
			font-weight: 400;
			line-height: 103%;
			text-wrap-style: balance;

			@media (max-width:900px) {
				& {
					font-weight: 500;
				}
			}
		}

		h2 {
			opacity: 0;
			max-width: 30rem;
            font-size: var(--text-small);
			text-wrap-style: balance;
			font-weight: 300;

			@media (max-width:900px) {
				& {
					margin-right: 20vw;
				}
			}
		}
	}

	h3 {
		position: absolute;
		right: 10vw;
		top: 160svh;
		margin-left: 1rem;
		max-width: 30rem;
		font-size: var(--text-small);
		font-weight: 300;
		z-index: 1;

		@media (max-width:900px) {
			& {
				right: 1rem;
				margin-left: 35vw;
			}
		}
	}
}

.learning {
	z-index: 1;
	position: relative;
	overflow: hidden;
	display: grid;
    grid-template-columns: 1fr;
	padding: 6svh 0;
	min-height: 100svh;
	width: 100%;

	img.mobile {
		display: none;

		@media (max-width:900px) {
			& {
				display: block;
				padding: 0 0 4rem;
			}
		}
	}

	.text {
		margin: 0 5vw;
		max-width: 35rem;
		display: flex;
		flex-direction: column;
		gap: 2rem;
		grid-row: 1;
        grid-column: 1;
		z-index: 1;

		h2 {
			padding-top: 10svh;
			font-size: var(--text-medium);
			line-height: 105%;
            font-weight: 400;

			@media (max-width:900px) {
				& {
					padding-top: 0;
					font-weight: 500;
				}
			}
		}

		.slides {
			display: flex;
			flex-direction: column;
			gap: .5rem;

			p {
				text-wrap: balance;
				font-size: var(--text-small);
				opacity: .25;

				&:first-of-type {
					opacity: 1;
				}

				@media (max-width:900px) {
					& {
						text-wrap: pretty;
					}
				}
			}
		}
	}

	.images {
		grid-column: 1 / 4;
		position: relative;
		overflow: hidden;
		grid-row: 1;
		padding-top: 10rem;

		@media (max-width:900px) {
			& {
				padding-top: 0;
				aspect-ratio: 1;
			}
		}

		img.element {
			padding-top: 10rem;
			position: absolute;
			top: 0;
    		left: 0;

			@media (max-width:900px) {
				& {
					padding-top: 0;
					padding-bottom: 10svh;
				}
			}
		}

		img {
			@media (max-width:900px) {
				& {
					height: 93vw;
					object-position: right;
				}
			}
		}
	}

	@media (max-width:900px) {
		& {
			display: flex;
			flex-direction: column;
			gap: 3rem;
			min-height: auto;
			gap: 1rem;
			padding-top: 3rem;
		}
	}
}

.communityCarrousel {
	position: relative;
	z-index: 1;
	width: 100%;
	margin: 0;
	padding: 15svh 0;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;

	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 5rem 0;

	@media (max-width:900px) {
		& {
			display: flex;
			flex-direction: column;
			justify-content: center;
			gap: 4rem;
			padding: 10svh 0;
			background-image: none !important;
		}
	}

	.text {
		grid-column: 2;
		width: 30vw;
        max-width: 35rem;
        align-self: flex-end;
        margin: 0 10vw;

		h2 {
			font-size: var(--text-medium);
			font-weight: 400;
			margin-bottom: 2rem;
		}

		p {
			font-size: var(--text-small);
		}

		@media (max-width:900px) {
			& {
				order: 2;
				margin: auto;
				padding: 0 1rem;
				position: static;
				top: auto;
				width: calc(100% - 2rem);
				text-align: center;
			}
		}
	}

	.gallery {
		visibility: visible;
		grid-column: 1 / 3;
		display: flex;
		flex-direction: row;
		flex-shrink: 1;
		gap: 1rem;
		padding: 0 0 0 10vw;

		.splide__list {
			display: flex !important;
		}

		.splide__slide {
			position: relative;
			height: fit-content;
            width: fit-content;

			img {
				margin: 0 -1.5vw;
				object-fit: contain;
			}
	
			.small {
				width: 17vw;
			}
	
			.big {
				width: 27vw;
			}
		}

		@media (max-width:900px) {
			& {
				order: 1;
				padding: 0;

				.splide__slide {
					img {
						margin: 2rem -1.5vw;
					}
	
					.small {
						width: 40vw;
					}
			
					.big {
						width: 55vw;
					}
				}
			}
		}

		@media (min-width:900px) {
			& {
				.splide__track {
					overflow: visible;
				}
			}
		}
	}

	.secondText {
        margin: 0 10vw;
		grid-column: 1 / 3;

		h2 {
			font-size: var(--text-medium);
			font-weight: 400;
			text-align: center;
		}

		@media (max-width:900px) {
			& {
				padding: 0 1rem;
				order: 3;
			}
		}
	}

	.guides {
		grid-column: 1 / 3;
        padding: 0 20vw;
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		order: 4;
		background-position: center;
		background-repeat: no-repeat;
		background-size: contain;

		.guide:first-of-type,
		.guide:last-of-type {
			z-index: 1;
		}

		.guide {
			display: block;
			cursor: pointer;
			width: fit-content;
			height: fit-content;
			transition: all .2s;

			&::after {
				content: "";
				position: absolute;
				top: 20%;
				right: 0;
				background-color: var(--red);
				background-image: url('https://rifugio.weco.digital/wp-content/themes/rifugio/assets/images/plus.webp');
				background-position: center;
				background-repeat: no-repeat;
				background-size: contain;
				border-radius: 40px;
				padding: 1.25rem;
				transform: translateX(50%);
				cursor: pointer;
			}

			@media (min-width:900px) {
				&:hover {
					scale: 1.1;
					rotate: 5deg;
					z-index: 2;
				}
			}
		}

		@media (max-width:900px) {
			& {
				grid-template-columns: repeat(2, 1fr);
				gap: 1rem 0;
				padding: 1rem;

				img {
					width: 42vw;
					justify-self: center;
					margin-top: 0 !important;
				}
				
				.guide:first-of-type {
					z-index: 3;
					order: 2;
				}

				.guide:nth-of-type(2) {
					z-index: 2;
					order: 1;
				}

				.guide:nth-of-type(3) {
					z-index: 1;
					order: 4;
				}

				.guide:last-of-type {
					z-index: 1;
					order: 3;
				}
			}
		}
	}
}

.guideInfoWrapper {
	position: fixed;
	inset: 0;
	margin: auto;
	z-index: 5;
	width: 100%;
	max-width: 60rem;
	height: fit-content;
	max-height: 60rem;

	.guideInfo {
		display: none;
		position: relative;
		padding: 4rem 8rem;
		background-color: var(--pink-alt);
		/* animation: guideInfo .25s ease-out; */

		@media (max-width:900px) {
			& {
				max-width: 90vw;
				max-height: 50svh;
				margin: 5rem 1rem 1rem;
				padding: 2rem;
				
				.bio {
					overflow: scroll;
					height: 50svh;
				}
			}
		}

		&::after {
			content: "";
			/* opacity: 0; */
			position: fixed;
			inset: 0;
			z-index: -1;
			background-color: rgba(255, 255, 255, .5);
			backdrop-filter: blur(5px);
			--webkit-backdrop-filter: blur(5px);
			/* animation: opacity .7s forwards; */
		}

		&.show {
			display: block;
		}

		&:first-of-type {
			background-color: #BAE27E;
		}

		&:nth-of-type(2) {
			background-color: #FFCF72;
		}
		
		&:nth-of-type(4) {
			background-color: #8591FE;
		}

		.close {
			cursor: pointer;
		}

		img {
			position: absolute;
			width: 20vw;
			max-width: 15rem;
			min-width: 7rem;

			&.leftTop {
				top: 0;
				left: 0;
				transform: translate(-60%, -60%) rotate(10deg);

				@media (max-width:1600px) {
					& {
						top: 50%;
						transform: translate(-80%, -50%) rotate(10deg);
					}
				}

				@media (max-width:900px) {
					& {
						top: 0;
						left: 50%;
						transform: translate(-50%, -70%) rotate(10deg);
					}
				}
			}

			&.rightTop {
				top: 0;
				right: 0;
				transform: translate(60%, -60%) rotate(-8deg);

				@media (max-width:1600px) {
					& {
						display: none;
					}
				}
			}

			&.leftBottom {
				bottom: 0;
				left: 0;
				transform: translate(-60%, 60%) -10deg;

				@media (max-width:1600px) {
					& {
						display: none;
					}
				}
			}

			&.rightBottom {
				bottom: 0;
				right: 0;
				transform: translate(60%, 60%) rotate(-8deg);

				@media (max-width:1600px) {
					& {
						top: 50%;
						transform: translate(80%, -50%) rotate(-8deg);
					}
				}

				@media (max-width:900px) {
					& {
						top: auto;
						left: 50%;
						transform: translate(-50%, 70%) rotate(-8deg);
					}
				}
			}
		}
	}

	p {
		margin-bottom: 1rem;
		font-size: var(--text-extra-small);
	}
}

@keyframes guideInfo {
	0% {
		opacity: 0;
		transform: scale(0.8);
	}
	100% {
		opacity: 1;
		transform: scale(1);
	}
}

@keyframes opacity {
	0% {
		opacity: 0;
		background-color: rgba(255, 255, 255, 0);
	}
	100% {
		opacity: 1;
		background-color: rgba(255, 255, 255, .5);
	}
}

.method {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	justify-content: center;
	align-items: center;
	padding: 10svh 10vw 20svh;
    gap: 5vw;

	@media (max-width:900px) {
		& {
			display: flex;
			flex-direction: column;
			padding: 5rem 5vw;
			gap: 2.5rem;
		}
	}

	h2 {
		font-size: var(--text-medium);
		font-weight: 400;
		line-height: 105%;
		margin-bottom: 2rem;
		max-width: 50rem;

		@media (max-width:900px) {
			& {
				font-weight: 500;
			}
		}
	}

	p {
		margin-bottom: .75rem;
		max-width: 30rem;
		font-size: var(--text-small);

		@media (max-width:900px) {
			& {
				font-weight: 300;
			}
		}
	}

	.firstText,
	.secondText,
	.thirdText {
		z-index: 1;
	}

	.firstText {
		grid-column: 1;
		grid-row: 1;

		h2 {
			text-align: right;

			@media (max-width:900px) {
				& {
					text-align: left;
				}
			}
		}

		p {
			margin-right: 30%;
		}
	}

	.firstImage {
		grid-column: 1 / 3;
		grid-row: 1 / 3;

		@media (max-width:900px) {
			& {
				transform: scale(1.8) translateX(15%) translateY(-30px);
        		padding: 2rem 0;
			}
		}
	}

	.secondText {
		grid-column: 2;
		grid-row: 2;

		p {
			justify-self: end;
			margin-left: 30%;
		}

		@media (max-width:900px) {
			& {
				text-align: right;
				justify-self: end;

				h2 {
					margin-left: 30%;
				}

				p {
					margin-left: 0;
				}
			}
			
		}
	}

	.secondImage {
		grid-column: 2 / 3;
		grid-row: 3;
	}

	.thirdText {
		grid-column: 1;
		grid-row: 3;

		p {
			margin-right: 30%;

			@media (max-width:900px) {
				& {
					margin-right: 0;
				}
				
			}
		}
	}
}

.contact {
	display: flex;
	flex-direction: column;
	gap: 10svh;
	position: relative;
	margin-top: 20svh;
	
	@media (max-width:900px) {
		& {
			gap: 6rem;
			margin-top: 10rem;
		}
	}

	a {
		color: var(--white);
	}

	.instagram {
		position: absolute;
		top: 0;
		width: 100%;
		display: flex;
		flex-direction: column;
		gap: 1rem;
		transform: translateY(-35%);

		@media (max-width:900px) {
			& {
				transform: translateY(-70%);
			}
		}
	
		#sb_instagram {
			overflow: visible;

			#sbi_images {
				position: relative;
				display: flex;
				align-items: center;
				gap: 1rem;
				/* height: 20vw;
				max-height: 30rem;
				min-height: 10rem; */
			
				.sbi_item {
					aspect-ratio: 1;
					height: 20vw;
					max-height: 30rem;
					min-height: 8rem;
	
					.sbi_photo {	
						display: block;
						height: 20vw;
						max-height: 30rem;
						min-height: 8rem;
	
						img {
							aspect-ratio: 1;
						}
	
						.sbi-screenreader,
						.svg-inline--fa {
							display: none;
						}
					}
				}
			}
		}
	}

	.group {
		margin: auto;
		z-index: 0;
		position: relative;

		img {
			width: 65vw;
			max-width: 60rem;
		}

		&::after {
			content: "";
			position: absolute;
			top: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 60vw;
            aspect-ratio: 4 / 3;
			background-image: url('https://rifugio.weco.digital/wp-content/uploads/2024/12/Fondo-Instagram-1.png');
			background-repeat: no-repeat;
			background-size: contain;
			background-position: center;
			z-index: -1;
		}

		@media (max-width:900px) {
			& {
				img {
					width: 90vw;
				}
			}

			&::after {
				width: 90vw;
				top: 10%;
			}
		}
	}

	.links {
		margin: auto;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 2vw;
		width: 100%;
		/* overflow-x: hidden; */
		position: relative;

		@media (max-width:900px) {
			& {
				flex-direction: column;
				gap: .75rem;
			}
		}

		.firstSpiral,
		.secondSpiral {
			position: absolute;
			max-width: 40vw;

			@media (max-width:900px) {
				& {
					max-width: 100vw;
				}
				
			}
		}

		.firstSpiral {
			left: 0;
			transform: translateX(-40%) rotate(180deg);

			@media (max-width:900px) {
				& {
					transform: translateX(-55%) translateY(20%) rotate(-90deg);
				}
			}
		}

		.secondSpiral {
			right: 0;
			transform: translateX(40%) rotate(180deg);

			@media (max-width:900px) {
				& {
					transform: translateX(55%) rotate(90deg);
				}
			}
		}

		.link {
			a {
				color: var(--white);
				font-size: var(--text-medium);
				text-decoration: none;
			}
		}

		.separator {
			content: "";
			display: block;
			width: 15px;
			aspect-ratio: 1;
			background-size: contain;
			background-position: center;
			background-repeat: no-repeat;
			background-image: url('https://rifugio.weco.digital/wp-content/uploads/2024/12/Punto-animado.webp');

			 @media (max-width:900px) {
				& {
					width: 20px;
				}
			 }
		}
	}

	.contactSection {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		padding: 10svh 5vw 5svh;
		gap: 5vw;
		background-image: url('https://rifugio.weco.digital/wp-content/uploads/2024/12/Textura-espacial-1-1.webp');
		background-repeat: no-repeat;
		background-size: cover;
		background-position: bottom;

		@media (max-width:900px) {
			& {
				display: flex;
				flex-direction: column;
				padding: 3rem 5vw 0;
				gap: 2rem;

				.application {
					order: 1;
				}

				.info {
					order: 2;
				}

				.footer {
					order: 3;
				}
			}
		}

		.info,
		.form,
		.footer {
			z-index: 1;
		}

		.info {
			display: flex;
            flex-direction: column;
            align-items: flex-end;
			gap: 1rem;
            text-align: right;

			@media (max-width:900px) {
				& {
					align-items: flex-start;
					text-align: left;
				}
			}

			.openingHours {
				p {
					font-size: var(--text-extra-small);
				}

				h2 {
					font-size: var(--text-small);
					position: relative;
					padding-bottom: .5rem;

					&::after {
						content: "";
                        display: block;
                        position: absolute;
                        bottom: 0;
                        left: 0;
                        height: 100%;
                        width: 100%;
                        background-image: url('https://rifugio.weco.digital/wp-content/uploads/2024/12/Line-6.webp');
                        background-repeat: no-repeat;
                        background-position: bottom;
					}
				}
			}

			a {
				font-size: var(--text-medium);
				max-width: 30rem;
				text-wrap: balance;
				text-decoration: none;
			}
		}

		.application {
			position: relative;
			padding: 5vw;
			margin: auto;
			color: var(--black);
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			height: fit-content;
			z-index: 1;

			@media (max-width:900px) {
				& {
					/* padding: 8vw; */
					margin: 3rem 0 6rem;
				}
				
			}

			.wpcf7 {
				@media (max-width:900px) {
					max-width: 90vw;
				}
			}

			h2,
			form,
			.button {
				z-index: 1;
				position: relative;
			}
			
			h2 {
				font-size: var(--text-big);
				font-weight: 400;
				text-align: center;
				margin-bottom: 2rem;
				transform: rotate(-4deg);
				max-width: 35rem;
			}

			form {
				p {
					position: relative;
					background-repeat: no-repeat;
					background-size: contain;
					background-position: bottom;
					padding: .5rem 0;
					font-size: var(--text-small);

					svg {
						position: absolute;
						inset: 0;
						margin: auto;
						display: block;
						width: calc(160px + 1vw);
						height: 100%;
						padding: .1rem .35rem;
						margin-top: .25rem;
						z-index: -1;

						path {
							stroke-width: 3px;
							stroke: var(--black);
							stroke-dashoffset: -1200;
							stroke-dasharray: 1200;
						}
					}

					.wpcf7-spinner {
						display: none;
					}
				}
				p:nth-of-type(1) {
					background-image: url('https://rifugio.weco.digital/wp-content/uploads/2024/12/Line-1.webp');
				}
				p:nth-of-type(2) {
					background-image: url('https://rifugio.weco.digital/wp-content/uploads/2024/12/Line-2.webp');
				}
				p:nth-of-type(3) {
					background-image: url('https://rifugio.weco.digital/wp-content/uploads/2024/12/Line-3.webp');
				}
				p:nth-of-type(4) {
					background-image: url('https://rifugio.weco.digital/wp-content/uploads/2024/12/Line-4.webp');
				}
				p:nth-of-type(5) {
					background-image: url('https://rifugio.weco.digital/wp-content/uploads/2024/12/Line-5.webp');
				}
				p:nth-of-type(6) {
					margin-top: 1rem;
				}

				input,
				textarea {
					border: none;

					&:focus-visible {
						outline: none;
					}
				}

				textarea {
					font-family: "Outfit", sans-serif;
					width: 100%;
					field-sizing: content;
					max-height: 100px;
				}

				input[type="submit"] {
					background-color: transparent;
					font-size: var(--text-small);
					width: 100%;
					padding: 2rem 1rem;
					margin-top: .25rem;
					cursor: pointer;
					background-image: url('https://rifugio.weco.digital/wp-content/themes/rifugio/assets/images/button_green.webp');
					background-repeat: no-repeat;
                    background-size: contain;
                    background-position: center;
				}
			}

			.or {
				margin-bottom: 1rem;
			}

			.button {
				font-weight: 400;
				display: grid;
                grid-template-columns: 1fr;
				text-decoration: none;
				cursor: pointer;
				font-size: var(--text-small);
		
				@media (max-width:900px) {
					& {
						font-weight: 500;
					}
				}
		
				svg {
					display: block;
					width: calc(130px + 1vw);
					height: 100%;
					padding: .1rem .35rem;
		
					path {
						stroke-width: 3px;
						stroke: var(--black);
						stroke-dashoffset: -1000;
						stroke-dasharray: 1000;
					}
				}

				.text,
				img {
					grid-column: 1;
					grid-row: 1;
					margin: auto;
				}
		
				.text {
					color: var(--black);
					display: inline-flex;
    				gap: .35rem;

					.word {
						display: inline-flex;
					}
				}
		
				img {
					width: 200px;
					z-index: -1;
				}
		
				&:hover {
					svg {
						path {
							stroke-dashoffset: 0;
						}
					}
				}
			}

			&:before {
				content: "";
                position: absolute;
				width: 100%;
                height: 100%;
                top: 50%;
                left: 50%;
                z-index: -1;
                background: url('https://rifugio.weco.digital/wp-content/uploads/2024/12/Papel-rasgado-3-1.webp') no-repeat;
				background-size: contain;
				background-position: center;
                transform: translate(-50%, -50%) rotate(-4deg) scale(1.2);
			}

			@media (max-width:900px) {
				&:before {
					transform: translate(-50%, -50%) scale(1.5) rotate(7deg);
				}
			}

			.background {
				position: absolute;
				inset: 0;
				margin: auto;
				object-fit: contain;
				transform: rotate(-7deg) scale(1.25);
				max-width: 30rem;

				/* @media (max-width:900px) {
					& {
						height: 100%;
                        object-fit: cover;
                        max-width: 100%;
					}
				} */
			}
		}

		.process {
			ol {
				display: flex;
				flex-direction: column;
				gap: 1rem;

				li {
					max-width: 15rem;
					font-size: var(--text-small);

					a {
						color: var(--black);
						display: block;
                        width: fit-content;
						text-decoration: none;
						transition: all .2s steps(6);
						background-size: contain;
						background-repeat: no-repeat;
						background-position: center;
						padding: 2rem 40px;
						margin: -10px;
						transition: all .2s ease-out;

						@media (min-width:900px) {
							&:hover {
								transform: scale(1.1) rotate(3deg);
							}
						}
					}

					&:first-of-type {
						a {
							background-image: url('https://rifugio.weco.digital/wp-content/themes/rifugio/assets/images/button_green.webp');
						}
					}

					&:nth-of-type(2) {
						a {
							background-image: url('https://rifugio.weco.digital/wp-content/themes/rifugio/assets/images/button_blue.webp');
						}
					}

					&:nth-of-type(3) {
						a {
							background-image: url('https://rifugio.weco.digital/wp-content/themes/rifugio/assets/images/button_pink.webp');
						}
					}
				}
			}
		}

		.footer {
			grid-column: 1 / 4;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			padding: 2rem 0;
	
			@media (max-width:900px) {
				& {
					flex-direction: column-reverse;
					align-items: flex-start;
					gap: 2rem;
				}
			}
	
			.credits {
				display: flex;
				flex-direction: column;
				gap: .25rem;
	
				.artDirection,
				.designCode {
					display: flex;
					flex-direction: row;
					align-items: flex-end;
					gap: .5rem;
	
					p {
						font-size: var(--text-extra-small);
					}
	
					a {
						font-size: var(--text-small);
					}
				}
			}
	
			.questions {
				display: flex;
				flex-direction: column;
				justify-content: flex-end;
				gap: .25rem;
				text-align: right;
				font-size: var(--text-extra-small);
	
				@media (max-width:900px) {
					& {
						text-align: left;
					}
				}
	
				a {
					font-size: var(--text-small);
				}
			}
		}
	}
}

.placeholder {
	min-height: 100svh;
}

.canvasWrapper {
	.chalk{
		display: block;
		width:40px;
		height:50px;
		background:url(https://raw.github.com/mmoustafa/Chalkboard/master/img/chalk.png);
		position:fixed;
		padding:0;
		margin:0;
		cursor:none;
		z-index:5;
	}

	#chalkboard{
		position:relative;
		width:100%;
		height:100%;
		z-index:1;
		cursor:none;
		background:url(https://raw.github.com/mmoustafa/Chalkboard/master/img/bg.png);
	}
}