/* DOCUMENT STYLES */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-size: 16px;
  font-family: "Lato", Helvetica, sans-serif;
  font-weight: 400;
  color: #222;
}

h1,
h2,
h3 {
  font-family: "Merriweather", "Lato", Helvetica, sans-serif;
  font-weight: 900;
}

p {
  line-height: 1.4rem;
}

.displayHeading {
  font-size: 2.5rem;
}

.styledLink1 {
  text-decoration: none;
  color: #222;
  background: #f2f2f2;
  border-bottom: 1px solid #ccc;
  padding: 0.125rem;
}

/* HEADER CONTENT */
header {
  background-color: white;
  z-index: 10;
}

header nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem 1.5rem 1.25rem;
  border-bottom: 1px solid black;
}

header ul {
  list-style: none;
}

header li {
  display: inline-block;
  margin-left: 1rem;
  font-size: 18px;
}

header a {
  color: #222;
  text-decoration: none;
}

header a:hover {
  cursor: pointer;
  text-decoration: underline;
  color: #888;
}

header a:active {
  color: #888;
}

.logoTextMonogram {
  display: inline-block;
  max-width: 4.6825rem;
  text-transform: uppercase;
  font-family: "Merriweather", "Lato", Helvetica, sans-serif;
  font-size: 1.125rem;
  font-weight: 200;
  border: 2px solid #333;
  border-radius: 50%;
  padding: 0.5rem;
  padding-left: 0.6125rem;
}

.logoTextMonogram:hover {
  background-color: #222;
  color: white;
  font-weight: 900;
  transition: background-color 350ms ease-out;
  transition: font-weight 400ms ease-out;
  cursor: none;
}

.logoImgMonogram {
  display: none;
  max-width: 4.6825rem;
}

.logoName {
  display: inline-block;
  font-family: "Merriweather", "Lato", Helvetica, sans-serif;
  font-weight: 900;
  font-size: 1.25rem;
  margin-left: 0.5rem;
}

/* SECTION CONTENT STYLES */

main {
  position: relative;
  display: flex;
  padding: 2rem 0;
  height: calc(100vh - 25rem);
  overflow-y: scroll;
  overflow-x: hidden;
}

section {
  padding: 1rem;
  position: absolute;
  top: 0;
  left: 0;
  background: white;
  flex-grow: 1;
  transition: transform 500ms ease;
}

main > section[data-status="inactive"] {
  transform: translateX(101%);
}

/* ABOUT ME SECTION MAIN */
#aboutMe {
  padding: 1rem;
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: space-around;
}

#aboutMe h1 {
  margin-bottom: 1rem;
}

#aboutMe p {
  font-size: 1.125rem;
  line-height: 1.725rem;
  margin-bottom: 8rem;
}

.aboutMeSummaryContainer {
  width: 50rem;
  margin-right: 20rem;
}

.aboutMeLinks {
  height: 90%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.aboutMeLinks li {
  list-style: none;
  font-size: 1.5rem;
  line-height: 3rem;
  padding-right: 3rem;
  text-transform: capitalize;
}

/* PROJECT SECTION STYLES*/
#projects {
  margin: 1rem;
}

#projects h2 {
  margin-bottom: 1.25rem;
}

.projectGallery {
  background-image: radial-gradient(#efefef 10%, transparent 10%);
  background-position: 0 0, 50px 50px;
  background-size: 2rem 2rem;
  display: grid;
  grid-template: auto / repeat(3, 28rem);
  gap: 1.5rem;
  width: 100vw;
  padding: 1.5rem 0;
}

.project {
  overflow: hidden;
}

.projectContent {
  margin: 0.25rem;
  padding: 0.25rem;
  border-radius: 0.5rem;
  background-color: white;
  box-shadow: 0 0 0.5rem 0.125rem #f2f2f2;
}

.project img {
  width: 100%;
  height: 15rem;
  border: none;
  border-radius: 0.5rem;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  background-color: #f2f2f2;
  object-fit: cover;
  object-position: center;
  overflow: hidden;
}

.project h3 a {
  background: linear-gradient(-45deg, #510d89 70%, #1035a4);
  text-decoration: none;
  border-bottom: 2px solid #f2f2f2;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.project p {
  margin: 1rem 0.4rem;
  padding-right: 1rem;
}

.project h3 {
  margin: 1.25rem 0.25rem;
}

.projectBadgeGallery {
  display: grid;
  grid-template: 3.25rem auto / repeat(8, 1fr);
  gap: 0.125rem;
  background: radial-gradient(circle at 0, #f5f5f5, #faffff);
  border-radius: 0.5rem;
  padding: 0.25rem;
}

.projectBadge {
  margin: auto auto;
  padding: 0.5rem;
  height: 3rem;
  width: 3rem;
  color: #222;
  border-radius: 0.25rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.projectBadge i {
  font-size: 1.5rem;
}

/* WORK EXPERIENCE STYLES */
#experience {
  margin: 1rem;
}

#experience h2 {
  margin-bottom: 1.5rem;
}

.expWork {
  width: 49%;
  display: inline-grid;
  grid-template: repeat(3, 1fr) / auto;
  padding: 1rem;
  gap: 0.75rem;
  align-items: center;
}

.expWork p:not(.expWorkRole) {
  width: 85%;
  font-size: 0.95rem;
  line-height: 1.25rem;
}

.expWorkRole {
  display: inline-block;
  width: 90%;
  text-transform: capitalize;
  font-style: italic;
  padding: 0.25rem 0;
  margin-bottom: 0.25rem;
  border-bottom: 1px solid #ccc;
}

.expEducation {
  width: 50%;
  display: inline-flex;
  flex-direction: column;
  padding: 1rem;
}

.expEducation img {
  max-width: 10rem;
  height: auto;
  object-fit: cover;
  object-position: center;
  background-color: #ccc;
  border: none;
  border-radius: 0.5rem;
  margin: 0.5rem 0;
}

.expEducation p {
  margin: 0.75rem 0;
  width: 90%;
  font-size: 0.95rem;
  line-height: 1.25rem;
}

.expEducation ul li {
  width: 70%;
  margin-top: 0.75rem;
  margin-left: 1.5rem;
  font-size: 0.95rem;
  line-height: 1.25rem;
  list-style: "‣ ";
}

.expCodeCademy {
  margin-top: 2rem;
}

/* FOOTER CONTENT STYLES */
footer {
  background-color: white;
  border-top: 1px solid #222;
  display: grid;
  grid-template: auto / minmax(30rem, 45rem) 2fr;
}

footer #contact:not(.contactPointer) {
  border-left: 1px solid #222;
}

footer div {
  margin: auto 0;
  padding: 1rem;
}

#footerLinks {
  height: 100%;
}

.linkedIn i {
  font-size: 2rem;
  padding: 0.25rem;
  color: #1f56f9;
}

.linkedIn a {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: #222;
  gap: 1rem;
  padding-right: 1rem;
  border-bottom: 1px solid #1035a4;
}

.interests h3 {
  margin-bottom: 1rem;
}

.interests p {
  width: 90%;
  margin-bottom: 1rem;
}

.interests a {
  text-decoration: none;
}

.interests i {
  padding: 0.75rem;
  font-size: 1.75rem;
  color: #222;
}

.contactContent {
  padding: 0 1rem;
  margin: auto;
  max-width: 50rem;
}

.contactHeading {
  margin-top: 1rem;
  padding: 0;
}

#contact p {
  margin: 0.5rem 0 0.25rem;
  width: 80%;
}

#contact fieldset {
  border: none;
  padding: 1rem 0;
  display: grid;
  grid-template: auto / minmax(3rem, 10rem) 2fr;
  gap: 0.5rem;
}

#contact label {
  margin-top: 0.5rem;
  padding-bottom: 0.125rem;
  text-transform: uppercase;
  border-bottom: 2px dotted #ccc;
}

#contact textarea {
  resize: none;
  overflow-y: scroll;
}

#contact input[type="text"],
#contact input[type="email"],
#contact textarea {
  border: none;
  border-radius: 0.25rem;
  padding: 0.5rem;
  background-color: #f5f5f5;
}

#contact fieldset input:last-of-type {
  cursor: pointer;
  display: block;
  width: 40%;
  font-size: 1.125rem;
  margin-left: auto;
  border-radius: 0.25rem;
  background: #222;
  color: white;
  box-shadow: none;
  border: none;
}

/* Other Styles */
.contactPointer[data-status="activePointer"] {
  position: absolute;
  right: 45rem;
  bottom: 20rem;
  font-size: 5rem;
  opacity: 1;
  transition-delay: 200ms;
  transition: all 400ms ease;
  animation: bounce 400ms infinite ease;
}

.contactPointer[data-status="inactivePointer"] {
  bottom: 10rem;
  display: none;
}

@keyframes bounce {
  0% {
    margin-bottom: 1rem;
  }
  50% {
    margin-bottom: 0;
  }
  100% {
    margin-bottom: 1rem;
  }
}