/* DOCTOR INTRODUCTION */

#top {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  min-height: 100vh;
  max-width: 1000px;
  width: 100%;
  margin: 0 auto;
  flex-wrap: wrap;
  position: relative;
}

#top img {
  width: 90%;
  max-width: 250px;
  border-radius: 7px;
}

#top > div {
  width: 90%;
  max-width: 350px;
  text-align: justify;
  color: #254E70;
}

#top h1 {
  color: #C13874;
}

/* SCROLL NOTICE */

#scroll-notice {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: absolute;
  bottom: 0;
  margin-bottom: 2vh;
  animation: floating 3s infinite;
}

/* SKILLS */

#skills {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  min-height: calc(100vh - 160px);
  margin: 0 auto;
  color: #254E70;
  padding-bottom: 80px;
  width: 100%;
}

#skills img {
  width: 90%;
  max-width: 450px;
  border-radius: 7px;
  margin: auto;
  opacity: 0.9;
}

#skills > div:first-child {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: flex-start;
  flex-wrap: wrap;
  width: 100%;
  max-width: 1400px;
}

#skills ul {
  list-style: none;
  padding: 0;
}

#skills li {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 90%;
  max-width: 350px;
  text-align: justify;
  font-weight: 400;
  margin: 0 auto;
}

#skills h2 {
  padding-left: 45px;
  margin-top: 0;
  margin-bottom: 25px;
  font-weight: 500;
}

#skills p {
  margin: 10px 0;
}

#skills > div:first-child i {
  margin: 0 15px 0 0;
}

#formation i {
  color: #41A041;
  font-size: 30px;
}

#competences i {
  color:#4F67CC;
  font-size: 30px;
}

#formation, #competences {
  margin: 30px;
}

/* GALLERY PART */

#gallery > div {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  color: #254E70;
}

#gallery p {
  width: 90%;
  max-width: 300px;
  text-align: justify;
}

#gallery img {
  width: 90%;
  border-radius: 7px;
  margin: 40px;
}

.vertic {
  max-width: 300px;
}

.horiz {
  max-width: 500px
}

@media screen and (max-width: 760px) {
  #top {
    margin-top: 70px;
    flex-direction: column;
  }

  #top > div {
    margin: 30px 0;
  }

  #top img {
    margin-bottom: 30px;
  }

  #top h1 {
    margin: 30px 0;
  }

  #scroll-notice {
    display: none;
  }

  #skills h2 {
    margin: 0;
  }

  #competences, #formation {
    margin: 50px auto 0px auto;
    width: 100%;
  }
  
  #gallery p {
    max-width: 500px;
  }
}