* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.5;

    --primary-text-color: #181820;
    --secondary-text-color: #5c5c62;
    --durability-text-color: #6a737d9c;
    --icon-color: #6a737d;
    --border-color: #ff9a0045;
    --text-decoration-color: #ff9a00;
}

.container {
    margin: 0 auto;
    padding: 0 30px;
    max-width: 900px;
}

.fh {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.fv {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.resume {
    margin: 50px auto;
    margin-top: 0px;
    border: 1px solid #f5f5f5;
    box-shadow: 1px 1px 7px 7px #f5f5f5;
    padding: 30px 0;
    max-width: 900px;
}

.resume__block {
    border-bottom: 3px solid var(--border-color);
    padding-bottom: 30px;
    margin-bottom: 15px;
}

@media screen and (max-width: 576px) {

    .main-info,
    .contact_info_container {
        flex-direction: column;
    }

    .contact_info_container {
        align-items: center;
    }

    .contact-info__block:not(:last-child) {
        margin-bottom: 20px;
    }

    .experiences {
        margin-right: 0;
    }
}

.contact-info__header,
  .contact-info__sub-header {
      text-align: center;
  }

  .contact-info__header {
      width: 100px;
      overflow: hidden;
      border-right: .15em solid orange;
      white-space: nowrap;
      margin: 0 auto;
      color: var(--primary-text-color);
      margin-bottom: 15px;
      text-decoration-color: var(--text-decoration-color);
      text-decoration-line: underline;
      animation: 
        typingBulka 2s steps(30, end),
        blink-caret .5s step-end infinite;
  }

  @keyframes typingBulka {
    from { width: 0 }
    to { width: 10% }
  }

  .contact-info__sub-header {
      color: var(--secondary-text-color);
      margin-bottom: 30px;
  }

  .contact-info__block {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
  }

  .contact-info__block--center {
      justify-content: center;
  }

  .contact-info__item {
      color: var(--secondary-text-color);
      text-decoration: none;
      display: flex;
      justify-content: start;
  }

  .contact-info__item:not(:last-child) {
      margin-bottom: 20px;
  }

  .contact-info__item-icon-wrapper {
      margin-right: 10px;
      width: 20px;
      display: flex;
      justify-content: center;
  }

  .contact-info__item-icon path {
      fill: var(--icon-color);
  }

  .contact-info__item-icon {
      height: 1.1428rem;
      vertical-align: text-bottom;
  }

  .contact-info__avatar {
      border-radius: 50%;
      width: 100px;
      height: 100px;
      object-fit: cover;
      border: 3px solid;
      border-color: var(--text-decoration-color);
  }
  .intro {
    display: flex;
    justify-content: start;
}

.intro__icon-wrapper {
    margin-right: 30px;
    width: 30px;
    display: flex;
    justify-content: center;
}

.intro__icon {
    height: 1.1428rem;
    vertical-align: text-bottom;
}

.intro__icon path {
    fill: var(--text-decoration-color);
}

.intro_text {
    color: var(--secondary-text-color);
    text-align: justify;
}

.skills__header {
    color: var(--secondary-text-color);
    text-align: center;
    margin-bottom: 15px;
}

.skills__text {
    color: var(--secondary-text-color);
    text-align: justify;
}

.experiences {
    flex: 1 1 60%;
    margin-right: 50px;
}

.experiences__header {
    color: var(--secondary-text-color);
    text-align: left;
    margin-bottom: 20px;
}

.experiences__company-header-durability {
    color: var(--durability-text-color);
    text-align: left;
    margin-bottom: 10px;
    font-size: 15px;
}

.experiences__company-header-name {
    color: var(--primary-text-color);
    text-decoration-color: var(--text-decoration-color);
    text-decoration-line: underline;
    text-align: left;
    margin-bottom: 20px;
}

.experiences__company-project {
    margin-left: 15px;
    margin-bottom: 25px;
}

.experiences__company-project-role {
    color: var(--durability-text-color);
    text-align: left;
    margin-bottom: 10px;
    font-size: 15px;
}

.experiences__company-project-name {
    color: var(--primary-text-color);
    text-align: left;
    margin-bottom: 10px;
}

.experiences__company-project-responsibilities {
    color: var(--secondary-text-color);
    padding-left: 20px;
}

.additional-info {
    flex: 1 1 40%;
}

.additional-info__education {
    margin-bottom: 20px;
}

.additional-info__education-header {
    color: var(--secondary-text-color);
    text-align: left;
    margin-bottom: 20px;
}

.additional-info__education-university-durability {
    color: var(--durability-text-color);
    text-align: left;
    margin-bottom: 10px;
    font-size: 15px;
}

.additional-info__education-university-speciality {
    color: var(--primary-text-color);
    text-align: left;
    margin-bottom: 10px;
}

.additional-info__education-university-name {
    color: var(--secondary-text-color);
}

.additional-info__languages {
    margin-bottom: 20px;
}

.additional-info__languages-header {
    color: var(--secondary-text-color);
    text-align: left;
    margin-bottom: 20px;
}

.additional-info__languages-item {
    color: var(--secondary-text-color);
}

.switch-button {
    position: sticky;
    top: 10%;
    left: 5%;
    width: 60px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background-color: var(--text-decoration-color);
    border: none;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
}

.switch-button:hover {
    background-color: #ff9a0045;
    transform: scale(1.03);
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 1);
}

.switch-button:active {
    transform: scale(0.9);
  }

.switch-button-icon {
    width: 20px;
}

.popup {
    display: none;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.4);
  }
  
  .popcard {
    height: 50%; 
    background-color: black;
    color: #f5f5f5;
    margin: 10% auto;
    padding: 40px;
    width: 20%;
    text-align: center;
    font-size: 1.2rem;
    box-shadow: 0 2px 15px 0 black;
    animation: popup 0.5s;
  }
  
  @keyframes popup {
    from {
      opacity: 0;
    }
    to { 
      opacity: 1;
    }
  }

  .cat {
	position: relative;
	height: 170px;
	width: 170px * 1.13;
}

.ear {
	position: absolute;
	top: -30%;
	height: 60%;
	width: 25%;
	background: white;
}

.ear::before {
    content: '';
	position: absolute;
	bottom: 24%;
	height: 10%;
	width: 5%;
	border-radius: 50%;
}

.ear::after {
    content: '';
	position: absolute;
	bottom: 24%;
	height: 10%;
	width: 5%;
	border-radius: 50%;
    transform-origin: 50% 100%;
}

.ear--left {
	left: -7%;
	border-radius: 70% 30% 0% 0% / 100% 100% 0% 0%;
	transform: rotate(-15deg);
}

.ear--left::after {
    right: 10%;
    transform: rotate(-45deg);
}

.ear--left::before {
    right: 10%;
}

.ear--right {
	right: -7%;
	border-radius: 30% 70% 0% 0% / 100% 100% 0% 0%;
	transform: rotate(15deg);
}

.ear--right::after {
    left: 10%;
}

.ear--right::after {
    left: 10%;
    transform: rotate(45deg);
}

.face {
	position: absolute;
	height: 100%;
	width: 100%;
	background: black;
	border-radius: 50%;
}

.eye {
	position: absolute;
	top: 35%;
	height: 30%;
	width: 31%;
	background: white;
	border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}

.eye::after {
    content: '';
	position: absolute;
	top: 0;
	left: 0;
	height: 0;
	width: 100%;
	border-radius: 0 0 50% 50% / 0 0 40% 40%;
	background: black;
	animation: blink 4s infinite ease-in;
}

@keyframes blink {
    0% { height: 0; }
    90% { height: 0; }
    92.5% { height: 100%; }
    95% { height: 0; }
    97.5% { height: 100%; }
    100% { height: 0; }
}

.eye::before {
    content: '';
	position: absolute;
	top: 60%;
	height: 10%;
	width: 15%;
	background: white;
	border-radius: 50%;
}

.eye--left {
	left: 0;
}

.eye--left::before {
    right: -5%;
}

.eye--right {
	right: 0;
}

.eye--right::before {
    left: -5%;
}

.eye-pupil {
	position: absolute;
	top: 25%;
	height: 50%;
	width: 20%;
	background: black;
	border-radius: 50%;
	animation: look-around 4s infinite;
    
}

@keyframes look-around {
    0% { transform: translate(0) }
    5% { transform: translate(50%, -25%) }
    10% { transform: translate(50%, -25%) }
    15% { transform: translate(-100%, -25%) }
    20% { transform: translate(-100%, -25%) }
    25% { transform: translate(0, 0) }
    100% { transform: translate(0, 0) }
}

.eye--left .eye-pupil {
    right: 30%;
}
.eye--right .eye-pupil {
    left: 30%;
}
.eye-pupil::after {
    content: '';
    position: absolute;
    top: 30%;
    right: -5%;
    height: 20%;
    width: 35%;
    border-radius: 50%;
    background: white;
}

.muzzle {
	position: absolute;
	top: 60%;
	left: 50%;
	height: 6%;
	width: 10%;
	background: white;
	transform: translateX(-50%);
	border-radius: 50% 50% 50% 50% / 30% 30% 70% 70%;
}

.typewriter {
    text-align: center;
}

.typewriter h1 {
    width: 250px;
    color: var(--secondary-text-color);
    font-family: monospace;
    overflow: hidden;
    border-right: .15em solid orange;
    white-space: nowrap;
    margin: 0 auto;
    letter-spacing: .15em;
    animation: 
      typing 4s steps(30, end),
      blink-caret .5s step-end infinite;
  }
  
  @keyframes typing {
    from { width: 0 }
    to { width: 28% }
  }
  
  @keyframes blink-caret {
    from, to { border-color: transparent }
    50% { border-color: orange }
  }