/* https://stackoverflow.com/questions/31909188/flexbox-evenly-sized-elements-regardless-of-contents -->*/

    body,
    html,
    #app {
      height: 100%;
    }

    body {
      margin: 0;
      padding: 0;
    }

    #app {
      display: flex;
      flex-direction: column;
    }


    div {
      flex-grow: 1;
      flex-basis: 80px;
    }

    .title {
      flex-grow: 0;
      flex-basis: 1px;
      display: flex;
      padding: 10px;
    }

    .main {
      display: flex;
      padding: 10px;
    }
    @media(orientation:landscape){
      .main{
        flex-direction:row;
        display: flex;
      padding: 10px;
      }
    }
    @media(orientation:portrait){
      .main{
        flex-direction:column;
        display: flex;
      padding: 10px;
      }
    }

    .footer {
      flex-grow: 0;
      flex-basis: 1px;
      display: flex;
      padding: 10px;
    }

    .centeringParent {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 10px;
    }

    .main-image {
      max-width: 640px;
      width: 100%;
      /* width:33vw; */
    }