/* General Settings - Begin */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none;
}

:root {
  font-size: 16px;
  font-family: 'Open Sans';
  --text-primary: #b6b6b6;
  --text-secondary: #cacaca;
  --bg-primary: #4e4e4e;
  --bg-secondary: #141418;
}


body::-webkit-scrollbar {
  width: 0.4rem;
}

body::-webkit-scrollbar-thumb {
  background-color: rgb(253, 253, 253);
  border-radius: 10px;
}

body {
  background-color: #32322C;
  color: #eeeeee;
}
/* General Settings - End */

/* Nav's Settings - Begin */

#navbar {
  width: 5rem;
  height: 100vh;
  position: fixed;
  background: var(--bg-primary);
  transition: width 0.5s ease;
}

#navbar-nav {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
}

.nav-item {
  width: 100%;
  transition: background-color 0.5s ease;
}

.nav-item:first-child {
  background-color:rgb(47, 47, 47);
  margin-bottom: 2.5rem;
}

.nav-item:last-child {
  margin-top: auto;
}

.nav-link {
  display: flex;
  align-items: center;
  height: 5rem;
  color: var(--text-primary);
}

.link-text {
  color: #b6b6b600;
  margin-left: 1rem;
  font-size: 2rem;
  transition: color 0.25s ease, transform 0.8s ease;
  transform: translateY(-6rem);
}

.nav-item:last-child .link-text {
  transform: translateX(-6rem);
}

.nav-link ion-icon {
  font-size: 2rem;
  min-width: 2rem;
  margin: 0 1.5rem;
  transition: color 0.5s ease;
}

#navbar:hover {
  width: 18rem;
}

#navbar:hover .link-text {
  color: #b6b6b6;
  transform: translateY(0);
}

.nav-item:hover {
  background-color: rgb(47, 47, 47);
}

.nav-item:hover .link-text {
  color: #e0e0e0 !important;
}

.nav-item:hover ion-icon {
  color: rgb(131, 93, 207);
}

.nav-item:first-child ion-icon {
  transform: rotate(0deg);
  transition: transform 0.5s ease;
}

#navbar:hover .nav-item:first-child ion-icon {
  transform: rotate(540deg);
}

/* Nav's Settings - End */


/* Page's top's Settings - Begin */

main {
  margin-left: 5rem;
}


#page-top h1 {
  font-family: 'Roboto Mono';
  font-size: 80px;
  letter-spacing: 5px;
  text-align: center;
}

#image-container {
  margin-left: -10%;
  margin-top: 50px;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  height: 300px;
}

#profile-image {
  height: 280px;
  padding: 10px;
  border-radius: 50px;
}

#description {
  font-family: 'Open Sans';
  font-size: 27px;
  font-style: italic;
  color: #f8f694;
  text-align: center;
}

/* Page's top's Settings - End */

/* Project's Settings - Begin */

#projects {
  font-size: 6rem;
  text-align: center;
  font-family: 'Open Sans', sans-serif;
  letter-spacing: 5px;
}

#all-projects {
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
  width: 100%;
}

.single-project-container {
  text-align: center;
  width: 25rem;
  display: flex;
  margin-top: 50px;
}

.single-project-container h3 {
  font-size: 35px;
  font-family: 'Open Sans', sans-serif;
  color: #e2e2e2;
  transition: transform 0.5s ease;
}

.single-project-container a {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.single-project-container a:hover h3, .single-project-container a:hover .project-img-container {
  transform: translateY(-0.7rem);
}

.project-img-container {
  border: 7px solid black;
  border-radius: 5px;
  width: 25rem;
  height: 250px;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.7);
  transition: transform 0.5s, box-shadow 0.5s;
}

.single-project-container a:hover .project-img-container {
  transform: translateY(-10px);
  box-shadow: 15px 15px 10px rgba(0, 0, 0, 0.8);
}

.project-img {
  width: 100%;
  height: 100%;
}

/* Project's Settings - End */

/* Technologies Settings - Begin */

#technologies {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 50px;
  background-color: rgb(200, 200, 200);
}

#technologies-title {
  font-size: 6rem;
  font-family: 'Open Sans', sans-serif;
  margin: 50px 0;
  color: rgb(36, 36, 36);
}

#all-technologies {
  width: 100%;
  display: flex;
  justify-content: space-evenly;
}

.technologies-img-container {
  width: 200px;
}

.technologies-img-container img {
  width: 100%;
  height: 200px;
}

/* Technologies Settings - End */