/* Done!: complete CSS */

/* labels: epic */

/* assignees:tst32 */

/*===== VARIABLES CSS =====*/

:root {
  --header-height: 3rem;
  /*========== Colors ==========*/
  --title-color: #0B0A0A;
  --text-color: #403A3A;
  --text-color-light: #707070;
  --container-color: #FAFAFA;
  --container-color-alt: #F0EFEF;
  --body-color: #FCFCFC;
  --background-color: #f8f8ff;
  /*========== Font and typography ==========*/
  --body-font: 'Open Sans', 'fontello', 'icomoon';
  --h1-font-size: 1.5rem;
  --h2-font-size: 1.25rem;
  --h3-font-size: 1rem;
  --normal-font-size: .938rem;
  --small-font-size: .875rem;
  --smaller-font-size: .813rem;
  /*========== Font weight ==========*/
  --font-medium: 500;
  --font-semi-bold: 600;
  /*========== Margins ==========*/
  --mb-1: .5rem;
  --mb-2: 1rem;
  --mb-3: 1.5rem;
  /*========== z index ==========*/
  --z-tooltip: 10;
  --z-fixed: 100;
}

/*========== BASE ==========*/

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

html {
  scroll-behavior: smooth;
}

/*========== Variables Dark theme ==========*/

body.dark-theme {
  --title-color: #f2f2f2;
  --text-color: #bfbfbf;
  --container-color: #212121;
  --container-color-alt: #181616;
  --body-color: #2b2b2b;
}

/*========== Variables resume versions ==========*/

body {
  --content-moto: "Enjoy in learn!";
  --content-front: "Yurijj";
  --content-titre: "Frontendman";
  --content-adress: 'Av. somewhere, somewhere  ';
  --content-line1: "";
  --content-social: "SOCIAL";
  --content-profile: "Profile";
  --content-profile-text: "He'll want to use your yacht, and I don't want this thing smelling like fish.";
  --content-education: "Education";
  --content-education-title-1: "mASTER OF ORION BY DESIGN";
  --content-education-title-2: "wEB DEVEL";
  --content-education-title-3: "master of some UI/UX";
  --content-education-title-4: "spile of war";
  --content-education-edifice-1: "#1 Global University (GU)";
  --content-education-edifice-2: "State Fomalhaut Instute";
  --content-education-edifice-3: "Some's courses (UGU)";
  --content-education-edifice-4: "plus other";
  --content-skills: "SKILLS";
  --content-skills-name-1: "HTML5";
  --content-skills-name-2: "CSS3";
  --content-skills-name-3: "JavaScript";
  --content-skills-name-4: "  NodeJS";
  --content-skills-name-5: "  GraphQL";
  --content-skills-name-6: "  JAMstack";
  --content-skills-name-7: "  MongoDB";
  --content-skills-name-8: "  ";
  --content-skills-name-9: "  ";
  --content-skills-name-10: "  ";
  --content-experience: "some words but all skills has eng names";
  --content-experience-title-1: "Jun of Zen";
  --content-experience-title-2: "UI/UX";
  --content-experience-title-3: "Mobile apps gamer";
  --content-experience-title-4: "+ plus other";
  --content-experience-company-1: "From 2013 to 2015 | TexToSoft";
  --content-experience-company-2: "From 2015 to 2019 | BRedoSoft";
  --content-experience-company-3: "From 2019 to 2021 | Home, notAlone";
  --content-experience-company-4: "next to";
  --content-experience-description-1: "I tried uninstalling the extension and re-install it, same problem. I uninstalled the application altogether and reinstalled it - but ... How do I completely remove the installed extensions? I'd like to be sure I'm starting from scratch before opening a bug for";
  --content-experience-description-2: "Afetr uninstalling the extension and re-install it, same problem. I uninstalled the application altogether and reinstalled it - but ... How do I completely remove the installed extensions? I'd like to be sure I'm starting from scratch before opening a bug for";
  --content-experience-description-3: "Then an extens and re-install it, same problem. I uninstalled the application altogether and reinstalled it - but ... How do I completely remove the installed extensions? I'd like to be sure I'm starting from scratch before opening a bug for";
  --content-experience-description-4: "plus enouf water";
  --content-certificates: "CERTIFICATES";
  --content-certificates-title-1: "Root First Cert";
  --content-certificates-title-2: "CERT of deprivation";
  --content-certificates-title-3: "Third cert of uknown value";
  --content-certificates-title-4: "plus one another";
  --content-certificates-description-1: "I'm your lawyer. Anything you say to me is totally privileged. I'm not in the shakedown racket. I'm a lawyer. Even drug dealers need lawyers, right? Especially drug dealers.";
  --content-certificates-description-2: "You didn't actually see Tuco? You got this money from Tuco? Tuco gave you this is what you're saying? You made a deal? How... why would you make a deal with that scumbag? You see what he did to me? No way man, okay, no understanding!";
  --content-certificates-description-3: "You're his cook now. You're the cook and you have proven that you can run a lab without me and now that cook has reason to kill me. Think about it! It's brilliant. So go ahead. If you think that I am capable of doing this, then go ahead. Put a bullet, in my head, and kill me right now. DO IT! Do it. Do it. Do it";
  --content-certificates-description-4: "Even the worst thing we can do here is good. Just relax and let it flow. That easy. See there, told you that would be easy. We're not trying to teach you a thing to copy. We're just here to teach you a technique, then let you loose into the world. It's a super day, so why not make a beautiful sky?";
  --content-references: "REFERENCES (dangerous liasons)";
  --content-references-title-1: "Mlle Manon Lescaut";
  --content-references-title-2: "Sr. The Director";
  --content-references-title-3: "chevalier des Grieux";
  --content-references-subtitle-1: "PDG";
  --content-references-subtitle-2: "le minstre";
  --content-references-subtitle-3: "avanturine";
  --content-languages: "LANUAGES";
  --content-languages-name-1: "Google ";
  --content-languages-name-2: "Yandex ";
  --content-languages-name-3: "DEEPL ";
  --content-interests: "Interests";
  --content-interests-name-1: "Philosophy";
  --content-interests-name-2: "Morning cofee";
  --content-interests-name-3: "Evening game session";
  --content-interests-name-4: "plus other+";
  --content-nav-home: " Home ";
  --content-nav-profile : "Profile";
  --content-nav-education : "Educaton";
  --content-nav-skills : "Skills";
  --content-nav-experience : "Experience";
  --content-nav-certificates : "Awards";
  --content-nav-references : "References";
  --content-nav-interests : "Hobbies";

}

body.ru-version {
  --content-moto: "Научись радоваться!";
  --content-front: "Юрий";
  --content-titre: "Формошлёп";
  --content-adress: "Есть такое место на земле   ";
  --content-line1: "где-то на даче";
  --content-social: "Аватары";
  --content-profile: "Лё Профайл";
  --content-profile-text: "Бла-бла-бла, лучшй фронт на районе, налетай...";
  --content-education: "Учёба  на ";
  --content-education-title-1: "сначала тут";
  --content-education-title-2: "потом тут";
  --content-education-title-3: "еще здесь";
  --content-education-title-4: "и сюда тоже посещал";
  --content-education-edifice-1: "Называлось так";
  --content-education-edifice-2: "А это вот название такое";
  --content-education-edifice-3: "Еще одно громкое название";
  --content-education-edifice-4: "Вот, вот еще";
  --content-skills: "Навыки - Скилы";
  --content-skills-name-1: "HTML5";
  --content-skills-name-2: "CSS3";
  --content-skills-name-3: "JavaScript";
  --content-skills-name-4: " NodeJS";
  --content-skills-name-5: " GraphQL";
  --content-skills-name-6: " JAMstack";
  --content-skills-name-7: " MongoDB";
  --content-skills-name-8: "";
  --content-skills-name-9: "";
  --content-skills-name-10: "";
  --content-experience: "Опыт, стиль ошибок и все такое";
  --content-experience-title-1: "Вау, я на работе";
  --content-experience-title-2: "Потом вот здесь, норм";
  --content-experience-title-3: "и вроде как не без-работный, а самозанятый";
  --content-experience-title-4: "Про это место не скажу, блин";
  --content-experience-company-1: "ну чё,  по-полудни пришел, в девять ушел, норм";
  --content-experience-company-2: "отвисали всяко...";
  --content-experience-company-3: "такие дела тут, сами знаете каково";
  --content-experience-company-4: "а что еще надо рассказывать?";
  --content-experience-description-1: "Опыт это то первое, которое удачное, если есть, а иначе не опыт это";
  --content-experience-description-2: "тебе говорят, а ты делаешь, говорят, а ты делаешт и так вот";
  --content-experience-description-3: "потом хоба, сейчас автоматизацию - но нет, садись лучше и формо шлеп шлеп и быстро, без прокрастинаций";
  --content-experience-description-4: "вот а еще опыт бывает хорошо забывать, полезно даже потому что без опыта гонору меньше, и болячек меньше";
  --content-certificates: "Награды";
  --content-certificates-title-1: "памятник  на постаменте, полу-бюст";
  --content-certificates-title-2: "Болячки разные в асортименте";
  --content-certificates-title-3: "радость творчества";
  --content-certificates-title-4: "Печатная продкция, полиграфия на картоне, иногда с ламинацией";
  --content-certificates-description-1: "самодельный такой, уже не знаю куда подевал";
  --content-certificates-description-2: "Это еще от возраста, а не только от профессии, сколиоз, ожирение там. Вот это вот все";
  --content-certificates-description-3: "сам придумал, сам сделал, никто не купил";
  --content-certificates-description-4: "Бумажные дипломы в пластиковой папке, на дальней полке";
  --content-references: "Рекомендатели";
  --content-references-title-1: "Граждане солдаты";
  --content-references-title-2: "и Матросы";
  --content-references-title-3: "";
  --content-references-subtitle-1: "подходите и купите";
  --content-references-subtitle-2: "папиросы";
  --content-references-subtitle-3: "";
  --content-languages: "В языкознании знаете вы толк...";
  --content-languages-name-1: "гугл-переводчик";
  --content-languages-name-2: "яндекс-переводчик";
  --content-languages-name-3: "deepl-транслятор";
  --content-interests: "Интересы";
  --content-interests-name-1: "4 козырных туза";
  --content-interests-name-2: "спокойствие, только спокойствие";
  --content-interests-name-3: "это вы видите здесь";
  --content-interests-name-4: "и это тоже";
  --content-nav-home: "Обо мне";
  --content-nav-profile : "Профайл";
  --content-nav-education : "Познания";
  --content-nav-skills : "Умения";
  --content-nav-experience : "Опыт";
  --content-nav-certificates : "Дипломы";
  --content-nav-references : "Рекомендации";
  --content-nav-interests : "Интересы";
  --content-nav-social : "ДопИнфо";
}

/*========== Button Dark/Light ==========*/

.change-theme,
.change-version {
  position: absolute;
  right: 0;
  top: 2.2rem;
  display: flex;

  color: var(--text-color);
  font-size: 1.2rem;
  cursor: pointer;
}



.change-version {
  right: 2rem;
}

.change-theme:hover,
.change-version:hover {
  color: var(--title-color)
}



/*========== Font size variables to scale cv ==========*/

body.scale-cv {
  --h1-font-size: .938rem;
  --h2-font-size: .938rem;
  --h3-font-size: .875rem;
  --normal-font-size: .813rem;
  --small-font-size: .75rem;
  --smaller-font-size: .688rem;
}

/*========== Generate PDF button ==========*/

.generate-pdf {
  display: none;
  position: absolute;
  top: 2.2rem;
  left: 0;
  font-size: 1.2rem;
  color: var(--text-color);
  cursor: pointer;
}

.generate-pdf:hover {
  color: var(--title-color);
}

/*========== Classes modified to reduce size and print on A4 sheet ==========*/
.scale-cv .moto,
.scale-cv .change-theme,
.scale-cv .generate-pdf,
.scale-cv .change-version {
  display: none;
}

.scale-cv i {
  filter: grayscale(1);
}

.scale-cv .bd-container {
  max-width: 595px;
}

.scale-cv .section {
  padding: .5rem 0 .5rem;
}

.scale-cv .section-title {
  margin-bottom: .3rem;
}

.scale-cv .resume__left,
.scale-cv .resume__right {
  padding: 0 .8rem;
}

.scale-cv .home__img {
  width: 90px;
  height: 90px;
}

.scale-cv .home__container {
  gap: 1.2rem;
}

.scale-cv .home__data {
  gap: .25rem;
}

.scale-cv .home__address,
.scale-cv .social__container {
  gap: .75rem;
}

.scale-cv .social__icon,
.scale-cv .home__icon,
.scale-cv .interests__icon {
  font-size: 1rem;
}

.scale-cv .education__container,
.scale-cv .experience__container,
.scale-cv .certificate__container {
  gap: 1rem;
}

.scale-cv .education__time,
.scale-cv .experience__time {
  padding-right: .5rem;
}

.scale-cv .education__rounder,
.scale-cv .experience__rounder {
  width: 11px;
  height: 11px;
  margin-top: .22rem;
}

.scale-cv .experience__line,
.scale-cv .education__line {
  width: 1px;
  height: 110%;
  transform: translate(5px, 0);
}

.scale-cv .education__data,
.scale-cv .experience__data {
  gap: .25rem;
}

.scale-cv .skills__name {
  margin-bottom: var(--mb-3);
}

.scale-cv .interests__container {
  column-gap: 1rem;
}

.scale-cv .interests__content {
  margin: 0 -4rem 0rem -10rem;
}

body {
  margin: 0 0 var(--header-height) 0;
  padding: 0;
  font-family: var(--body-font);
  font-size: var(--normal-font-size);
  background-color: var(--body-color);
  color: var(--text-color);
}

h1,
h2,
h3,
ul,
p {
  margin: 0;
}

h1,
h2,
h3 {
  color: var(--title-color);
  font-weight: var(--font-medium);
}

ul {
  padding: 0;
  list-style: none;
}

a {
  text-decoration: none;
  color: var(--text-color-light);
}

img {
  max-width: 100%;
  height: auto;
}

/*========== fontello tweaks ========== */

[class^="iconf-"]::after,
[class*=" iconf-"]::after {
  font-family: "fontello";
  font-style: normal;
  font-weight: normal;
}

/*========== CLASS CSS ==========*/

.section {
  padding: 1.2rem 0;
}

.section-title {
  font-size: var(--h2-font-size);
  color: var(--title-color);
  font-weight: var(--font-semi-bold);
  text-transform: uppercase;
  letter-spacing: .35rem;
  text-align: center;
  margin-bottom: var(--mb-3);
}

/*========== content VERSIONS changer ==========*/

body #nav__menu > ul > li:nth-child(2) > span > a,
body #home>div.home__container.section.bd-grid>div.home__data.bd-grid>h1,
body #skills>h2:nth-child(1),
body div.education__content:nth-child(3)>div:nth-child(2)>span:nth-child(2),
body div.education__content:nth-child(2)>div:nth-child(2)>span:nth-child(2),
body div.education__content:nth-child(1)>div:nth-child(2)>span:nth-child(2),
body #education>div>div:nth-child(3)>div.education__data.bd-grid>h3,
body div.education__content:nth-child(2)>div:nth-child(2)>h3:nth-child(1),
body #education>div>div:nth-child(1)>div.education__data.bd-grid>h3,
body #education>h2,
body #profile>p,
body section.profile.section>h2,
body .home__data>h3:nth-child(3),
body #home>div.home__container.section.bd-grid>div.home__data.bd-grid>h1,
body div.moto>q,
body main.l-main.bd-container div#area-cv.resume div.resume__left section.social.section h2.section-title {
  /* display:none; */
  text-indent: -9999px;
  line-height: 0;
  /* Collapse the original line */
}

body #nav__menu > ul > li:nth-child(2) > span > a::after,
body.ru-version #nav__menu > ul > li:nth-child(2) > span > a::after{
  content: var(--content-nav-social);
  text-indent: 0;
  display: block;
  line-height: normal;
  padding-bottom: 0;
}

body div.moto>q::after,
body.ru-version div.moto>q::after {
  content: var(--content-moto);
  text-indent: 0;
  display: block;
  line-height: normal;
  padding-bottom: 0;
}

body #home>div.home__container.section.bd-grid>div.home__data.bd-grid>h1::after,
body.ru-version #home>div.home__container.section.bd-grid>div.home__data.bd-grid>h1::after {
  content: var(--content-front);
  text-indent: 0;
  display: block;
  line-height: normal;
  padding-bottom: var(--mb-1);
}

body .home__data>h3:nth-child(3)::after,
body.ru-version .home__data>h3:nth-child(3)::after {
  content: var(--content-titre);
  text-indent: 0;
  display: block;
  line-height: unset;
  padding-bottom: var(--mb-3);
}

body section.social.section>h2::after,
body.ru-version section.social.section>h2::after {
  content: var(--content-social);
  text-indent: 0;
  display: block;
  line-height: unset;
  padding-bottom: var(--mb-3);
}

body #home>div>div.bd-grid.home__address>i::after,
body.ru-version #home>div>div.bd-grid.home__address>i::after {
  content: var(--content-adress);
  text-indent: 0;
  display: block;
  line-height: initial;
  padding-bottom: var(--mb-1);
}

body section.profile.section>h2::after,
body.ru-version section.profile.section>h2::after {
  content: var(--content-profile);
  text-indent: 0;
  display: block;
  line-height: initial;
  padding-bottom: var(--mb-1);
}

body #profile>p::after,
body.ru-version #profile>p::after {
  content: var(--content-profile-text);
  text-indent: 0;
  display: block;
  line-height: initial;
  padding-bottom: var(--mb-1);
}

body #education>h2::after,
body.ru-version #education>h2::after {
  content: var(--content-education);
  text-indent: 0;
  display: block;
  line-height: initial;
  padding-bottom: var(--mb-1);
}

body #education>div>div:nth-child(1)>div.education__data.bd-grid>h3::after,
body.ru-version #education>div>div:nth-child(1)>div.education__data.bd-grid>h3::after {
  content: var(--content-education-title-1);
  text-indent: 0;
  display: block;
  line-height: initial;
  padding-bottom: var(--mb-1);
}

body div.education__content:nth-child(2)>div:nth-child(2)>h3:nth-child(1)::after,
body.ru-version div.education__content:nth-child(2)>div:nth-child(2)>h3:nth-child(1)::after {
  content: var(--content-education-title-2);
  text-indent: 0;
  display: block;
  line-height: initial;
  padding-bottom: var(--mb-1);
}

body #education>div>div:nth-child(3)>div.education__data.bd-grid>h3::after,
body.ru-version #education>div>div:nth-child(3)>div.education__data.bd-grid>h3::after {
  content: var(--content-education-title-3);
  text-indent: 0;
  display: block;
  line-height: initial;
  padding-bottom: var(--mb-1);
}

body div.education__content:nth-child(1)>div:nth-child(2)>span:nth-child(2)::after,
body.ru-version div.education__content:nth-child(1)>div:nth-child(2)>span:nth-child(2)::after {
  content: var(--content-education-edifice-1);
  text-indent: 0;
  display: block;
  line-height: initial;
  padding-bottom: var(--mb-1);
}

body div.education__content:nth-child(2)>div:nth-child(2)>span:nth-child(2)::after,
body.ru-version div.education__content:nth-child(2)>div:nth-child(2)>span:nth-child(2)::after {
  content: var(--content-education-edifice-2);
  text-indent: 0;
  display: block;
  line-height: initial;
  padding-bottom: var(--mb-1);
}

body div.education__content:nth-child(3)>div:nth-child(2)>span:nth-child(2)::after,
body.ru-version div.education__content:nth-child(3)>div:nth-child(2)>span:nth-child(2)::after {
  content: var(--content-education-edifice-3);
  text-indent: 0;
  display: block;
  line-height: initial;
  padding-bottom: var(--mb-1);
}

body #skills>h2:nth-child(1)::after,
body.ru-verson #skills>h2:nth-child(1)::after {
  content: var(--content-skills);
  text-indent: 0;
  display: block;
  line-height: initial;
  padding-bottom: var(--mb-1);
}

body ul.skills__data:nth-child(1)>li:nth-child(1)::after,
body.ru-verson ul.skills__data:nth-child(1)>li:nth-child(1)::after {
  content: var(--content-skills-name-1);
  text-indent: initial;
  display: inline-flex;
  margin-left: -.3rem;
  line-height: initial;
  padding-bottom: var(--mb-1);
}

body ul.skills__data:nth-child(1)>li:nth-child(2)::after,
body.ru-verson ul.skills__data:nth-child(1)>li:nth-child(2)::after {
  content: var(--content-skills-name-2);
  text-indent: initial;
  display: inline-flex;
  margin-left: -.3rem;
  line-height: initial;
  padding-bottom: var(--mb-1);
}

body ul.skills__data:nth-child(1)>li:nth-child(3)::after,
body.ru-verson ul.skills__data:nth-child(1)>li:nth-child(3)::after {
  content: var(--content-skills-name-3);
  text-indent: initial;
  display: inline-flex;
  margin-left: -.3rem;
  line-height: initial;
  padding-bottom: var(--mb-1);
}

body ul.skills__data:nth-child(1)>li:nth-child(4)::after,
body.ru-verson ul.skills__data:nth-child(1)>li:nth-child(4)::after {
  content: var(--content-skills-name-4);
  text-indent: initial;
  display: inline-flex;
  margin-left: -.3rem;
  line-height: initial;
  padding-bottom: var(--mb-1);
}

body ul.skills__data:nth-child(1)>li:nth-child(5)::after,
body.ru-verson ul.skills__data:nth-child(1)>li:nth-child(5)::after {
  content: var(--content-skills-name-5);
  text-indent: initial;
  display: inline-flex;
  margin-left: -.3rem;
  line-height: initial;
  padding-bottom: var(--mb-1);
}

body ul.skills__data:nth-child(1)>li:nth-child(6)::after,
body.ru-verson ul.skills__data:nth-child(1)>li:nth-child(6)::after {
  content: var(--content-skills-name-6);
  text-indent: initial;
  display: inline-flex;
  margin-left: -.3rem;
  line-height: initial;
  padding-bottom: var(--mb-1);
}

/* ===clear versions=== */

body:not(.ru-version) {
  display: unset;
}

/*========== LAYOUT ==========*/

.bd-container {
  max-width: 968px;
  width: calc(100% - 3rem);
  margin-left: var(--mb-3);
  margin-right: var(--mb-3)
}

.bd-grid {
  display: grid;
  gap: 1.5rem;
}

.home__information.bd-grid {
  display: inline-block;
  gap: 0;
}

.l-header {
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: var(--z-fixed);
  background-color: var(--body-color);
  box-shadow: 0 -1px -4px rgba(0, 0, 0, .1);
  transition: .3s;
}

.iconf-location {
  font-family: "fontello";
  display: inline-flex;
  transform: translateY(1.5rem);
}

.iconf-circle-empty {
  font-family: "fontello";
  display: inline-flex;
}

i.iconm-jamstack-2 {
  font-family: "icomoon";
  display: inline-flex;
  font-size: 1.05rem;
}

i.iconm-us {
  font-family: "icomoon";
}

i.iconm-ru {
  font-family: "icomoon";
}

i.iconm-home, i.iconm-sun  {
  font-family: "icomoon"!important;
  display: flex;
  font-size: .5rem;
}

/*========== NAV ==========*/

.nav {
  height: var(--header-height);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

@media screen and (max-width: 968px) {
  .nav__menu {
    position: fixed;
    bottom: -100%;
    /*   var(--header-height); toggled by main.js linkAction() */
    left: 0;
    width: 100%;
    padding: 2rem 1.5rem;
    background-color: var(--container-color-alt);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
    border-radius: 1rem 1rem 0 0;
    z-index: var(--z-fixed);
    transition: .3s;
  }
}

.nav_logo,
.nav__toggle {
  color: var(--title-color);
  font-weight: var(--font-medium);
}

.nav__toggle {
  cursor: pointer;
  font-size: 1.2rem;
}

.nav__item {
  text-align: center;
}

.nav__list {
  display: grid;
  /*Done!: "RTFM grid-template-columns: repeat(3, 1fr)" */
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.nav__link {
  display: flex;
  flex-direction: column;
  font-size: var(smaller-font-size);
  color: var(--text-color-light);
  font-weight: var(--font-medium);
}

.nav__link:hover {
  color: var(--title-color);
}

.nav__icon {
  font-size: 1.2rem;
  margin-bottom: var(--mb-1);
}

/* Done!: Show menu CSS  */

/* Done!: Show menu CSS - menu layer is erroneusly under all, but it would be over all */

/* toggled by main.js */

/* Show menu other state is -100% then toggle by main.js */

.show__menu {
  bottom: var(--header-height);
}

/* Active menu link */

.active__link {
  color: var(--title-color);
}

/*========== HOME ==========*/

.home {
  position: relative;
}

.home__container {
  gap: .5rem;
}

.home__data {
  text-align: center;
  gap: .5rem;
}

.home__img {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  justify-self: center;
  filter: contrast(0.8) sepia(0.4) grayscale(.85) invert(.2);
  margin-bottom: var(--mb-2);
}

.home__title {
  font-size: var(--h1-font-size);
}

.home__profession {
  font-size: var(--normal-font-size);
  margin-bottom: var(--mb-1);
}




.home__address {
  gap: 1rem;
}

.moto {
  transform: translate(6rem, 16.5rem);
}

.ru-version .moto {
  transform: translate(4.5rem, 16.5rem);
}

.moto q {
  quotes: none;
  letter-spacing: 2px;
}

i#first::after {
  font-family: 'Open Sans';
}

.home__information {
  display: flex;
  align-items: center;
  font-size: var(--small-font-size);
}

.home__icon {
  font-size: 1.2rem;
  margin-right: .25rem;
}

.bx-map {
  transform: translateX(-1060%);
}

.home__button-movil {
  display: inline-block;
  border: 2px solid var(--text-color);
  color: var(--title-color);
  padding: 1rem 2rem;
  border-radius: .25rem;
  transition: .3s;
  font-weight: var(--font-medium);
  margin-top: var(--mb-3);
}

.home__button-movil:hover {
  background-color: var(--text-color);
  color: var(--container-color);
}

/*========== SOCIAL ==========*/

.social__container {
  grid-template-columns: max-content;
  gap: 1rem;
}

.social__link {
  display: inline-flex;
  align-items: center;
  font-size: var(--small-font-size);
  color: var(--text-color);
}

.social__link:hover {
  color: var(--title-color);
}

.social__icon {
  font-size: 1.2rem;
  margin-right: 0.25rem;
}

/*========== PROFILE ==========*/

.profile__description {
  text-align: center;
}

/*========== EDUCATION AND EXPERIENCE ==========*/

/* Fixed: bug with __line for Experiency section */

.education__container,
.experience__container {
  gap: 1rem;
}

.education__content,
.experience__content {
  display: flex;
}

.education__time,
.experience__time {
  padding-right: 1rem;
}

.education__rounder,
.experience__rounder {
  position: relative;
  display: block;
  width: 16px;
  height: 16px;
  background-color: var(--text-color-light);
  border-radius: 50%;
  margin-top: .25rem;
}

.education__line,
.experience__line {
  display: block;
  width: 2px;
  height: 110%;
  background-color: var(--text-color-light);
  transform: translate(7px, 0);
  /* выравнивает шарики по линии */
}

.education__data,
.experience__data {
  gap: .5rem;
}

.education__title,
.experience__title {
  font-size: var(--h3-font-size);
}

.education__studies,
.experience__company {
  font-size: var(--small-font-size);
  color: var(--title-color);
}

.education__year,
.experience__year {
  font-size: var(--smaller-font-size);
}

/*========== SKILLS AND LANGUAGES ==========*/

.skills__content,
.languages__content {
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
}

.skills__content {
  flex-direction: column;
}

.languages__container {
  display: flex;
  gap: 0;
}

.skills__name {
  display: flex;
  align-items: center;
  margin-bottom: var(--mb-3);
}

.languages__name {
  grid-template-columns: repeat(1, 3fr);
}

ul.skills__data>li.skills__name {
  margin-bottom: 0;
}

.skills__circle,
.languages__circle {
  font-family: 'fontello';
  display: inline-block;
  width: 5px;
  height: 5px;
  background-color: var(--text-color);
  border-radius: 50%;
  margin-right: .75rem;
}

.skills__meter {
  width: 100%;
  /* Full width */
  /* Right-align text */
  text-align: right;
  color: var(--container-color);
  /*  var(--text-color-light); */
  text-indent: initial;
  display: inline-flex;
  margin-left: -2rem;
  line-height: initial;
  /*  */
}

.skill__backing {

  background-color: var(--container-color);
  width: 100%;
}

.skill__90 {
  width: 90%;
  background-color: var(--text-color-light);
}

.skill__80 {
  width: 80%;
  background-color: var(--text-color-light);
}

.skill__50 {
  width: 50%;
  background-color: var(--text-color-light);
}


.skill__30 {
  width: 30%;
  background-color: var(--text-color-light);
}

.meter__icon {
  font-size: 1.5rem;
  color: var(--text-color-light);
  background-color: var(--container-color);
  padding-bottom: .3rem;
  filter: grayscale(1) invert(.1);
}

/*========== CERTIFICATES ==========*/

.certificate__title {
  font-size: var(--h3-font-size);
  margin-bottom: var(--mb-1);
}

/*========== REFERENCES ==========*/

.references__container {
  /* kkkkk */
}

.references__content {
  gap: .25rem;
}

.references__subtitle {
  color: var(--text-color-light);
}

.references__subtitle,
.references__contact {
  font-size: var(--smaller-font-size);
}

.references__title {
  font-size: var(h3-font-size);
  /* margin-bottom: var(--mb-1); */
}

/*========== INTERESTS ==========*/

.interests__container {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(1, 3fr);
  margin-top: var(--mb-2);
  text-align: center;
}

.interests__content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.interests__icon {
  font-size: 1.5rem;
  color: var(--text-color-light);
  margin-bottom: .25rem;
}

/* Scroll top */

.scrolltop {
  position: fixed;
  right: 1rem;
  bottom: -20%;
  /* 5rem; */
  display: flex;
  justify-content: center;
  align-items: center;
  padding: .3rem;
  background-color: var(--container-color-alt);
  border-radius: .4rem;
  z-index: var(--z-tooltip);
  transition: .4s;
  visibility: hidden;
  /* trig by main.js и класс .show-scroll */
}

.scrolltop__icon {
  font-size: 1.25rem;
  color: var(--text-color);
}

.show-scroll {
  visibility: visible;
  bottom: 5rem;
}

/*==========  MEDIA QUERIES DETECT BROWSER COLOR SHEMA PREFS  ==========*/

@media screen and (prefers-color-scheme: light) {
  body {}
}

/*========== OTHER MEDIA QUERIES ==========*/

/* For small devices, menu two columns */

@media screen and (max-width:320px) {
  .nav__list {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem .5rem;
  }
}

/* Classes modified for large screen size */

@media screen and (min-width:968px) {
  .body {
    margin: 3rem 0;
  }

  .bd-container {
    margin-left: auto;
    margin-right: auto;
  }

  .l-header,
  .scrolltop {
    display: none;
  }

  .resume {
    display: grid;
    grid-template-columns: .5fr 1fr;
    background-color: var(--container-color);
    box-shadow: 0 0 8px rgba(13, 12, 12, .15);
  }

  .resume__left {
    background-color: var(--container-color-alt);
  }

  .resume__left,
  .resume__right {
    padding: 0 1.5rem;
  }

  .generate-pdf {
    display: inline-block;
  }

  .section-title,
  .profile__description {
    text-align: initial;
  }

  .home__container {
    gap: .5rem;
  }

  .home__button-movil {
    display: none;
  }

  .references__container {
    grid-template-columns: repeat(2, 1fr);
  }

  .languages__content {
    display: grid;
    grid-template-columns: repeat(3, auto);
    gap: .5rem .5rem;
  }

  .interests__container {
    display: grid;
    grid-template-columns: repeat(3ch, auto);
    gap: .5rem .5rem;
  }

  .interests__content {
    margin: 0 -2.5rem 0rem -10rem;
  }
}