@font-face {

  font-family: RobotoSlab;
  src: url(RobotoSlab.ttf);
}
@font-face {

  font-family: PlayfairDisplay;
  src: url(PlayfairDisplay.ttf);
}

body {

  background-color: #fff;
  margin: 0 0 0 0;
  overflow-x: hidden; /* shouldn't happen, but just as a precaution */
}
header {

  background-color: #a32;
  background-image: radial-gradient( ellipse 300px 200px at 18% 15%, rgba( 245, 90, 70, 1 ) 0%, rgba( 245, 90, 70, .3) 50%, rgba( 245, 90, 70, 0) 100% ), radial-gradient( ellipse 400px 200px at 25% 29%, rgba(244, 137, 83, 1) 0%, rgba( 244, 137, 83, .3) 50%, rgba(244, 137, 93, 0) 100% ), radial-gradient( ellipse 350px 100px at 32% 40%, rgba(250, 165, 40, 1) 0%, rgba(250, 165, 40, .3) 50%, rgba(250, 165, 40, 0) 100% );
  height: calc( 100vh - 90px );

  color: white;
}
header > nav {

  width: 100%;
  height: 60px;
  border-bottom: 1px solid #ccc;
  
  display: flex;
  display: -webkit-flex;
  text-align: center;
  font: 13px RobotoSlab;
}
header > nav div {

  flex: 1;
  -webkit-flex: 1;
  display: flex;
  display: -webkit-flex;
}
header > nav div a {
  
  color: white;
  flex: 1;
  -webkit-flex: 1;
  text-decoration: none;
  
  line-height: 60px;
  
  cursor: pointer;
  margin-bottom: -1px; /* small hack to get the orange line on top of the white one */
  transition: .2s color, .2s border-bottom-color;
  -webkit-transition: .2s color, .2s border-bottom-color;
  
}
header > nav div a:hover {

  color: #fd8;
  border-bottom: 1px solid #fd8;
}
header > nav div a.active {

  color: orange;
  border-bottom: 1px solid orange;
}
header > nav div#logo {

  font: 23px PlayfairDisplay;
}
header > nav div#internal-links {

  width: 660px;
}
header > nav div#email {

  flex: none;
  -webkit-flex: none;
  width: 40px;
  text-align: right;
  margin-right: 20px;
  margin-left: 8vw;
}
header > nav div#email a#email-wrapper {

  margin-top: 10px;
  height: 40px;
  background-image: url(mail-icon.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px 14px;
  border: 1px solid white;
  border-radius: 20px;
}

header > div#info {

  width: 100%;
  height: 100vh;
  display: flex;
  display: -webkit-flex;
  margin-top: -60px;
}
header > div#info > div {
  position: absolute;
  top: 90px;
  left: 0;
}
header > div#info > div#description {

  padding-left: calc( 25vw - 40px );
  padding-top: calc( 20vh - 90px );
}
header > div#info > div#description > h1 {

  font-family: PlayfairDisplay;
  margin-top: 0;
  margin-bottom: -10px;
  font-size: 70px;
  text-shadow: 0 0 10px #8B4323; /* rgba(0,0,0,.6) */
  color: #fcecd6;
}
header > div#info > div#description > span {

  margin-top: 0;
  font-family: PlayfairDisplay;
  color: #732;
  font-size: 30px;
}
header > div#info > div#description > p {

  margin-top: 30px;
  width: 290px;
  font-family: RobotoSlab;
}
a.appstore { /* no full indicators because this is used somewhere else aswell */

  color: white;
  text-decoration: none;
  margin-top: 30px;
  display: flex;
  display: -webkit-flex;
  border: 1px solid white;
  padding: 4px 4px 4px 4px;
  border-radius: 5px;
  font: 10px Verdana;
  width: 120px;
}
a.appstore > div {

  padding-left: 5px;
}
a.appstore > div > span:nth-of-type(2){

  font-size: 17px;
}
header > div#info > div#illustration {
  width: 100%;
  background-image: radial-gradient( ellipse 120px 10px at 71.7vw calc( 100vh - 152px ), rgba(0,0,0,.4) 0%, rgba(0,0,0,0) 100% );
}
header > div#info > div#illustration > img {

  position: absolute;
  height: 38.4vw;
  margin-left: 60vw;
  margin-top: calc( 100vh - 135px - 38.4vw  );
}
header > div#info > div#illustration > video {
  background-color: black;

  position: absolute;
  height: 30vw;
  width: 17vw;
  margin-left: 63.2vw;
  margin-top: calc( 100vh - 100px - 38vw );
}

main {

}
main article h1 {
  
  font-family: PlayfairDisplay;
  color: orange;
}
main article p {

  font-family: RobotoSlab;
}
main > article#what-is-evershelf {

  height: 240px;
  padding: 100px calc( 50vw - 360px ) 0 calc( 50vw - 360px );
  background-image: linear-gradient( 0deg, rgba(245, 245, 245, 0 ) 0%, rgba( 245, 245, 245, 1 ) 100% );
  display: flex;
  display: -webkit-flex;
}
main > article#what-is-evershelf > h1 {
  width: 250px;
  height: 140px;
  overflow-x: visible;
  font-size: 50px;
  border-bottom: 1px solid rgba(40,0,0,.3);
  margin-top: 0;
  margin-bottom: 90px;
  padding-left: 10px;
  flex: 1;
  -webkit-flex: 1;
}
main > article#what-is-evershelf > p {

  padding-left: 80px;
  flex: 2;
  -webkit-flex: 2;
}
main > h1#evershelf-features {

  color: rgb( 215, 115, 100 );
  font-family: RobotoSlab;
  margin-bottom: 0;
  margin-left: calc( 50vw - 360px );
}
main > hr {

  border: none;
  border-bottom: 1px solid rgba(40,0,0,.3);
}
main > ol#features {

  padding: 0 calc( 50vw - 360px ) 0 calc( 50vw - 360px );
}
main > ol#features > li {

  display: flex;
  display: -webkit-flex;
  border-bottom: 1px solid rgba(40,0,0,.3);
  padding-top: 40px;
  list-style: none;
  padding-bottom: 60px;
}
main > ol#features > li > svg > text {

  font: 40px PlayfairDisplay;
  fill: orange;
}
main > ol#features > li > div {

  padding-left: 20px;
  width: 260px;
}
main > ol#features > li > div > h1 {

  margin-top: 10px;
  font-family: PlayfairDisplay;
  color: orange;
}
main > ol#features > li > div > p {

  font-family: RobotoSlab;
}
main > ol#features > li#share {

  border-bottom-color: rgba(255, 255, 255, .5);
}

/* special cases for image placement */
main > ol#features > li > div > img {

  position: absolute;
}
#snap2-img { width: 120px; margin-top: -85px; margin-left: 50px }
#snap1-img { width: 110px; margin-top: -60px; margin-left: 140px }
#search1-img { width: 220px; margin-top: -70px; margin-left: 50px }
#share4-img { width: 110px; margin-top: -60px; margin-left: 150px }
#share3-img { width: 120px; margin-top: -85px; margin-left: 50px }
#share2-img { width: 130px; margin-left: -10px; margin-top: -20px; }
#share1-img { width: 100px; margin-left: 210px; margin-top: 10px; }


footer {

  position: absolute;
  margin-top: -220px;
  display: flex;
  display: -webkit-flex;
  width: 720px;
  height: 200px;
  padding: 150px calc( 50vw - 360px ) 0 calc( 50vw - 360px );
  color: white;
  font: 15px RobotoSlab;
  background-image: linear-gradient( 0deg, rgba( 255, 165, 0, 1 ) 0%, rgba( 255, 165, 0, 0 ) 90% ), linear-gradient( 0deg, rgba( 255, 255, 255, 0 ) 10%, rgba( 255, 255, 255, 1 ) 100% ), url(library-bottom.png);
  background-size: auto 100%;
  
  z-index: -1;
}
footer > div {

  flex: 1;
  -webkit-flex: 1;
  text-align: center;
  margin-top: 100px;
  height: 40px;
  padding-top: 15px;
}
footer > div#get-evershelf {

  display: flex;
  display: -webkit-flex;
  margin-left: 50px;
  border-right: 1px solid rgba(255,255,255,.5);
}
footer > div#get-evershelf > a.appstore {

  margin-top: -10px;
  margin-left: 10px;
  height: 33px;
}
footer > div#social > a {

  font-family: Verdana;
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 1px solid rgba(255,255,255,.5);
  border-radius: 5px;
}

/* fixed values */

@media all and (max-width: 800px) {
  
  body {
  
    overflow-x: scroll;
  }
  header {
  
    width: 800px;
  }
  header > nav {

    width: 800px; /* line 27: 100vw */
  }
  header > nav div#email {
    
    margin-left: 64px; /* line 76: 8vw */
  }
  header > div#info > div#description {

    padding-left: 160px; /* line 105: calc( 25vw - 40px ) */
    padding-right: 350px; /* line 106: calc( 75vw - 250px ) */
  }
  header > div#info > div#illustration {
    
    width: 800px;
    background-image: radial-gradient( ellipse 120px 10px at 573px calc( 100vh - 152px ), rgba(0,0,0,.4) 0%, rgba(0,0,0,0) 100% ); /* line 151: radial-gradient( ellipse 120px 10px at 71.7vw calc( 100vh - 152px ), rgba(0,0,0,.4) 0%, rgba(0,0,0,0) 100% ) */
  }
  header > div#info > div#illustration > img {

    height: 307px; /* 38.4vw */
    margin-left: 480px; /* line 156: 60vw */
    margin-top: calc( 100vh - 442px ); /* calc( 100vh - 135px - 38.4vw  ) */
  }
  header > div#info > div#illustration > video {
  height: 240px; /* 30vw */
  width: 136px; /*17vw */
  margin-left: 505px; /* 63.2vw */
  margin-top: calc( 100vh - 404px ); /* calc( 100vh - 100px - 38vw ) */
}
  
  main {
  
    width: 800px;
  }
  main > article#what-is-evershelf {

    padding: 100px 40px 0 40px; /* line 176: 100px calc( 50vw - 360px ) 0 calc( 50vw - 360px ) */
  }
  main > h1#evershelf-features {
    
    margin-left: 40px; /* line 199: calc( 50vw - 360px ) */
  }
  main > div#features {

    padding: 0 40px 0 40px; /* line 208: 0 calc( 50vw - 360px ) 0 calc( 50vw - 360px ) */
  }
  
  footer {
  
    padding: 150px 40px 0 40px; /* line 251: 150px calc( 50vw - 360px ) 0 calc( 50vw - 360px ) */
  }
}

/* utility */
a {

  text-decoration: none;
  color: inherit;
}

@media all and (max-height: 500px){

  header {
  
    height: 410px /* line 21: 
  height: calc( 100vh - 90px ) */
  }
  header > div#info > div#description {

    padding-top: 10px; /* line 107: calc( 20vh - 90px ) */
  }
  header > div#info > div#illustration {
    
    width: 100vw;
    background-image: radial-gradient( ellipse 120px 10px at 71.7vw 348px, rgba(0,0,0,.4) 0%, rgba(0,0,0,0) 100% ); /* line 151: radial-gradient( ellipse 120px 10px at 71.7vw calc( 100vh - 152px ), rgba(0,0,0,.4) 0%, rgba(0,0,0,0) 100% ) */
  }
  header > div#info > div#illustration > img {

    margin-top: calc( 365px - 38.4vw ); /* calc( 100vh - 135px - 38.4vw  ) */
  }
  header > div#info > div#illustration > video {
    
    margin-top: calc( 400px - 38vw ); /* calc( 100vh - 100px - 38vw ) */
  }
}
@media all and (min-height: 700px ){
  
  header {
  
    height: 610px /* line 21: 
  height: calc( 100vh - 90px ) */
  }
  header > div#info > div#description {

    padding-top: 50px; /* line 107: calc( 20vh - 90px ) */
  }
  header > div#info > div#illustration {
    
    width: 100vw;
    background-image: radial-gradient( ellipse 120px 10px at 71.7vw 548px, rgba(0,0,0,.4) 0%, rgba(0,0,0,0) 100% ); /* line 151: radial-gradient( ellipse 120px 10px at 71.7vw calc( 100vh - 152px ), rgba(0,0,0,.4) 0%, rgba(0,0,0,0) 100% ) */
  }
  header > div#info > div#illustration > img {

    margin-top: calc( 565px - 38.4vw ); /* calc( 100vh - 135px - 38.4vw  ) */
  }
  header > div#info > div#illustration > video {
    
    margin-top: calc( 600px - 38vw ); /* calc( 100vh - 100px - 38vw ) */
  }
  
}

@media all and (max-height: 500px) and (max-width: 800px){
  
  header > div#info > div#illustration {
    
    width: 800px; /* 100vw */
    background-image: radial-gradient( ellipse 120px 10px at 573px 348px, rgba(0,0,0,.4) 0%, rgba(0,0,0,0) 100% ); /* line 151: radial-gradient( ellipse 120px 10px at 71.7vw calc( 100vh - 152px ), rgba(0,0,0,.4) 0%, rgba(0,0,0,0) 100% ) */
  }
  header > div#info > div#illustration > img {
  
    margin-top: -77px; /* calc( 100vh - 135px - 38.4vw  ) */
  }
  header > div#info > div#illustration > video {
      
    margin-top: 96px; /* calc( 100vh - 100px - 38vw ) */
  }
}
@media all and (min-height: 700px) and (max-width: 800px){
  
  header > div#info > div#illustration {
    
    width: 800px; /* 100vw */
    background-image: radial-gradient( ellipse 120px 10px at 573px 548px, rgba(0,0,0,.4) 0%, rgba(0,0,0,0) 100% ); /* line 151: radial-gradient( ellipse 120px 10px at 71.7vw calc( 100vh - 152px ), rgba(0,0,0,.4) 0%, rgba(0,0,0,0) 100% ) */
  }
  header > div#info > div#illustration > img {
  
    margin-top: 257px; /* calc( 100vh - 135px - 38.4vw  ) */
  }
  header > div#info > div#illustration > video {
      
    margin-top: 296px; /* calc( 100vh - 100px - 38vw ) */
  }
}