@import "reset.css";
body {
  display: flex;
  font-family: Arial, serif;
  background-color: #FAFAF9;
  height: 100vh;
}
body main {
  display: flex;
  flex-direction: row;
}
body main #sidebar {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: start;
  height: 100%;
}
body main #sidebar nav {
  display: flex;
  flex-direction: column;
  border-right: 1px solid #E5E5E5;
  background: #FEFEFE;
  justify-content: space-between;
  align-items: center;
  height: 100vh;
  width: 80px;
  padding: 32px 15.5px;
}
body main #sidebar nav .top {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 48px;
}
body main #sidebar nav .top .logo {
  display: flex;
  flex-direction: column;
}
body main #sidebar nav .top .logo li {
  display: flex;
  list-style: none;
  justify-content: center;
  align-items: center;
}
body main #sidebar nav .top .logo li p {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 48px;
  width: 48px;
  border-radius: 9999px;
  background: #0A0A0A;
  color: white;
  font-size: 18px;
  text-decoration: none;
}
body main #sidebar nav .top ul {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
body main #sidebar nav .top ul li {
  display: flex;
  flex-direction: column;
}
body main #sidebar nav .top ul li #active {
  display: flex;
  background: #000;
}
body main #sidebar nav .top ul li img {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 14px;
  border-radius: 14px;
}
body main #sidebar nav .top ul li:hover {
  cursor: pointer;
}
body main #sidebar nav li {
  display: flex;
  list-style: none;
  justify-content: center;
  align-items: center;
}
body main #sidebar nav li p {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 48px;
  width: 48px;
  border-radius: 9999px;
  background: #0A0A0A;
  color: white;
  font-size: 18px;
  text-decoration: none;
}
body main section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
}
body main section .mainContent {
  display: flex;
  flex-direction: column;
  align-items: start;
  margin: 78px 166.5px;
  height: 85%;
  width: 85%;
}
body main section .mainContent .informations {
  display: flex;
  flex-direction: column;
  gap: 40px;
}
body main section .mainContent .informations p {
  color: #8A8A8A;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 4.2px;
}
body main section .mainContent .informations h1 {
  color: #0A0A0A;
  font-size: 128px;
  font-style: normal;
  font-weight: 400;
}
body main section .mainContent .informations .devise {
  display: flex;
  flex-direction: column;
  width: 55%;
  margin-bottom: 50px;
}
body main section .mainContent .informations .devise p {
  color: #6A6A6A;
  font-size: 24px;
  font-style: normal;
  letter-spacing: 1px;
}
body main section .mainContent .discover {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  background: #0A0A0A;
  border-radius: 9999px;
  width: 230px;
  padding: 16px 32px;
  gap: 12px;
}
body main section .mainContent .discover p {
  color: #FEFEFE;
  text-align: center;
  font-size: 18px;
}
body main section .mainContent .discover p img {
  display: flex;
  width: 20px;
  height: 20px;
}
body main section .mainContent .portfolio {
  display: flex;
  flex-direction: column;
  margin-top: 48px;
}
body main section .mainContent .portfolio h1 {
  color: #0A0A0A;
  font-size: 60px;
  font-style: normal;
  font-weight: 400;
}
body main section .mainContent .portfolio p {
  color: #6A6A6A;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
}
body main section .photo {
  display: flex;
  flex-wrap: wrap;
  height: 85%;
  width: 85%;
  gap: 32px;
}
body main section .photo img {
  display: flex;
  width: 607px;
  height: 455.25px;
  border-radius: 16px;
  filter: grayscale(100%);
  transition: all ease-in-out 300ms;
}
body main section .photo img:hover {
  filter: grayscale(0);
  scale: 1.03;
}

/*# sourceMappingURL=style.css.map */