:root {
  --default-text-color: #ffffff;
  --dark-text-color: #A3A3A3;
  --gold-yellow: #FEDA00;
}

body {
  background-color: #000;
  color: var(--default-text-color);
  font-family: 'system-ui', 'Helvetica Neue', 'Helvetica', 'Roboto', 'Arial', sans-serif;
  letter-spacing: 0rem !important;
}

a {
  color: var(--default-text-color);  
}

a:hover {
  color: var(--gold-yellow);
}

.wrapper {
  display: block;
  overflow: hidden;
  position: relative;
  width: 100%;

  background-image: url('../images/Background.png');
  background-repeat: no-repeat;
  background-position: center 5rem;
  background-size: 144rem 60.5rem;
}

.container {
  max-width: 98rem;
}


/* Header */

header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: #000;
  z-index: 100;
  height: 5rem;
  border-bottom: 1px solid #2B2B2B;
  font-size: 1.8rem;
}

header a.home {
  font-size: 2rem;
  letter-spacing: 0rem;
  padding-left: 3.8rem;
  background-image: url('../images/App\ Logo\ Header.png');
  background-repeat: no-repeat;
  background-size: 2.9rem;
  background-position: 0 0.9rem;
  padding-top: 0.9rem;
}

header nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  padding-top: 1rem;
}

header nav li {
  float: left;
  padding: 0.4rem 0 0 3rem;
}


/* Footer */

footer {
  border-top: 1px solid #2B2B2B;
  color: var(--dark-text-color);
  font-size: 1.4rem;
  padding: 1rem 0 0 0;
}

footer p {
  margin-bottom: 1rem;
}

footer a {
  color: var(--dark-text-color);
}

footer nav ul {
  list-style-type: none;
  margin: 0 -1rem;
  padding: 0;
}

footer nav li {
  float: left;
  padding: 0 1rem;
}

@media (min-width: 50.0rem) {
  footer nav {
    float: right;
  }

  footer p {
    float: left;
  }
}

/* Main */

main.container {
  padding-top: 5rem;
  padding-bottom: 5rem;
  min-height: calc(100vh - 4.32rem);
}

div.info-description {
  max-width: 45rem;
  float: left;
  padding-top: 3rem;
}

div.info-device {
  width: 40%;
  float: right;
  padding-top: 5rem;
  padding-bottom: 7rem;
  display: none;
}

.app {
  background-image: url('../images/App\ Logo.png');
  background-repeat: no-repeat;
  background-size: 10.9rem;
  background-position: 0 0;

  padding: 3rem 0 11rem 13rem;
  height: 10.9rem;
  min-width: 33rem;
}

.app h1 {
  font-size: 4rem;
  line-height: 1.8rem;
  letter-spacing: .05rem;
}

.app p {
  font-size: 2.5rem;
  line-height: 1.6rem;
  letter-spacing: .05rem;
  color: var(--dark-text-color);
}

a.download {
  display: block;
  background-image: url('../images/Download_on_the_App_Store_Badge_US-UK_RGB_blk_092917.png');
  background-repeat: no-repeat;
  background-size: 14.1rem 4.7rem;
  background-position: 0 0;

  width: 14.1rem;
  height: 4.7rem;
  font-size: 0;
}

div.device {
  position: relative;
  width: 31.3rem;
  height: 62.4rem;
}

.device img.device {
  z-index: 90;
  position: absolute;
  top: 0;
  left: 0;
  width: 31.3rem;
  height: 62.4rem;
}

.device img.screen {
  z-index: 10;
  position: absolute;
  top: 1.9rem;
  left: 2.1rem;
  width: 27.1rem;
  height: 58.6rem;
}

@media (min-width: 50.0rem) {
  div.info-device {
    display: block;
  }

  div.info-description {
    padding-top: 15rem;
  }  
}

ul.features {
  list-style-type: none;
  margin: 2rem -1rem 0 -1rem;
  padding: 0;
}

ul.features li {
  float: left;
  margin: 0 1rem;
}

ul.features h3 {
  font-size: 2rem;
  color: var(--gold-yellow);
}

@media (min-width: 50.0rem) {
  ul.features li {
    width: 30rem;
  }
}