* {
    margin: 0;
    padding: 0;
    box-sizing: border-box
}

body {
    font-family: Roboto, sans-serif;
    line-height: 1.6;
    background: #fff;
    color: #000;
    text-align: center
}

.wrapper {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    padding: 40px 20px;
    text-align: left;
    margin-top: 80px
}

header {
    background-color: #eee
}

header .wrapper {
    padding-top: 30px;
    padding-bottom: 30px;
    text-align: center
}

a:active,
a:hover,
a:link,
a:visited {
    text-decoration: none
}

header a {
    text-decoration: none
}

header .site-name {
    font-size: 1.5em;
    color: #000;
    font-weight: 700
}

h1 {
    margin-bottom: 20px;
    font-size: 2em
}

h2 {
    margin: 20px 1
}

p {
    margin-bottom: 10px
}

a {
    color: inherit
}

.description {
    margin-bottom: 40px
}

.item-list>li {
    display: block;
    padding: 20px;
    border-radius: 20px;
    background-color: #eee;
    margin-bottom: 20px
}

.item-list>li:last-child {
    margin-bottom: 0
}

.item-list h1 {
    margin-bottom: 15px;
    font-size: 1.3em
}

.item-list p {
    margin-bottom: 0
}

.tag-list {
    margin-bottom: 15px;
    color: #fff;
}

.tag,
.tag-list li {
    display: inline-block;
    padding: 4px 6px;
    border-radius: 5px;
    margin-right: 5px
}

.tag a,
.tag-list a {
    text-decoration: none
}

.item-page .tag-list {
    display: inline-block
}

.content {
    margin-bottom: 40px
}

.browse-all {
    display: block;
    margin-bottom: 30px
}

.all-tags li {
    font-size: 1.4em;
    margin-right: 10px;
    padding: 6px 10px
}

footer {
    color: #8a8a8a
}

@media (prefers-color-scheme:dark) {
    body {
        background-color: #222
    }
    body,
    header .site-name {
        color: #ddd
    }
    .item-list>li {
        background-color: #333
    }
    header {
        background-color: #000
    }
}

@media (max-width:600px) {
    .wrapper {
        padding: 40px 20px
    }
}

ul {
    margin-top: 0;
    margin-bottom: 1rem;
    padding-left: 25px;
}

ol {
  padding-left: 20px;
}

.item-list {
    padding-left: 0px;
}

.tech-list {
    padding-left: 0px;
}

.tag-list {
    padding-left: 0px;
}

.m-3 {
    margin: 1rem!important
}

.my-3 {
    margin-top: 1rem!important
}

.my-3 {
    margin-bottom: 1rem!important
}

.m-n3 {
    margin: -1rem!important
}

.header .nav-item.active .nav-link:hover {
    text-decoration: none
}

.main-wrapper .container {
    max-width: 820px
}

.ul-project-container {
    padding: 0;
    margin: 0;
    list-style: none;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    justify-content: space-around;
    align-content: center;
    color: var(--website-text-color);
    text-align: center;
    text-decoration: none;
    font-size: 1em;
    font-weight: 700
}

.ul-project-container p.appSubheader {
    color: gray;
    font-size: .7em
}

.project-row {
    display: flex;
    flex-direction: column;
    list-style: none;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    -webkit-flex-flow: row wrap-reverse;
    justify-content: space-around;
    align-content: center;
    margin-bottom: 200px
}

.project-column-right {
    flex-grow: 1;
    border-radius: 10px;
    padding: 5px;
    max-width: 450px;
    line-height: 25px
}

.app-column-right {
    flex: 80%;
    padding-left: 10px;
    padding-top: 30px
}

.app-row {
    display: flex
}

.app-column-left {
    flex: 20%
}

h2.app_name {
    font-size: 1.6em;
    margin-bottom: 5px
}

h6.app_header {
    font-size: 1em;
    color: gray;
    font-weight: 400
}

div.app_description {
    padding-left: 20px
}

.app_description h4 {
    padding-top: 15px
}

.tech-list {
    margin-bottom: 15px
}

.tech,
.tech-list li {
    display: inline-block;
    background-color: var(--header-color);
    color: var(--navigation-items-text-color);
    margin-bottom: 10px;
    border-radius: 5px;
    margin-right: 10px
}

img.app_download {
    padding-top: 20px
}

/*Splash*/

/**
 *  Example CSS file that can be used to style Splash HTML output
 *  Copyright (c) John Sundell 2018
 *  MIT license - see LICENSE.md
 */

pre {
    margin-bottom: 1.5em;
    background-color: #1a1a1a;
    padding: 16px 0;
    border-radius: 16px;
}

pre code {
    font-family: monospace;
    display: block;
    padding: 0 20px;
    color: #a9bcbc;
    line-height: 1.4em;
    font-size: 0.95em;
    overflow-x: auto;
    white-space: pre;
    -webkit-overflow-scrolling: touch;
}

pre code .keyword {
    color: #e73289;
}

pre code .type {
    color: #8281ca;
}

pre code .call {
    color: #348fe5;
}

pre code .property {
    color: #21ab9d;
}

pre code .number {
    color: #db6f57;
}

pre code .string {
    color: #fa641e;
}

pre code .comment {
    color: #6b8a94;
}

pre code .dotAccess {
    color: #92b300;
}

pre code .preprocessing {
    color: #b68a00;
}

/**
 *  Tags
 */

.docker {
    background-color: #66293c
}

.swift {
    background-color: #913e37
}

.publish {
    background-color: #ca7618
}

.collectionView {
    background-color: #a38138
}

.software {
    background-color: #2f7176
}

.codable {
    background-color: #246089
}

.json {
    background-color: #498840
}

.rest {
    background-color: #484781
}

.goLang {
    background-color: #545497
}

.apple {
    background-color: #4C7C87
}

.other {
    background-color: #BB534A
}