@charset "UTF-8";

/* overpass-mono-regular - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: "Overpass Mono";
    font-style: normal;
    font-weight: 400;
    src: url("/art/fonts/overpass-mono-v16-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* overpass-mono-500 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: "Overpass Mono";
    font-style: normal;
    font-weight: 500;
    src: url("/art/fonts/overpass-mono-v16-latin-500.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/*
CSS Reset via github/wulkano/eightpoint modified for this usecase
*/
html,
body,
div,
span,
object,
iframe,
p,
blockquote,
pre,
a,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
header,
footer,
section,
article,
nav,
canvas,
aside,
figcaption,
figure,
hgroup,
menuitem,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
}
html {
    box-sizing: border-box;
    font-size: 62.5%;
}
*,
*::before,
*::after {
    box-sizing: inherit;
}
body {
    line-height: 1.5em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
a {
    /*text-decoration: none;*/
}
:focus {
    outline: 0;
}
pre,
code,
kbd,
samp,
tt {
    font-family: Menlo, "Courier New", Courier, monospace;
    font-size: 1em;
}
/*
Custom Styles
---
*/
body {
    background: var(--dark);
    color: var(--light);
    font-size: 1.4rem;
    letter-spacing: 0.001em;
}
a {
    color: #3485e1;
    cursor: pointer;
    transition: color 0.2s ease;
}
a:hover {
    color: #ffd700;
}
a.dark {
    color: #999999;
    text-decoration: underline;
}
a.dark:hover {
    color: #666666;
}
::selection {
    background-color: #f81ce5;
    color: #fff;
}
::-moz-selection {
    /* Code for Firefox */
    background: #f81ce5;
    color: #fff;
}
/* Paragraphs */
p {
    margin-bottom: 32px;
    font-size: 1.2rem;
    line-height: 1.2;
}
/* nprogress */
#nprogress {
    pointer-events: none;
}
#nprogress .bar {
    position: fixed;
    z-index: 2000;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--light);
}
/* Helper Classes */
.text-uppercase {
    text-transform: uppercase;
}
/* Helps maintain consistent width */
.container {
    width: 900px;
    max-width: 100%;
    margin: 0 auto;
}
@media (max-width: 900px) {
    .container {
        padding: 0 40px;
    }
}

.flag-icon-background,
.flag-icon {
    background-size: contain;
    background-position: 50%;
    background-repeat: no-repeat;
}

.flag-icon {
    position: relative;
    display: inline-block;
    width: 1.3333333333em;
    line-height: 1em;
}
.flag-icon:before {
    content: " ";
}
.flag-icon.flag-icon-squared {
    width: 1em;
}

.flag-icon-svk {
    background-image: url(/art/flags/4x3/svk.svg);
}

.flag-icon-ukr {
    background-image: url(/art/flags/4x3/ukr.svg);
}

:root {
    --fsize: clamp(0.95rem, 2vw, 1.3rem);
    --fsize2: clamp(0.95rem, 2vw, 0.95rem);
    --fsize3: clamp(0.85rem, 2vw, 0.75rem);
    --light: #a6bbb6;
    --dark: #1c2125;
}

html {
    background: var(--dark);
    font-size: var(--fsize);
    min-height: -webkit-fill-available;
    scroll-behavior: smooth;
}

body {
    background: var(--dark);
    color: #cfc0b6;
    display: flex;
    /* letter-spacing: -0.002em; */
    flex-direction: column;
    font-family: "Overpass Mono", monospace;
    font-size: var(--fsize);
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
}

@supports (-webkit-touch-callout: none) {
    body {
        min-height: -webkit-fill-available;
    }
}

::selection {
    background: var(--light);
    color: var(--dark);
}

b {
    color: var(--light);
}

li {
    font-size: var(--fsize);
}

#main {
    width: min(100%, 34em);
    flex-direction: column;
    padding-right: 1.25em;
    padding-left: 1.25em;
    margin-inline: auto;
    display: flex;
}

ul.portfolio {
    list-style-type: none;
    padding-left: 0;
}

.portfolio > li {
    font-size: var(--fsize2);
    line-height: 1.3;
    padding-left: 1.5em;
    padding-right: 2.5em;
    margin-bottom: 1.3em;
}


ul.features_list {
    list-style-type: none;
    padding-left: 0;
}

.features_list > li {
    font-size: var(--fsize3);
    line-height: 1.3;
    padding-left: 1.5em;
    padding-right: 2.5em;
    margin-bottom: 0.35em;
}

.highlight b {
    color: var(--dark) !important;
    background: var(--light);
    font-weight: 600;
    padding: 5px;
}

#main dl {
    --spacing: 0.7em;
    color: var(--light);
    font-size: var(--fsize);
}

#main dl dt {
    font-weight: 700;
}

h2 {
    color: var(--light);
    font-size: 1.2em;
    margin-top: 1.5em;
    margin-bottom: 0.5em;
}

.logo img {
    width: 30%;
    margin-top: 50px;
    margin-bottom: 30px;
}