html, body {
  background-color: black;
  width: 100%;
  height: 100%;
  background-image: url("");
  background-size: cover;
  overflow: hidden;
  background-position: center center;
  background-repeat: no-repeat;
}

img {
  border-radius: 50%;
}
a { color: #FF0000; }
/*IMAGES FOR FRONT PAGE AND KEYFRAMES*/

@keyframes typing { 
  from { width: 0 }
  to { width: 100% }
}
@keyframes blink-caret { 
  50% { border-color: transparent; } 
}

@keyframes typing2 {
  from {width: 0 }
  to { width: 100% }
}

@keyframes blink {
  from {color: red}
  to {color: transparent}
}

@keyframes wind {
  from {opacity: 1}
  to {opacity: 0}
}

.littleAdam {    /*BOX CONTAINTING LITTLE ADAMS*/
  grid-area: 2/6/3/7;
  z-index: 1;
  height: 100%;
  width: 100%;
  display: grid;
  grid-template: 50% 50%/ 50% 50%;
}

#littleAdam, #littleAdam2 {
  grid-area: 1/1/3/3;
  min-height: 100px;
  max-height: 100px;
  align-self: end;
  margin-bottom: 45px;
}

#littleAdam2 {
  animation: wind 0.5s cubic-bezier(1,0.5,0.5,1) infinite;
}

.adam { /*box containing image*/
  display: none;
  height: 100%;
  width: 100%;
  grid-area: 3/3/6/5;
}

img { 
  height: 100%;
  width: 100%;
}

.building {
  height: 100%;
  width: 100%;
  grid-area: 2/6/6/7;
  justify-self: end;
}
/*-----------------------------------START OF FRONT PAGE------------------------------------*/

.frontPage {
  display: grid;
  height: 100%;
  width: 100%;
  grid-template: 1fr 150px 55px 55px 55px / 1fr 1fr 1fr 1fr 1fr 290px; 
}

.titleBox {
  grid-area: 1/2/2/5;
  height: 100%;
  width: 100%;
  color: #ff2595;
  font-family: "Press Start 2P";
  white-space: nowrap;
  margin-left: 20%;
}

.titleBox > img {
  width: 600px;
  height: 150px;
}

.titleBox > p {
  margin-top: -1px;
  font-size: 26px;
}


/*----------------------START FOR CLICKABLE SELECTORS--------------*/

.selectors {
  grid-area: 2/3/6/7;
  width: 100%;
  height: 100%;
  display: grid;
  font-size: 25px; 
}

.about, .skills, .projects, .contact {
  height: 100%;
  width: 100%;
  color: white;
  font-family: "Press Start 2P";
  text-align: left;
}

i {
  margin-right: -5px;
  color: transparent;
}

.about:hover > p, .skills:hover > p, .projects:hover > p, .contact:hover > p {
  font-weight: bold;
  color: #ff2595;
  
  cursor: pointer;
}

.about:hover > p > i, .skills:hover > p > i, .projects:hover > p > i, .contact:hover > p > i {
  color: white;
  margin-right: 15px;
  font-size: 15px;
  animation: blink 1s steps(2, end) infinite;
  font-size: 20px;
}
/*----------------------END OF FRONT PAGE AND CLICKABLE SELECTORS--------------*/


/*---------------------------------------------START OF ABOUT ME-------------------------------------*/

.aboutPage {
  grid-area: 1/1/2/7;
  display: none;
}

.aboutTab {
  display: grid;
  grid-template: 1fr 1fr/1fr 1.5fr 1fr ;
  color: white;
  font-family: "Press Start 2P";
}

.aboutTab > p {
  grid-area: 1/2/3/3;
  font-size: 14px;
  line-height: 125%;
}

.aboutTab > img {
  grid-area: 1/1/3/2;
  width: 200px;
  height: 200px;
}


#adam2 {
  animation: wind 0.5s cubic-bezier(1,0.5,0.5,1) infinite;
}


#close {
  font-size: 40px;
  color: red;
  animation: blink 1s steps(2, end) infinite;
  grid-area: 1/3/2/4;
  justify-self: center;
}

#close:hover {
  cursor: pointer;
}
/*---------------------------------------------END OF ABOUT ME-------------------------------------*/


/*------------------------START OF SKILLS---------------------*/

.skillPage {
  height: 100%;
  width: 100%;
  display: none;
 /* grid-area: 1/1/2/7;*/
}

.skillTab { 
  height: 100%;
  width: 100%;
  display: grid;
  grid-template: 1fr 1fr 1fr/ 1fr 1fr 1fr;
}

.skillWords {
  grid-area: 1/1/4/2;
  font-family: "Press Start 2P";
  color: white;
  height: 100%;
  width: 100%;
}
.skillWords > p {
  line-height: 130%;
  text-align: center;
}

.languages > img {
  width: 100px;
  height: 120px;
}

.skillTab > .close {
  grid-area: 1/3/2/4;
  justify-self: end;
  font-family: "Press Start 2P";
  color: red;
  animation: blink 1s steps(2, end) infinite;
  font-size: 40px;
  margin-right: 15px;
}

.skillTab > .close:hover {
  cursor: pointer;
}

.languages {
  height: 100%;
  width: 80%;
  grid-area: 1/2/4/4;
  display: grid;
  grid-template: 1fr 1fr 1fr/ 1fr 1fr 1fr;
  justify-self: center;
}

#html {
  grid-area: 1/1;
}

#css {
  grid-area: 1/2;
}

#javascript {
  grid-area: 1/3;
}

#bootstrap {
  grid-area: 2/1;
}

#jquery {
  grid-area: 2/2;
}

#ajax {
  grid-area: 2/3;
}

#react {
  grid-area: 3/2;
}
/*------------------------END OF SKILLS---------------------*/


/*------------------------------------------------------------START OF PROJECTS----------------------------------------------*/

.projectPage {
  display:none;
  background-image: url("http://res.cloudinary.com/adamlancon/image/upload/v1506500545/megamanselectbackground_uuj0fx.png");
  background-size: 100% 100%;
  background-position: center center;
  background-repeat: no-repeat;
  height: 100%;
  width: 100%;
  font-family: "Press Start 2P";
}

.projectTab {
  height: 100%;
  width: 100%;
  display: grid;
  grid-template: 10% 1fr 1fr 1fr 10px /20% 1fr 1fr 1fr 20%;
}

.projectTab > h1 {
  grid-area: 1/2/2/5;
  justify-self: center;
  align-self: start;
  font-family: "Press Start 2P";
  color: red;
  white-space: nowrap;
}

.projectTab > div {
  height:60%;
  width: 70%;
  border: solid white 6px;
  background-color: black;
  font-size: 10px;
  color: white;
  text-align: center;
}

.projectTab > div:hover {
  border: solid black 4px;
  cursor: pointer;
  background-color: white;
}

.projectTab > div > a {
  height: 90%;
  width: 90%;
  color: white;
  font-size: 10px;
}

.projectTab > div > a > img {
  height: 95%;
  width: 95%;
  border: ridge blue 4px;
}

.first {
 grid-area:2/2/3/3;
  justify-self: center;
}

.second {
 grid-area:2/3/3/4;
  justify-self: center;
}

.third {
 grid-area:2/4/3/5; 
  justify-self: center;
}

.fourth {
 grid-area:3/2/4/3;
  justify-self: center;
}

.fifth {
 grid-area:3/3/4/4; 
  justify-self: center;
}

.sixth {
 grid-area:3/4/4/5;
  justify-self: center;
}

.seventh {
 grid-area:4/2/5/3; 
  justify-self: center;
}

.eighth {
 grid-area:4/3/5/4; 
  justify-self: center;
}

.ninth {
  grid-area:4/4/5/5;
  justify-self: center;
}

.closer {
  grid-area: 1/5/2/6;
  justify-self: end;
  margin-right: 20px;
  font-size: 40px;
  color: red;
  animation: blink 1s steps(2, end) infinite;
}

.closer:hover {
  cursor: pointer;
}

/*------------------------------------------------------------END OF PROJECTS----------------------------------------------*/


/*---------------------START OF CONTACTS--------------------------------*/


.contactPage {
  display: none;
  height: 100%;
  width: 100%;
  font-family: "Press Start 2P";
}

.contactTab {
  display: grid;
  grid-template: 1fr 1fr 1fr/ 1fr 1fr 1fr;
  height: 100%;
  width: 100%;
}

.words {
  grid-area: 2/1/3/4;
  height: 100%;
  width: 50%;
  color: white;
  font-size: 14px;
  line-height: 130%;
  text-align: center;
  justify-self: center;
}

.social {
  grid-area: 1/1/2/4;
  display: grid;
  grid-template: 100%/ 1fr 1fr 1fr 1fr 1fr;
  height: 90%;
  width: 85%;
}

.social > div {
  height: 60%;
  width: 60%;
  justify-self: center;
}

.facebook {
  grid-area: 1/1/2/2;
}

.twitter {
  grid-area: 1/2/2/3;
}

.codepen {
  grid-area: 1/3/2/4;
}

.github {
  grid-area: 1/5/2/6;
}

.linkedin {
  grid-area: 1/4/2/5;
}

.closing {
  grid-area: 1/4/2/5;
  font-size: 40px;
  color: red;
  animation: blink 1s steps(2, end) infinite;
  margin-right: 25px;
}

.resume {
  grid-area: 3/1/4/4;
  justify-self: center;
  height: 60%;
  width: 15%;
  color: white;
}

.resume:hover {
  cursor: pointer;
}

.resume > a > img {
  height: 90px;
  width: 60px;
}


.closing:hover {
  cursor: pointer;
}

/*---------------------END OF CONTACTS--------------------------------*/

/*-----------------------------RESPONSIVE----------------------------------------------*/
/*-----------------------------RESPONSIVE----------------------------------------------*/
/*-----------------------------RESPONSIVE----------------------------------------------*/
/*-----------------------------RESPONSIVE----------------------------------------------*/

@media screen and (max-width: 750px) {
  .titleBox > img {
    width: 400px;
  }
  
  .titleBox > p {
    font-size: 17.5px;
  }
  
  .selectors {
    font-size: 16px;
  }
  
  .aboutTab {
    grid-template: 1fr 1fr 1fr/ 1fr 1fr 1fr;
  }
  
  .aboutTab > img {
    height: 150px;
    width: 150px;
    grid-area: 1/2/2/3;
  }
  
  .aboutTab > p {
    grid-area: 2/1/4/4;
    align-self: start;
    font-size: 13px;
    margin-right: 10px;
    line-height: 125%;
  }
  
  .skillWords {
    font-size: 12px;
    grid-area: 1/1/2/4;
    line-height: 125%;
  }
  
  .languages {
    grid-area: 2/1/4/4;
    width: 80%;
    height: 80%;
    justify-self: center;
  }
  
  .social {
    width: 100%;
  }
  
  .social > div {
    height: 60px;
    width: 60px;
    align-self: end;
  }
  
}

@media screen and (max-width: 500px) {
  
  .titleBox > img {
    width: 300px;
  }
  
  .titleBox > p {
    font-size: 13px;
  }
  
  .selectors {
    font-size: 16px;
    grid-area: 2/1/5/7;
  }
  
  .aboutTab > p {
    font-size: 12px;
  }
  
  .skillPage {
    font-size: 10px;
  }
  
  .skillTab > img {
    width 60%;
    height: 60%;
  }
  
  .languages {
    grid-area: 1/1/2/4;
    grid-template: 1fr 1fr/ 1fr 1fr 1fr 1fr;
    height: 130px;
  }
  
  .languages > img {
    height: 60px;
  }
  
  #react {
    grid-area: 2/4
  }
  
  .skillWords {
    grid-area: 2/1/3/4;
    font-size: 9px;
  }
  
  .projectTab {
    grid-template: 10% 1fr 1fr 1fr/ 1fr 1fr 1fr;
  }
  
  .projectTab > div {
    height: 100px;
    width: 100px;
    margin-left: 10px;
  }
  
  .closing {
    grid-area: 1/3/2/4;
  }
  
  .projectTab > h1 {
    grid-area: 1/1/2/4;
    font-size: 13px;
  }
  
  .first {
    grid-area: 2/1/3/2;
  }
  
  .second {
    grid-area: 2/2/3/3;
  }
  
  .third {
    grid-area: 2/3/3/4;
  }
  
  .fourth {
    grid-area: 3/1/4/2;
  }
  
  .fifth {
    grid-area: 3/2/4/3;
  }
  
  .sixth {
    grid-area: 3/3/4/4;
  }
  
  .seventh {
    grid-area: 4/1/5/2;
  }
  
  .eighth {
    grid-area: 4/2/5/3;
  }
  
  .ninth {
    grid-area: 4/3/5/4;
  }
  
  .social {
    height: 50%;
    align-self: center;
  }
  
}

@media screen and (max-width: 375px) {
  .selectors {
    grid-area: 2/2/3/3;
    margin-top: 50px;
  }
  
  .aboutTab > img {
  }
  
  .aboutTab > p {
    font-size: 11px;
  }
  
  
  .projectPage {
    height: 100%;
    width: 100%;
  }
  
  .projectTab > div {
    height: 75px;
    width: 75px;
    font-size: 9px;
    border: solid white 2px;
  }
  .projectTab > div > a > img {
    border: solid blue 1px;
  }
}