@import url('https://necolas.github.io/normalize.css/8.0.1/normalize.css');
	@import url('https://fonts.googleapis.com/css2?family=Gruppo&family=Syncopate:wght@400;700&display=swap');

	:root {
		--orange: #f60;
		--teal: #088;
		--blair: #888;
		--white: #ddd;
		--text: #222;
		font-family: 'Gruppo';
	}

	.grey {
		fill: #666;
	}

	body {
		background: #444;
		min-height: 90vh
	}

	header,
	main,
	footer {
		position: relative;
		margin: auto;
		max-width: 1680px;
	}

	main {padding-top: 1rem;}

	main>div {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		padding: 0 2.5rem
	}

	main h1, main h2 {
		grid-column: 1 / 4;
		border-bottom: 1px solid var(--teal);
		color: var(--orange);
		font-family: 'Syncopate', cursive;
		font-weight: 600;
		font-size: 1.8rem;
		text-shadow: 2px 2px 0 var(--teal), 2px -1px 0 var(--teal);
		text-shadow: none;
		padding-left: 5rem;
		text-align: left;
		margin: 0;
		transform: skewX(-12deg)
	}
	main h2 {
		color: var(--teal);
		border-bottom: 1px solid var(--orange);
		text-shadow: none;
		font-size: 1.4rem;
	}

	main p {
		padding: 2rem;
		text-align: justify;
		color: var(--white);
		font-size: 1.2rem;
		font-weight: 600;
	}

	footer *{
		margin: 1em;
		display: inline-block;
		padding:0;
		color: var(--white);
	}

	.logo {
		display: grid;
		grid-gap: 0;
		grid-template-columns: max-content;
		position: relative;
		height: 12vw;
		max-height: 8rem;
		min-height: 6rem;
		width: auto;
		background-image: linear-gradient(#555 65%, rgba(0, 0, 0, 0) 65%);
		max-width: 1600px;
		margin: auto;
	}

	.logo svg {
		transition-duration: 500ms;
		transition-property: clip-path, height, left, transform
	}

	.infographie {
		fill: var(--orange)
	}

	.impression3d {
		fill: var(--blair)
	}

	.informatique {
		fill: var(--teal)
	}


	.logo a svg image {
		opacity: 0.9
	}

	.logo a svg:hover image {
		opacity: 1
	}

	.logo svg:where(.informatique, .infographie, .impression3d) {
		transform: skewX(-10deg);
		height: 100%;
		position: absolute;
		left: min(max(-1rem, -1.2vw), -0.6rem);
		border-radius: 0 0 0.3rem 0
	}

	.logo a {
		position: absolute;
		height: 100%;
		width: max-content
	}

	.logo a svg.third {
		left: max(min(18.5rem, 27.5vw), 13.8rem);
		height: 80%
	}

	.logo a svg.second {
		left: max(min(10.5rem, 16vw), 8rem);
		height: 80%
	}

	.logo a svg:hover {
		left: inherit(left) - 10em ;
		height: 95%
	}


	.logo svg {
		box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.5)
	}

	.buttons {
		display: grid;
		grid-auto-flow: row;
		grid-template-columns: 1fr 1fr 1fr 1fr;
		width: max(min(16rem, 23vw), 10rem);
		position: absolute;
		top: 6rem;
		transform: skewX(-10deg);
		z-index: 100;
	}

	.buttons a {
		background: var(--white);
		position: relative;
		vertical-align: middle;
		text-align: center;
		border-radius: 0.2rem;
		box-shadow: 0.2rem 0.2rem 0.5rem rgba(0, 0, 0, 0.5);
		margin: max(min(0.35rem, 0.4vw), 0.2rem);
		line-height: 0.6;
		transition-duration: 0.3s
	}

	.buttons a:first-child {
		background: var(--white);
		color: var(--orange)
	}

	.buttons a:last-child {
		background: var(--orange);
		color: var(--white);
	}

	.buttons a:hover {
		margin: 0;
		transform: rotate(3deg);
	}

	.QR_code {
		opacity: 1;
		margin: auto 1rem auto auto;
		width: 5rem;
		height: 5rem
	}

	.QR_code:hover {
		height: 110%
	}

	.QR_bg {
		fill: var(--teal) !important
	}

	.QR_sync,
	.QR_path {
		fill: var(--white);;
	}

	@media screen and (min-width:801px) {
		.buttons {
			right: 1rem;
			top: 0.5rem
		}

		.buttons a:nth-child(2) {
			order: 1
		}

		.buttons a:nth-child(4) {
			order: 2
		}
	}

	@media screen and (max-width:1024px) {
		main h1 {
			grid-column: 1 / 3
		}

		main>div {
			grid-template-columns: 1fr 1fr
		}
	}

	@media screen and (max-width:800px) {
		main h1 {
			grid-column: 1
		}

		main>div {
			grid-template-columns: 1fr
		}

		main p {
			padding: 1rem;

			.logo {
				background-image: linear-gradient(#ccc 91%, rgba(0, 0, 0, 0) 91%);
			}

			.buttons {
				left: max(min(27rem, 40vw), 20rem);
				grid-template-columns: 1fr 1fr;
				top: 10rem;
				width: 5rem
			}
		}
	}