/* START COLORS */

:root {

	--taupe-mono-01            : oklch(0.3657 0.0237 61.78); /* Base Taupe */
	--taupe-mono-02            : oklch(0.4542 0.0306 63.13);
	--taupe-mono-03            : oklch(0.5363 0.0371 60.88);
	--taupe-mono-04            : oklch(0.6165 0.0425 63.1);
	--taupe-mono-05            : oklch(0.6894 0.034 62.59);
	--taupe-mono-06            : oklch(0.7783 0.0232 63.11); /* oklch(0.7608 0.026 61.53); */
	--taupe-mono-07            : oklch(0.833 0.0175 61.91);

	--taupe-complimentary-01   : oklch(0.5989 0.0248 62.95);
	--taupe-complimentary-02   : oklch(0.5203 0.0246 60.39);
	--taupe-complimentary-03   : oklch(0.4435 0.0237 64.68);
	--taupe-complimentary-04   : oklch(0.3657 0.0237 61.78); /* Base Taupe */
	--taupe-complimentary-05   : oklch(0.3625 0.0261 237.63);
	--taupe-complimentary-06   : oklch(0.2843 0.0273 238.16);
	--taupe-complimentary-07   : oklch(0.2085 0.0281 234.97);

	--taupe-triad-darker-bg    : oklch(0.29 0.0254 336.5);
	--taupe-triad-darker-01    : oklch(0.29 0.0254 336.5);
	--taupe-triad-darker-02    : oklch(0.29 0.0276 4.48);
	--taupe-triad-darker-03    : oklch(0.29 0.0266 32.73);
	--taupe-triad-darker-04    : oklch(0.29 0.0237 61.78);
	--taupe-triad-darker-05    : oklch(0.29 0.0221 92.96);
	--taupe-triad-darker-06    : oklch(0.29 0.0232 127.72);
	--taupe-triad-darker-07    : oklch(0.29 0.0248 158.56);

	--color-burnt-orange       : oklch(0.7 0.1577 46.26); /* #ec7a3f */
    --color-burnt-yellow       : oklch(0.8259 0.1736 71.47); /* #ffb017 */

	--color-black              : oklch(10% 0.01 0);

	--conic-gradient           : conic-gradient( from 144deg,
		var(--taupe-triad-darker-01),
		var(--taupe-triad-darker-02),
		var(--taupe-triad-darker-03),
		var(--taupe-triad-darker-04),
		var(--taupe-triad-darker-05),
		var(--taupe-triad-darker-06),
		var(--taupe-triad-darker-07),
		var(--taupe-triad-darker-07),
		var(--taupe-triad-darker-06),
		var(--taupe-triad-darker-05),
		var(--taupe-triad-darker-04),
		var(--taupe-triad-darker-03),
		var(--taupe-triad-darker-02),
		var(--taupe-triad-darker-01)
	);
}

/* END COLORS */

/* START VARS */

:root {

	--color-font                     : var(--taupe-mono-06);
	--color-font-heading             : var(--color-font);
	--color-link                     : var(--color-burnt-orange);
	--color-link-hover               : var(--color-burnt-orange);
	--color-hover                    : transparent;
	--color-button-text              : oklch(0.8629 0.0139 60.54);
	--color-outline                  : var(--color-burnt-yellow);
	--color-box-shadow               : oklch(0% 0 0 / 18%);
	--color-header-name              : var(--color-burnt-orange);

	--background-color-html          : var(--taupe-triad-darker-bg);
	--background-color-body          : transparent;
	--background-color-nav           : var(--taupe-triad-darker-bg);
	--background-image-nav           : var(--conic-gradient);
	--background-color-nav-item      : var(--taupe-complimentary-03);
	--background-color-nav-item-text : var(--color-button-text);
	--background-color-slide-show    : var(--taupe-complimentary-03);
	--background-color-section       : transparent;
	--background-color-button        : var(--taupe-complimentary-03);

	--border-color                   : transparent;
	--border-button                  : 1px solid oklch(0% 0 0 / 33%);
	--border-radius                  : 25px;
	--corner-shape                   : squircle;

	--box-shadow                     : 0 3px 13px var(--color-box-shadow);
	--box-shadow-menu                : 0 3px 7px var(--color-box-shadow);
	--box-shadow-nav                 : 0 0 48px 0 oklch(0% 0 0 / 100%);
	--box-shadow-button              : 0 0 10px 0 oklch(0% 0 0 / 60%);

	--outline                        : none;
	--outline-offset                 : 0;
	--outline-section                : none;
	--outline-offset-section         : 0;

	--font-family                    : Tahoma;
	--font-family-mobile             : var(--font-family);
	--font-size                      : 1rem;
	--font-size-mobile               : 1.125rem;
	--font-size-h1-mobile            : 1.9rem;
	--font-size-h2-mobile            : 1.4rem;
	--font-size-h3-mobile            : 1.25rem;
	--font-size-h4-mobile            : 1rem;

	--line-height                    : 1.6;
	--line-height-headings           : 1.3;

	--height-target                  : 50px;
	--height-button                  : var(--height-target);

	--padding-universal-page         : 25px;
	--padding-heading                : 0 var(--padding-universal-page);
	--margin-heading-nav             : 5px;
	--margin-block-start-page        : .6rlh;
	--margin-block-end-page          : 1.5rlh;
	--margin-block-start-section     : 1.5rlh;
	--max-width-universal            : 768px;
	--scroll-margin-block-start      : 49px;
	--bounce                         : linear(0, 0.009, 0.035 2.1%, 0.141 4.4%, 0.723 12.9%, 0.938 16.7%, 1.017, 1.077, 1.121, 1.149 24.3%, 1.159, 1.163, 1.161, 1.154 29.9%, 1.129 32.8%, 1.051 39.6%, 1.017 43.1%, 0.991, 0.977 51%, 0.974 53.8%, 0.975 57.1%, 0.997 69.8%, 1.003 76.9%, 1);
	--length-transform               : .8s;
	--length-opacity                 : .4s;
	--lightness                      : 100%;
	--chroma                         : 1;

	--breakpoint-sm                  : 360px;
	--breakpoint-md                  : 768px;
	--breakpoint-lg                  : 1024px;
	--breakpoint-xl                  : 1366px;
	--breakpoint-hd                  : 1920px;

	--scrollbar-thumb-background-color : var(--taupe-mono-05);
	--scrollbar-thumb-border           : 0px solid var(--taupe-triad-darker-01);
	--scrollbar-track-background-color : transparent;

}

@media ( max-width : 768px ) {

	:root {
		--padding-universal-page : 21px;
	}
}

/* END VARS */

/* START GLOBAL */

html {
	min-height       : 100%;
	font-size        : 100%;
	padding          : 0;
	margin           : 0;
	background-color : var(--background-color-html);
	background-image : var(--conic-gradient);
	background-size  : 100% 100%;
}

body {
	position                 : relative;
	min-height               : 100%;
	padding                  : 0;
	margin                   : 0;
	font-family              : var(--font-family), sans-serif;
	font-size                : var(--font-size);
	color                    : var(--color-font);
	line-height              : var(--line-height);
	-webkit-text-size-adjust : 100%;
	background-color         : var(--background-color-body);
	overflow-y               : scroll;
}

h1, h2, h3, h4, h5, h6 {
	line-height  : var(--line-height-headings);
	margin-block : 1rlh;
}

p {
	margin-block : 1rlh 1rlh;
	text-wrap    : pretty;
	max-width    : 75ch;
}

a:not(.button):not(.button-nav) {
	&:link, &:visited, &:hover, &:active {
		color          : var(--color-link);
		border-radius  : var(--border-radius);
		corner-shape   : var(--corner-shape);
		outline-offset : 1px;
	}
}

a, button, input {
	&:focus-visible {
		outline        : 4px solid var(--color-outline);
		outline-offset : 1px;
	}
}

ul {
	list-style-type : square;
	padding         : 0 0 0 1.1rlh;
	margin-block    : 1rlh 0;

	li::marker {
		color : var(--color-burnt-orange);
	}
}

main {
	display                   : flow-root;
	max-width                 : var(--max-width-universal);
	margin-inline             : auto;
	margin-block              : 0;
	scroll-margin-block-start : var(--scroll-margin-block-start);
	background-color          : var(--background-color-section);
}

section {
	display        : flow-root;
	padding        : 0 var(--padding-universal-page) 0 var(--padding-universal-page);
	margin-bottom  : 2rlh;
	outline        : var(--outline-section);
	outline-offset : var(--outline-offset-section);

	&:first-of-type {
		margin-block-start : 0;
	}

	&:last-of-type {
		margin-block-end : 1rlh;
	}

	p:last-child {
		margin-block-end : 0;
	}

	a {
		margin-block-start : 1.5rlh;
		margin-block-end   : .3rlh;
	}
}

@keyframes showHorizontalRulers {
	from { width : 0;    margin-inline : auto; }
	to   { width : auto; margin-inline : var(--padding-universal-page); }
}

hr {
	width            : 0;
	margin-inline    : auto;
	border-width     : 1px 0 0 0;
	border-style     : solid;
	border-color     : var(--taupe-complimentary-03);
	interpolate-size : allow-keywords;
}

hr:nth-of-type(1) {
	animation       : showHorizontalRulers .25s ease-in forwards;
	animation-delay : 0s;
}

hr:nth-of-type(2) {
	animation       : showHorizontalRulers .25s ease-in forwards;
	animation-delay : .05s;
}

hr:nth-of-type(3) {
	animation       : showHorizontalRulers .25s ease-in forwards;
	animation-delay : .075s;
}

hr:nth-of-type(4) {
	animation       : showHorizontalRulers .25s ease-in forwards;
	animation-delay : .1s;
}

hr:nth-of-type(5) {
	animation       : showHorizontalRulers .25s ease-in forwards;
	animation-delay : .125s;
}

hr:nth-of-type(6) {
	animation       : showHorizontalRulers .25s ease-in forwards;
	animation-delay : .15s;
}

hr:nth-of-type(7) {
	animation       : showHorizontalRulers .25s ease-in forwards;
	animation-delay : .175s;
}

hr:nth-of-type(8) {
	animation       : showHorizontalRulers .25s ease-in forwards;
	animation-delay : .2s;
}

hr:nth-of-type(9) {
	animation       : showHorizontalRulers .25s ease-in forwards;
	animation-delay : .225s;
}

hr:nth-of-type(10) {
	animation       : showHorizontalRulers .25s ease-in forwards;
	animation-delay : .25s;
}

header, main, footer {
	max-width     : calc(768px + 6px);
	margin-inline : auto;
}

[popover] {
	opacity             : 0;
	transform           : scale(0.8);
	transition-property : opacity, transform, overlay, display;
	transition-duration : 0.3s;
	transition-behavior : allow-discrete;
}

[popover]:popover-open {
	opacity   : 1;
	transform : scale(1);
}

::-webkit-scrollbar {
	width  : 9px;
	height : 9px;
}

::-webkit-scrollbar-thumb {
	background-color : var(--scrollbar-thumb-background-color);
	border           : var(--scrollbar-thumb-border);
	border-radius    : 3px;
}

::-webkit-scrollbar-track {
	background : var(--scrollbar-track-background-color);
}

@starting-style {
	[popover]:popover-open {
		opacity   : 0;
		transform : scale(0.8);
	}
}

@media ( max-width : 768px ) {

	body {
		font-size : var(--font-size-mobile);
	}

	h1 {
		font-size : var(--font-size-h1-mobile);
	}

	h2 {
		font-size : var(--font-size-h2-mobile);
	}

	h3 {
		font-size : var(--font-size-h3-mobile);
	}

	body {
		font-family : var(--font-family-mobile), sans-serif;
	}

}

/* END GLOBAL */

/* START CLASSES */

.none {
	display : none !important;
}

.capitalize {
	text-transform : uppercase;
}

.responsive {
	width     : 100%;
	height    : auto;
	max-width : 400px;
}

.aspect-ratio {
	object-fit : cover;
}

.inline-block {
	display : inline-block;
}

.footnote {
	margin-block-end : 0;
}

.red {
	color       : firebrick !important;
	font-weight : bold;
}

.price {
	font-weight : normal;
}

.button {
	display          : block;
	min-height       : var(--height-target);
	align-content    : center;
	margin           : auto;
	color            : var(--color-button-text);
	font-size        : 1.1em;
	font-weight      : bold;
	text-align       : center;
	text-decoration  : none;
	appearance       : none;
	width            : fit-content;
	min-width        : 300px;
	background-color : var(--background-color-button);
	border-radius    : var(--border-radius);
	corner-shape     : var(--corner-shape);
	cursor           : pointer;
	overflow         : hidden;
}

.hide {
	display : none !important;
}

.transparent {
	color : transparent;
}

.copied {
	color : firebrick;
}

@media ( max-width : 768px ) {

	.button {
		width   : 100%;
		padding : 0;
	}
}

/* END CLASSES */

/* START HEADER */

header {
	max-width : var(--max-width-universal);
	padding   : 0;
	margin    : 6px auto 0 auto;

	.main {
		display               : grid;
		grid-area             : div;
		grid-template-areas   : 'heading button';
		grid-template-columns : 1fr 69px;
		grid-template-rows    : auto;
		width                 : -moz-available;
		width                 : -webkit-fill-available;
		max-width             : var(--max-width-universal);
		height                : var(--height-target);
		padding               : 0;
		background-color      : transparent;

		.enso {
			grid-area : logo;
		}

		.company {
			grid-area : heading;
		}

		a {
			display         : inline-flex;
			min-width       : 0;
			text-decoration : none;
			border-radius   : var(--border-radius);
			corner-shape    : var(--corner-shape);
			align-self      : center;
			margin-block    : 0;
			margin-inline   : 5px 0;
			padding-inline  : 18px 24px;
			font-size       : 1.25em;
			font-weight     : bold;
			line-height     : var(--height-target);
			align-items     : center;
			outline-offset  : 0 !important;

			&:link, &:visited, &:hover, &:active {
				color : var(--color-header-name);
			}

			&:focus-visible {
				position       : relative;
				z-index        : 1;
			}

			svg {
				width        : 28px;
				height       : 28px;
				margin-right : 8px;
			}
		}

		button {
			grid-area             : button;
			display               : grid;
			grid-template-columns : auto;
			grid-template-rows    : 4px 4px 4px;
			grid-gap              : 3px;
			align-content         : center;
			justify-content       : center;
			margin                : 0;
			padding               : 0 var(--padding-universal-page);
			appearance            : none;
			background-color      : transparent;
			border                : none;
			corner-shape          : var(--corner-shape);
			border-radius         : var(--border-radius);

			span {
				background-color : var(--color-link);
				width            : 28px;
				height           : 4px;
				border-radius    : 2px;
				corner-shape     : var(--corner-shape);
			}

			&:hover {
				background-color : var(--color-hover);
			}

			&:focus-visible {
				outline-offset : 0;
			}
		}
	}

	nav {
		width            : 310px;
		padding          : 1.75rlh 1.5rlh;
		margin-top       : 4rlh;
		background-color : var(--background-color-nav);
		background-image : var(--background-image-nav);
		border           : none;
		border-radius    : var(--border-radius);
		corner-shape     : var(--corner-shape);
		box-shadow       : var(--box-shadow-nav);

		menu {
			display          : grid;
			grid-gap         : 4px;
			align-items      : center;
			list-style-type  : none;
			max-width        : var(--breakpoint-md);
			padding          : 0;
			margin           : auto;
			background-color : transparent;

			li {
				height        : var(--height-target);
				font-weight   : bold;
				text-align    : center;
				align-content : center;

				a {
					display          : flow-root;
					height           : var(--height-target);
					text-decoration  : none;
					line-height      : var(--height-target);
					font-size        : 1.1em;
					color            : var(--background-color-nav-item-text);
					border-radius    : var(--border-radius);
					corner-shape     : var(--corner-shape);
					background-color : var(--background-color-nav-item);

					&:link, &:active, &:visited {
						color : var(--background-color-nav-item-text);
					}

					&:focus-visible {
						position       : relative;
						z-index        : 1;
						outline-offset : 1px;
					}
				}
			}
		}
	}
}

@media ( max-width : 768px ) {

	header {

		.main {

			button {
				margin-right : 5px;

				&:hover {
					background-color : transparent;
				}
			}
		}

		.menu {
			padding-right         : 0;
			grid-template-columns : 1fr 64px;

			a {
				margin-inline : 0;
			}
		}
	}
}

/* END HEADER */

/* START FOOTER */

footer {
	display         : block;
	justify-content : center;
	max-width       : var(--max-width-universal);
	padding         : 0 0 2rlh 0;
	margin          : 2rlh auto 0 auto;
	text-align      : center;

	menu {
		display             : grid;
		grid-template-areas : 'solutions' 'tech-support' 'pricing' 'showcase' 'contact';
		grid-gap            : 0;
		width               : fit-content;
		list-style-type     : none;
		padding             : 0;
		margin              : 0 auto;

		li {
			padding : 0;
			margin  : 0;

			&:nth-child(1) {
				grid-area : solutions;
			}

			&:nth-child(2) {
				grid-area : tech-support;
			}

			&:nth-child(3) {
				grid-area : pricing;
			}

			&:nth-child(4) {
				grid-area : showcase;
			}

			&:nth-child(5) {
				grid-area : contact;
			}
		}
	}

	a {
		position         : relative;
		display          : inline-block;
		width            : -moz-available;
		width            : -webkit-fill-available;
		min-height       : var(--height-button);
		align-content    : center;
		padding          : 0 var(--padding-universal-page);
		margin           : 0;
		border-radius    : var(--border-radius);
		corner-shape     : var(--corner-shape);
		background-color : transparent;

		&:focus-visible {
			z-index        : 5;
			outline-offset : 0 !important;
		}

		&:hover {
			background-color : var(--color-hover);
		}
	}

	small {
		display     : block;
		margin-top  : 1.25lh;
	}

	.logo {
		display            : none;
		width              : 60px;
		height             : 60px;
		margin-block-start : 1rlh;
	}
}

#solutions .link-footer.solutions,
#tech-support .link-footer.tech-support,
#pricing .link-footer.pricing,
#showcase .link-footer.showcase,
#resume .link-footer.resume,
#contact .link-footer.contact {
	cursor          : default;
	color           : var(--color-font);
	text-decoration : none;

	&:hover {
		background-color : transparent;
	}
}

@media (min-width : 768px) {
	footer {

		menu {
			grid-template-areas : 'solutions tech-support pricing showcase contact';
			width               : calc(100% - var(--padding-universal-page) * 2);
		}
	}
}

/* END FOOTER */

/* START SOLUTIONS */

.solutions {

	section:not(:first-child) {
		display               : grid;
		grid-template-columns : 42% 1fr;
	}

	h2 {
		white-space : nowrap;
	}

	.grid-solutions {
		display               : grid;
		grid-template-columns : 1fr 1fr 1fr;
		grid-template-rows    : auto;
		grid-gap              : calc(var(--padding-universal-page) * .5);
	}

	.solution-types {
		width           : 100%;
		max-width       : var(--breakpoint-md);
		min-height      : 196px;
		position        : relative;
		overflow        : hidden;
		list-style-type : none;
		padding         : 0;
		margin          : 0 auto;
		align-content   : center;
		text-align      : center;

		li {
			position    : relative;
			display     : block;
			padding     : 0;
			margin      : 0;
			text-align  : center;
			font-weight : bold;
			font-size   : 1.3rem;

			&:nth-child(1) {
				transition : transform var(--length-transform) var(--bounce) .5s, opacity var(--length-opacity) ease .5s;
				@starting-style {
					opacity   : 0;
					transform : translate(-100%);
				}
			}

			&:nth-child(2) {
				transition : transform var(--length-transform) var(--bounce) .6s, opacity var(--length-opacity) ease .6s;
				@starting-style {
					opacity   : 0;
					transform : translate(-100%);
				}
			}

			&:nth-child(3) {
				transition : transform var(--length-transform) var(--bounce) .7s, opacity var(--length-opacity) ease .7s;
				@starting-style {
					opacity   : 0;
					transform : translate(-100%);
				}
			}

			&:nth-child(4) {
				transition : transform var(--length-transform) var(--bounce) .8s, opacity var(--length-opacity) ease .8s;
				@starting-style {
					opacity   : 0;
					transform : translate(-100%);
				}
			}

			&:nth-child(5) {
				transition : transform var(--length-transform) var(--bounce) .9s, opacity var(--length-opacity) ease .9s;
				@starting-style {
					opacity   : 0;
					transform : translate(-100%);
				}
			}

			&:nth-child(6) {
				transition : transform var(--length-transform) var(--bounce) 1s, opacity var(--length-opacity) ease 1s;
				@starting-style {
					opacity   : 0;
					transform : translate(-100%);
				}
			}

			&:nth-child(7) {
				transition : transform var(--length-transform) var(--bounce) 1.1s, opacity var(--length-opacity) ease 1.1s;
				@starting-style {
					opacity   : 0;
					transform : translate(-100%);
				}
			}

			&:nth-child(8) {
				transition : transform var(--length-transform) var(--bounce) 1.2s, opacity var(--length-opacity) ease 1.2s;
				@starting-style {
					opacity   : 0;
					transform : translate(-100%);
				}
			}
		}
	}
}

@media (max-width : 768px) {
	.solutions {

		section:not(:first-child) {
			display : block;
		}

		hr {
			display : none;
		}
	}
}

/* END SOLUTIONS */

/* START TECH SUPPORT */

main.tech-support {

	display             : block;
	grid-template-areas :
		'support-01 support-01'
		'support-02 support-03'
		'support-04 support-05'
		'support-06 support-07'
		'support-08 support-09'
		'support-10 support-11';

	section {
		display               : grid;
		grid-template-columns : 1fr 1fr;
		margin-bottom         : 1.75rlh;


		&:nth-child(1) {
			grid-area     : support-01;
			margin-bottom : 1.25rlh;

			h1 {
				margin-bottom : 0;
			}
		}

		&:nth-child(2) {
			grid-area : support-02;
		}

		&:nth-child(3) {
			grid-area : support-03
		}

		&:nth-child(4) {
			grid-area : support-04
		}

		&:nth-child(5) {
			grid-area : support-05
		}

		&:nth-child(6) {
			grid-area : support-06
		}

		&:nth-child(7) {
			grid-area : support-07
		}

		&:nth-child(8) {
			grid-area : support-08
		}

		&:nth-child(9) {
			grid-area : support-09
		}

		&:nth-child(10) {
			grid-area : support-10
		}

		&:nth-child(11) {
			grid-area : support-11
		}
	}
}

@media ( max-width : 768px ) {

	main.tech-support {
		grid-template-areas :
		'support-01'
		'support-02'
		'support-03'
		'support-04'
		'support-05'
		'support-06'
		'support-07'
		'support-08'
		'support-09'
		'support-10'
		'support-11';
		margin    : auto;
		min-width : fit-content;

		section {
			display: block;
		}
	}
}

/* END TECH SUPPORT */

/* START PRICING */

.pricing {

	section {

		a {
			margin-block-start : 1.5rlh;
			margin-block-end   : .3rlh;
		}
	}
}

/* END PRICING */

/* START PORTFOLIO */

.showcase {

	section:first-child {
		margin-block : 0;
	}

	figure {
		display               : grid;
		grid-template-columns : 300px auto;
		grid-gap              : 1.5rlh;
		margin                : 0 0 1rlh 0;
		padding               : 0;

		a {
			border             : 0 solid currentColor;
			border-radius      : var(--border-radius);
			corner-shape       : var(--corner-shape);
			height             : fit-content;
			margin-block-start : 0;
			margin-block-end   : 0;

			img {
				display          : flex;
				margin           : 0 auto;
				justify-content  : center;
				line-break       : anywhere;
				background-color : var(--taupe-mono-01);
				border-radius    : var(--border-radius);
				corner-shape     : var(--corner-shape);
				opacity          : 85%;
			}
		}

		svg {
			opacity : 85%;
		}

		.aspect-ratio-01 { aspect-ratio : 300 / 391; }

		.aspect-ratio-02 { aspect-ratio : 300 / 346; }

		.aspect-ratio-03 { aspect-ratio : 300 / 291;}

		.aspect-ratio-04 { aspect-ratio : 300 / 346.12; }

		.aspect-ratio-05 { aspect-ratio : 300 / 200; }

		.aspect-ratio-06 { aspect-ratio : 300 / 185; }

		.svg {
			max-height       : 200px;
			padding          : 0;
			box-shadow       : none;
			background-color : transparent;
		}

		figcaption {
			display      : flow-root;
			width        : -webkit-fill-available;
			padding      : 0;
			margin       : 0 auto;
			border-width : 0;
			border-style : solid;
			border-color : #ccc;

			a {
				display : inline-block;
				border  : none;
			}
		}

		&.last {
			margin-block-end : 0;
		}
	}
}

.clock {
	position       : relative;
	z-index        : 0;
	display        : block;
	margin         : 0 auto;
	width          : 222px;
	height         : 222px;
	border-radius  : 50%;
	box-shadow     : 0 0 5px 2px #ccc inset;
	outline        : 1px solid #bbb;
	outline-offset : 1px;
}

.clock svg {
	position : absolute;
	z-index  : 0;
	top      : 0;
	left     : 0;
}

.hand-minutes, .hand-hours, .hand-seconds {
	transform : rotate(0deg);
}

.face, .pin, .hand-minutes, .hand-hours, .hand-seconds {
	width  : 222px;
	height : 222px;
}

@media ( max-width : 768px ) {

	.showcase {
		figure {
			display   : block;
			max-width : 400px;
			width     : unset;
			margin    : 0 auto 1rlh auto;
			padding   : 0;

			img {
				max-width : 400px;

				&.svg {
					margin-inline-end   : auto;
					margin-inline-start : auto;
					display             : flex;
				}
			}

			figcaption {
				margin-block-start : .4rem;

				p {
					margin-block-end : 0;
				}
			}

			& > a {
				display       : block;
				border-radius : var(--border-radius)
			}
		}
	}
}

/* END PORTFOLIO */

/* START CONTACT */

.contact {

	section {

		h2 {
			text-align : center;

			&:first-of-type {
				margin-top : 2rlh;
			}
		}

		.button {

			&.phone {
				margin-block-end: 2.5rlh;
			}
		}

		a {
			display            : block;
			margin-block-start : 1rlh;
			margin-block-end   : 0;
			padding            : 0;
			text-align         : center;

			&:hover {

			}
		}

		.button.transparent {
			appearance       : none;
			background-color : transparent;
			background-image : none;
			color            : var(--color-link) !important;
			text-decoration  : underline;
			font-family      : var(--font-family), sans-serif;
			font-weight      : normal;
			font-size        : 1rem;
			border           : none;
			box-shadow       : none;
		}
	}
}

/* END CONTACT */