#myProjectsTitle{font-family: 'oleo script';}

.positionButton{
  border-radius: 50px;

  background-color: white;
  mix-blend-mode: normal;
  opacity: 0.17;

  display: inline-block;
  margin: 0.75vw;
}

.positionButton--active{
  background-color: white;
  mix-blend-mode: normal;
  opacity: 0.8;
}

.projectTitle, .shortDescription, .projectDescription{font-family: 'Poppins';}
.projectTitle{font-weight: 700;}
.shortDescription, .projectDescription{font-weight: 400;}


@media only screen and (min-width: 400px) { /* modelled using desktop in Chrome */
  #page3 {
    display: grid;
    grid-template-columns: 5vw 45vw 7vw 40vw auto;
    grid-template-rows: 15vh 6vh 20vh 10vh 2.5vh 25vh 2.5vh 8vh 20vh;
  }

  #myProjectsTitle{
    grid-column: 2;
    grid-row: 2;

    font-size: 5vh;
  }
            
  .imageOuterBox{
    grid-column: 4;
    grid-row: 3 / 9;

    width: 40vw;
    height: 68vh;

    display: flex;
    justify-content: center;
    align-items: center;
  }

  .imageInnerBox{
    width: 40vw;
    height: 68vh;

    overflow: hidden;
    /* background-color: aquamarine; */
  }

  .imageInnerBox img{
    width:100%;
    height:100%;
    object-fit: contain;
  }

  .project{
    grid-column: 2;
    grid-row: 4;
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto auto;
  }

  .projectTitle{
    grid-row: 1;

    font-size: 4vh;
  }
  .shortDescription{
    grid-row: 2;

    font-size: 2vh;
  }
				
  .projectDescription{
    grid-column: 2;
    grid-row: 6;

    display: flex;
    align-items: center;
  }


  #buttonsContainer{
    grid-column: 2;
    grid-row: 8;
  }

  .positionButton{
    width: 5vh;
    height: 5vh;
  }

  .positionButton:hover{
    background-color: white;
    mix-blend-mode: normal;
    opacity: 0.5;
  }

  .positionButton--active:hover{
    background-color: white;
    mix-blend-mode: normal;
    opacity: 0.8;
  }
}


@media only screen and (max-width: 400px) { /* modelled using iphone SE in Chrome */
  #page3 {
    display: grid;
    grid-template-columns: 5vw auto 5vw;
    grid-template-rows: 15vh 10vh 27.5vh 7.5vh 10vh auto;
  }

  #myProjectsTitle{
    grid-column: 1 / 4;
    grid-row: 2;
    text-align: center;
    font-size: 4vh;
  }

  
  .imageOuterBox{
    grid-column: 1 / 4;
    grid-row: 3;

    width: 100vw;
    height: 27.5vh;

    display: flex;
    justify-content: center;
    align-items: center;
  }

  .imageInnerBox{
    width: 100vw;
    height: 25vh;

    overflow: hidden;
    /* background-color: aquamarine; */
  }

  .imageInnerBox img{
    width:100%;
    height:100%;
    object-fit: contain;
  }


  #buttonsContainer{
    grid-column: 1 / 4;
    grid-row: 4;
    display: flex;
    justify-content: center;
  }

  .positionButton{
    width: 5vw;
    height: 5vw;
  }

  .project{
    grid-column: 2;
    grid-row: 5;
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto auto;
  }

  .projectTitle{
    grid-row: 1;

    font-size: 4vh;
  }
  .shortDescription{
    grid-row: 2;

    font-size: 2vh;
  }
				
  .projectDescription{
    grid-column: 2;
    grid-row: 6;
    margin-top: 2.5vw;

    display: flex;
    align-items: flex-start;

    font-size: 2vh;

    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
  }
}