/* GENERAL STYLES */
body {
  margin-left: auto;
  margin-right: auto;
  background-color: rgb(203, 215, 246);
  text-align: center;
}
h1 {
  font-size: 2.6rem;
  font-family: Verdana, sans-serif;
  font-weight: bold;
  margin-left: 5%;
  margin-right: 5%;
}
h2 {
  font-weight: 600;
  font-size: 1.9rem;
  font-family: Verdana, sans-serif;
  margin-left: 5%;
  margin-right: 5%;
}
p {
  font-size: 1.5rem;
  font-family: Georgia, Times, "Times New Roman", serif;
  margin-left: 5%;
  margin-right: 5%;
  color: black;
}
/* UTILITIES */
.flex-container {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;
  margin-left: 2%;
  margin-right: 2%;
}
.grid-container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding: 0%;
  display: grid;
  grid-template-columns: repeat(auto-fit, 30%);
  grid-template-rows: repeat(auto, 90%);
  grid-gap: 0.5rem;
  justify-content: center;
}
.grid-item {
  justify-content: space-evenly;
}
.comp-container {
  width: 95%;
  display: grid;
  grid-template-columns: repeat(auto-fit, 45%);
  grid-template-rows: repeat(auto, 90%);
  grid-gap: 0.1rem;
  justify-content: space-evenly;
  /* Styling */
  font-size: 1.6rem;
  font-family: Hand;
  list-style-type: disc;
  padding-top: 1%;
  padding-bottom: 1%;
  list-style-position: inside;
  text-align: left;
}
.comp-item {
  width: auto;
  padding-left: 25%;
}
/* Competencies Used */
.space {
  /* some small padding */
  padding-top: 2.5%;
}
/* NAVIGATION */
.title {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  font-size: 1.4rem;
  color: white;
  padding-left: 10px;
  margin-left: 20px;
}
.nav-container {
  margin-top: -28px;
}
.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: navy;
  height: 50px;
  position: fixed;
  width: 100%;
  z-index: 2;
}
.hamburger {
  padding-right: 20px;
  cursor: pointer;
  display: none;
}

.hamburger .line {
  display: block;
  width: 40px;
  height: 5px;
  margin-bottom: 5px;
  background-color: white;
}
.hamburger:hover .line {
  /* background-color */
  opacity: 0.5;
}
.hide {
  display: none;
}
.nav__link {
  display: block;
  position: static;
  width: auto;
  background-color: navy;
  margin-right: 10px;
  font-size: 0.8rem;
  font-family: Arial, Helvetica, sans-serif;
}
.nav-box {
  width: 112px;
  display: inline-block;
  padding: 4px 10px;
  height: default;
  text-decoration: none;
  color: white;
  font-weight: bold;
  text-transform: uppercase;
}
.nav-box:hover {
  background-color: #0000cc;
  color: lightsteelblue;
}
.box-text {
  /* be careful this inherits from p */
  display: block;
  font-size: 0.8rem;
  margin-left: 0px;
  margin-right: 0px;
  font-family: Arial, Helvetica, sans-serif;
  color: white;
}
/* CUSTOM STYLES */
.exp {
  font-size: 2.5rem;
  padding-bottom: 1.5%;
}
/* Experience Header */
.caption-text {
  padding-top: 0%;
  font-size: 1.4rem;
  font-family: Hand;
  margin-left: 5%;
  margin-right: 5%;
}

.skill-list {
  font-size: 2rem;
  font-family: Hand;
  list-style-type: none;
  padding-top: 1%;
  padding-bottom: 1%;
}
.comp-title {
  font-size: 1.6rem;
  font-style: italic;
  font-weight: bolder;
}
.print-title {
  display: none;
}
.links-body {
  margin-top: 1%;
  margin-bottom: 1.3%;
}
.picture {
  /* set width to a percentage */
  height: auto;
  padding-top: 1%;
  padding-bottom: 1%;
  align-self: center;
}
.rounded {
  border-radius: 10px;
  /* rounds corners */
}
/* PICTURES FORMATTING */
.pic-me {
  width: 15%;
  padding-top: 20px;
  padding-bottom: 15px;
}
.pic-GM {
  margin-top: -20px;
  width: 30%;
}
.pic-demo {
  width: 30%;
}
.pic-desktop {
  width: 60%;
}
.pic-pendant {
  width: 30%;
}
.pic-su {
  width: 30%;
}
.pic-jhu {
  width: 30%;
}
.pic-ubuntu {
  width: 25%;
}
.pic-apache {
  width: 20%;
}
.pic-server {
  width: 10%;
}
.pic-web-code {
  width: 25%;
}
.pic-javascript {
  width: 30%;
}
.pic-wgu {
  width: 30%;
}
.pic-bagel {
  width: 20%;
}
.pic-humane {
  width: 20%;
}
.pic-WXSU {
  width: 80%;
}
.pic-saic {
  width: 20%;
}
.pic-ceh {
  width: 20%;
}
/* resize some pictures to scale */
.link {
  padding-bottom: 6%;
}
.link:hover {
  color: blue;
}
#education {
  padding-top: 55px;
  margin-top: -55px;
}
#experience {
  padding-top: 55px;
  margin-top: -55px;
}
#projects {
  padding-top: 55px;
  margin-top: -55px;
}
#about {
  padding-top: 70px;
}
#links {
  padding-top: 30px;
  margin-top: -30px;
}
#mail {
  padding-bottom: 30px;
}
/* this will make it so clicking these links
will take you to the correct spot on the page
before this i was having problems with the anchor adding padding and a negative margin seems to be a good work around for this */

/* ANIMATION*/
#earl-sprite-container {
  padding-top: 15px;
  display: block;
  /* animation: move 15s infinite forwards; */
  margin-left: -5%;
  margin-right: auto;
  overflow: hidden;
  /* make it so the scroll bar dosent show up at the bottom */
}
#earl-sprite {
  width: 102px;
  /* spritesheet width divided by number of frames in sprite sheet, 306/3 */
  height: 54px;
  /* height of actual image */
  background: url(images/sprites/earl/slug_102x54_strip3.png) 0px 0px;
  /* animating this sprite */
  transform: scaleX(-1);
  /* flip image to the other side */
  animation: play steps(3) infinite 1.2s, move 40s linear infinite;
  /* aninmates the actual sprite */
  /* animation: move infinite; */
  overflow: hidden;
}
@keyframes play {
  100% {
    background-position: 306px;
    /* entire sprite sheet width */
  }
}
@keyframes move {
  from {
    margin-left: -5%;
  }
  to {
    margin-left: 105%;
  }
}
/* RESPONSIVE DESIGN */
/* SMARTPHONES / Mobile */
@media screen and (min-width: 320px) and (max-width: 800px) {
  /* GENERAL STYLES */
  h1 {
    font-size: 2.1rem;
  }
  h2 {
    font-size: 1.5rem;
    margin-left: 3%;
    margin-right: 3%;
  }
  p {
    font-size: 1.1rem;
    margin-left: 7%;
    margin-right: 7%;
  }
  /* navbar styles */
  .nav {
    margin-top: 5px;
    /* stop underflow on mobile */
  }
  .title {
    font-size: 1rem;
    padding-left: 15px;
    margin-left: 0px;
    margin-right: 1px;
  }
  /* Mobile rules */
  .nav__link {
    position: fixed;
    width: 100%;
    top: 2.8rem;
    /* Fixes gap between drop down and navbar on mobile */
  }
  .nav-box {
    width: 100%;
    display: block;
    padding: 3.5px 0;
  }
  .hamburger {
    display: initial;
  }
  .hide {
    display: none;
  }
  /* Must be here for it to hide properly  */
  .hamburger .line {
    width: 30px;
    height: 2.5px;
  }
  /* UTILITIES */
  .grid-container,
  .comp-container {
    grid-template-columns: repeat(auto-fit, 100%);
  }
  /* CUSTOM STYLES */
  .exp {
    font-size: 1.9rem;
  }
  .caption-text {
    padding-top: 2%;
    font-size: 1.1rem;
  }
  .comp-title {
    font-size: 1.45rem;
  }
  .comp-container {
    width: 85%;
    font-size: 1.3rem;
  }
  .comp-item {
    padding-left: 5%;
  }
  .picture {
    padding-top: 2%;
    padding-bottom: 1%;
  }
  .pic-me {
    width: 65%;
  }
  .pic-GM {
    margin-top: -30px;
    width: 80%;
  }
  .pic-demo {
    width: 75%;
    padding-top: 5%;
  }
  .pic-desktop {
    width: 80%;
  }
  .pic-pendant {
    width: 90%;
  }
  .pic-wgu {
    width: 90%;
  }
  .pic-su {
    width: 85%;
  }
  .pic-jhu {
    width: 90%;
  }
  .pic-ubuntu {
    width: 50%;
  }
  .pic-apache {
    width: 40%;
  }
  .pic-server {
    width: 30%;
  }
  .pic-web-code {
    width: 40%;
    padding-bottom: 5%;
  }
  .pic-javascript {
    width: 90%;
  }
  .pic-bagel {
    width: 35%;
  }
  .pic-humane {
    width: 35%;
  }
  .pic-arboretum {
    width: 25%;
  }
  .pic-WXSU {
    width: 90%;
  }
  .pic-saic {
    width: 70%;
  }
  .pic-ceh {
    width: 65%;
  }
  .skill-list {
    font-size: 1.4rem;
  }
  /* A TAG LINKS */
  #education {
    padding-top: 70px;
    margin-top: -70px;
  }
  #experience {
    padding-top: 65px;
    margin-top: -65px;
  }
  #projects {
    padding-top: 60px;
    margin-top: -60px;
  }
  #about {
    padding-top: 70px;
  }
  #links {
    padding-top: 80px;
    margin-top: -80px;
  }
  #mail {
    padding-bottom: 30px;
  }
  #mail {
    padding-bottom: 20px;
  }
  #earl-sprite {
    animation: play steps(3) infinite 1s, move 15s linear infinite;
  }
  #earl-sprite-container {
    margin-left: -100px;
  }
}
/* HALF WINDOW */
@media screen and (min-width: 801px) and (max-width: 1120px) {
  /* Prevent navbar bugs on halfwindow, look into fixing this later */
  /* UTILITIES */
  .grid-container {
    grid-template-columns: repeat(auto-fit, 49%);
  }
  /* CUSTOM STYLES */
  .title {
    font-size: 1rem;
  }
  .comp-item {
    padding-left: 1%;
  }
  .nav__link {
    position: fixed;
    width: 100%;
    top: 3.12rem;
  }
  .nav-box {
    width: 100%;
    display: block;
    padding: 4px 0;
  }
  .box-text {
    font-size: 0.8rem;
  }
  .hamburger {
    display: block;
    padding-right: 10px;
  }
  .hamburger .line {
    width: 30px;
    height: 2.5px;
    margin-right: 5px;
  }
  .hide {
    display: none;
  }
  /* Must be here for it to hide properly  */
}
/* PRIN Media Query */
@media print {
  body {
    background-color: rgb(255, 255, 255);
    color: black;
  }
  .nav-container {
    display: none;
  }
  #about {
    padding-top: 0px;
  }
  .print-title {
    display: contents;
    font-size: 2.6rem;
  }
  .comp-item {
    width: auto;
    padding-left: 10%;
  }
  .skill-list {
    grid-template-columns: repeat(auto-fit, 49%);
  }
}