CSS boilerplate

css-boilerplate.css

:root {
 --oc-white:#fff;
 --oc-white-rgb:255,255,255;
 --oc-black:#000;
 --oc-black-rgb:0,0,0;
 --oc-gray-0:#f8f9fa;
 --oc-gray-0-rgb:248,249,250;
 --oc-gray-1:#f1f3f5;
 --oc-gray-1-rgb:241,243,245;
 --oc-gray-2:#e9ecef;
 --oc-gray-2-rgb:233,236,239;
 --oc-gray-3:#dee2e6;
 --oc-gray-3-rgb:222,226,230;
 --oc-gray-4:#ced4da;
 --oc-gray-4-rgb:206,212,218;
 --oc-gray-5:#adb5bd;
 --oc-gray-5-rgb:173,181,189;
 --oc-gray-6:#868e96;
 --oc-gray-6-rgb:134,142,150;
 --oc-gray-7:#495057;
 --oc-gray-7-rgb:73,80,87;
 --oc-gray-8:#343a40;
 --oc-gray-8-rgb:52,58,64;
 --oc-gray-9:#212529;
 --oc-gray-9-rgb:33,37,41;
 --oc-red-0:#fff5f5;
 --oc-red-0-rgb:255,245,245;
 --oc-red-1:#ffe3e3;
 --oc-red-1-rgb:255,227,227;
 --oc-red-2:#ffc9c9;
 --oc-red-2-rgb:255,201,201;
 --oc-red-3:#ffa8a8;
 --oc-red-3-rgb:255,168,168;
 --oc-red-4:#ff8787;
 --oc-red-4-rgb:255,135,135;
 --oc-red-5:#ff6b6b;
 --oc-red-5-rgb:255,107,107;
 --oc-red-6:#fa5252;
 --oc-red-6-rgb:250,82,82;
 --oc-red-7:#f03e3e;
 --oc-red-7-rgb:240,62,62;
 --oc-red-8:#e03131;
 --oc-red-8-rgb:224,49,49;
 --oc-red-9:#c92a2a;
 --oc-red-9-rgb:201,42,42;
 --oc-pink-0:#fff0f6;
 --oc-pink-0-rgb:255,240,246;
 --oc-pink-1:#ffdeeb;
 --oc-pink-1-rgb:255,222,235;
 --oc-pink-2:#fcc2d7;
 --oc-pink-2-rgb:252,194,215;
 --oc-pink-3:#faa2c1;
 --oc-pink-3-rgb:250,162,193;
 --oc-pink-4:#f783ac;
 --oc-pink-4-rgb:247,131,172;
 --oc-pink-5:#f06595;
 --oc-pink-5-rgb:240,101,149;
 --oc-pink-6:#e64980;
 --oc-pink-6-rgb:230,73,128;
 --oc-pink-7:#d6336c;
 --oc-pink-7-rgb:214,51,108;
 --oc-pink-8:#c2255c;
 --oc-pink-8-rgb:194,37,92;
 --oc-pink-9:#a61e4d;
 --oc-pink-9-rgb:166,30,77;
 --oc-grape-0:#f8f0fc;
 --oc-grape-0-rgb:248,240,252;
 --oc-grape-1:#f3d9fa;
 --oc-grape-1-rgb:243,217,250;
 --oc-grape-2:#eebefa;
 --oc-grape-2-rgb:238,190,250;
 --oc-grape-3:#e599f7;
 --oc-grape-3-rgb:229,153,247;
 --oc-grape-4:#da77f2;
 --oc-grape-4-rgb:218,119,242;
 --oc-grape-5:#cc5de8;
 --oc-grape-5-rgb:204,93,232;
 --oc-grape-6:#be4bdb;
 --oc-grape-6-rgb:190,75,219;
 --oc-grape-7:#ae3ec9;
 --oc-grape-7-rgb:174,62,201;
 --oc-grape-8:#9c36b5;
 --oc-grape-8-rgb:156,54,181;
 --oc-grape-9:#862e9c;
 --oc-grape-9-rgb:134,46,156;
 --oc-violet-0:#f3f0ff;
 --oc-violet-0-rgb:243,240,255;
 --oc-violet-1:#e5dbff;
 --oc-violet-1-rgb:229,219,255;
 --oc-violet-2:#d0bfff;
 --oc-violet-2-rgb:208,191,255;
 --oc-violet-3:#b197fc;
 --oc-violet-3-rgb:177,151,252;
 --oc-violet-4:#9775fa;
 --oc-violet-4-rgb:151,117,250;
 --oc-violet-5:#845ef7;
 --oc-violet-5-rgb:132,94,247;
 --oc-violet-6:#7950f2;
 --oc-violet-6-rgb:121,80,242;
 --oc-violet-7:#7048e8;
 --oc-violet-7-rgb:112,72,232;
 --oc-violet-8:#6741d9;
 --oc-violet-8-rgb:103,65,217;
 --oc-violet-9:#5f3dc4;
 --oc-violet-9-rgb:95,61,196;
 --oc-indigo-0:#edf2ff;
 --oc-indigo-0-rgb:237,242,255;
 --oc-indigo-1:#dbe4ff;
 --oc-indigo-1-rgb:219,228,255;
 --oc-indigo-2:#bac8ff;
 --oc-indigo-2-rgb:186,200,255;
 --oc-indigo-3:#91a7ff;
 --oc-indigo-3-rgb:145,167,255;
 --oc-indigo-4:#748ffc;
 --oc-indigo-4-rgb:116,143,252;
 --oc-indigo-5:#5c7cfa;
 --oc-indigo-5-rgb:92,124,250;
 --oc-indigo-6:#4c6ef5;
 --oc-indigo-6-rgb:76,110,245;
 --oc-indigo-7:#4263eb;
 --oc-indigo-7-rgb:66,99,235;
 --oc-indigo-8:#3b5bdb;
 --oc-indigo-8-rgb:59,91,219;
 --oc-indigo-9:#364fc7;
 --oc-indigo-9-rgb:54,79,199;
 --oc-blue-0:#e8f7ff;
 --oc-blue-0-rgb:232,247,255;
 --oc-blue-1:#ccedff;
 --oc-blue-1-rgb:204,237,255;
 --oc-blue-2:#a3daff;
 --oc-blue-2-rgb:163,218,255;
 --oc-blue-3:#72c3fc;
 --oc-blue-3-rgb:114,195,252;
 --oc-blue-4:#4dadf7;
 --oc-blue-4-rgb:77,173,247;
 --oc-blue-5:#329af0;
 --oc-blue-5-rgb:50,154,240;
 --oc-blue-6:#228ae6;
 --oc-blue-6-rgb:34,138,230;
 --oc-blue-7:#1c7cd6;
 --oc-blue-7-rgb:28,124,214;
 --oc-blue-8:#1b6ec2;
 --oc-blue-8-rgb:27,110,194;
 --oc-blue-9:#1862ab;
 --oc-blue-9-rgb:24,98,171;
 --oc-cyan-0:#e3fafc;
 --oc-cyan-0-rgb:227,250,252;
 --oc-cyan-1:#c5f6fa;
 --oc-cyan-1-rgb:197,246,250;
 --oc-cyan-2:#99e9f2;
 --oc-cyan-2-rgb:153,233,242;
 --oc-cyan-3:#66d9e8;
 --oc-cyan-3-rgb:102,217,232;
 --oc-cyan-4:#3bc9db;
 --oc-cyan-4-rgb:59,201,219;
 --oc-cyan-5:#22b8cf;
 --oc-cyan-5-rgb:34,184,207;
 --oc-cyan-6:#15aabf;
 --oc-cyan-6-rgb:21,170,191;
 --oc-cyan-7:#1098ad;
 --oc-cyan-7-rgb:16,152,173;
 --oc-cyan-8:#0c8599;
 --oc-cyan-8-rgb:12,133,153;
 --oc-cyan-9:#0b7285;
 --oc-cyan-9-rgb:11,114,133;
 --oc-teal-0:#e6fcf5;
 --oc-teal-0-rgb:230,252,245;
 --oc-teal-1:#c3fae8;
 --oc-teal-1-rgb:195,250,232;
 --oc-teal-2:#96f2d7;
 --oc-teal-2-rgb:150,242,215;
 --oc-teal-3:#63e6be;
 --oc-teal-3-rgb:99,230,190;
 --oc-teal-4:#38d9a9;
 --oc-teal-4-rgb:56,217,169;
 --oc-teal-5:#20c997;
 --oc-teal-5-rgb:32,201,151;
 --oc-teal-6:#12b886;
 --oc-teal-6-rgb:18,184,134;
 --oc-teal-7:#0ca678;
 --oc-teal-7-rgb:12,166,120;
 --oc-teal-8:#099268;
 --oc-teal-8-rgb:9,146,104;
 --oc-teal-9:#087f5b;
 --oc-teal-9-rgb:8,127,91;
 --oc-green-0:#ebfbee;
 --oc-green-0-rgb:235,251,238;
 --oc-green-1:#d3f9d8;
 --oc-green-1-rgb:211,249,216;
 --oc-green-2:#b2f2bb;
 --oc-green-2-rgb:178,242,187;
 --oc-green-3:#8ce99a;
 --oc-green-3-rgb:140,233,154;
 --oc-green-4:#69db7c;
 --oc-green-4-rgb:105,219,124;
 --oc-green-5:#51cf66;
 --oc-green-5-rgb:81,207,102;
 --oc-green-6:#40c057;
 --oc-green-6-rgb:64,192,87;
 --oc-green-7:#37b24d;
 --oc-green-7-rgb:55,178,77;
 --oc-green-8:#2f9e44;
 --oc-green-8-rgb:47,158,68;
 --oc-green-9:#2b8a3e;
 --oc-green-9-rgb:43,138,62;
 --oc-lime-0:#f4fce3;
 --oc-lime-0-rgb:244,252,227;
 --oc-lime-1:#e9fac8;
 --oc-lime-1-rgb:233,250,200;
 --oc-lime-2:#d8f5a2;
 --oc-lime-2-rgb:216,245,162;
 --oc-lime-3:#c0eb75;
 --oc-lime-3-rgb:192,235,117;
 --oc-lime-4:#a9e34b;
 --oc-lime-4-rgb:169,227,75;
 --oc-lime-5:#94d82d;
 --oc-lime-5-rgb:148,216,45;
 --oc-lime-6:#82c91e;
 --oc-lime-6-rgb:130,201,30;
 --oc-lime-7:#74b816;
 --oc-lime-7-rgb:116,184,22;
 --oc-lime-8:#66a80f;
 --oc-lime-8-rgb:102,168,15;
 --oc-lime-9:#5c940d;
 --oc-lime-9-rgb:92,148,13;
 --oc-yellow-0:#fff9db;
 --oc-yellow-0-rgb:255,249,219;
 --oc-yellow-1:#fff3bf;
 --oc-yellow-1-rgb:255,243,191;
 --oc-yellow-2:#ffec99;
 --oc-yellow-2-rgb:255,236,153;
 --oc-yellow-3:#ffe066;
 --oc-yellow-3-rgb:255,224,102;
 --oc-yellow-4:#ffd43b;
 --oc-yellow-4-rgb:255,212,59;
 --oc-yellow-5:#fcc419;
 --oc-yellow-5-rgb:252,196,25;
 --oc-yellow-6:#fab005;
 --oc-yellow-6-rgb:250,176,5;
 --oc-yellow-7:#f59f00;
 --oc-yellow-7-rgb:245,159,0;
 --oc-yellow-8:#f08c00;
 --oc-yellow-8-rgb:240,140,0;
 --oc-yellow-9:#e67700;
 --oc-yellow-9-rgb:230,119,0;
 --oc-orange-0:#fff4e6;
 --oc-orange-0-rgb:255,244,230;
 --oc-orange-1:#ffe8cc;
 --oc-orange-1-rgb:255,232,204;
 --oc-orange-2:#ffd8a8;
 --oc-orange-2-rgb:255,216,168;
 --oc-orange-3:#ffc078;
 --oc-orange-3-rgb:255,192,120;
 --oc-orange-4:#ffa94d;
 --oc-orange-4-rgb:255,169,77;
 --oc-orange-5:#ff922b;
 --oc-orange-5-rgb:255,146,43;
 --oc-orange-6:#fd7e14;
 --oc-orange-6-rgb:253,126,20;
 --oc-orange-7:#f76707;
 --oc-orange-7-rgb:247,103,7;
 --oc-orange-8:#e8590c;
 --oc-orange-8-rgb:232,89,12;
 --oc-orange-9:#d9480f;
 --oc-orange-9-rgb:217,72,15;
 --font-size:14px;
 --font-size-small:10px;
 --ease:cubic-bezier(.82,0,.12,1);
 --edge-pad:30px;
 --pad-link:15px;
 --border-light:var(--oc-gray-2);
 --border-lighter:var(--oc-gray-0);
 --icon-small-size:12px;
 --icon-small-pad:5px;
 --tracking:0.05rem;
 --tracking-medium:0.5rem;
 --tracking-large:0.8rem;
 --shadow-small:0 -5px 15px 0 var(--oc-gray-4);
 --shadow-large:0 16px 32px 0 rgba(0,0,0,.1);
 --dark:#000;
 --slate:#0f1113;
 --light-gray:#fafafa;
 --bg-color:#fff;
 --fg-color:var(--dark);
 --fg-color-light:var(--oc-gray-6)
}
* {
 box-sizing:border-box
}
body,html {
 font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;
 -webkit-font-smoothing:antialiased;
 font-size:var(--font-size);
 background:var(--dark);
 color:var(--fg-color);
 line-height:1;
 margin:0;
 padding:0
}
body {
 overflow-x:hidden
}
h1,h2,h3 {
 margin-top:32px;
 margin-bottom:0;
 font-size:1.2rem;
 font-weight:700;
 line-height:2rem
}
a {
 color:inherit;
 text-decoration:none
}
p {
 margin:10px 0;
 line-height:1.75;
 color:var(--fg-color-light)
}
p strong {
 color:var(--fg-color);
 font-weight:500
}
p a {
 --color:var(--fg-color);
 --border:var(--border-light);
 color:var(--color);
 padding-bottom:3px;
 border-bottom:1px solid var(--border)
}
p a:hover {
 border-bottom-color:var(--color)
}
ul {
 margin:15px 0;
 margin-left:30px;
 padding:0
}
ul li {
 margin:10px 0;
 color:var(--fg-color-light)
}
ul li strong {
 color:var(--fg-color);
 font-weight:500
}
.Content.dark p strong {
 color:var(--bg-color)
}
.Content.dark p a {
 --color:var(--bg-color)
}
footer {
 background:var(--bg-color);
 color:var(--oc-gray-5);
 font-size:.8rem;
 text-align:center;
 padding:50px 0
}
footer a:hover {
 color:var(--oc-gray-8)
}
@media screen and (max-width:800px) {
 body,html {
  font-size:12px
 }
}
.Content {
 --bg:var(--bg-color);
 --fg:var(--fg-color);
 background:var(--bg);
 color:var(--fg);
 padding:100px 25px
}
.Content.center {
 display:flex;
 justify-content:center;
 align-items:center
}
.Content.full {
 width:100%;
 min-height:100vh
}
.Content.medium {
 min-height:650px
}
.Content.small {
 min-height:500px
}
.Content.border {
 border-top:1px solid var(--border-light)
}
.Content.dark {
 --bg:var(--fg-color);
 --fg:var(--bg-color)
}
.Content.dark .Button {
 --color:var(--fg-color)
}
.Content.dark {
 --border-light:var(--oc-gray-9)
}
.Content.gray {
 background:var(--light-gray)
}
.Content.hero {
 height:100%;
 display:flex;
 flex-direction:column
}
.Content.hero #Logo {
 margin-bottom:10vh
}
.Content.bg-image {
 --tint:rgba(0,0,0,.65);
 background-image:linear-gradient(var(--tint),var(--tint)),url("some url");
 background-position:50% 50%;
 background-repeat:no-repeat;
 background-size:cover
}
.Container {
 margin:0 auto;
 width:960px;
 text-align:left
}
.Container.small {
 width:500px
}
.Container.medium {
 width:600px
}
.Container.full-image-width img {
 width:100%
}
@media screen and (max-width:850px) {
 .Content {
  padding:50px 25px
 }
 .Container {
  width:100%
 }
 .Content.medium,.Content.small {
  min-height:auto
 }
}
@media screen and (max-width:650px) {
 .Container.medium,.Container.small {
  width:100%
 }
}
.Customers {
 display:flex;
 flex-wrap:wrap;
 align-items:center;
 justify-content:center
}
.Customer {
 width:100px;
 margin:40px 60px
}
.Customer img {
 width:100%
}
@media screen and (max-width:500px) {
 .Customer {
  width:75px;
  margin:25px 30px
 }
}
.Features {
 display:flex;
 flex-wrap:wrap;
 justify-content:center
}
.Features .feature {
 width:250px;
 margin:40px 25px
}
.Features .feature .title {
 font-size:var(--font-size-small);
 letter-spacing:var(--tracking);
 text-transform:uppercase;
 font-weight:700
}
@media screen and (max-width:850px) {
 .Features .feature {
  width:100%;
  margin:20px 25px
 }
}
.Product {
 display:flex;
 height:100%
}
.Product .Title {
 line-height:1em
}
.Product .info {
 display:flex;
 flex-direction:column;
 justify-content:center;
 align-items:flex-start;
 padding:0 50px;
 text-align:left;
 width:50%
}
.Product .info .Button {
 margin-top:20px
}
.Product .Image {
 width:50%
}
@media screen and (max-width:850px) {
 .Product {
  flex-direction:column;
  align-items:center
 }
 .Product .info {
  width:100%;
  display:flex;
  align-items:center;
  text-align:center
 }
 .Product .Image {
  margin:50px 0;
  width:75%
 }
}
.Feature {
 display:flex;
 height:100%
}
.Feature .Title {
 line-height:1em
}
.Feature .info {
 display:flex;
 flex-direction:column;
 justify-content:center;
 align-items:flex-start;
 padding:0 50px;
 text-align:left;
 width:50%
}
.Feature .info .Button {
 margin-top:20px
}
.Feature .Image {
 width:50%
}
@media screen and (max-width:650px) {
 .Feature {
  flex-direction:column
 }
 .Feature .info {
  width:100%;
  margin-bottom:25px
 }
 .Feature .Image {
  width:90%;
  margin:0 auto
 }
}
.Button {
 --color:var(--dark);
 --border:var(--color);
 --background:transparent;
 --padding:14px 44px;
 border:1px solid var(--border);
 color:var(--color);
 background:var(--background);
 text-transform:uppercase;
 font-size:var(--font-size-small);
 padding:var(--padding);
 font-weight:600;
 letter-spacing:.1em
}
.Button.small {
 --padding:8px 24px
}
.Button.light {
 --color:#fff;
 --border:var(--fg-color-light)
}
.Button.light:hover {
 --border:#fff
}
.Button.dark {
 --color:var(--bg-color);
 --background:var(--fg-color);
 --border:var(--background)
}
.Button.dark:hover {
 --background:var(--oc-gray-9);
 --border:var(--oc-gray-9)
}
body.over-dark .Button.dark {
 --background:transparent
}
.Title {
 margin:5px 0;
 line-height:2.2em
}
.Title.center {
 margin-left:auto;
 margin-right:auto;
 text-align:center;
 max-width:500px
}
.Title.margin {
 margin-bottom:80px
}
.Title>span {
 display:block
}
.Title .subtext {
 color:var(--fg-color-light)
}
.Title .text {
 letter-spacing:var(--tracking-medium);
 text-transform:uppercase;
 font-weight:700;
 font-size:16px
}
.Title.small .text {
 font-size:14px;
 text-transform:none;
 letter-spacing:normal;
 line-height:2rem
}
@media screen and (max-width:500px) {
 .Title .text {
  font-size:14px
 }
}
.Images.three {
 --size:450px;
 --size-ratio:.75;
 --size-small:calc(var(--size) * var(--size-ratio));
 --inset:150px;
 --bottom:25px;
 display:flex;
 justify-content:center;
 align-items:flex-end
}
.Images.three .Image img {
 transition:transform .6s var(--ease)
}
.Images.three .Image:first-child img {
 height:var(--size-small);
 width:auto;
 transform:translateX(var(--inset));
 margin-bottom:var(--bottom)
}
.Images.three .Image:nth-child(2) img {
 height:var(--size);
 width:auto;
 z-index:1
}
.Images.three .Image:nth-child(3) img {
 height:var(--size-small);
 width:auto;
 transform:translateX(calc(-1 * var(--inset)));
 margin-bottom:var(--bottom)
}
@media screen and (min-width:1500px) {
 .Images.three {
  --inset:10px
 }
}
@media screen and (min-width:1300px) {
 .Images.three {
  --inset:50px
 }
}
@media screen and (max-width:900px) {
 .Images.three {
  --inset:250px
 }
}
@media screen and (max-width:700px) {
 .Images.three {
  --size:350px;
  --inset:200px
 }
}
@media screen and (max-height:850px) {
 .Images.three {
  --size:350px
 }
}
.Image {
 display:flex;
 justify-content:center;
 align-items:center
}
.Image img {
 width:100%
}
.Image.shadow img {
 box-shadow:var(--shadow-large)
}
.Image.border img {
 border-top:1px solid var(--oc-gray-0);
 border-radius:2px
}
.Image.browser img {
 border-top:5px solid var(--oc-gray-1);
 border-radius:2px
}
@keyframes a {
 0% {
  opacity:0;
  transform:translateY(-150px)
 }
 50% {
  opacity:1;
  transform:translateY(0)
 }
 to {
  opacity:1;
  transform:translateY(0)
 }
}
#Arrow {
 --color:var(--fg-color);
 position:absolute;
 bottom:30px;
 left:50%;
 margin-left:-7px;
 opacity:0;
 width:24px;
 height:24px;
 animation:a 6s forwards cubic-bezier(.86,0,.07,1) 1s
}
#Arrow svg {
 fill:var(--color)
}
.Content.dark #Arrow {
 --color:var(--bg-color)
}
.Content.dark .Plans {
 --active:var(--oc-gray-2);
 --light:var(--oc-gray-6);
 --dim:var(--oc-gray-7)
}
.Plans {
 --font-small:0.8rem;
 --light:var(--oc-gray-6);
 --active:var(--dark);
 --dim:var(--oc-gray-6);
 margin:0 auto;
 font-weight:200;
 line-height:3.5;
 text-align:center;
 border-collapse:collapse;
 transform:translateX(-75px)
}
.Plans td {
 border-right:1px solid var(--border-light);
 padding:0 30px
}
.Plans td:last-child {
 border-right:none
}
.Plans .feature {
 font-weight:400;
 text-align:right
}
.Plans .feature,.Plans .names {
 text-transform:uppercase;
 letter-spacing:var(--tracking);
 font-size:var(--font-small)
}
.Plans .names {
 font-weight:600
}
.Plans .names td,.Plans .prices td {
 padding:20px 0;
 border-right:none
}
.Plans .prices td {
 font-weight:600;
 font-size:16px
}
.Plans .prices td:not(:first-child):before {
 content:"$";
 font-weight:100;
 font-size:.8em;
 position:relative;
 color:var(--light);
 top:-5px;
 left:0
}
.Plans .prices td:not(:first-child):after {
 content:"/mo";
 font-weight:100;
 font-size:.8em;
 position:relative;
 color:var(--light);
 top:0
}
@media screen and (max-width:550px) {
 .Plans {
  transform:translateX(-50px)
 }
 .Plans td {
  padding:0 15px
 }
 .Plans .prices td:not(:first-child):after {
  content:" "
 }
}
#Back {
 position:fixed;
 top:0;
 left:0;
 padding:var(--edge-pad);
 display:flex;
 align-items:center;
 font-size:var(--font-size-small);
 text-transform:uppercase;
 color:var(--fg-color-light)
}
#Back svg {
 transform:scale(.6)
}
#Back:hover {
 color:var(--fg-color)
}
.icon {
 display:block;
 width:24px;
 height:24px;
 background-position:50%;
 background-repeat:none;
 user-select:none
}
#Social {
 display:none
}
#Social .icon {
 display:inline-block;
 width:var(--icon-small-size);
 height:var(--icon-small-size);
 opacity:.2;
 margin-right:var(--icon-small-pad)
}
#Social .icon:hover {
 opacity:1
}
#Social .icon svg {
 fill:var(--fg-color)
}
body.over-dark #Social .icon svg {
 fill:var(--bg-color)
}
@media screen and (max-width:700px) {
 #Social {
  display:none
 }
}
@keyframes b {
 0% {
  opacity:0
 }
 to {
  opacity:1
 }
}
#Logo {
 margin-top:-10px;
 animation:b 3s forwards;
 text-align:center;
 user-select:none
}
#Logo .title {
 font-size:18px;
 letter-spacing:var(--tracking-medium)
}
#Logo .subtitle,#Logo .title {
 display:block;
 font-weight:500;
 text-transform:uppercase
}
#Logo .subtitle {
 margin-top:5px;
 font-size:10px;
 letter-spacing:3.5px;
 opacity:.35
}
#Menu {
 --color:var(--fg-color);
 position:fixed;
 top:0;
 left:0;
 width:100%;
 padding:var(--edge-pad);
 background:#fff;
 box-shadow:var(--shadow-small);
 z-index:2
}
body.over-dark #Menu {
 background:transparent;
 box-shadow:none;
 --color:var(--bg-color)
}
#Menu .left {
 left:0
}
#Menu .left,#Menu .right {
 position:absolute;
 top:0;
 padding:var(--edge-pad)
}
#Menu .right {
 right:0
}
#Menu .center {
 width:100%;
 text-align:center
}
#Menu .center a {
 position:relative;
 text-decoration:none;
 text-transform:uppercase;
 font-size:var(--font-size-small);
 font-weight:500;
 margin:0 var(--pad-link);
 user-select:none;
 letter-spacing:var(--tracking);
 opacity:.45;
 color:var(--color)
}
#Menu .center a:before {
 content:"";
 position:absolute;
 width:100%;
 height:1px;
 bottom:-5px;
 left:0;
 background-color:var(--color);
 visibility:hidden;
 transform:scaleX(0);
 transition:all .25s var(--ease)
}
#Menu .center a:hover:before {
 visibility:visible;
 transform:scaleX(1)
}
#Menu .center a:hover {
 opacity:1
}
@media screen and (max-width:450px) {
 #Menu {
  display:none
 }
}
.Help {
 position:relative;
 cursor:help
}
@keyframes c {
 0% {
  opacity:0;
  transform:translateY(5px)
 }
 to {
  opacity:1;
  transform:translateY(-10px)
 }
}
.Help:hover>.text {
 animation:c .3s forwards cubic-bezier(.215,.61,.355,1)
}
.Help>.text {
 bottom:100%;
 width:300px;
 margin-left:-150px;
 text-align:center;
 text-transform:none;
 background:var(--dark);
 color:#fff;
 padding:15px;
 line-height:1.6;
 border-radius:2px;
 z-index:1;
 letter-spacing:normal;
 font-size:.85rem;
 opacity:0
}
.Help>.text,.Help>.text:after {
 position:absolute;
 left:50%;
 pointer-events:none
}
.Help>.text:after {
 top:100%;
 border:solid transparent;
 content:" ";
 height:0;
 width:0;
 border-color:transparent;
 border-top-color:var(--dark);
 border-width:5px;
 margin-left:-5px
}
.Box.center-x {
 display:flex;
 justify-content:center
}
.Box.list>a {
 display:block;
 margin-bottom:25px
}