:root {
    --clr-app-itch-io: #F34B7D;
    --clr-app-steam: #355570;
    --clr-app-youtube: #E22837;
    --clr-app-web: #355570;
    --clr-background: #181C14;
    --clr-primary-1: #ECDFCC;
    --clr-secondary-1: #697565;
    --clr-secondary-2: #3C3D37;
}

body {
    background-color: var(--clr-background);
    color: var(--clr-primary-1);
    font-family: "Gill Sans", sans-serif;
}

button {
    background-color: var(--clr-secondary-1);
    border: inherit;
    border-radius: 2px;
    color: var(--clr-background);
    font-size: small;
    font-weight: bold;
    margin: 6px;
    padding: 6px;
    text-decoration: inherit;
    transition: color 0.2s;
}

button > img {
    filter: invert(1);
    height: calc(1em - 2px);
    transition: filter 0.2s;
}

button:hover,
button:focus {
    color: var(--clr-primary-1);
}

button:hover > img,
button:focus > img {
    filter: invert(0);
}

div.main-title {
    background-color: var(--clr-secondary-2);
    border-radius: 10px;
    padding: 1em;
}

h1.main-title {
    margin: inherit;
    text-align: center;
}

h2.main-title {
    font-weight: inherit;
    margin: inherit;
    text-align: center;
}

img.main-picture {
    border-radius: 50%;
}

.button.language {
    border: inherit;
    text-decoration: inherit;
    transition: color 0.2s;
}

.button.language:hover,
.button.language:focus {
    color: var(--clr-primary-1);
}

.language {
    background-color: var(--clr-secondary-1);
    border-radius: 2px;
    color: var(--clr-background);
    font-size: small;
    font-weight: bold;
    margin: 2px;
    padding: 2px;
}

.language.invert-primary {
    color: var(--clr-primary-1)
}

.project {
    border-radius: 4px;
    padding: 0.5em;
    transition: background-color 0.2s;
}

.project:hover {
    background-color: #3C3D37;
}

.project .description {
    color: var(--clr-secondary-1);
    margin-left: 1em;
}

.project .languages {
    color: var(--clr-secondary-1);
    margin-bottom: calc(1.5em - 6px);
    margin-left: 1em;
    margin-top: calc(0.5em + 2px);
}

.project .links {
    margin-left: 1em;
}

.project .links > .button {
    padding: 0.5em;
}

.project .title {
    padding-bottom: 0.5em;
}

.project img.category {
    height: 1em;
    padding-top: 2px;
    padding-left: 4px;
    width: 1em;
}

.project img.image {
    border: 2px solid var(--clr-primary-1);
    border-radius: 4px;
    height: calc(5em + 8px - 4px + 2px);
    margin-left: 1em;
    width: calc(5em + 8px - 4px + 2px);
}

.project > div {
    display: flex;
}

.project-list .project.hide {
    display: none;
}