Initial commit

font-files/inter.css

@@ -0,0 +1,200 @@
+@font-face {
+  font-family: 'Inter';
+  font-style:  normal;
+  font-weight: 100;
+  font-display: swap;
+  src: url("Inter-Thin.woff2?v=3.19") format("woff2"),
+       url("Inter-Thin.woff?v=3.19") format("woff");
+}
+@font-face {
+  font-family: 'Inter';
+  font-style:  italic;
+  font-weight: 100;
+  font-display: swap;
+  src: url("Inter-ThinItalic.woff2?v=3.19") format("woff2"),
+       url("Inter-ThinItalic.woff?v=3.19") format("woff");
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style:  normal;
+  font-weight: 200;
+  font-display: swap;
+  src: url("Inter-ExtraLight.woff2?v=3.19") format("woff2"),
+       url("Inter-ExtraLight.woff?v=3.19") format("woff");
+}
+@font-face {
+  font-family: 'Inter';
+  font-style:  italic;
+  font-weight: 200;
+  font-display: swap;
+  src: url("Inter-ExtraLightItalic.woff2?v=3.19") format("woff2"),
+       url("Inter-ExtraLightItalic.woff?v=3.19") format("woff");
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style:  normal;
+  font-weight: 300;
+  font-display: swap;
+  src: url("Inter-Light.woff2?v=3.19") format("woff2"),
+       url("Inter-Light.woff?v=3.19") format("woff");
+}
+@font-face {
+  font-family: 'Inter';
+  font-style:  italic;
+  font-weight: 300;
+  font-display: swap;
+  src: url("Inter-LightItalic.woff2?v=3.19") format("woff2"),
+       url("Inter-LightItalic.woff?v=3.19") format("woff");
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style:  normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("Inter-Regular.woff2?v=3.19") format("woff2"),
+       url("Inter-Regular.woff?v=3.19") format("woff");
+}
+@font-face {
+  font-family: 'Inter';
+  font-style:  italic;
+  font-weight: 400;
+  font-display: swap;
+  src: url("Inter-Italic.woff2?v=3.19") format("woff2"),
+       url("Inter-Italic.woff?v=3.19") format("woff");
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style:  normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url("Inter-Medium.woff2?v=3.19") format("woff2"),
+       url("Inter-Medium.woff?v=3.19") format("woff");
+}
+@font-face {
+  font-family: 'Inter';
+  font-style:  italic;
+  font-weight: 500;
+  font-display: swap;
+  src: url("Inter-MediumItalic.woff2?v=3.19") format("woff2"),
+       url("Inter-MediumItalic.woff?v=3.19") format("woff");
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style:  normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url("Inter-SemiBold.woff2?v=3.19") format("woff2"),
+       url("Inter-SemiBold.woff?v=3.19") format("woff");
+}
+@font-face {
+  font-family: 'Inter';
+  font-style:  italic;
+  font-weight: 600;
+  font-display: swap;
+  src: url("Inter-SemiBoldItalic.woff2?v=3.19") format("woff2"),
+       url("Inter-SemiBoldItalic.woff?v=3.19") format("woff");
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style:  normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url("Inter-Bold.woff2?v=3.19") format("woff2"),
+       url("Inter-Bold.woff?v=3.19") format("woff");
+}
+@font-face {
+  font-family: 'Inter';
+  font-style:  italic;
+  font-weight: 700;
+  font-display: swap;
+  src: url("Inter-BoldItalic.woff2?v=3.19") format("woff2"),
+       url("Inter-BoldItalic.woff?v=3.19") format("woff");
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style:  normal;
+  font-weight: 800;
+  font-display: swap;
+  src: url("Inter-ExtraBold.woff2?v=3.19") format("woff2"),
+       url("Inter-ExtraBold.woff?v=3.19") format("woff");
+}
+@font-face {
+  font-family: 'Inter';
+  font-style:  italic;
+  font-weight: 800;
+  font-display: swap;
+  src: url("Inter-ExtraBoldItalic.woff2?v=3.19") format("woff2"),
+       url("Inter-ExtraBoldItalic.woff?v=3.19") format("woff");
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style:  normal;
+  font-weight: 900;
+  font-display: swap;
+  src: url("Inter-Black.woff2?v=3.19") format("woff2"),
+       url("Inter-Black.woff?v=3.19") format("woff");
+}
+@font-face {
+  font-family: 'Inter';
+  font-style:  italic;
+  font-weight: 900;
+  font-display: swap;
+  src: url("Inter-BlackItalic.woff2?v=3.19") format("woff2"),
+       url("Inter-BlackItalic.woff?v=3.19") format("woff");
+}
+
+/* -------------------------------------------------------
+Variable font.
+Usage:
+
+  html { font-family: 'Inter', sans-serif; }
+  @supports (font-variation-settings: normal) {
+    html { font-family: 'Inter var', sans-serif; }
+  }
+*/
+@font-face {
+  font-family: 'Inter var';
+  font-weight: 100 900;
+  font-display: swap;
+  font-style: normal;
+  font-named-instance: 'Regular';
+  src: url("Inter-roman.var.woff2?v=3.19") format("woff2");
+}
+@font-face {
+  font-family: 'Inter var';
+  font-weight: 100 900;
+  font-display: swap;
+  font-style: italic;
+  font-named-instance: 'Italic';
+  src: url("Inter-italic.var.woff2?v=3.19") format("woff2");
+}
+
+
+/* --------------------------------------------------------------------------
+[EXPERIMENTAL] Multi-axis, single variable font.
+
+Slant axis is not yet widely supported (as of February 2019) and thus this
+multi-axis single variable font is opt-in rather than the default.
+
+When using this, you will probably need to set font-variation-settings
+explicitly, e.g.
+
+  * { font-variation-settings: "slnt" 0deg }
+  .italic { font-variation-settings: "slnt" 10deg }
+
+*/
+@font-face {
+  font-family: 'Inter var experimental';
+  font-weight: 100 900;
+  font-display: swap;
+  font-style: oblique 0deg 10deg;
+  src: url("Inter.var.woff2?v=3.19") format("woff2");
+}

index.html

@@ -0,0 +1,150 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <link rel="stylesheet" href="tools/normalize.css">
+  <link rel="stylesheet" href="style.css">
+  <link rel="stylesheet" href="font-files/inter.css">
+  <title>DOP</title>
+</head>
+<body class="flex-col">
+<header class="flex flex-col">
+  <div class="flex flex-col full-width">
+    <div class="flex items-center flex-col">
+      <img src="/static/img/logo.svg" alt="logo">
+      <div class="inter-22">
+        Consulting and custom development
+      </div>
+    </div>
+  </div>
+  <nav class="header-menu flex">
+    <a href="#" class="menu-link inter-22">Направление деятельности</a>
+    <a href="#" class="menu-link inter-22">Экспертиза</a>
+    <a href="#" class="menu-link inter-22">Команда</a>
+    <a href="#" class="menu-link inter-22">Центры компетенций</a>
+    <a href="#" class="menu-link inter-22">Проекты</a>
+  </nav>
+</header>
+<main class="flex flex-col full-width">
+  <h2 class="inter-40">Направление деятельности</h2>
+  <p class="inter-28 max-width-1000">Компания DOP создана как профильная компания по разработке
+    программного обеспечения.</p>
+  <ul class="list-style max-width-1000">
+    <li class="inter-24-600">Сопровождение и эксплуатация ИТ решений - Тестирование,
+      сопровождение и техническая поддержка ИТ решений, обучение
+      сотрудников.
+    </li>
+    <li class="inter-24-600">Проектирование и разработка цифровых продуктов – Полный цикл
+      разработки ПО с использованием индивидуальных бизнес-решений.
+    </li>
+    <li class="inter-24-600">Построение выделенных Центров Компетенций – Построение ЦК с
+      командой специалистов разработки, тестирования и сопровождения ИТ –
+      решений.
+    </li>
+  </ul>
+  <h2 class="inter-40">Экспертиза в областях</h2>
+  <div class="flex full-width justify-center">
+    <img src="static/img/diagram.svg" alt="diagram">
+  </div>
+  <h2 class="inter-40">Команда</h2>
+  <p class="inter-28 max-width-1000">В состав команды DOP входят сотрудники с опытом выполнения
+    проектов уровня Enterprise.<br/>
+    Наша команда обладает широким спектром компетенций для
+    реализации высокотехнологичных проектов с учетом отраслевой
+    специфики.</p>
+  <p class="inter-24-600">Общая численность более 30 сотрудников.</p>
+  <h2 class="inter-40">Центры компетенций</h2>
+  <div class="flex skill-list">
+    <div class="skill-card">
+      <div class="flex justify-center full-width inter-34-700">Dev:</div>
+      <ul>
+        <li class="inter-24-600 skill-list-item">Front - VueJS, React;</li>
+        <li class="inter-24-600 skill-list-item">BackEnd - Java, Spring,
+          Python, Django.
+        </li>
+      </ul>
+    </div>
+    <div class="skill-card">
+      <div class="flex justify-center full-width inter-34-700">Databases:</div>
+      <ul>
+        <li class="inter-24-600 skill-list-item">Oracle;
+        </li>
+        <li class="inter-24-600 skill-list-item">MS;
+        </li>
+        <li class="inter-24-600 skill-list-item">Postgres.
+        </li>
+      </ul>
+    </div>
+    <div class="skill-card">
+      <div class="flex justify-center full-width inter-34-700">Mobile:</div>
+      <ul>
+        <li class="inter-24-600 skill-list-item">Andriod;
+        </li>
+        <li class="inter-24-600 skill-list-item">IOS.
+        </li>
+      </ul>
+    </div>
+    <div class="skill-card">
+      <div class="flex justify-center full-width inter-34-700">DevOps:</div>
+      <ul>
+        <li class="inter-24-600 skill-list-item">Jenkins;</li>
+        <li class="inter-24-600 skill-list-item">Teamcity;</li>
+        <li class="inter-24-600 skill-list-item">Kubernetes;</li>
+        <li class="inter-24-600 skill-list-item">Docker.</li>
+      </ul>
+    </div>
+    <div class="skill-card">
+      <div class="flex justify-center full-width inter-34-700">QA:</div>
+      <ul>
+        <li class="inter-24-600 skill-list-item">Manual;</li>
+        <li class="inter-24-600 skill-list-item">Automated.</li>
+      </ul>
+    </div>
+    <div class="skill-card">
+      <div class="flex justify-center full-width inter-34-700">CRM:</div>
+      <ul>
+        <li class="inter-24-600 skill-list-item">Oracle Siebel.</li>
+      </ul>
+    </div>
+  </div>
+  <h2 class="inter-40">Реализованные проекты</h2>
+  <div class="inter-28">Участие в создании и внедрении:
+  </div>
+  <ul class="list-style max-width-1000">
+    <li class="inter-24-600">Банковские CRM системы (desktop & mobile);
+
+    </li>
+    <li class="inter-24-600">Клиентские мобильные приложения;
+
+    </li>
+    <li class="inter-24-600">Интеграция систем и приложений с государственными порталами;
+    </li>
+    <li class="inter-24-600">Сервис онлайн-продажи билетов, недвижимости / Системы
+      лояльности;
+    </li>
+    <li class="inter-24-600">Система мониторинга пользовательского опыта;
+
+    </li>
+    <li class="inter-24-600">Электронные торговые площадки;
+    </li>
+    <li class="inter-24-600">Переход с монолитной архитектуры на микросервсиную архитектуру
+      приложения;
+    </li>
+    <li class="inter-24-600">RPA;
+
+    </li>
+    <li class="inter-24-600">AR приложения.
+    </li>
+  </ul>
+</main>
+<footer class="flex flex-col items-start">
+  <div class="inter-38">DOP помогает клиентам создавать цифровые
+    решения.
+  </div>
+  <div class="inter-26-600 max-width-1000 text-end">Опыт нашей команды, позволит предложить
+    оптимальное технологическое решение.
+  </div>
+  <img src="static/img/logo.svg" alt="logo" class="bottom-logo">
+</footer>
+</body>
+</html>

static/img/bg.svg

@@ -0,0 +1,8 @@
+<svg width="1644" height="909" viewBox="0 0 1644 909" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M472.276 250.573V303.798L378.419 306.19C294.724 307.984 280.377 309.778 252.877 322.336C235.54 330.111 212.226 346.258 200.867 358.816C150.65 414.433 160.813 538.224 219.399 577.694C260.051 605.203 266.627 606.399 411.299 608.791L549.993 611.183V404.266V197.349H511.135H472.276V250.573ZM469.287 389.913C471.081 400.678 472.276 438.952 471.081 475.431L469.287 541.214L387.386 543.008C292.333 544.802 274.996 539.42 260.051 504.734C240.323 456.294 255.268 400.08 292.931 381.541C309.67 373.169 329.398 370.777 389.778 370.777H465.7L469.287 389.913Z"
+          fill="black" fill-opacity="0.02"/>
+    <path d="M723.36 313.366C680.915 325.327 667.763 332.503 645.644 354.63C618.144 381.541 607.383 419.217 610.97 472.441C614.557 522.675 629.503 552.577 662.383 578.292C698.252 605.203 737.11 611.781 854.282 608.791C951.129 606.399 954.118 605.801 980.422 589.056C1016.89 565.733 1033.03 546.596 1043.19 511.911C1053.95 476.029 1054.55 453.304 1044.99 413.237C1032.43 359.414 994.172 325.925 927.814 311.572C885.369 302.602 756.838 303.798 723.36 313.366ZM923.031 379.747C934.39 384.531 948.14 394.698 953.52 402.472C966.672 422.805 970.259 465.863 961.292 495.764C948.737 537.626 930.205 544.204 827.978 544.204C756.24 544.204 741.892 542.41 725.751 532.842C701.839 518.489 691.078 487.99 694.665 444.932C697.654 410.844 707.817 394.698 734.719 380.345C757.436 368.385 894.336 367.787 923.031 379.747Z"
+          fill="black" fill-opacity="0.02"/>
+    <path d="M1116.13 309.18C1113.74 310.974 1111.94 409.648 1111.94 527.459V742.151L1151.4 740.357L1190.85 738.563L1192.05 675.77L1192.65 612.977L1294.28 609.389C1407.86 605.801 1425.2 600.419 1462.26 558.557C1507.1 508.921 1504.11 398.884 1457.48 355.228C1424.6 325.326 1418.02 321.738 1379.17 313.366C1340.91 304.994 1123.3 301.405 1116.13 309.18ZM1369 381.541C1429.38 411.442 1422.81 526.263 1360.63 541.812C1353.46 543.008 1313.41 543.606 1270.36 543.008L1192.65 541.214L1190.85 469.451C1188.46 362.404 1181.89 370.776 1272.16 370.776C1332.54 370.776 1352.26 373.169 1369 381.541Z"
+          fill="black" fill-opacity="0.02"/>
+</svg>

static/img/list-line.svg

@@ -0,0 +1,3 @@
+<svg width="25" height="2" viewBox="0 0 25 2" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <line y1="1" x2="25" y2="1" stroke="black"/>
+</svg>

static/img/logo.svg

@@ -0,0 +1,5 @@
+<svg width="222" height="92" viewBox="0 0 222 92" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M50.9999 8.9002V17.8002L35.2999 18.2002C21.2999 18.5002 18.8999 18.8002 14.2999 20.9002C11.3999 22.2002 7.4999 24.9002 5.5999 27.0002C-2.8001 36.3002 -1.1001 57.0002 8.6999 63.6002C15.4999 68.2002 16.5999 68.4002 40.7999 68.8002L63.9999 69.2002V34.6002V0.000198364H57.4999H50.9999V8.9002ZM50.4999 32.2002C50.7999 34.0002 50.9999 40.4002 50.7999 46.5002L50.4999 57.5002L36.7999 57.8002C20.8999 58.1002 17.9999 57.2002 15.4999 51.4002C12.1999 43.3002 14.6999 33.9002 20.9999 30.8002C23.7999 29.4002 27.0999 29.0002 37.1999 29.0002H49.8999L50.4999 32.2002Z" fill="black"/>
+    <path d="M92.9999 19.4C85.8999 21.4 83.6999 22.6 79.9999 26.3C75.3999 30.8 73.5999 37.1 74.1999 46C74.7999 54.4 77.2999 59.4 82.7999 63.7C88.7999 68.2 95.2999 69.3 114.9 68.8C131.1 68.4 131.6 68.3 136 65.5C142.1 61.6 144.8 58.4 146.5 52.6C148.3 46.6 148.4 42.8 146.8 36.1C144.7 27.1 138.3 21.5 127.2 19.1C120.1 17.6 98.5999 17.8 92.9999 19.4ZM126.4 30.5C128.3 31.3 130.6 33 131.5 34.3C133.7 37.7 134.3 44.9 132.8 49.9C130.7 56.9 127.6 58 110.5 58C98.4999 58 96.0999 57.7 93.3999 56.1C89.3999 53.7 87.5999 48.6 88.1999 41.4C88.6999 35.7 90.3999 33 94.8999 30.6C98.6999 28.6 121.6 28.5 126.4 30.5Z" fill="black"/>
+    <path d="M158.7 18.7001C158.3 19.0001 158 35.5001 158 55.2001V91.1001L164.6 90.8001L171.2 90.5001L171.4 80.0001L171.5 69.5001L188.5 68.9001C207.5 68.3001 210.4 67.4001 216.6 60.4001C224.1 52.1001 223.6 33.7001 215.8 26.4001C210.3 21.4001 209.2 20.8001 202.7 19.4001C196.3 18.0001 159.9 17.4001 158.7 18.7001ZM201 30.8001C211.1 35.8001 210 55.0001 199.6 57.6001C198.4 57.8001 191.7 57.9001 184.5 57.8001L171.5 57.5001L171.2 45.5001C170.8 27.6001 169.7 29.0001 184.8 29.0001C194.9 29.0001 198.2 29.4001 201 30.8001Z" fill="black"/>
+</svg>

style.css

@@ -0,0 +1,186 @@
+* {
+  box-sizing: border-box;
+}
+
+body {
+  color: #000000;
+  display: flex;
+  align-items: center;
+}
+
+header, main {
+  width: 100%;
+  max-width: 1500px;
+  padding-top: 32px;
+  gap: 40px
+}
+
+main {
+  background-image: url("static/img/bg.svg");
+  background-repeat: space;
+  background-position-x: center;
+}
+
+footer {
+  width: 100%;
+  padding: 50px;
+  gap: 30px
+}
+
+h2, p, ul {
+  margin: 0;
+}
+
+.flex {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.nowrap {
+  flex-wrap: nowrap;
+}
+
+.flex-col {
+  flex-direction: column;
+}
+
+.items-center {
+  align-items: center;
+}
+
+.items-start {
+  align-items: flex-end;
+}
+
+.justify-center {
+  justify-content: center;
+}
+
+.full-width {
+  width: 100%;
+}
+
+.full-height {
+  height: 100%;
+}
+
+.max-width-1000 {
+  max-width: 900px;
+}
+
+.list-style {
+  list-style-image: url("static/img/list-line.svg");
+}
+
+.list-style > li {
+  padding-left: 16px;
+  padding-top: 30px;
+}
+
+.header-menu {
+  margin-top: 24px;
+  padding: 24px 44px;
+  background-color: #000000;
+  gap: 136px
+}
+
+.menu-link {
+  text-decoration: none;
+  color: #ffffff;
+}
+
+.menu-link:visited {
+  color: #ffffff;
+}
+
+.skill-card {
+  filter: drop-shadow(2px 2px 0px rgba(0, 0, 0, 0.25));
+  border-radius: 12px;
+  border: 3px solid rgba(0, 0, 0, 0.27);
+  width: 350px;
+  height: 290px;
+  padding: 10px;
+}
+
+.skill-list {
+  column-gap: 170px;
+  row-gap: 70px;
+}
+
+.skill-list-item {
+  padding-top: 27px;
+}
+
+.text-end {
+  text-align: end;
+}
+
+.bottom-logo {
+  width: 112px;
+}
+
+/* Typography */
+
+.inter-22 {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 500;
+  font-size: 22px;
+  line-height: 27px;
+}
+
+.inter-40 {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 700;
+  font-size: 40px;
+  line-height: 48px;
+}
+
+.inter-28-700 {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 400;
+  font-size: 28px;
+  line-height: 34px;
+}
+
+.inter-24-600 {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 600;
+  font-size: 24px;
+  line-height: 29px;
+}
+
+.inter-28 {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 400;
+  font-size: 28px;
+  line-height: 34px;
+}
+
+.inter-34-700 {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 700;
+  font-size: 34px;
+  line-height: 41px;
+}
+
+.inter-38 {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 400;
+  font-size: 38px;
+  line-height: 46px;
+}
+
+.inter-26-600 {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 600;
+  font-size: 26px;
+  line-height: 31px;
+}

tools/normalize.css

@@ -0,0 +1,349 @@
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
+
+/* Document
+   ========================================================================== */
+
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
+ */
+
+html {
+  line-height: 1.15; /* 1 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/* Sections
+   ========================================================================== */
+
+/**
+ * Remove the margin in all browsers.
+ */
+
+body {
+  margin: 0;
+}
+
+/**
+ * Render the `main` element consistently in IE.
+ */
+
+main {
+  display: block;
+}
+
+/**
+ * Correct the font size and margin on `h1` elements within `section` and
+ * `article` contexts in Chrome, Firefox, and Safari.
+ */
+
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+/* Grouping content
+   ========================================================================== */
+
+/**
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
+ */
+
+hr {
+  box-sizing: content-box; /* 1 */
+  height: 0; /* 1 */
+  overflow: visible; /* 2 */
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+pre {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/* Text-level semantics
+   ========================================================================== */
+
+/**
+ * Remove the gray background on active links in IE 10.
+ */
+
+a {
+  background-color: transparent;
+}
+
+/**
+ * 1. Remove the bottom border in Chrome 57-
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+ */
+
+abbr[title] {
+  border-bottom: none; /* 1 */
+  text-decoration: underline; /* 2 */
+  text-decoration: underline dotted; /* 2 */
+}
+
+/**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+code,
+kbd,
+samp {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/**
+ * Add the correct font size in all browsers.
+ */
+
+small {
+  font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` elements from affecting the line height in
+ * all browsers.
+ */
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/* Embedded content
+   ========================================================================== */
+
+/**
+ * Remove the border on images inside links in IE 10.
+ */
+
+img {
+  border-style: none;
+}
+
+/* Forms
+   ========================================================================== */
+
+/**
+ * 1. Change the font styles in all browsers.
+ * 2. Remove the margin in Firefox and Safari.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit; /* 1 */
+  font-size: 100%; /* 1 */
+  line-height: 1.15; /* 1 */
+  margin: 0; /* 2 */
+}
+
+/**
+ * Show the overflow in IE.
+ * 1. Show the overflow in Edge.
+ */
+
+button,
+input { /* 1 */
+  overflow: visible;
+}
+
+/**
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 1. Remove the inheritance of text transform in Firefox.
+ */
+
+button,
+select { /* 1 */
+  text-transform: none;
+}
+
+/**
+ * Correct the inability to style clickable types in iOS and Safari.
+ */
+
+button,
+[type="button"],
+[type="reset"],
+[type="submit"] {
+  -webkit-appearance: button;
+}
+
+/**
+ * Remove the inner border and padding in Firefox.
+ */
+
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+/**
+ * Restore the focus styles unset by the previous rule.
+ */
+
+button:-moz-focusring,
+[type="button"]:-moz-focusring,
+[type="reset"]:-moz-focusring,
+[type="submit"]:-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
+
+/**
+ * Correct the padding in Firefox.
+ */
+
+fieldset {
+  padding: 0.35em 0.75em 0.625em;
+}
+
+/**
+ * 1. Correct the text wrapping in Edge and IE.
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
+ * 3. Remove the padding so developers are not caught out when they zero out
+ *    `fieldset` elements in all browsers.
+ */
+
+legend {
+  box-sizing: border-box; /* 1 */
+  color: inherit; /* 2 */
+  display: table; /* 1 */
+  max-width: 100%; /* 1 */
+  padding: 0; /* 3 */
+  white-space: normal; /* 1 */
+}
+
+/**
+ * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+
+progress {
+  vertical-align: baseline;
+}
+
+/**
+ * Remove the default vertical scrollbar in IE 10+.
+ */
+
+textarea {
+  overflow: auto;
+}
+
+/**
+ * 1. Add the correct box sizing in IE 10.
+ * 2. Remove the padding in IE 10.
+ */
+
+[type="checkbox"],
+[type="radio"] {
+  box-sizing: border-box; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */
+
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/**
+ * 1. Correct the odd appearance in Chrome and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+
+[type="search"] {
+  -webkit-appearance: textfield; /* 1 */
+  outline-offset: -2px; /* 2 */
+}
+
+/**
+ * Remove the inner padding in Chrome and Safari on macOS.
+ */
+
+[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/**
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
+ */
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button; /* 1 */
+  font: inherit; /* 2 */
+}
+
+/* Interactive
+   ========================================================================== */
+
+/*
+ * Add the correct display in Edge, IE 10+, and Firefox.
+ */
+
+details {
+  display: block;
+}
+
+/*
+ * Add the correct display in all browsers.
+ */
+
+summary {
+  display: list-item;
+}
+
+/* Misc
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 10+.
+ */
+
+template {
+  display: none;
+}
+
+/**
+ * Add the correct display in IE 10.
+ */
+
+[hidden] {
+  display: none;
+}