body {
   --slate: #161616;
   --slate-light: #2c2c2c;
   --bright-green: #6edf3b;
   --bright-green-hover: #c8fcb1;
   --dark-green: #33691b;
   --gray: #f4f4f4;
   --text-muted: #c6c6c6;

   --gap: 1rem;
   --max-width: 69rem;

   margin: 0;
   font-family: 'Work Sans', sans-serif;
   color: var(--slate);
}

@font-face {
   font-family: "Work Sans";
   src: url("../fonts/work-sans-regular.ttf") format("truetype");
   font-style: normal;
   font-weight: 400;
}

@font-face {
   font-family: "Work Sans";
   src: url("../fonts/work-sans-semibold.ttf") format("truetype");
   font-style: normal;
   font-weight: 600;
}

.header {
   height: 3.5rem;
   background-color: var(--slate);
   margin-bottom: var(--gap);
   padding: 0 var(--gap);
}

.header .header__box {
   position: relative;
   height: 100%;
   max-width: var(--max-width);
   margin: 0 auto;
}

.header .logo {
   display: inline-block;
   height: 100%;
}

.logo img {
   height: 100%;
   width: auto;
}

.header .links {
   position: absolute;
   right: 0;
   top: 0;
   height: 100%;
}

.links ul {
   list-style: none;
   display: inline-block;
   margin: 0;
   padding: 0;
   height: 100%;
}

.links ul li {
   display: inline-block;
   height: 100%;
}

.links a, button.mobile-links {
   color: var(--text-muted);
   text-decoration: none;
   display: inline-flex;
   align-items: center;
   height: 100%;
   padding: 1rem;
   box-sizing: border-box;
   font-size: .875rem;
}

button.mobile-links {
   background: none;
   border: 0;
   position: absolute;
   left: 0;
   top: 0;
   cursor: pointer;
   display: none;
}

button.mobile-links path {
   fill: var(--text-muted);
}

.links a:hover {
   background-color: var(--slate-light);
}

.links .lang {
   color: var(--bright-green);
   cursor: pointer;
}

.content, .footer {
   max-width: var(--max-width);
   margin: 0 auto;
   padding: 0 var(--gap);
}

.grid {
   display: flex;
   flex-wrap: wrap;
}

.grid .col {
   flex: 1;
   margin-right: var(--gap);
   align-self: stretch;
   position: relative;
}

.grid .col:last-child {
   margin-right: 0;
}

.info-box {
   background-color: var(--gray);
   padding: 1rem;
   height: 100%;
   box-sizing: border-box;
}

.info-box h2 {
   margin: 0;
   font-weight: bold;
}

.info-box h2 + p {
   margin-top: 0;
}

.select-box {
   min-height: 374px;
}

.select-list {
   list-style: none;
   padding: 0;
   margin: 0;
}

.select-list .select-item:not(:last-child) {
   margin: 0 0 1rem 0;
}

.select-item button, .idp-form button {
   border-radius: 0;
   background-color: var(--dark-green);
   color: white;
   text-align: left;
   border: 0;
   cursor: pointer;
   padding: 1rem;
   display: flex;
   flex-flow: column;
   width: 100%;
   min-height: 96px;
   position: relative;
   hyphens: auto;
   font-family: 'Work Sans', sans-serif;
}

.select-item button::before,
.idp-form button::before {
   content: '';
   position: absolute;
   left: 3px;
   right: 3px;
   top: 3px;
   bottom: 3px;
   border: 2px solid white;
   display: none;
}

.select-item button:active::before,
.select-item button:focus::before,
.select-item button:hover::before,
.idp-form button:active::before,
.idp-form button:focus::before,
.idp-form button:hover::before {
   display: block;
}

.select-item button h3 {
   font-size: 28px;
   margin: 0;
}

.select-item button p {
   margin: 0;
}

.hint-box {
   background-color: var(--gray);
   padding: 1rem;
   box-sizing: border-box;
   overflow: auto;
   position: relative;
}

.hint-box::after {
   content: '';
   position: absolute;
   left: .5rem;
   bottom: .5rem;
   background: url('../images/arrow-up-right.svg') no-repeat;
   background-size: contain;
   width: 16px;
   height: 16px;
}

.hint-box p:first-child {
   margin-top: 0;
}

.hint-box p:last-child {
   margin-bottom: 0;
}

.hint-box a {
   color: var(--slate);
   float: right;
}

.hint-image {
   position: absolute;
   bottom: 0;
   right: 0;
   left: 0;
   text-align: center;
}

.hint-image img {
   display: block;
   max-width: 250px;
   margin: 0 auto;
}

.footer {
   margin-top: var(--gap);
}

.footer .logo-link {
   display: inline-block;
   margin-right: var(--gap);
   padding: 0 var(--gap);
}

.footer .logo-link img {
   height: 50px;
}

.idp-form select {
   display: block;
   width: 100%;
   padding: 1rem;
   background-color: transparent;
   border: 3px solid var(--dark-green);
   font-family: 'Work Sans', sans-serif;
   font-size: 16px;
}

.idp-form button {
   text-align: center;
   margin: var(--gap) 0;
   min-height: 0;
   font-weight: bold;
   font-size: 16px;
}

/* error page */

.pure-form label {
   display: block;
   margin-bottom: .25rem;
}

.pure-form .edge {
   display: block;
   width: 100%;
   padding: .5rem;
   box-sizing: border-box;
   border: 3px solid var(--dark-green);
   font-size: 16px;
   background-color: transparent;
   margin-bottom: var(--gap);
   font-family: 'Work Sans', sans-serif;
}

.pure-form textarea.edge {
   resize: vertical;
}

.pure-button-group {
   display: flex;
}

.pure-button {
   padding: .5rem 1rem;
   border: 3px solid var(--dark-green);
   font-size: 16px;
}

.pure-button.hollow pre {
   margin: 0;
}

.pure-button.copy {
   display: none;
}

.pure-button-red {
   position: relative;
   background-color: var(--dark-green);
   color: white;
   cursor: pointer;
   font-family: 'Work Sans', sans-serif;
}

@media screen and (max-width: 1150px) {
   .grid .col {
      margin-right: 0;
   }

   .grid .col:first-child {
      margin-right: var(--gap);
   }

   .grid .col:last-child {
      flex-basis: 100%;
      margin-top: var(--gap);
   }

   .hint-image {
      display: none;
   }

   .select-box {
      min-height: 0;
   }
}

@media screen and (max-width: 800px) {
   .header {
      padding: 0;
   }

   .header .logo {
      display: block;
      text-align: center;
   }


   button.mobile-links {
      display: block;
   }

   .links ul.links__main {
      position: fixed;
      left: 0;
      top: 3.5rem;
      background-color: var(--slate);
      z-index: 1;
      display: none;
      height: auto;
   }

   .links ul.links__main li {
      display: block;
      height: auto;
   }

   .links a {
      display: block;
      padding: 1rem 2rem;
   }

   .grid {
      display: block;
   }

   .grid .col:first-child {
      margin-right: 0;
   }

   .footer {
      text-align: center;
   }

   .footer .logo-link {
      display: block;
      margin-bottom: var(--gap);
   }
}