@font-face {
	font-family: "dirtyline";
	src: url("../medias/font/Dirtyline-36daysoftype.woff2") format("woff2");
}
@font-face {
	font-family: "condate-light";
	src: url("../medias/font/Condate-Light.woff2") format("woff2");
}
@font-face {
	font-family: "condate-medium";
	src: url("../medias/font/Condate-Medium.woff2") format("woff2");
}
@font-face {
	font-family: "dmsans-regular";
	src: url("../medias/font/DMSans-Regular.ttf") format("ttf");
}
@font-face {
	font-family: "dmsans-bold";
	src: url("../medias/font/DMSans-Bold.ttf") format("ttf");
}

:root {
	--noir: #000;
	--white: #fff;
	--transition-speed: 0.3s;
}

body {
	background: var(--noir);
	color: var(--white);
	font-family: "dmsans-regular", sans-serif;
	font-size: 16px;
	width: 100vw;
	position: relative;
}

section {
	padding: 0 300px;
}

/* -------------- Fonts -------------- */

a {
	text-decoration: none;
	color: var(--color-white);
}

h1 {
	font-family: "tilda-sans-semi", sans-serif;
	font-size: 4rem;
	font-style: normal;
	line-height: normal;
	text-transform: uppercase;
}

h2 {
	font-family: "Playfair Display", serif;
	font-size: 2rem;
	font-style: normal;
	font-weight: 500;
	line-height: normal;
}

h3 {
	font-family: "tilda-sans-semi", sans-serif;
	font-size: 1.5rem;
	font-style: normal;
	text-transform: uppercase;
}

h4 {
	font-family: "Sacramento", cursive;
	font-size: 1.5rem;
	font-style: normal;
	font-weight: 400;
	color: var(--background-color);
	border-radius: 30px;
	border: 2px solid var(--background-color);
	width: fit-content;
	height: 35px;
	padding: 10px 15px;
	text-transform: lowercase;
	-webkit-text-stroke-width: 0.5px;
	-webkit-text-stroke-color: var(--background-color);
}

@media screen and (max-width: 768px) {
	body {
		font-size: 0.8rem;
	}
	h1 {
		font-size: 2.5rem;
	}

	h2 {
		font-size: 1.5rem;
	}
}

/* -------------- Header -------------- */

header {
	
}

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

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

/* -------------- Footer -------------- */
footer {
	
}



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

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

/* -------------- Image -------------- */
.image-container {
	width: 500px;
	height: 500px;
}

.fit-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}