@view-transition {
  navigation: auto;
}

:root {
  --color-1:rgb(24, 24, 24);
  --color-2: #fff;

  --gap-max: 20px;
}

html, body {
  margin: 0;
  padding: 0;
  font-family: "Roboto", sans-serif;
}

* {
  box-sizing: border-box;
  font-weight: 300;
}

body {
  background-color: var(--color-1);
  background: linear-gradient(-45deg, rgb(206, 110, 0), rgb(39, 74, 103));
  background-size: 100vw 100vh;
  background-attachment: fixed;
  color: var(--color-2);

  & > *:not(header):not(footer):not(promo-block) {
    
max-width: 960px;
margin: 0 auto;
padding: var(--gap-max);

  }

  & > ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    padding-left: 0;
    margin-top: 0;
    margin-bottom: 0;
    gap: 10px;

    & > li {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
      border: 2px solid rgba(255, 255, 255, .2);
      border-radius: 12px;
      border-bottom-right-radius: 4px;
      background-color: rgba(0, 0, 0, .1);
      color: #fff;
    }
  }
}

blockquote {
  background-color: rgba(0, 0, 0, .1);
  border-left: 2px solid rgba(255, 255, 255, .2);
  padding: var(--gap-max);
  border-radius: 6px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  margin: 0;

  p {
    margin: 0;
  }
}

a {
  color: currentColor;
}

strong {
  font-weight: 400;
  text-shadow: 0 0 6px rgba(255, 217, 142, 0.4);
}

code {
  border-radius: 6px !important;
}

header {
  display: block;
  gap: var(--gap-max);
  background-color: rgba(0, 0, 0, .1);
  border-bottom: 2px solid rgba(255, 255, 255, .2);
  margin-bottom: 40px;

  & > * {
    
max-width: 960px;
margin: 0 auto;
padding: var(--gap-max);

    display: flex;
    align-items: center;
    padding-left: 0;
  }
}

footer {
  display: block;
  gap: var(--gap-max);
  background-color: rgba(0, 0, 0, .1);
  border-top: 2px solid rgba(255, 255, 255, .2);
  margin-top: 40px;
  padding: var(--gap-max);

  & > * {
    
max-width: 960px;
margin: 0 auto;
padding: var(--gap-max);

    display: flex;
    align-items: center;
    padding-left: 0;
  }
}

promo-block {
  
max-width: 960px;
margin: 0 auto;
padding: var(--gap-max);

  position: relative;
  display: block;
  padding: var(--gap-max);
  border-radius: var(--gap-max);
  border: 2px solid rgba(255, 255, 255, .2);
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2);
  margin-top: var(--gap-max);
  counter-increment: promo-block;

  &:before {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 10px;
    left: -110px;
    height: 100px;
    width: 100px;
    content: counter(promo-block);
    font-size: 60px;
    border-radius: 50%;
    border-bottom-right-radius: 4px;
    color: rgba(255, 255, 255, .6);
    background-color: rgba(255, 255, 255, .05);
  }

  &:last-of-type {
    margin-bottom: var(--gap-max);
  }
}

tech-block {
  display: block;
  
max-width: 960px;
margin: 0 auto;
padding: var(--gap-max);

  background-color: rgb(55, 55, 55);
  border-radius: 12px;
  margin-top: calc(var(--gap-max) * 2) !important;
  margin-bottom: calc(var(--gap-max) * 2) !important;
}


code {
  color: var(--color-2);
  background-color: var(--color-1);
  border-radius: 2px;
  filter: grayscale(.4);
}

code:not([class]) {
  display: inline-block;
  padding: .05em;
  padding-left: .5em;
  padding-right: .5em;
  margin-left: .2em;
  border-bottom: 1px solid rgba(0, 0, 0, .4);
}

code[class] {
  display: block;
  padding: var(--gap-max, 20px);
  
  color: #fff;
  overflow: auto;
}
code .hljs-comment {
  opacity: .5;
  font-style: italic;
}
code .function_ {
  font-style: italic;
}

    code .hljs-string {
      color: hsl(0deg 85% 74%);
    }
  
    code .hljs-comment {
      color: hsl(150deg 85% 74%);
    }
  
    code .hljs-attr {
      color: hsl(300deg 85% 74%);
    }
  
    code .hljs-attribute {
      color: hsl(450deg 85% 74%);
    }
  
    code .hljs-function {
      color: hsl(600deg 85% 74%);
    }
  
    code .hljs-variable {
      color: hsl(750deg 85% 74%);
    }
  
    code .hljs-title {
      color: hsl(900deg 85% 74%);
    }
  
    code .hljs-property {
      color: hsl(1050deg 85% 74%);
    }
  
    code .hljs-selector-class {
      color: hsl(1200deg 85% 74%);
    }
  
    code .hljs-keyword {
      color: hsl(1350deg 85% 74%);
    }
  
    code .hljs-tag {
      color: hsl(1500deg 85% 74%);
    }
  
    code .hljs-name {
      color: hsl(1650deg 85% 74%);
    }
  
    code .hljs-number {
      color: hsl(1800deg 85% 74%);
    }
  
    code .hljs-params {
      color: hsl(1950deg 85% 74%);
    }
  
    code .hljs-literal {
      color: hsl(2100deg 85% 74%);
    }