@font-face {
    font-family: 'poppinsbold';
    src: url('../fonts/poppins-bold-webfont.woff2') format('woff2'),
         url('../fonts/poppins-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'poppinsthin';
    src: url('../fonts/poppins-thin-webfont.woff2') format('woff2'),
         url('../fonts/poppins-thin-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}


html,body {
  width:100%;
  height:100%;
  margin:0;
}

body {
  background: rgb(1,86,104);
  background: linear-gradient(180deg, rgba(2,53,66,1) 0%,  rgba(1,86,104,1) 100%);
  font-family: "poppinsthin";
  color: #ffd169;
  letter-spacing: -0.01em;
}

.bold {
  font-family: "poppinsbold";
}

.quote {
  display:inline-block;
  background-image:url('../images/quote.png');
  width:3vw;
  height:3vw;
  background-size: 100%;
  background-repeat: no-repeat;
}

a,a:visited {
  color: #ffd169;
  text-decoration: none;
}

.container {
    height:calc(100% - 25px);
    width:100%;
    display:flex;
    flex-flow:column;
}

.header > img {
  margin-top:10px;
  width:20vw;
  height:auto;
}

.header {
  text-align:center;
}

.body-container {
  width:100vw;
  display:flex;
  flex-flow:row;
  flex-grow: 2;
  align-items:center;
  justify-content:center;
}

.underlay {
  position:absolute;
  top:-10px;
  right:0vw;
  width:100vw;
  height:calc(100vh - 25px);
  border-radius:50%;
  background: linear-gradient(0deg, rgba(255,209,105,1) 0%, rgba(1,86,104,0) 40%);
  z-index:-1000;
}

.matchtune {
  width:7vw;
  position:absolute;
  bottom: 0px;
  right:0px;
  margin: 10px;
  text-align: center;
}

.body {
  width:30vw;
  text-align:left;
  font-size:2vw;
  margin-right:5vw;
}

.footer {
  text-align:center;
}

.mockup {
  display:flex;
  flex-flow:row;
  margin-left:5vw;
  width:30vw;
  text-align:center;
  position: relative;
  top: 0;
  left: 0;
}

.mockup .ipad {
  width:23vw;
  height:calc(23vw * 1285 / 1033);
}

.appstore {
  margin-top:10px;
  width:120px;
  height:auto;
}

@media screen and (orientation:portrait) {
  .header > img {
    width:80vw;
  }

  .body-container {
    flex-flow:column-reverse;
    flex-grow: 0;
  }

  .body {
    width: 80vw;
    font-size: 7vw;
    margin:0px;
  }

  .mockup {
    width: unset;
    margin:0px;
  }

  body,html {
    height:unset;
    min-height: 100%;
  }

  .mockup .ipad {
    width:30vw;
    height:calc(30vw * 1285 / 1033);
  }

  .underlay {
    display:none;
  }
  .appstore-container {
    text-align:center;
  }
  .counterup-container {
    text-align:center;    
  }
  .matchtune {
    display:none;
  }

  .quote {
    width:3vh;
    height:3vh;
  }

}