/* CSS reset */
:where(:not(html,iframe,canvas,img,svg,video,audio):not(svg *,symbol *)) {
    all: unset;
    display: revert
}

*, ::after, ::before {
    box-sizing: border-box
}

a, button {
    cursor: revert
}

menu, ol, ul {
    list-style: none
}

img {
    max-width: 100%
}

table {
    border-collapse: collapse
}

input, textarea {
    -webkit-user-select: auto
}

textarea {
    white-space: revert
}

meter {
    -webkit-appearance: revert;
    appearance: revert
}

::placeholder {
    color: unset
}

:where([hidden]) {
    display: none
}

:where([contenteditable]:not([contenteditable=false])) {
    -moz-user-modify: read-write;
    -webkit-user-modify: read-write;
    overflow-wrap: break-word;
    -webkit-line-break: after-white-space;
    -webkit-user-select: auto
}

:where([draggable=true]) {
    -webkit-user-drag: element
}

/* Style */

body {
    font-size: 16px;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    color: #252029;
}


h1 {
    font-size: 50px;
    color: black;
    line-height: 1.1em;
    letter-spacing: -0.045em;
    font-weight: 900;
}

h1.with-margin {
    display: inline-block;
    margin-bottom: 8.6rem;
}

b.strong {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 900;
}

b {
    font-weight: 600;
}

h2 {
    font-size: 35px;
    color: black;
    line-height: 1.1em;
    letter-spacing: -0.045em;
    font-weight: 900;
    margin: 3rem 0 2rem;
}

h3 {
    font-size: 24px;
    color: black;
    line-height: 1.1em;
    letter-spacing: -0.045em;
    margin: 2rem 0 1.5rem;
}

p {
    font-weight: 400;
    line-height: 1.5rem;
}

header, main {
    display: flex;
    align-content: center;
    padding: 0 2rem;
    flex-direction: column;
    justify-content: center;
    align-items: center
}

header {
    background-image: radial-gradient(rgba(67, 97, 238, 0.41) 1px, transparent 1px);
    background-size: 24px 24px;
    padding: 3.5rem;
    position: relative;
}

main {
    padding: 0 2rem;
}

.top-bar, .two-column, section {
    max-width: 1200px;
    width: 100%;
}

.top-bar {
    display: flex;
    justify-content: space-between;
    align-content: center;
    align-items: center;
}

.logo {
    font-size: 50px;
    color: black;
    line-height: 1.1em;
    letter-spacing: -0.045em;
    font-weight: 900;
}

.promo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 7rem 0 5rem;
}

nav a {
    font-weight: 900;
    margin-left: 1rem;
    background: white;
}

header nav a {
    border-bottom: 2px solid transparent;
}

header nav a:hover {
    border-bottom: 2px solid #a39adc;
}

header nav a:active {
    border-bottom: 1px solid #a39adc;
}

.face {
    position: absolute;
    top: 20%;
    left: 56%;
    width: 374px;
    height: 374px;
    border-radius: 374px;
}

.face img {
    position: absolute;
    left: 0;
    top: 0;
}

.me {
    width: 160px;
    height: 160px;
    z-index: 5;
}

.gif {
    width: 375px;
    height: 375px;
    z-index: 1;
    border-radius: 400px;
}

.face span {
    width: 376px;
    height: 376px;
    border-radius: 374px;
    position: absolute;
    left: 0;
    top: 0;
    border: 1px solid #2694e2;
}

.face span.face-border-1 {
    top: -2px;
    left: 1px;
}

.face span.face-border-2 {
    top: -1px;
    left: -3px;
}

i.round {
    position: absolute;
    top: 78%;
    left: 68%;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: move 7s forwards;
    background: linear-gradient(127deg, yellow 0%, orange 20%, blue);
}

i.round:nth-child(2) {
    animation-delay: -2s;
    background: rgba(255, 255, 255, .3);
    box-shadow: 0 0 1rem rgba(255, 255, 255, .7),
    0 0 0 1px rgba(255, 255, 255, .1);
    backdrop-filter: blur(30px);
}

.face i.round {
    animation: none;
    top: 55%;
    left: 60%;
    width: 180px;
    height: 180px;
    z-index: 3;
    box-shadow: none;
    transform: none;
    opacity: .9;
}

.face .small i.round {
    width: 50px;
    height: 50px;
    top: 77%;
    left: 9%;
    opacity: .6;
}

@keyframes move {
    0%, 100% {
        transform: translate(-50%, -50%) rotate(0) translateY(-30%);
    }
    30% {
        transform: translate(-50%, -50%) rotate(-40deg) translateY(-30%);
    }
    70% {
        transform: translate(-50%, -50%) rotate(45deg) translateY(-30%);
    }
}

.two-column {
    display: grid;
    grid-template-columns: 8fr 4fr;
    grid-gap: 4rem;
}

.about-text, .contacts-text {
    max-width: 1200px;
    width: 100%;
    padding: 4rem 0;
}

.about-text p {
    font-weight: 400;
    line-height: 1.6rem;
    font-size: 18px;
    margin-bottom: 2rem;
    text-align: justify;
}

.technologies span {
    display: inline-block;
    padding: 2px 6px 2px 20px;
    border-radius: 6px;
    margin-left: 4px;
    margin-bottom: 10px;
    position: relative;
    border: 2px solid #00000014;
    box-shadow: 2px 2px 1px #00000017;
}

.technologies span:before {
    content: '·';
    position: absolute;
    left: 6px;
    top: 11px;
    font-size: 40px;
    line-height: 0;
}

.technologies span.technologies-subheader {
    display: block;
    background-color: #fbf9fd;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 2px;
    padding: 6px 6px 6px 10px;
}

.technologies span.technologies-subheader:before {
    display: none;
}

.python {
    color: #224967;
    /*border-color: #22496750;*/
}

.django {
    color: #0d4a34;
    /*border-color: #0d4a3450;*/
}

.flask {
    color: #000000;
    /*border-color: #0d4a3450;*/
}

.fastapi {
    color: #129388;
    /*border-color: #0d4a3450;*/
}

.postgresql {
    color: #34688f;
    /*border-color: #34688f50;*/
}

.django-rest-framework {
    color: #a2080e;
    /*border-color: #a2080e50;*/
}

.docker {
    color: #2694e2;
    /*border-color: #2694e250;*/
}

.celery {
    color: #a9ca5f;
    /*border-color: #a9ca5f;*/
}

.sentry {
    color: #362f57;
    /*border-color: #362f5750;*/
}

.git {
    color: #e74f39;
    /*border-color: #e74f3950;*/
}

.bash {
    color: #272e35;
    /*border-color: #272e3550;*/
}

.linux {
    color: #020202;
    /*border-color: #02020250;*/
}

.javascript {
    color: #dcc53b;
    /*border-color: #dcc53b70;*/
}

.typescript {
    color: #3076bd;
    /*border-color: #3076bd50;*/
}

.react {
    color: #60d3f1;
    /*border-color: #60d3f150;*/
}

.angular {
    color: #bc0c32;
    /*border-color: #bc0c3250;*/
}

.express {
    color: #3f3f3f;
    /*border-color: #3f3f3f50;*/
}

.koa {
    color: #33333d;
    /*border-color: #33333d50;*/
}

.nodejs {
    color: #43443a;
    /*border-color: #43443a50;*/
}

.webpack {
    color: #6b8fd1;
    /*border-color: #6b8fd150;*/
}

.gulp {
    color: #d2464a;
    /*border-color: #d2464a50;*/
}

.sass {
    /*background-color: #34688f;*/
}

.postcss {
    color: #d53a1d;
    /*border-color: #d53a1d50;*/
}

.php {
    color: #34688f;
    /*border-color: #34688f50;*/
}

.symfony {
    color: #000000;
    /*border-color: #00000050;*/
}

.ruby {
    color: #8b110e;
    /*border-color: #8b110e50;*/
}

.ror {
    color: #c50c13;
    /*border-color: #c50c1350;*/
}

.cpp {
    color: #035894;
    /*border-color: #03589450;*/
}

.mongodb {
    color: #00a548;
    /*border-color: #00a54850;*/
}

.mysql {
    color: #457a9d;
}

.sqlalchemy {
    color: #ea0000;
    /*border-color: #ea000050;*/
}

.work-tech {
    margin-top: 16px;
}

.underline-block {
    text-decoration: underline;
    display: block;
}

.strengths li {
    position: relative;
    padding-left: 16px;
}


.strengths li:before {
    content: '·';
    position: absolute;
    left: 2px;
    top: 9px;
    font-size: 30px;
    line-height: 0;
    color: #8678d0;
}

.btn {
    background: #a39adc0d;
    display: block;
    padding: 8px 32px;
    text-align: center;
    border: 2px solid #a39adc;
    border-radius: 8px;
    margin-top: 48px;
    box-shadow: 2px 2px 1px #a39adc;
}

.btn:hover {
    background: rgba(163, 154, 220, 0.15);
}

.btn:active {
    background: rgba(163, 154, 220, 0.35);
    box-shadow: 1px 1px 1px #a39adc;
}

footer {
    text-align: center;
    margin: 24px 0 0px;
    color: #00000040;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 24px;
}

footer span {
    text-transform: lowercase;
}

.employment-block {
    display: grid;
    grid-template-columns: 64px auto;
    grid-gap: 24px;
    margin-bottom: 48px;
    align-items: flex-start;
}

.employment-block .position {
    font-weight: 500;
    margin-top: .25rem;
    margin-bottom: .45rem;
}

.data {
    border: 2px solid #00000014;
    box-shadow: 2px 2px 1px #00000017;
    border-radius: 8px;
    padding: 8px;
    background: #a39adc0d;
}


.company {
    display: block;
    margin-bottom: 1rem;
    color: #a39adc;
    font-size: 14px;
}

@media all and (max-width: 1024px) {
    main {
        padding: 0 1rem;
    }

    .mobile-hide{
        display: none;
    }

    .data{
        font-size: 12px;
        text-align: center;
    }

    .employment-block .position{
        font-weight: 900;
    }

    .top-bar {
        flex-direction: column;
    }

    header {
        padding: 2rem;
    }

    .logo {
        margin-bottom: 1rem;
    }

    .promo {
        justify-content: center;
    }

    .face {
        position: absolute;
        top: 9rem;
        left: auto;
        z-index: -1;
    }

    h1.with-margin {
        margin-bottom: 7rem;
        margin-top: 4rem;
        color: white;
    }

    .contacts-text {
        padding-bottom: 1rem;
    }

    .mainpage-round {
        z-index: -1;
        position: absolute;
    }

    .two-column {
        grid-template-columns: 1fr;
    }

    .about-text p{
        text-align: left;
    }

    .two-column{
        grid-gap: 0;
    }
}