/* Create variables for reused values */
:root {
  --white: rgb(196, 196, 196);
  --navy: rgb(33, 33, 51);
}

/* Set box-sizing to border-box to negate size calculation and give no margin or padding */
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  color: var(--white);
}

/* Set font size so rems can scale by 10 */
html {
  font-size: 62.5%;
  width: fit-content;
}

/* Set background color, font color, and font family */
body {
  background-color: var(--navy);
  font-family: "Nunito", sans-serif;
}

/* Make header a flex container, wrap content, and add padding */
header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 2rem;
}

/* Make h1 huge */
h1 {
  font-size: 9rem;
}

/* Make gradient underline */
hr {
  margin: 5px 0;
  height: 2px;
  border: none;
  background: -webkit-gradient(
    linear,
    0 0,
    100% 0,
    from(transparent),
    to(transparent),
    color-stop(50%, var(--white))
  );
}

/* Nav bar aligned to end so it grows left and looks cleaner and make fixed to top right */
nav {
  text-align: end;
  font-size: 3rem;
  position: fixed;
  top: 10px;
  right: 30px;
}

/* Add extra space to list items and remove bullets */
nav li {
  list-style-type: none;
  padding: 0.5rem;
}

/* Remove underline from anchors and give them a little extra space */
a {
  text-decoration: none;
}

/* Make nav font grow when hovering over */
nav a:hover {
  font-size: 141%;
}

/* Add style to links when hovering */
a:hover {
  cursor: pointer;
  text-decoration: underline;
  transition: 0.3s ease-in-out;
}

/* Make links stay white rather than turn blue after visiting */
a:visited {
  color: var(--white);
}

/* Give main padding on the left and right not top and bottom */
main {
  display: flex;
  padding: 0 4rem;
}

/* Style the overall section element in a column and wrap content */
section {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  padding: 5rem;
}

/* Set specific h2 properties */
h2 {
  font-size: 4rem;
  align-self: center;
  padding: 3rem;
  padding-bottom: 0rem;
}

/* Set properties for all articles */
article {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 5rem 18rem;
  text-align: center;
  font-size: 2rem;
}

/* Reverse direction of first article for appearance */
.row-reverse {
  flex-direction: row-reverse;
}

/* Set specific properties for about me image */
#my-picture {
  max-width: 40rem;
  box-shadow: 2px 2px 5px var(--white);
  border-radius: 15px;
  margin: 5rem;
}

/* Create a div for further flex box stylization */
div .about,
div .footer {
  display: flex;
  justify-content: flex-start;
}

/* Style the paragraphs */
p {
  font-size: 2rem;
  padding: 3rem;
  text-align: justify;
  min-inline-size: 30rem;
  margin: 0 10rem;
  border-left: 1px solid var(--white);
}

/* Set flex container for the projects */
.projects {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-items: flex-end;
}

/* Set projects image padding and filter */
.projects img {
  filter: grayscale(90%);
  padding: 10px;
  margin-bottom: 0px;
  border-radius: 20px;
}

/* Set specific sizing and margin for cheatsheet project */
#dev-row-records {
  width: 114rem;
  height: 75rem;
  margin: 30px;
  margin-bottom: 0px;
}

/* Put small images in their own flex container to adjust positioning */
.small-images {
  display: flex;
  flex-direction: column;
}

/* Make the project titles a little darker than the headers */
h3 {
  margin-top: 0px;
  margin-bottom: 12px;
}

/* Set specific size and margin for small images */
#game-seekers,
#landing-page,
#refactor {
  width: 32rem;
  height: 20.2rem;
  margin: 20px;
  margin-bottom: 0px;
}

/* Remove blur when hovering over image */
.projects img:hover {
  filter: none;
  padding: 5px;
  box-shadow: 4px 4px 8px var(--white);
  transition: 0.4s ease-in-out;
}

/* Make the media icons stick toward bottom left of viewport and stacked */
aside {
  display: flex;
  flex-direction: column;
  position: fixed;
  left: 10px;
  bottom: 70px;
}

/* Create style for the media icons */
.media-icons {
  max-width: 8rem;
  padding: 10px;
  padding-top: 5px;
  margin-left: 10px;
}

/* Make tooltip */
span[data-info] {
  position: relative;
  color: var(--white);
  cursor: pointer;
}

/* Make tooltip pop-up with phone number when hovering */
span[data-info]:hover::after {
  content: attr(data-info);
  position: absolute;
  left: 95px;
  bottom: 30px;
  min-width: max-content;
  border-radius: 15px;
  background-color: white;
  padding: 12px;
  color: var(--navy);
  font-size: 1.5rem;
  z-index: 1;
  box-shadow: 3px 3px 7px var(--white);
}

/* Make footer flex container to adjust icon and text positioning */
footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  width: 100%;
}

/* Add media queries as viewport approaches touchscreen device width */
@media screen and (max-width: 1280px) {
  /* Adjust padding for header */
  header {
    padding: 3rem;
  }

  /* Adjust h1 margin top to fit nav bar and change font */
  h1 {
    margin-top: 15px;
    font-size: 6rem;
  }

  /* Fix nav to top of page */
  nav {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    text-align: center;
  }

  /* Adjust opacity of nav bar and make flex container to alter layout */
  nav ul {
    display: flex;
    justify-content: space-evenly;
    font-size: 2rem;
    background-color: black;
    background-size: cover;
    opacity: 70%;
  }

  /* Change flex direction for main and article */
  main,
  article,
  .row-reverse {
    flex-direction: column;
  }

  /* Adjust padding of article at this size so the text field isn't too narrow */
  article {
    padding: 5rem;
  }

  /* Fix alignment of projects class */
  .projects {
    align-items: center;
  }

  /* Remove hover filter from project images now that devices may be touch screen */
  .projects img {
    filter: none;
  }

  /* Special sizing for cheatsheet project */
  #cheatsheet {
    max-width: 40rem;
    max-height: 30rem;
  }

  /* Fix sizing for project images now that viewport size is reduced */
  #prework,
  #landing-page,
  #refactor {
    max-width: 40rem;
    max-height: 35rem;
  }

  /* Adjust size of media icons as screen gets smaller */
  .media-icons {
    max-width: 7rem;
  }

  /* Add padding to right because footer becomes off center at this size */
  footer {
    padding-right: 2rem;
  }
}

/* Begin adjusting layout below 768px width to fit contents within viewport without overlap  */
@media screen and (max-width: 768px) {
  /* Further adjustments to size as screen gets smaller*/
  #cheatsheet {
    max-width: 38rem;
    max-height: 30rem;
  }

  /* Further adjustments */
  #prework,
  #landing-page,
  #refactor {
    max-width: 30rem;
    max-height: 25rem;
  }
}