/*Font.*/
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Archivo+Black&display=swap');

/*Setting up flex for future use when adding more projects to implement a carousel. Separated containers through wrap.*/
body {
  background-color: #D5CFC8;
  display: flex;
  flex-wrap: wrap;
  height: 100vh;
}

/*Centering profile image & placing it as needed.*/
.profile {
  display: flex;
  justify-content: center;
  padding-top: 3.5%;
  margin: auto;
}

/*Making profile image smaller & giving it a circular border.*/
.deadpool {
  width: 100px;
  border-radius: 50%;
}

/*Aligning "Home" & "Works" within the same row while centering it. Also, font implementation + custom spacing.*/
.tabs {
  display: flex;
  margin: auto;
  justify-content: center;
  column-gap: 3%;
  width: 100%;
  font-family: "Anton", sans-serif;
  letter-spacing: 1px;
}

/*Removing links' underline.*/
.tabs a {
  color: #61210F;
  text-decoration: none;
}

/*Centering main container.*/
.main {
  display: flex;
  align-items: center;
  width: 100%;
}

/*Specifying image position on page & giving the "unhover" a smooth transition back to regular size.*/
.i {
  text-align: center;
  margin: auto;
  padding: 1.5%;
  transition: 1s;
}

/*Enlarging image upon hover & giving it a smooth transition by timing it.*/
.i:hover {
  transform: scale(1.1);
  transition: transform 1.5s;
}

/*Further specifiying image size*/
.Syringes {
  width: 80%;
}