styles.css

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

  a{
    text-decoration: none;
  }
  
  .press-start-2p-regular {
    font-family: "Press Start 2P", serif;
    font-weight: 400;
    font-style: normal;
  }
  
  
  
  /*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: 60%;
    display: grid;
    grid-template: 50% 50%/ 50% 50%;
  }
  
  #littleAdam, #littleAdam2 {
    grid-area: 1/2/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: 21px;
  }
  
  
  /*----------------------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 > a, .skills:hover > a, .projects:hover > a, .contact:hover > a {
    font-weight: bold;
    color: #ff2595;
    cursor: pointer;
    text-decoration: none;
  }
  
  .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 4s 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("img/fondo-2.jpg");
    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;
    margin-bottom: 5%;
  }
  
  .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;
  }
  
  .github {
    grid-area: 1/2/2/3;
  }
  
  .linkedin {
    grid-area:1/3/2/4;
  }
  
  .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 {
      padding-left: 2%;
      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 {
      padding-left: 5%;
      grid-area: 2/2/3/3;
      margin-top: 50px;
    }
    
    .aboutTab > img {
        width: 100%;
    }
    
    .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;
    }
  }