#page1 {
  display: grid;
  grid-template-columns: 15vw 35vw 5vw 35vw 10vw;
}

@media only screen and (min-width: 400px) { /* modelled using desktop in Chrome */
  #page1 {font-size: 13vh;}
  #page1 h1{top: 28%;}
  #page1 h1:hover{font-size: 20vh;}

  #page1 footer{bottom: 5%;}
  footer li{font-size: 5vh;}
  footer li:hover{font-size: 8vh;}

  #leftSide{
    grid-column: 2;
  }

  #rightSide{
    grid-column: 4;
    display: grid;
    grid-template-rows: 23vh 20vh 20vh 17.5vh auto;
  }

  /* .row1{background-color: aqua;}
  .row2{background-color: rgb(85, 0, 255);}
  .row3{background-color: rgb(255, 0, 170);}
  .row4{background-color: rgb(170, 255, 0);} */

  #profilePhoto{
    border-radius: 50%;
    
    height: 55vh;
    width: 55vh;

    background-image: url("./../assets/profilePicture.png");
    background-repeat: no-repeat;
    background-size: 100%;
    position: absolute;
    transform: translateY(-50%);
    top: 50%
  }

  #title{
    display: flex;
    align-items: center;
    font-size: 7vh;
    line-height: 1.5;
  }

  .headline{
    font-size: 4vh;
    line-height: 1.75;
  }

  .row4{
    display: grid;
    grid-template-columns: 33% auto 33%;
    grid-row: auto;
  }

  .link{
    font-size: 3vh;
    align-self: center;
    width: 12vh;
    height: 12vh;
    /* background-color: blueviolet; */
  }
}


@media only screen and (max-width: 400px) { /* modelled using iPhone SE in Chrome */
  #page1 {font-size: 12vw;}
  #page1 h1{top: 40%;}
  #page1 h1:hover{font-size: 14vw;}
  
  #page1 footer{bottom: 10%;}
  footer li{font-size: 5vw;}

  #mobileHome{
    width: 100vw;
    height: 100vh;

    display: grid;
    grid-template-rows: 30% 37.5% 10% auto;
  }

  #mobileTitle{
    grid-row: 1;
    font-size: 10vw;
    text-align: center;
    justify-self: center;
    align-self: flex-end;
  }

  #mobileProfilePhoto{
    grid-row: 2;

    border-radius: 50%;
    
    height: 57.5vw;
    width: 57.5vw;

    background-image: url("./../assets/profilePicture.png");
    background-repeat: no-repeat;
    background-size: 100%;
    justify-self: center;
    align-self: center;
  }

  .headline{
    grid-row: 3;
    font-size: 16px;
    line-height: 1.75;
    justify-self: center;
    text-align: center;
    align-self: flex-start;
  }

  #mobileLinks{
    grid-row: 4;
    display: grid;
    grid-template-columns: auto auto auto;
    margin-left: 7.5%;
    margin-right: 7.5%;
    margin-bottom: 10%;
  }

  .link{
    align-self: center;
    justify-self: center;
    width: 10vw;
    height: 10vw;
  }
}

.headline{
  display: flex;
  align-items: center;
  color: #909ECC;
}

.link1{
  grid-column: 1;
  background-image: url("../assets/github_logos/github-mark-white.svg");
  background-size: cover;
}
.link2{
  grid-column: 2;
  background-image: url("../assets/devpost_logo.png");
  background-size: cover;
}
.link3{
  grid-column: 3;
  background-image: url("../assets/frontend-mentor-logo.png");
  background-size: cover;
}

.linkBox{
  width: 100%;
  height: 100%;
}