@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@600&display=swap');

* {
    margin: 0;
    padding: 0;
    font-family: 'Source Sans Pro', sans-serif;
}

html, body{
    height:100%
}

#p1 {
    padding-left: 3vw;
    padding-right: 3vw;
    padding-top: 10vh;
    width: 94vw;
    height: 8vh;

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

#p2 {
    padding-left: 3vw;
    padding-right: 3vw;
    padding-bottom: 2vh;
    width: 94vw;
    height: 68vh;

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

#title{
    font-size: 10vh;
}

p {
    font-size: 3vh;
}

h1 {
  width: 100%;
  text-align: center;
}

#whiteSpace{
  height: 40vh;
}

p {
  width: 100%;
  text-align: center;
}

/* alternative approach with breakpoints (I didn't like this, too manual and finicky)
@media (min-aspect-ratio: 1/4) {
    body {
        background-color: purple;
    }

    #title {
      font-size: 20vw;
    }

    #whiteSpace{
      height: 0vh;
    }

    p {
      font-size: 6vw;
    }

}

@media (min-aspect-ratio: 3/5) {
    body {
        background-color: pink;
    }

    #title {
      font-size: 15vw;
    }

    #whiteSpace{
      height: 3vh;
    }

    p {
      font-size: 4vw;
    }
}

@media (min-aspect-ratio: 2/3) {
    body {
        background-color: blue;
    }

    #title {
      font-size: 13vw;
    }

    #whiteSpace{
      height: 0vh;
    }

    p {
      font-size: 4vw;
    }

}

@media (min-aspect-ratio: 3/4) {
    body {
        background-color: green;
    }

    #title {
      font-size: 10vw;
    }

    #whiteSpace{
      height: 13vh;
    }

    p {
      font-size: 3vw;
    }

}

@media (min-aspect-ratio: 1/1) {
    body {
        background-color: yellow;
    }

    #title {
      font-size: 8vw;
    }

    #whiteSpace{
      height: 7.5vh;
    }

    p {
      font-size: 2vw;
    }

}

@media (min-aspect-ratio: 3/2) {
    body {
        background-color: orange;
    }

    #title {
      font-size: 6vw;
    }

    #whiteSpace{
      height: 7vh;
    }

    p {
      font-size: 1.4vw;
    }

}

@media (min-aspect-ratio: 2/1) {
    body {
        background-color: red;
    }

    #title {
      font-size: 6vw;
    }

    #whiteSpace{
      height: 5vh;
    }

    p {
      font-size: 1.4vw;
    }

}
*/