/*--//////////////////  SMALL PC VIEW  //////////////////-- */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  body {
    font-family: "Roboto", sans-serif;
  }

@media (min-width: 1025px) and (max-width: 1199px) {
    .navbar {
      position: fixed;
      width: 100%;
    }
  
    .navbar .logo {
      grid-column: 2 / 6;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  
    .navbar .linkedin {
      display: none;
    }
  
    .navbar .menu-bar {
      display: block;
      grid-column: 9 / 10;
      font-size: 2em;
      color: coral;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 15px;
    }
  
    .navbar .menu {
      position: absolute;
      width: 100%;
      height: 35vh;
      display: grid;
      align-items: center;
      background-image: linear-gradient(
          rgba(16, 16, 16, 0.9),
          rgba(16, 16, 16, 0.9)
        ),
        url(../img/webdev1.jpg);
      margin-top: 14rem;
      transform: translate(260%);
      transition: all 1s;
      border-radius: 15px;
    }
  
    .navbar .menu-toggle {
      transform: translateX(33%);
    }
  
    /* ·····························   SECTION HERO   ·······················  */
  
    .hero {
      height: 60vh;
      background-image: linear-gradient(
          rgba(16, 16, 16, 0.747),
          rgba(16, 16, 16, 0.747)
        ),
        url(../img/portada.jpg);
      background-size: cover;
      max-width: 100%;
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      grid-template-rows: repeat(12, 1fr);
    }
  
    .hero h1 {
      font-size: 2.2em;
      font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
      font-weight: bold;
      color: white;
    }
  
    .hero h3 {
      font-size: 1.2em;
    }
  
    .hero .info-content {
      grid-column: 7 / 11;
      grid-row: 5 / 10;
      color: rgb(26, 26, 94);
      text-align: center;
    }
  
    .image1 {
      grid-column: 3 / 6;
      grid-row: 3 / 8;
    }
  
    .imgpersonal {
      border-radius: 50%;
      -webkit-box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);
      -moz-box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);
      box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);
    }
  
    /* ·····················   SECTION ABOUT   ·······················  */
  
    .container1 {
      text-align: center;
      padding-top: 20px;
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      grid-template-rows: repeat(5, 1fr);
    }
  
    .headeraboutme {
      margin-top: 5rem;
      margin-bottom: 2rem;
      font-size: 2em;
      font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
      font-weight: bold;
      color: rgb(26, 26, 94);
      grid-column: 1 / 6;
      grid-row: 1 / 2;
      display: flex;
      justify-content: center;
    }
  
    .paragraph1 {
      padding: 1rem;
      margin: 8rem 5rem 1rem 5rem;
      text-align: center;
      font-size: 1.4em;
      font-family: Roboto, sans-serif;
      font-weight: 400;
      color: rgb(26, 26, 94);
      grid-column: 1 / 6;
      grid-row: 1 / 4;
    }
  
    .imgcv {
      max-width: 200px;
      height: auto;
      border-radius: 15px;
      -webkit-box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);
      -moz-box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);
      box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);
      grid-column: 3 / 4;
      grid-row: 4 / 6;
      margin-top: 7px;
    }
  
    .imgcvlink {
      grid-column: 3 / 4;
      grid-row: 4 / 6;
      margin-top: -1rem;
    }
  
    .imgcv:hover {
      transform: scale(1.2, 1.2);
      transition-duration: 0.2s;
      transition-delay: 0.1s;
      cursor: pointer;
    }

  }