/* Declaring variables to make them more accessible */
:root {
  --apricotPeach: #fbc2b2;
  --pharlap: #a87f84;
  --eraser: #c18d92;
  color: var(--pharlap);
  --border1: 8px solid var(--pharlap);
}

/* Setting background color, font, and text color*/
body {
  background-color: var(--apricotPeach);
  font-family: "Lucida Console", "Courier New", monospace;
  color: var(--Pharlap);
}

/* Adds border around header and sets display to flex so it resizes appropriately */
header {
  border-radius: 25px;
  border: var(--border1);
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Makes h1 font bigger for better visibility */
h1 {
  font-size: 35px;
}

/* Sets display to flex so it moves around and stays in window*/
nav {
  display: flex;
}

/* Styling choice to remove bullets */
nav ul {
  list-style-type: none;
}

nav ul li {
  display: inline-block;
  padding-left: 15px;
  padding-right: 15px;
}

/* Added hovering effect so user knows mouse is over a link */
nav a:hover {
  color: #5c4043;
}

/* Removed traditional link styling */
a {
  font-weight: bold;
  text-decoration: none;
  color: var(--pharlap);
  font-size: 20px;
}

/* Sizes profile image */
.work img {
  width: 400px;
  height: 300px;
  justify-content: center;
}

/* Makes h2 font bigger for better visibility */
h2 {
  text-align: center;
  padding-top: 20px;
  padding-bottom: 20px;
  font-size: 30px;
}

/* Display set to flex so child elements can change from row to column in smaller windows and so text can be side to side with image in big windows*/
.aboutMe {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Add border to profile image and changes shape from square to circle */
.profile {
  border-radius: 50%;
  border: var(--border1);
}

/* Resizes profile image */
.aboutMe .profile {
  max-height: 200px;
  max-width: 200px;
}

/* Restricts how wide the text is */
.aboutMe p {
  max-width: 300px;
  align-items: center;
  font-size: 30px;
}
/* Display set to flex so child elements can change from row to column in smaller windows and so bulleted list can be side to side with statement */
.skills {
  display: flex;
  justify-content: center;
}

.skills p {
  display: inline-block;
  max-width: 300px;
  align-items: center;
  font-size: 30px;
}

/* .custom-margin {
  margin-left: 10rem;
  margin-right: 10rem;
} */

/* Display set to flex so child elements can change from row to column in smaller windows*/
.work {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

/* Set flex basis to 40% so 2 work samples can display on same row in big windows */
.workSample {
  padding: 20px;
  border: var(--border1);
  margin: 10px;
  /* flex: 1 0 40%; */
}

/* Added hovering effect so user knows mouse is over section with a link */
.workSample:hover {
  border: #5c4043 solid 8px;
  padding: 20px;
  margin: 10px;
  color: #5c4043;
}

/* Adjusts positioning*/
.contact {
  display: flex;
  justify-content: center;
}

/* Sizes images in contacts */
.icon {
  height: 30px;
  width: 30px;
  padding: 20px;
}

/* When the screen size is changed to 768px or less rows transform into columns for better viewability */
@media screen and (max-width: 768px) {
  h1 {
    text-align: center;
  }
  header,
  nav,
  nav ul li {
    flex-direction: column;
    justify-content: center;
  }
  .aboutMe {
    flex-direction: column;
    justify-content: center;
  }
  .aboutMe p {
    max-width: 100%;
    text-align: center;
  }
  .aboutMe .profile {
    justify-content: center;
  }
}