body {
	margin: 0;
	background-color: #FEFEFC;
}

/* MENU :-) */
.container {
	background-color: black;
	display: flex;
	height:4vh;
	position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  background: black;
	}

.menu {
margin: 8px 10px 0 10px;
	background-color:black;
	color: #FEFEFC;
	font-family:helvetica; 
	text-align:right;
	}

.menuvide {

	background-color: black;
	flex: 1 1 5%;
	}

.nom {
 margin: 8px 10px 0 10px;
 color: #FEFEFC;
 font-family:helvetica; 
 text-align:left;
	}

.acceuil {
  position: relative;
  z-index: 1;
}

/* nom + photo :-) */
.hero-nom {
  font-family: helvetica;
  font-weight: 900;
  font-size: 10vw;
  line-height: 0.8;
  letter-spacing: -0.05em;
  color: black;
}

.hero {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100vh;
  padding: 4vh 0 0 40px; 
  box-sizing: border-box;
  overflow: hidden;
}

.hero-img {
  height: 100vh;
  display: flex;
  align-items: flex-end;
  margin-left: auto;
  flex-shrink: 0;
    margin-top: 20vh;
}

.hero-img img {
  height: 70%;
  width: auto;
  display: block;
}

.about {
font-size: 15px;
font-family: helvetica;
margin: 50px 0 200px 100px;
}

/* FOOTER :-) */
.footer {
  width: 100%;
  background-color: black;
  display: flex;
  flex-direction: column;
  height: 40vh;
  box-sizing: border-box;
  padding: 10px 0 0 0;
  overflow: hidden;
}

.footer-top {
  display: flex;
  align-items: flex-start;
  width: 100%;
  padding: 0 0 0 10px;
  gap: 40px;
}

.footer-link {
  color: #FEFEFC;
  font-family: helvetica;
  font-size: 15px;
}

.footer-copyright {
  color: #FEFEFC;
  font-family: helvetica;
  font-size: 15px;
  margin-left: auto;
  margin-right: 15px;
}

.footer-bottom {
  display: flex;
  align-items: flex-end;
  margin: auto 0 0 0;
  width: 100%;
}

.footer-big-text {
  font-family: helvetica;
  font-weight: 900;
  color: #FEFEFC;
  white-space: nowrap;
  line-height: 0.85;
  font-size: 10vw;
  margin: 0;
  padding: 0 0 0 10px;
}

.footer a {
  color: #FEFEFC;
  text-decoration: none;
}

.footer a:visited {
  color: #FEFEFC;
}

.footer a:hover {
  text-decoration: underline;
  color: #FEFEFC;
}


	
/* petits trucs :-) */

hr {
	border: none;
	overflow:hidden;
	border-top: 1px solid black;
	background-color: black;
	padding: 0;
	margin: 0;
	}


.menu a{
  color: #FEFEFC;
  text-decoration: none;
  font-family: helvetica;
  }
  
a:hover {
  text-decoration: underline;
  color:#FEFEFC;
}

.projet a{
  color: black;
  text-decoration: none;
  font-family: helvetica;
  }

.projet a:hover {
  text-decoration: none;
  color:#898989;
}

.cell a{
  color: black;
  text-decoration: none;
  font-family: helvetica;
  }

.cell a:hover {
  text-decoration: underline;
  color:black;
}

.footer a {
  color: #FEFEFC;
  text-decoration: none;
}

.footer a:hover {
  text-decoration: underline;
  color: #FEFEFC;
}

.scramble {
    cursor: pointer;
    user-select: none;
    /* mix-blend-mode: difference; */
  }