/**
 * simple base styles
 */

 :root {
    --background-body: #fff;
    --background: #efefef;
    --background-alt: #f7f7f7;
    --selection: #9e9e9e;
    --text-main: #1c2f4b;
    --text-bright: #0C1420;
    --text-muted: #70777f;
    --links: #0076d1;
    --focus: #0096bfab;
    --border: #dbdbdb;
    --code: #000;
 
  }
  
  @media (prefers-color-scheme: dark) {
  :root {
    --background-body: #202b38;
    --background: #161f27;
    --background-alt: #1a242f;
    --selection: #1c76c5;
    --text-main: #dbdbdb;
    --text-bright: #fff;
    --text-muted: #a9b1ba;
    --links: #41adff;
    --focus: #0096bfab;
    --border: #526980;
    --code: #ffbe85;

  }
  }

html {
  
  font-family: "Hanken Grotesk", 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-size: 16px;
  
  font-weight: 300;
}

body {
  
}

body.home-temp {
    padding-top: 1rem;
    text-align: center;
}  

@media screen and (min-width: 720px) {
  
  body.home-temp {
      padding-top: 4rem;
  }  
}


.okt-brand {
    font-size: 2.5rem;;
    font-weight: bold;

    color: #0C1420;
    color: var(--text-bright);
}

@media screen and (min-width: 720px) {

  .okt-brand {
    font-size: 3.5rem;;
   
  }
}

.okt-brand .okt-brand-ok {
  font-weight: 100;
}

.okt-brand .okt-brand-slash {
  font-weight: 300;
}

.feature {
  font-size: 1.5rem;
  padding-bottom: 1.5rem;
}

@media screen and (min-width: 720px) {

  .feature {
    padding-bottom: 2rem;
  }
}

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

.list-link li {
    display: inline-block;
    padding: 0 .5rem;
    margin: 0;
}


.content-block {

  font-size: 1rem;
  padding-top: 2rem;
    
}

@media screen and (min-width: 720px) {

  .content-block {
    font-size: 1rem;
    padding-top: 2rem;
  }
}