@CHARSET "UTF-8";

body, html {margin:0; padding:0; background:#1d3f40; font-family: "inter-tight-variable", sans-serif; font-variation-settings: "wght" 400;}
body {font-family:"regular", sans-serif; color:#ffffff; background:#1d3f40; overflow:hidden;}
.container h2, body {font-size:1.6rem; font-weight:400; line-height:1.2;}
.container h2 {margin:0;}

a {color:#a58561; text-decoration:none; transition:.3s;}
.underline a {position:relative; white-space: nowrap;}
.underline a:before {content:''; position:absolute; bottom:-7px; left:0; width:100%; min-height:1px; height:1px; transform-origin:right; transform:scaleX(0); 
transition:transform .75s cubic-bezier(0.165, 0.84, 0.44, 1); background-color:#fff;}
.underline a:hover::before {transform-origin:left; transform:scaleX(1);}
.underline a:hover {color:#fff;}
:focus, :hover {-webkit-appearance: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}

.content {width:100vw; height:100vh; top:0; left:0; position:fixed; z-index:50; background:#1d3f40; display:flex; flex-direction:column; align-items: center; justify-content: center;}

.logo {top:6vh; position:absolute; opacity:0; transform:translateY(5rem); transition:opacity 1s cubic-bezier(.215,.61,.355,1), transform 1s cubic-bezier(.215,.61,.355,1);}
.ready .logo {opacity:1; transform:none;}
.logo svg {width:200px;}
.st0{fill:#ffffff;}
.st1{fill:#a58561;}

.container {width:60%; padding:5vh 8vw; display:flex; flex-direction:column;}
.container p {margin:1.5rem 0;}
.container h1 {color:#b9873c;}
.container h1, .container p:nth-child(1), .container p:nth-child(2), .container li:nth-child(1), .container li:nth-child(2), .container li:nth-child(3), .coordonnees, .follow, .marsrouge
{opacity:0; transform:translateY(5rem);
transition:opacity 1s cubic-bezier(.215,.61,.355,1), transform 1s cubic-bezier(.215,.61,.355,1);}
.ready .container h1, .ready .container p:nth-child(1), .ready .container p:nth-child(2), .ready .container li:nth-child(1), .ready .container li:nth-child(2), .ready .container li:nth-child(3),
.ready .follow, .ready .marsrouge, .ready .coordonnees {opacity:1; transform:none;}
.ready .container h1 {transition-delay:.1s;}
.ready .container li:nth-child(1) {transition-delay:.12s;}
.ready .container li:nth-child(2) {transition-delay:.13s;}
.ready .container li:nth-child(3) {transition-delay:.14s;}
.coordonnees {transition-delay:.15s;}
.ready .follow {transition-delay:.16s;}
.ready .marsrouge {transition-delay:.18s;}

ul, p {padding:0; margin:0;}
li {list-style: none; margin-bottom:0;}
ul {display:flex; flex-direction:column; grid-gap:1rem;}

.colonne {display:flex; flex-direction:column; align-items: center; text-align: center; grid-gap: 5vw;}

.coordonnees {display:flex; grid-gap:2rem;}
.follow {display:flex; grid-gap:2rem; font-size:70%;}

.marsrouge {position:absolute; bottom:2rem; right:2rem;}
.marsrouge svg {fill:#a58561; transition:.3s; width: 30px;}
.marsrouge:hover svg {fill:#fff;}


@media screen and (max-width:1290px) {
	
	.logo  {position:relative; top:auto;}
	.logo svg {width:150px;}
	body {overflow-y:auto;}
	body, .container h1 {font-size:1.5rem!important;}
	h1 {padding:0; margin:0;}
	.content {height:auto; position: relative; background:none; padding:8vw 0; grid-gap:7vw; justify-content: flex-start;}
	.container {width:70%; padding:0; grid-gap: 3vw;}
	.container p {margin:2vw 0;}
	.container p:first-child {margin:0 0 2vw 0;}
	.container p:last-child {margin:2vw 0 0 0;}
	.marsrouge {position: relative; bottom: auto; right: auto;}
	
}

@media screen and (max-width:890px) {

	.container h2, body {font-size:1.3rem!important;}
	.content {padding:3rem; grid-gap:3.5rem; width:calc(100% - 6rem);}
	.container {width:100%; grid-gap: 2rem;}
	.coordonnees {flex-direction:column; align-items: center; grid-gap:1rem;}
	.container p {margin: 1.5rem 0;}
	.container p:first-child {margin:0 0 2rem 0;}
	.colonne {justify-content: center; flex-direction: column; grid-gap:3rem; text-align: center; align-items: center;}
	
}