html,body {margin:0;padding:0;}
body {
  font-family: 'Helvetica Neue', 'Helvetica', 'Tahoma', 'Arial', 'PingFang SC', 'Microsoft Yahei';
  color: #03081A;
  font-size: 16px;
}
a,a:visited {color: #fff;text-decoration: none;}
ul {list-style: none;padding: 0;margin: 0;}
h1 {
  text-align: center;
  font-size: 48px;
}
h1 span {position: relative;}
h1 span::after {
  content: attr(title);
  position: absolute;
  right: 12%;
  top: 81.5%;
  font-size: 12px;
  font-weight: normal;
  letter-spacing: 1px;
}
.viewport {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  background-color: #007aff;
  color: #fff;
  height: 20vmax;
}
.viewport h2 {font-size: 14px;font-weight: 300;margin: 0;}
.viewport p {
  display: flex;
  align-items: center;
  margin: 0;
}
.viewport strong {
  position: relative;
  font-size: 72px;
}
.viewport strong::after {
  content: 'PX';
  font-size: 24px;
  line-height: 100%;
  position: absolute;
  left: 0;right: 0;top: 85%;
  font-weight: 300;
  letter-spacing: 2px;
  opacity: .4;
}
.viewport span {font-size: 36px;margin:0 20px;}

.mod {
  max-width: 800px;
  margin: 0 auto;
}
.mod-title {font-size: 48px;text-align: center;}
.box {
  background-color: #f5f6fe;
}
.box-title {
  margin: 0;
  padding:10px 20px;
  background-color: #344150;
  color: #fff;
}
.list {padding: 10px 20px;}
.list li {
  display: flex;
  padding:10px 0;
  font-family: monospace;
  align-items: center;
  position: relative;
}
.list li::after {
  content: '';
  position: absolute;left: 0;right: 0;top: 0;
  height: 1px;
  background-color: #ddd;
}
.list li:first-child::after {display: none;}
.list li em {margin-left: auto;font-weight: 700;}
.features .list li {color: #8a8a8a;font-style: italic;}
.features .list li.supported {color:inherit;font-weight: 700;font-style: normal;}
.grid {
  display: grid;
  grid-auto-flow: dense;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 2rem;
}
.user-agent p {
  padding: 20px;
  background-color: #f5f6fe;
}
footer {
  text-align: center;
  padding: 2vmax 0;
  background-color: #007aff;
  color: #fff;
}

@media (max-width: 575px) {
  .viewport strong {font-size: 48px;}
  .mod {padding: 0 20px;}
  .mod-title {font-size: 32px;}
  .grid {
    display: block;
  }
  .box {margin-top: 20px;}
}

/*
 * CSS RATIO
 */
@media (-webkit-min-device-pixel-ratio: 1), (min-resolution: 1dppx), (min-resolution: 96dpi) {
  .cssratio em:after {
    content: '1+';
  }
}

@media (-webkit-device-pixel-ratio: 1), (resolution: 1dppx), (resolution: 96dpi) {
  .cssratio em:after {
    content: '1';
  }
}

@media (-webkit-min-device-pixel-ratio: 1.3), (-webkit-min-device-pixel-ratio: 1.29167), (min-resolution: 1.3dppx), (-webkit-min-device-pixel-ratio: 1.2916666666666667), (min-resolution: 124dpi) {
  .cssratio em:after {
    content: '1.3+';
  }
}

@media (-webkit-device-pixel-ratio: 1.3), (resolution: 1.3dppx), (resolution: 125dpi) {
  .cssratio em:after {
    content: '1.3';
  }
}

@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 1.5dppx), (min-resolution: 144dpi) {
  .cssratio em:after {
    content: '1.5+';
  }
}

@media (-webkit-device-pixel-ratio: 1.5), (resolution: 1.5dppx), (resolution: 144dpi) {
  .cssratio em:after {
    content: '1.5';
  }
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx), (min-resolution: 192dpi) {
  .cssratio em:after {
    content: '2+';
  }
}

@media (-webkit-device-pixel-ratio: 2), (resolution: 2dppx), (resolution: 192dpi) {
  .cssratio em:after {
    content: '2';
  }
}

@media (-webkit-min-device-pixel-ratio: 2.2), (-webkit-min-device-pixel-ratio: 2.19792), (min-resolution: 2.2dppx), (-webkit-min-device-pixel-ratio: 2.1979166666666665), (min-resolution: 211dpi) {
  .cssratio em:after {
    content: '2.2+';
  }
}

@media (-webkit-min-device-pixel-ratio: 2.4), (-webkit-min-device-pixel-ratio: 2.39583), (min-resolution: 2.4dppx), (-webkit-min-device-pixel-ratio: 2.3958333333333335), (min-resolution: 230dpi) {
  .cssratio em:after {
    content: '2.4+';
  }
}

@media (-webkit-min-device-pixel-ratio: 2.5), (min-resolution: 2.5dppx), (min-resolution: 240dpi) {
  .cssratio em:after {
    content: '2.5+';
  }
}

@media (-webkit-device-pixel-ratio: 2.5), (resolution: 2.5dppx), (resolution: 240dpi) {
  .cssratio em:after {
    content: '2.5';
  }
}

@media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 3dppx), (min-resolution: 288dpi) {
  .cssratio em:after {
    content: '3+';
  }
}

@media (-webkit-device-pixel-ratio: 3), (resolution: 3dppx), (resolution: 288dpi) {
  .cssratio em:after {
    content: '3';
  }
}

@media (-webkit-min-device-pixel-ratio: 3.5), (min-resolution: 3.5dppx), (min-resolution: 336dpi) {
  .cssratio em:after {
    content: '3.5+';
  }
}

@media (-webkit-device-pixel-ratio: 3.5), (resolution: 3.5dppx), (resolution: 336dpi) {
  .cssratio em:after {
    content: '3.5';
  }
}

@media (-webkit-min-device-pixel-ratio: 4), (min-resolution: 4dppx), (min-resolution: 384dpi) {
  .cssratio em:after {
    content: '4+';
  }
}

@media (-webkit-device-pixel-ratio: 4), (resolution: 4dppx), (resolution: 384dpi) {
  .cssratio em:after {
    content: '4';
  }
}

@media (-webkit-min-device-pixel-ratio: 5), (min-resolution: 5dppx), (min-resolution: 480dpi) {
  .cssratio em:after {
    content: '5+';
  }
}

@media (-webkit-device-pixel-ratio: 5), (resolution: 5dppx), (resolution: 480dpi) {
  .cssratio em:after {
    content: '5';
  }
}

@media (orientation: landscape) {
  .cssorient em:after {
    content: 'landscape';
  }
}

@media (orientation: portrait) {
  .cssorient em:after {
    content: 'portrait';
  }
}