#page2 {
  display: grid;
  grid-template-columns: 7.5vw 40vw auto 40vw 7.5vw;
}

@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;
    /* background-color: aqua; */

    display: grid;
    grid-template-rows: 12.5vh 12.5vh 70vh auto;
  }

  #rightSide{
    grid-column: 4;
    display: grid;
    grid-template-rows: 23vh 30vh 7.5vh 30vh auto;
    /* background-color: rgb(0, 255, 94); */
  }

  #history{
    grid-row: 2;
    font-size: 4.5vh;
    align-self: center;
    /* background-color: blueviolet; */
  }
  
  .skillsBox{
    grid-row: 2;
    display: grid;
    grid-template-rows: 7.5vh auto;
    grid-template-columns: auto auto auto auto;
  }

  .skillHeading{
    grid-row: 1;
    font-size: 3.5vh;
    text-decoration: underline;
  }

  .techBox{
    grid-row: 2;
    display: flex;
    justify-content: center;
    justify-self: center;
    align-self: center;
    
    background: rgba(255, 255, 255, 0.25);
    border-radius: 16px;
    backdrop-filter: blur(5px);

    width: 80%;
    height: 80%;
  }

  #techSkills{
    /* background-color: rgb(226, 177, 43); */
    display: grid;
    grid-template-columns: 25% 25% 25% 25%;
  }

  .techSkillLogo{
    position: absolute;
    height: 75%;
    width: 100%;
    /* background-color: blueviolet; */

    background-position: center;
    background-repeat: no-repeat;
    background-size: 57.5%;
  }

  #pythonLogo{
    background-image: url("../assets/tech_skills_logos/python_logo.png");
  }
  #htmlLogo{
    background-image: url("../assets/tech_skills_logos/HTML5_logo.svg");
  }
  #cssLogo{
    background-image: url("../assets/tech_skills_logos/CSS3_logo.svg");
  }
  #jsLogo{
    background-image: url("../assets/tech_skills_logos/js_logo.png");
  }

  .techSkillTitle{
    position: absolute;
    bottom: 0.75vh;
    font-size: 2.75vh;
  }

  #otherSkills{
    grid-row: 4;
    /* background-color: rgb(43, 73, 226); */
  }

  #timelineBox{
    grid-row: 3;
    position: relative;
    width: 100%;
    overflow-x: hidden;
    overflow-y: auto;
  
    /* hide scrollbar */
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
  }
  
  #timelineBox::after{
    /* vbar */
    content: '';
    /* position: absolute; */
    position: fixed;
  
    width: 1.2vh;
    height: 70%;
    background: #909ECC;
    top: 25%;
    left: 26.75%;
  }
  
  .eventsContainer{
    padding: 2.5vh 4.5vh;
    position: relative;
    width: 50%;
  }
  
  .eventsContainer.left{left: 0;}
  .eventsContainer.right{left: 50%;}

  .date{
    position: absolute;
    display: inline-block;
    transform: translateY(-50%);
    top: 50%;
    text-align: center;
    font-size: 2vh;
    font-weight: bold;
    color: #909ECC;
    text-transform: uppercase;
  
    letter-spacing: 0.5vh;
    width: 75%;
  }
  
  .eventsContainer.left .date{left: 42.5vh;}
  .eventsContainer.right .date{right: 42.5vh;}

  .eventsContainer .event{
    padding: 3.5vh 3.5vh 3.5vh 3.5vh;
    background: #909ECC;
    position: relative;
    border-radius: 5% 5% 5% 5%;
  }
  
  .eventTitle{
    font-size: 2.75vh;
    color: #161D30;
  }
  
  .eventDescription{
    margin-top: 2vh;
    font-size: 2vh;
    line-height: 3vh;
    color: #192137;
  }
  
   /* Hide scrollbar for Chrome, Safari and Opera */
   #timelineBox::-webkit-scrollbar {
    display: none;
  }
}


@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;}
}