.Home {
    padding-top: 2rem;
    background-color: #f1d472;;
}

.Profil {
    padding-top: 2rem;
    background-color: #f7fbd3;
}
.Project1 {
  padding-top: 2rem;
  background-image:url('https://media.giphy.com/avatars/HeyAutoHQ/DgfrJNR8oUyv.gif');
  background-size:40%;
  background-repeat: no-repeat  ;
  background-attachment: fixed;
  height:100%;
  width:100%;
  position: flex; 
  top: 0; 
  right: 0; 
  bottom: 0; 
  left: 0;
}
.Project2 {
  padding-top: 2rem;
  background-image:url('https://i.gifer.com/Ow1T.gif');
  background-size:100%;
  background-repeat: repeat-y;
  background-attachment: fixed;
  height:100%;
  width:100%;
  position: flex; 
  top: 0; 
  right: 0; 
  bottom: 0; 
  left: 0;
}
.Project3 {
  padding-top: 2rem;
  background-image:url('https://i.pinimg.com/originals/d4/c8/21/d4c821514c1be5f664c85060483f8258.gif');
  background-size:100%;
  background-repeat: repeat-y;
  background-attachment: fixed;
  height:100%;
  width:100%;
  position: flex; 
  top: 0; 
  right: 0; 
  bottom: 0; 
  left: 0;
}
.Project4 {
  padding-top: 2rem;
  background-image:url('https://i.pinimg.com/originals/f2/c2/bc/f2c2bc9a72f62f8e4bc521dd28400839.gif');
  background-size:100%;
  background-repeat: repeat-y;
  background-attachment: fixed;
  height:100%;
  width:100%;
  position: flex; 
  top: 0; 
  right: 0; 
  bottom: 0; 
  left: 0;
}
.Project5 {
  padding-top: 2rem;
  background-image:url('https://i.pinimg.com/originals/ab/53/c3/ab53c3258caa5c3c691b4de46cb5ad88.gif');
  background-size:50%;
  background-repeat: repeat-y;
  background-attachment: fixed;
  height:100%;
  width:100%;
  position: flex; 
  top: 0; 
  right: 0; 
  bottom: 0; 
  left: 0;
}


.skills {
    padding-top: 2rem;
    background-color: #ebfdea;
}

.Project {
    padding-top: 2rem;
    background-color: #ffffff;
}

.contact {
    padding-top: 2rem;
    background-color: #f7fbd3;
}


.display {
    padding-top: 2rem;
    display: flex;
    justify-content :center;
}

.circle {
    border-radius: 50%; height:30px; width: 30px; 
    margin-right: 20px; cursor: pointer;
}

.sidenav {
    width: 50px;
    position: fixed;
    z-index: 1;
    /* top: 20px;
    left: 10px; */
    background: #eee;
    overflow-x: hidden;
    /* padding: 8px 0; */
  }
  
  .sidenav a {
    padding: 6px 8px 6px 16px;
    text-decoration: none;
    font-size: 25px;
    color: #2196F3;
    display: block;
  }
  
  .sidenav a:hover {
    color: #064579;
  }
  
  .main {
    margin-left: 10px; /* Same width as the sidebar + left position in px */
    font-size: 28px; /* Increased text to enable scrolling */
    padding: 0px 10px;
  }
  
  @media screen and (max-height: 450px) {
    .sidenav {padding-top: 15px;}
    .sidenav a {font-size: 18px;}
  }