@font-face {
    font-family: 'Helvetica';
    src: url('/font/Helvetica.ttf');
}

#menu {
    display: flex;
    justify-content: center;
    align-items: center;
}

#menu a {
	outline: none;
  	text-decoration: none;
  	line-height: 3;
  	color: #FFFFFF;
    margin: 0 2rem;
    font-size: 140%;
    transition: color 0.8s ease;
}

#menu a:hover {
    color: #c9f027;
}

body {
    margin: 0;
    font-family: Helvetica;
    font-size: 18px;
}

header {
    background: #282e26;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
}

header > #menu {
  list-style-type: none;
  padding-left: 0;
  margin-top: 0;
  justify-content: space-around;
  box-shadow: 5px 5px 15px black;
}

#map {
    justify-content: center;
    display: flex;
}

main {
    padding-top: 90px;
    margin: 0 1rem;
}

.moi {
    display: flex;
    align-items: center;
    gap: 30px;
    background-color: #282e26;
    color: #FFFFFF;
    padding: 20px;
    width: 700px;
    box-shadow: 5px 5px 15px black;
    border-radius: 1rem;
    line-height: 2;
}

#experiences {
    align-items: center;
    gap: 30px;
    background-color: #282e26;
    color: #FFFFFF;
    padding: 20px;
    box-shadow: 5px 5px 15px black;
    border-radius: 2rem;
    line-height: 1.5;
    margin: 50px 0 50px 0;
    width: 1500px;
}

#competences, #formation {
    align-items: center;
    gap: 30px;
    background-color: #282e26;
    color: #FFFFFF;
    padding: 20px;
    box-shadow: 5px 5px 15px black;
    border-radius: 2rem;
    line-height: 1.5;
    margin: 50px 0 50px auto;
    width: 1400px;
}

.moi img {
    width: 150px !important;
    height: 150px;
    object-fit: cover;
    border: 1rem;
    border-radius: 1rem;
}

#nom {
    flex: 1;
}

.to-top{
	color:white;
	padding-top:1.8em;
	display:inline-block;
	position:relative;
	border-color:white;
	text-decoration:none;
	transition:all 0.8s ease-out;
}
.to-top:before{
	content:'▲';
	font-size:1em;
	position:absolute;
	top:0;
	left:50%;
	margin-left:-.7em;
	border:solid .13em white;
	border-radius:10em;
	width:1.4em;
	height:1.4em;
	line-height:1.3em;
	border-color:inherit;
	transition:transform .5s ease-in;
}
.to-top:hover{
	color: #c9f027;
	border-color: #c9f027;
}

.to-top:hover:before{
	transform: rotate(360deg);
}

footer {
    background: #4f4f4f;
    box-shadow: 5px 5px 15px black;
    text-align: center;
}

.uvsq img {
    margin: 10px;
}

.instagram {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  align-items: start;
}

.video-container {
  display: flex;
  justify-content: center;
}