/* Variables
-------------------------*/
	/* Colors */
	$black: #000000;
	$white: #FFFFFF;
	$light-grey: #F2E9EF;

	$light-purple: #9B4B7B;
	$purple: #96316D;
	$dark-purple: #7E295C;

	$light-green: #BDCC81;
	$green: #B7C47E;
	$dark-green: #929E5E;

	:root{
		--plyr-color-main: #B7C47E;
	}

	/* CSS Properties */
	$space-x: clamp(15px, 4vw, 50px);
	$space-x2: clamp(30px, 8vw, 100px);
	$space-x3: clamp(45px, 12vw, 150px);
	$space-x4: clamp(60px, 16vw, 200px);
	$space-x5: clamp(75px, 20vw, 250px);
	$space-x6: clamp(90px, 24vw, 300px);
	$space-x7: clamp(105px, 28vw, 350px);
	$space-x8: clamp(120px, 32vw, 400px);

	$min-vw: 320;
	$max-vw: 1440;

	@function fluid($min, $max) {
		@return clamp(
			#{$min}px,
			calc(#{$min}px + (#{$max} - #{$min}) * ((100vw - #{$min-vw}px) / (#{$max-vw} - #{$min-vw}))),
			#{$max}px
		);
	}

	$display-size: fluid(36, 80);
	$h0-size: fluid(48, 95);
	$h1-size: fluid(32, 65);
	$h2-size: 38px;
	$h3-size: fluid(18, 30);
	$h4-size: 20px;
	$h5-size: 16px;
	$body-size: 18px;
	
	$ease: cubic-bezier(0.77, 0, 0.18, 1);

	/* Fonts */
	@import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Actor&display=swap');

	$font-head: 'Abril Fatface', cursive;
	$font-body: 'Actor', sans-serif;
	
	$body-color: $white;
	$link-color: $green;

	h1, h2, h3, h4, h5, p, ul li, ol li, a{
		color: inherit;
		font-family: $font-head;
		font-weight: 400;
		-webkit-hyphens: manual;
		hyphens: manual;
	}

	h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5{
		font-family: $font-head;
		line-height: 1.25;
		font-weight: 350;
		margin-bottom: .65em;
		strong{
			font-weight: 500;
		}
	}

	p, ul li, ol li, span, a{
		color: inherit;
		font-family: $font-body;
		font-weight: 300;
	}

	.wysiwyg{
		color: $white;
		&.center{
			text-align: center;
		}
		&.purple{
			h1, h2, h3, h4, h5, p{
				&.highlight{
					color: $green;
				}
			}
		}
		&.white{
			h1, h2, h3, h4, h5, p{
				&.highlight{
					color: $purple;
				}
			}
		}
		&.green{
			h1, h2, h3, h4, h5, p{
				&.highlight{
					color: $purple;
				}
			}
			p{
				a{
					&:hover{
						color: $purple;
					}
				}
			}
		}
		h1, h2, h3, h4, h5, p{
			letter-spacing: 0.5px;
			&.highlight{
				color: $green;
			}
		}
		.h0{
			font-size: $h0-size;
		}
		h1, .h1{
			font-size: $h1-size;
			line-height: 1.45;
		}
		h2, .h2{
			font-size: $h2-size;
			line-height: 1.45;
		}
		h3, .h3{
			font-size: $h3-size;
			line-height: 1.35;
		}
		h4, .h4{
			font-size: $h4-size;
			line-height: 1.35;
		}
		p{
			&.highlight{
				text-transform: uppercase;
				color: $green;
			}
		}
		h5, .h5{
			font-size: $h5-size;
			line-height: 1.25;
		}
		p, ul li, ol li, a{
			font-size: $body-size;
			line-height: 1.65;
			font-weight: 400;
			strong{
				font-weight: 500;
			}
		}
		a{
			font-size: inherit;
			font-family: inherit;
			color: inherit;
			text-decoration: underline;
		}
		p{
			a{
				text-decoration: underline;
				transition: color 0.25s $ease;
				&:hover{
					color: $white;
				}
			}
		}
	}

/* Elements
-------------------------*/

	[data-reveal="fade"]{
		opacity: var(--opacity, 0) !important;
		will-change: transform;
		transform: rotate(var(--rotation, 0deg)) translateY(var(--vertical, 50px)) translateX(var(--horizontal, 0px)) scale(var(--scale, 1));
		transition: opacity var(--duration, 1.25s) $ease calc(var(--delay, 0s) + 0.15s), transform var(--duration, 1.25s) ease calc(var(--delay, 0s) + 0.15s);
		&.revealed{
			opacity: var(--to-opacity, 1) !important;
			transform: translateY(0px);
		}
	}

	[data-reveal="fade-image"]{
		opacity: var(--opacity, 0) !important;
		will-change: transform;
		transform: rotate(var(--rotation, 0deg)) translateY(var(--vertical, -100px)) translateX(var(--horizontal, 0px)) scale(var(--scale, 1));
		transition: opacity var(--duration, 1.5s) $ease calc(var(--delay, 0s) + 0.15s), transform var(--duration, 2.5s) ease calc(var(--delay, 0s) + 0.15s);
		&.revealed{
			opacity: var(--to-opacity, 1) !important;
			transform: translateY(0px);
		}
	}

	.image-container{
		position: relative;
		overflow: hidden;
		img{
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
	}

	.cta-btn{
		display: flex;
		gap: 10px;
		background-color: $white;
		text-decoration: none;
		border-radius: 30px;
		padding: 10px 30px;
		cursor: pointer;
		transition: .25s ease all;
		&.bigger{
			span.text{
				font-size: $body-size;
			}
		}
		&.purple{
			background-color: $purple;
			&:hover{
				background-color: $green;
				span.icon{
					svg{
						
					}
				}
			}
			span.text{
				color: $white;
			}
		}
		&:hover{
			background-color: $light-green;
			span.icon{
				svg{
					
				}
			}
			span.text{
				color: $white;
			}
		}
		span.icon{
			svg{
				width: 15px;
			}
		}
		span.text{
			font-family: $font-body;
			font-weight: 300;
			font-size: calc($body-size * .7);
			text-decoration: none;
			text-transform: uppercase;
			color: $green;
			transition: .25s ease all;
		}
	}


	body{
		display: flex;
		align-items: center;
		height: 100vh;
		&::before{
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 65px;
		}
		&::after{
			content: "";
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 65px;
		}
		a.prev{
			position: absolute;
			display: flex;
			align-items: center;
			justify-content: center;
			top: 0;
			left: 0;
			width: 65px;
			height: 100%;
			transition: .25s ease all;
			&.disabled{
				pointer-events: none;
			}
			&:hover{
				width: 75px;
				img{
					transform: scaleX(-1) translateX(3px);
					opacity: 1;
				}
			}
			img{
				transform: scaleX(-1);
				opacity: 0.3;
				transition: .25s ease all;
			}
		}
		a.next{
			position: absolute;
			display: flex;
			align-items: center;
			justify-content: center;
			top: 0;
			right: 0;
			width: 65px;
			height: 100%;
			transition: .25s ease all;
			&.disabled{
				pointer-events: none;
			}
			&:hover{
				width: 75px;
				img{
					opacity: 1;
					transform: translateX(3px);
				}
			}
			img{
				opacity: 0.3;
				transition: .25s ease all;
			}
		}

		.page-content{
			position: relative;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			align-self: center;
			margin: auto;
			width: 1500px;
			max-width: calc(100% - 175px);
			height: calc(100% - 130px);
			&.more{
				width: 1550px;
				justify-content: flex-end;
				align-items: flex-start;
			}
			&.project{
				width: calc(100% - 130px);
				max-width: 2000px;
				&.spread{
					section.project.main{
						grid-template-columns: 12fr 10fr 10fr;
					}
					.project-title{
						grid-column: 1;
					}
					.project-info{
						grid-column: 2;
					}
				}
				&.flipped, &.multiple{
					.project-title{
						grid-column: 2;
						grid-row: 1;
					}
					.project-info{
						grid-column: 1;
						grid-row: 1;
					}
				}
				&.multiple{
					.project-info{
						height: calc(100vh - 300px);
						transform: translateY(0px);
					}
				}
				section.project.main{
					display: grid;
					grid-template-columns: 10fr 12fr 8fr;
					grid-gap: 20px;
					padding: 0 75px;
					align-items: center;
				}
			}
			&.lesson{
				width: calc(100% - 130px);
				max-width: 2000px;
				 a.cta-btn{
					position: absolute;
					z-index: 2;
					top: 0;
					transform: translateY(-50%);
					&:hover{
						background-color: darken($dark-purple, 5%);
					}
				}
			}
			&.contact{
				transform: translateY(-50px);
				width: 1550px;
				max-width: calc(100% - 300px);
				height: calc(100% - 150px);
				justify-content: flex-end;
				align-items: flex-start;
				section.scroll{
					width: 50vw;
					padding-right: 50px;
				}
			}
		}

		section.scroll{
			position: relative;
			overscroll-behavior: contain;
			overflow-y: auto;
			padding-top: 2.5vw;
			padding-bottom: 2.5vw;
			// mask-image: linear-gradient(to bottom, transparent, white 5%, white 95%, transparent);
			&::-webkit-scrollbar {
				width: 4px;
			}
		}
		&.purple{
			background-color: $purple;
			&::before, &::after, a.prev, a.next{
				background-color: $light-purple;
			}
			section.scroll{
				&::-webkit-scrollbar-track {
					background: $light-purple; 
				}
				&::-webkit-scrollbar-thumb {
					background: $white;
				}
				&::-webkit-scrollbar-thumb:hover {
					background: darken($white, 10%); 
				}
			}
		}
		&.white{
			background-color: $white;
			&::before, &::after, a.prev, a.next{
				background-color: $light-grey;
			}
			section.scroll{
				&::-webkit-scrollbar-track {
					background: $light-grey; 
				}
				&::-webkit-scrollbar-thumb {
					background: $purple;
				}
				&::-webkit-scrollbar-thumb:hover {
					background: darken($purple, 10%); 
				}
			}
		}
		&.green{
			background-color: $light-green;
			nav{
				li{
					a{
						&:hover, &.active{
							color: $white;
						}
					}
				}
			}
			&::before, &::after, a.prev, a.next{
				background-color: $dark-green;
			}
			section.scroll.light{
				&::-webkit-scrollbar-track {
					background: $green; 
				}
				&::-webkit-scrollbar-thumb {
					background: $dark-purple;
				}
				&::-webkit-scrollbar-thumb:hover {
					background: darken($dark-purple, 10%); 
				}
			}
			section.scroll.dark{
				&::-webkit-scrollbar-track {
					background: lighten($light-green, 6.5%); 
				}
				&::-webkit-scrollbar-thumb {
					background: $dark-purple;
				}
				&::-webkit-scrollbar-thumb:hover {
					background: darken($dark-purple, 10%); 
				}
			}
		}
	}