/* CSS Document */


/******************************* Base *******************************/

:root {
	--coul-white: #FFFFFF;
	--coul-black: #000000;
	--coul-red: #d90429;
	--coul-grey: #f2f2f2;
	--coul-green: #04D7B4;
	
	--gap : 10px;
	--gap2: calc(var(--gap) * 2);
	--gap4: calc(var(--gap) * 4);
	--gap8: calc(var(--gap) * 8);
	--gap16: calc(var(--gap) * 16);
	
	/* Font size */
	--fsize1: 16px;
	--fsize2: 20px;
	--fsize3: 32px;
	--fsize4: 56px;
	--fsize5: 128px;
	--fsizemin : max(0.75em, 12px);
	
	--fontfam : "Oswald";
	
	--transitionA : 0.2s;
	--transitionB : 1s;
	
}

::selection {
    background-color: var(--coul-red);
}

* {
	box-sizing: border-box;
}

html {
	overflow-x: hidden;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	font-family: "Libre Baskerville" , sans-serif;
	font-style: italic;
	font-size: var(--fsize1);
	background: linear-gradient(45deg, rgba(255,255,255,0.6), rgba(255,255,255,0.6)), url("/assets/img/background.jpg");
	color: var(--coul-black);
	overflow-x: hidden;
}

main {
	display: flex;
	padding: var(--gap4);
	padding-bottom: var(--gap16);
	flex-direction: column;
	grid-gap: var(--gap16);
	justify-content: center;
	align-items: center;
	width: 100%;
}

a {
	transition: color var(--transitionA);
	text-decoration: none;
	color: inherit;
}

h1, h2 {
	margin: 0;
}

h1 {
	font-weight: bold;
	font-family: var(--fontfam);
	font-size: var(--fsize3);
	color: var(--coul-red);
	margin-bottom: var(--gap4);
	font-style: normal;
}

h2 {
	font-weight: normal;
	font-size: var(--fsize5);
	font-style: normal;
}

p {
	margin: 0;
}

hr {
    width: 100%;
    border-color: var(--coul-green);
}

/* Maintenance */

#maintenance-page {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
}

/* Page 404 */

#page-404 {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	grid-gap: var(--gap2);
	min-height: 100vh;
	background-color: var(--coul-);
	color: var(--coul-);
	text-align: center;
	padding: var(--gap2);
}

#page-404 h1 {
	font-size: var(--fsize2);
	margin: 0;
	color: var(--coul-);
}

.subjective-404 {
	width: 100%;
	max-width: 600px;
}

/* Alerts */

.alerts-container {
	position: fixed;
	bottom: var(--gap2);
	left: 50%;
	transform: translateX(-50%);
	z-index: 5;
	pointer-events: none;
	animation: disappear 5s forwards;
	animation-delay: 5s;
}

@keyframes disappear {
	0% { opacity: 1;}
	10% { opacity: 0;}
	100% { opacity: 0; display: none;}
}

.success {
	padding: var(--gap4);
	background-color: var(--coul-green);
	color: var(--coul-white);
}

.error {
	padding: var(--gap4);
	background-color: var(--coul-red);
	color: var(--coul-white);
}

/* Nav */

#nav-container {
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	grid-gap: var(--gap8);
}

nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
}

#menu-hamburger {
	display: flex;
	flex-direction: column;
	grid-gap: 5px;
	cursor: pointer;
}

#menu-hamburger span {
	width: 65px;
	height: 10px;
	background-color: var(--coul-black);
	transition: var(--transitionA);
	transform: skew(-10deg);
}

#menu-hamburger:hover span {
	background-color: var(--coul-red);
}

#menu-hamburger span:nth-child(2) {
	width: 55px;
}

#menu-hamburger span:nth-child(3) {
	width: 45px;
}

#menu {
	position: fixed;
	height: 100vh;
	width: 100vw;
	top: 0;
	left: -100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	grid-gap: var(--gap2);
	background-color: var(--coul-white);
	z-index: 100;
	pointer-events: none;
	opacity: 0;
	transition: var(--transitionA);
	font-size: var(--fsize3);
}

#menu .logo {
	max-width: 200px;
	filter: invert(13%) sepia(74%) saturate(7239%) hue-rotate(345deg) brightness(84%) contrast(102%);
	margin-bottom: var(--gap4);
}

#menu a {
	transition: var(--transitionA);
}

#menu a:hover {
	color: var(--coul-red);
}

#menu-closer {
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: var(--gap4);
	max-width: 60px;
	cursor: pointer;
	transition: var(--transitionA);
	width: 40px;
	height: 40px;
}

#menu-closer span {
	height: 10px;
	width: 60px;
	background-color: var(--coul-black);
	display: block;
	transition: var(--transitionA);
}

#menu-closer:hover span {
	background-color: var(--coul-red);
}

#menu-closer span:nth-of-type(1) {
	position: absolute;
	transform-origin: center;
	transform: rotate(45deg) skew(-10deg);
}

#menu-closer span:nth-of-type(2) {
	position: absolute;
	transform-origin: center;
	transform: rotate(-45deg) skew(-10deg);
}

#menu.menu-visible {
	opacity: 1;
	left: 0;
	pointer-events: auto;
}

#social-medias-container {
	display: flex;
	grid-gap: var(--gap2);
	font-size: var(--fsize3);
}

#social-medias-container a {
	transition: var(--transitionA);
}

#social-medias-container a:hover {
	color: var(--coul-red);
}

.logo {
	max-width: 100%;
	width: 800px;
    max-height: 325px;
    object-fit: cover;
}

/* Index */

.ftf {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	grid-gap: var(--gap4);
	width: 100%;
	position: relative;
}

.ftf::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	height: 80vh;
	width: 100vh;
	transform: translateX(-20%) skew(10deg, 10deg);
	border: solid 50px var(--coul-red);
	mix-blend-mode: exclusion;
	z-index: 1;
	animation: unblur 1s;
	animation-timeline: view();
	animation-range: normal 60%;
	transition: 0.1s;
}

@keyframes unblur {
	from {filter:blur(20px); opacity: 0;}
	to {filter:blur(0px); opacity: 1;}
}

.ftf-text-container {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	grid-gap: var(--gap2);
	max-width: 100%;
	width: 900px;
	flex-grow: 1;
}

.ftf-title {
	text-align: right;
	text-transform: uppercase;
	font-weight: bold;
	font-family: var(--fontfam);
	font-size: 10vw;
}

.ftf-text {
	display: flex;
	flex-direction: column;
	grid-gap: var(--gap4);
	text-align: justify;
	max-width: 600px;
	margin-left: auto;
	margin-right: var(--gap8);
}

#coordinates {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	font-size: var(--fsize2);
	grid-gap: var(--gap);
}

.ftf-img {
	height: 80vh;
	width: 30vw;
	filter: grayscale(1);
	object-fit: cover;
	flex: 1;
	z-index: 1;
}

.instagram-feed {
	max-width: 1200px;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-gap: var(--gap);
	margin: auto;
}

.instagram-thumb {
	aspect-ratio: 0.8 / 1;
	position: relative;
	display: flex;
}

.instagram-post-details {
	position: absolute;
	left: 0;
	top: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	grid-gap: var(--gap);
	width: 100%;
	height: 100%;
	color: var(--coul-white);
	text-align: center;
	pointer-events: none;
	opacity: 0;
	transition: var(--transitionA);
	z-index: 1;
}

.instagram-thumb:hover .instagram-post-details {
	opacity: 1;
}

.instagram-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	aspect-ratio: 0.8 / 1;
	filter: grayscale(1);
	transition: var(--transitionA);
}

.instagram-thumb:hover img{
	filter: grayscale(0);
}

.cards {
	width: 100%;
	display: flex;
	position: relative;
	justify-content: space-evenly;
	flex-wrap: wrap;
}

.cards::before {
	content: "";
	position: absolute;
	right: 0;
	top: 0;
	height: 100vh;
	width: 100vh;
	transform: translateX(-20%) rotate(70deg) skew(5deg, 140deg);
	border: solid 50px var(--coul-red);
	mix-blend-mode: exclusion;
	z-index: 1;
	animation: slide-left 1s;
	animation-timeline: view();
	animation-range: entry;
	transition: 0.1s;
}

@keyframes slide-left {
	from {right: -100%; opacity: 0;}
	to {right: 0; opacity: 1;}
}

.cards h2 {
	position: absolute;
	left: 50%;
	top: 10%;
	transform: translateX(-50%);
	font-size: 50vw;
	font-family: var(--fontfam);
	font-weight: bold;
	text-transform: uppercase;
	z-index: -1;
	line-height: 690px;
	color: #f2f2f2;
}

.cards h3 {
	transform: rotate(-180deg);
	font-size: max(10vw, var(--fsize5));
	font-family: var(--fontfam);
	font-weight: bold;
	text-transform: uppercase;
	line-height: 390px;
	writing-mode: tb-rl;
	margin: 0;
	font-style: normal;
	text-align: center;
	white-space: nowrap;
}

.card {
	width: 400px;
	display: flex;
	flex-direction: column;
	grid-gap: var(--gap4);
}

.card:nth-of-type(2) {
	margin-top: var(--gap16);
}

.card img {
	width: 100%;
	height: 600px;
	object-fit: cover;
}

#contact h2 {
	font-size: var(--fsize3);
}

#contact h3 {
	font-size: 8vw;
	font-family: var(--fontfam);
	font-style: normal;
	text-transform: uppercase;
	margin: 0;
}

.two-cols {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: var(--gap2);
}

#contact {
	display: flex;
	grid-gap: var(--gap8);
	background-color: var(--coul-black);
	padding: var(--gap8);
	color: var(--coul-white);
	flex-wrap: wrap;
}

.contact-title {
	flex:1;
	min-width: min(600px, 100%);
	display: flex;
	flex-direction: column;
	grid-gap: var(--gap2);
} 

#contact video {
	height: 200px;
	width: 200px;
	object-fit: cover;
}

#contact-form {
	display: flex;
	flex-direction: column;
	grid-gap: var(--gap);
	flex: 1;
	min-width: min(600px, 100%);
}

input, textarea {
	border: none;
	padding: var(--gap2) var(--gap);
	font-family: var(--fontfam);
	font-size: var(--fsize2);
	background-color: transparent;
	border-bottom: solid 1px var(--coul-white);
	color: var(--coul-white);
	border-radius: 0px;
	width: 100%;
}

button[type="submit"] {
	padding: var(--gap);
	background-color: var(--coul-green);
	border: none;
	color: var(--coul-white);
	font-family: var(--fontfam);
	font-size: var(--fsize2);
	cursor: pointer;
	text-transform: uppercase;
	border-radius: 5px;
}

input[name="middle_name"] {
	height: 0 !important;
	font-size: 0 !important;
	padding: 0 !important;
	border: none !important;
	margin: 0 !important;
	width: 0;
}

.outline {
	background-color: var(--coul-red);
}

.center {
	text-align: center;
}

.contact-phone {
	text-align: center;
	font-size: var(--fsize2);
	display: flex;
	grid-gap: var(--gap);
	align-items: center;
	margin: auto;
}

.contact-phone:hover {
	color: var(--coul-red);
}

/* Footer */ 

footer {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: var(--gap4);
	text-align: center;
	grid-gap: var(--gap2);
	font-size: var(--fsize2);
	background-color: var(--coul-black);
	color: var(--coul-white);
	z-index: 1;
	overflow: hidden;
}