@charset "utf-8";
@import url(fonts.css);
@import url(colors.css);
@import url(portfolio.css);
@import url(form.css);
/*------------------
Fonts:
MainLogo
Header
BodyText
Caption
-------------------*/
/*Reset browsers presets*/
* {
    margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
    box-sizing: border-box;
}
/*Global styles*/
html {
    background-color: var(--txtColor);
    scroll-behavior: smooth;
}
h1, h2, h3, h4, h5, h6 {
    font-family: Header,Tahoma, sans-serif;
    font-weight: 700;
}
h1 {
    font-size: 3em;
}
h2 {
    font-size: 1.4em;
}
p, a, li, form {
    font-family: BodyText, Tahoma, sans-serif;
}
.caption {
    font-family: Caption, Tahoma, sans-serif;
}
a {
    color: #bbb;
    text-decoration: none;
}
a:hover {
    color: #fff;
}
article.portfolioMainPage a:hover::after {
    content: ' >';
}
.readMore, .contacts__btn {
    display: block;
    padding: .3em;
    margin-top: .5em;
    margin-bottom: 2em;
    text-align: center;
    border: 1px solid var(--adTxtColor);
    color: #999;
    background-color: var(--bgColor);
    text-decoration: none;
    border-radius: 1em;
    box-shadow: inset 0 0 .6em 0 rgba(173 170 200 / 0%);
    transition: .5s;
}
.readMore:hover, .contacts__btn:hover {
    color: #fff;
    border-color: #fff;
    box-shadow: inset 0 0 1.6em 0 rgba(173 170 200 / 100%);
}
.none {
    display: none;
}

/* ----- Header ------*/

.index header {
    position: relative;
    z-index: 7;
    width: 100%;
    height: 72vmin;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f8f8f8;
}
.index header h1 {
    text-align: center;
    font-size: clamp(1.8em, calc(3vmin + 1rem), 2.5em);
    color: #555;
}
.index header h1 .myLogo,
.index header h1 .myName,
.index header h1 .myStatus {
    display: block;
}

.index header h1 .myLogo
strong {display: none;}

.index header h1 .myLogo
{
    width: 33vmin;
    height: 27vmin;
    margin: 0 auto 4vmin;
    background-color: #901;
    background-image: url(images/logo_texture_1.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    clip-path: url(#mlcp);
}

/* Alternative Header */


.altHeader
{
    width: 32vh;
    height: 8vh;
    background-color: transparent;
    position: fixed;
    top: 0;
    z-index: 10;
    left: 5vmin;
    font-size: 2.2vh;
    line-height: 1em;
    transition: .7s;
    opacity: 0;
    animation: slide_top .6s linear forwards;
    animation-delay: .1s;
}

@keyframes slide_top {
    0% {
        transform: translateY(30vh);
        opacity: 0;
        }
    100% {
        transform: translateY(0vh);
        opacity: 1;
    }
}



.altHeader a
{
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: flex-start;
    align-items: center;
    text-decoration: none;
    color: #777;
    transition: .7s;
}
.altHeader a:hover 
{color: #000;}

.altHeader a svg
{
    width: 6vh;
    height: 6vh;
    fill: #902;
    margin-right: 1.5vmin;
}
.altHeader a:hover svg
{fill: #d00;}



/* ----- topmenu ----- */


.topmenu
{
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    justify-content: center;
    align-items: end;
    height: 8vh;
    background-color: var(--topMenuColor);
}
.topmenu input {display: none;}

/* toggler-icons */
.xhmb {
    height: 100%;
    aspect-ratio: 1/1;
    display: none;
    justify-content: center;
    align-items: center;
    /* background-color: blueviolet; */
    opacity: .75;
}
.xhmb span {
    display: block;
    position: relative;
    width: 2rem;
    height: .5rch;
    border-radius: .2rch;
    transform-origin: center;
    background-color: var(--bgColor);
    transition: 1s ease;
}
.xhmb span::before, .xhmb span::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: inherit;
    border-radius: inherit;
    transform-origin: inherit;
}
.xhmb span::before {
    transform: translateY(-1rch);
}
.xhmb span::after {
    transform: translateY(1rch);
}



    /* #togglemenu:checked + .xhmb::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100dvw;
        height: 100dvh;
        z-index: -20;
        background-color: rgba(0, 0, 0, 0.5);
        backdrop-filter: blur(10px);
    }  */

    #togglemenu:checked + .xhmb span{background-color: transparent;}

    #togglemenu:checked + .xhmb span::before {
        animation: make-cross-before .5s forwards;
        background-color: var(--bgColor);
    }

    #togglemenu:checked + .xhmb span::after {
        animation: make-cross-after .5s forwards;
        background-color: var(--bgColor);
    }
    /* Анимация для верхней линии */
    @keyframes make-cross-before {
        0% { transform: translateY(1rch) rotate(0deg); }
        50% { transform: translateY(0) rotate(0deg); } /* Схлопнулись в центр на 50% времени */
        100% { transform: translateY(0) rotate(45deg); } /* Повернулись к 100% */
    }

    /* Анимация для нижней линии */
    @keyframes make-cross-after {
        0% { transform: translateY(-1rch) rotate(0deg); }
        50% { transform: translateY(0) rotate(0deg); } /* Схлопнулись */
        100% { transform: translateY(0) rotate(-45deg); } /* Повернулись */
    }


.topmenu ul
{
    /* margin: 0 auto; */
    /* border-top: 1px solid var(--adTxtColor); */
    /* display: none; */
    padding-bottom: 2vh;
}
.topmenu ul li
{
    display: inline-block;
    list-style: none;
    border-right:  1px solid #555;
    font-family: Tahoma, Areal, sans-serif;
    font-size: 1em;
    letter-spacing: .05em;
    color: #777;
}
.topmenu ul li:last-child
{
    border-right: none;
}

/* 
.topmenu ul li:hover
{
    font-size: 1.3em;
    letter-spacing: .09em;
    color: #333;
} */
.topmenu ul li a.topMenuItem
{
    display: block;
    padding: .5em 1em;
    text-decoration: none;
    color: #333;
    background-color: transparent;
}
.topmenu ul li a.topMenuItem:hover
{
    color: #933;
    background-color:  
    rgba(250 250 250 / 50%);
    font-weight: bold;
    letter-spacing: .09em;
}
.topmenu ul li
.submenu
{
    position: fixed;
    top: 6vh;
    left: 0;
    width: 100vw;
    height: 38vh;
    background-color:  
    rgba(250 250 250 / 100%);
    display: none;
    justify-content: center;
    align-content: flex-start;
    letter-spacing: 0;
}

.topmenu ul li:hover .submenu
{
    display: flex;
}

.topmenu ul li
.submenu h2
{
    font-size: 1.6em;
    font-weight: normal;
    color: #777;
    margin: 2em 1.5em 1em;
}
.topmenu ul li
.submenu nav
{
    /* position: static; */
    display: block;
    margin: 3.5em 1.5em 1em; 
}
.topmenu ul li
.submenu
nav h3
{
    padding-bottom: .5em;
    padding-right: 2em;
    color: #999;
}

.topmenu ul li
.submenu
nav li
{
    display: block;
    border: none;
    font-weight: normal;
    font-size: .8em;
    line-height: 2em;
    letter-spacing: 0;
}

.topmenu ul li
.submenu
nav a {
    text-decoration: none;
    color: inherit;
}
.topmenu ul li
.submenu
nav a:hover {
    color: #700;
}
.topmenu ul li
.submenu
nav li a:hover::after {
    content: ' >';
    color: #100;
}

/* ---- Menu mobile adaptive ---- */

@media(max-width:850px){
    .xhmb{display: flex;}
    .topmenu{
        justify-content: flex-end;
    }
    .topmenu>ul {
        position: absolute;
        top: 6.5vh;
        right: 0;
        height: 50dvh;
        width: 8em;
        padding-top: 1em;
        display: none;
        flex-direction: column;
        background-color: hsl(from var(--topMenuColor) h s calc(l - 20));
        border-radius: .5em 0 0 .5em;
    }

    #togglemenu:checked ~ ul {display: flex;}

    .topmenu ul li {
        display: block;
        border-right: none;
    }
    .topmenu ul li .submenu {
        position: absolute;
        top: 2.5vh;
        left: -12em;
        z-index: -10;
        display: none;
        width: 20em;
        height: 88dvh;
        /* transform: translateX(24px); */
        border-radius: .5em;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
    }
    .topmenu ul li .submenu nav, .topmenu ul li .submenu h2 {
        margin: 1em 0 0 1.5em;
    }
    .topmenu ul li .submenu h2, .topmenu ul li .submenu nav h3{
        padding: 0;
    }
}

/* --- ContentArea ---*/
main {
    display: flex;
    flex-direction: column;
    /*tmp*/
    background-color: var(--bgColor);
}
main section {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    padding: 3vmin;
    /*tmp*/
    background-color: transparent;
}
main
section:first-child {
    padding-top: 12vmin;
    padding-bottom: 10vmin;
}
main
section:last-child {
    padding-bottom: 16vmin;
}

    /* -Latest Projects- */
main section.latestProjects {
    position: relative;
    padding: 1vmin 7vmin 2vmin;
}
main section.latestProjects h2 {
    position: absolute;
    bottom: 1vmin;
    left: 12vmin;
    color: #fff;
    font-family: BodyText;
    font-weight: 400;
    font-size: 1.3em;
}
main section.latestProjects .prjList {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow: scroll;
    anchor-name: --carousel;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    /*scroll-marker-group:after;*/
}

/* Carousel nav */

/*main section.latestProjects .prjList::scroll-marker-group{
    display: flex;
    justify-content: center;
    gap: 1rem;
}
main section.latestProjects .prjList li::scroll-marker {
    content: '';
    height: 2rem;
    width: 2rem;
    border-radius: 50%;
    background-color: aqua;
}*/
main section.latestProjects .prjList::-webkit-scrollbar{
    display: none;}
main section.latestProjects .prjList::scroll-button(right),
main section.latestProjects .prjList::scroll-button(left){
    position: fixed;
    z-index: 3;
    position-anchor:--carousel;
    position-area: center;
    height: 8vmin;
    width: 8vmin;
    font-size: 5vmin;
    border: none;
    background-color: var(--bgColor);
    color: var(--adTxtColor);
    cursor: pointer;
}
main section.latestProjects .prjList::scroll-button(right){
    content: '\276D';
    position-area: right;
    translate:-40%;
    padding-left: 2vmin;
    border-radius: 50% 5% 5% 50%;
}
main section.latestProjects .prjList::scroll-button(left){
    content: '\276C';
    position-area: left;
    translate: 40%;
    padding-right: 2vmin;
    border-radius: 5% 50% 50% 5%;
}
main section.latestProjects .prjList::scroll-button(right):hover, main section.latestProjects .prjList::scroll-button(left):hover{
    color: #fff;
}
main section.latestProjects .prjList::scroll-button(right):disabled, main section.latestProjects .prjList::scroll-button(left):disabled {
    opacity: 40%;
    cursor: auto;
}

/* ------------ */

main section.latestProjects .prjList li {
    list-style-type: none;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50vmin;
    min-width: 50vmin;
    height: 40vmin;
    margin: 0 1vmin 0;
    background-color: rgba(255 255 255 / 30%); 
    border: 1px solid var(--adTxtColor);
    scroll-snap-align: start;
}
main section.latestProjects .prjList li:last-child{
    margin-right: 0; 
}

main section.latestProjects .prjList li a,
main section.latestProjects .prjList li div {
    display: block;
    text-decoration: none;
    width: 96%;
    height: 96%;
    /*tmp*/
    background-color: rgba(0 0 0 / 30%);
    color: azure;
}
main section.latestProjects .prjList li a figure,
main section.latestProjects .prjList li div figure {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    position: relative;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    transition: .7s;
}

/* PRJLST animation */
/*------- 01 -------*/
main section.latestProjects .prjList li:nth-child(1) a figure,
main section.latestProjects .prjList li:nth-child(1) div figure {
    background-image: url(../images/index_prj_lst/LPrj01.jpg);
}
main section.latestProjects .prjList li:nth-child(1) a:hover figure,
main section.latestProjects .prjList li:nth-child(1) div:hover figure {
    background-image: url(../images/index_prj_lst/LPrj01a.jpg);
}
/*------- 02 -------*/
main section.latestProjects .prjList li:nth-child(2) a figure,
main section.latestProjects .prjList li:nth-child(2) div figure {
    background-image: url(../images/index_prj_lst/LPrj02.png);
}
main section.latestProjects .prjList li:nth-child(2) a:hover figure,
main section.latestProjects .prjList li:nth-child(2) div:hover figure {
    background-image: url(../images/index_prj_lst/LPrj02a.png);
}

/*------- 03 -------*/
main section.latestProjects .prjList li:nth-child(3) a figure,
main section.latestProjects .prjList li:nth-child(3) div figure {
    background-image: url(../images/index_prj_lst/LPrj03.jpg);
}
main section.latestProjects .prjList li:nth-child(3) a:hover figure,
main section.latestProjects .prjList li:nth-child(3) div:hover figure {
    background-image: url(../images/index_prj_lst/LPrj03a.jpg);
}
/*------- 04 -------*/
main section.latestProjects .prjList li:nth-child(4) a figure,
main section.latestProjects .prjList li:nth-child(4) div figure {
    background-image: url(../images/index_prj_lst/LPrj04.png);
}
main section.latestProjects .prjList li:nth-child(4) a:hover figure,
main section.latestProjects .prjList li:nth-child(4) div:hover figure {
    background-image: url(../images/index_prj_lst/LPrj04a.png);
}
/*------- 05 -------*/
main section.latestProjects .prjList li:nth-child(5) a figure,
main section.latestProjects .prjList li:nth-child(5) div figure {
    background-image: url(../images/index_prj_lst/LPrj05.jpg);
}
main section.latestProjects .prjList li:nth-child(5) a:hover figure,
main section.latestProjects .prjList li:nth-child(5) div:hover figure {
    background-image: url(../images/index_prj_lst/LPrj05a.jpg);
}
/*------- 06 -------*/
main section.latestProjects .prjList li:nth-child(6) a figure,
main section.latestProjects .prjList li:nth-child(6) div figure {
    background-image: url(../images/index_prj_lst/LPrj06.png);
}
main section.latestProjects .prjList li:nth-child(6) a:hover figure,
main section.latestProjects .prjList li:nth-child(6) div:hover figure {
    background-image: url(../images/index_prj_lst/LPrj06a.jpg);
}
/*------- 07 -------*/
main section.latestProjects .prjList li:nth-child(7) a figure,
main section.latestProjects .prjList li:nth-child(7) div figure {
    background-image: url(../images/index_prj_lst/LPrj07.jpg);
}
main section.latestProjects .prjList li:nth-child(7) a:hover figure,
main section.latestProjects .prjList li:nth-child(7) div:hover figure {
    background-image: url(../images/index_prj_lst/LPrj07a.jpg);
}

/*==================*/

main section.latestProjects .prjList li a figure img,
main section.latestProjects .prjList li div figure img {
    display: none;
}
main section.latestProjects .prjList li a figure figcaption,
main section.latestProjects .prjList li div figure figcaption {
    /*position: absolute;
    bottom: 0;
    left: 0;*/
    width: 92%;
    height: 27%;
    margin-bottom: 4%;
    padding: 2vmin ;
    color: #eee;
    /*background-color: #38394F;*/
    background-color: hsl(from var(--bgColor) h s calc(l - 15));
    border-radius: .7em;
    font-family: Caption, sans-serif;
    opacity: 0;
    transition: .7s;
    transition-delay: .3s; 
    overflow: hidden;
}
main section.latestProjects .prjList li a:hover figure figcaption,
main section.latestProjects .prjList li div:hover figure figcaption {
    opacity: .7;
}

/* 
main section.latestProjects .prjList li a figure figcaption span::after {
    content: 'more >';
    padding-left: 1.5em;
    color: #933;
}
*/

/* -- Basic Aside --- */

main section aside {
    width: 21rem;
    /* min-width: 33vmin; */
    flex: 0 0 21rem;
    margin: .5vmin 8vmin 10vmin;
}

main section aside
figure {
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
main section aside
figure img {
    display: none;
}

main section aside
figure.myPhoto, main section aside
figure.myPhotoCV {
    height: 21rem;
    margin-bottom: 1.5em;
    background-image: url(../images/my_photo.jpg);
    border-radius: 50%;
    transition: .7s;
}
main section aside
figure.myPhoto:hover {
    background-image: url(../images/my_photo_a.jpg)
}
main section aside {
    color: var(--adTxtColor);
    font-size: 1.4em;
    line-height: 1.4em;
}
main section aside h3{
    margin-top: 2em;
    margin-bottom: 1em;
    text-align: center;
}
main section aside li{
    list-style-position: inside;
    padding-left: 1.2em;
    text-indent: -1.2em;
}
main section 
aside p.caption {
    font-size: .8em;
    margin-top: 3em;
    padding-top: .6em;
    padding-bottom: .5em;    
    border-top: 1px solid #eee;
    line-height: 1.2em;
}

main section
aside.empty {
    margin-top: 0;
    margin-bottom: 0;
    height: 1px;
}
.cvDnld, .CRTFs {
    display: flex;
    place-content: center;
    align-items: center;
    width: 100%;
}
.cvDnld a, .CRTFs a {
    display: block;
    background-color: transparent;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.cvDnld {
    flex-direction: row;
}
.CRTFs {
    flex-direction: column;
    margin-top: 1em;
}
.cvDnld a {
    width: 25%;
    margin: 6% 12%;
    aspect-ratio: 5 / 6;
}
.CRTFs a {
    width: 65%;
    aspect-ratio: 297 / 210;
    margin: 1em 0;
}


/* - Basic Articles - */

main section article {
    color: var(--txtColor);
    font-size: 1.6em;
    line-height: 1.5;
    margin: 0 8vmin;
    width: clamp(21rem, 80vmin, 60rem);
}
main section 
article strong {
    font-weight: 600;
}
main section
article h2,
main section
article h3 {
    font-family: Header, Tahoma, sans-serif;
    font-weight: 400;
    color: var(--txtColor);
}
main section
article h2{
    font-size: 1.8em;
    margin-top: .5em;
    padding-bottom: .4em;
}
main section
article h3{
    font-size: 1.4em;
    margin-top: .8em;
    padding-bottom: .2em;
}
main section
article h4{
    margin-top: 1.2em;
    font-weight: 600;
    font-size: 1em;
    padding-bottom: .8em;
}
main section
article h5{
    font-size: .9em;
}
main section
article h4
.h4subline{
    font-family: Caption, Tahoma, sans-serif;
    display: block;
    font-weight: 200;
    font-size: .7em;
    line-height: 1em;
}
main section
article ul {
    padding-left: 0;
}
main section
article li {
    padding-left: 1em;
    list-style-position: inside;
    text-indent: -1em;
}

/* ----- Footer ------*/

footer
{
    height: 38vh;
    background-color: #1B1213;
    border-top: 2px solid #877;
    background-image: url(images/bottom_img_02.png);
    background-position: top right;
    background-repeat: no-repeat;
    background-size: auto 100%;
    position: relative;
}

footer .comunication {
    margin-top: 4dvh;
    margin-left: 5vmin;
    width: 20rem;
    display: flex;
    flex: 1 0 100%;
    gap: 2em;
    font-size: .8em;

    li {
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
        height: 2em;
        aspect-ratio: 1/1;
        display: flex;
        justify-content: start;
        align-items: center;
        
        a {
            width: 100%;
            height: 100%;
            background-repeat: no-repeat;
            background-size: contain;
            background-position: center;
            opacity: .5;
        }
        a:hover {opacity: 1;}

    }
}

footer .comunication li#mail a {
    background-image: url(images/c_mail.svg);
}
footer .comunication li#in a {
    background-image: url(images/c_in.svg);
}
footer .comunication li#fb a {
    background-image: url(images/c_fb.svg);
}

footer .copy
{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 62vw;
    padding: 2vmin 0 4vmin 4vmin;
    font-size: 1.1em;
    font-family:  BodyText, Tahoma, sans-serif;
    color: #bbb;
    border-top: 1px solid #888;
}

/* -------------------
Additional
environtment 
detales
-------------------- */

.innerMeaning
{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 12;
    width: 100%;
    height: 1px;
    background-color: transparent;
    opacity: 1;
}
.innerMeaning h2, .innerMeaning p
{
    display: none;
}
.innerMeaning .keyboard, 
.innerMeaning .mouse
{
    position: absolute;
    background-color: transparent;
    background-repeat: no-repeat;
    background-size: cover;
}
.innerMeaning .keyboard
{
    top: 0;
    left: 0;
    width: 33vw;
    height: 20vw;
    background-image: url(images/keyboard.png);
    background-position: bottom left;
}
.innerMeaning .mouse
{
    top: 33vh;
    right: 0;
    width: 27vw;
    height: 33vw;
    background-image: url(images/mouse.png);
    background-position: bottom right;
}


/* --- GoUp button --- */



.goUp
{
    width: 6vmin;
    height: 6vmin;
    position: fixed;
    bottom: 6vh;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    transition: 1s;
}
.goUp a
{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #aaa;
    border: 1px solid #fff;
    border-radius: 50%;
    box-shadow:
    inset 0 0 4vmin #fff,
    0 0 1vmin #222;
}
.goUp a:hover
{
    background-color: #ede;
    border-color: #fcf;
    box-shadow:
    inset 0 0 4vmin #fff,
    0 0 3vmin #969;
}
.goUp a strong
{ display: none;}

.goUp a svg
{ 
    fill:#fff;
    width: 2.5vmin;
    height: 2.5vmin;
    transition: .5s;
}

.goUp a:hover svg
{ 
    fill:#b9f;
    width: 3.5vmin;
    height: 3.5vmin;
}



/* -------------------- 
Restyling for smallsize 
----------------------- */
@media (max-width: 850px)
{
    .innerMeaning
    {
        display: none;
        opacity: 0;
        transition: 2s;
    }
    /* main section aside {
        min-width: 42vmin;
    }
   main section aside figure.myPhoto, 
    main section aside figure.myPhotoCV {
        width: 100%;
        aspect-ratio: 1;
    } */
}