:root {
  --intro-background-color: rgb(255, 255, 255);
  --intro-header-background-color: rgb(172, 229, 239);
  --part-2__balloon-background-color: rgb(200, 177, 238);

  --skills-marker-icon-width: 36px;
  --skills-marker-icon-margin-right: 6px;
  --skills-marker-icon-space-width: calc(var(--skills-marker-icon-width) + var(--skills-marker-icon-margin-right))
}

.intro__section {
  padding: 20px;
  background-image: url("../pictures/background_Bart.jpg");
  background-repeat: no-repeat;
  background-position:right;
}

.intro__grid-container {
  display: grid;
  justify-content: space-between;
  grid-template-areas: 
    "photo logo"
    "header header";
  row-gap: 20px;
}

.intro__photo-container {
  grid-area: photo;
}

.intro__logo-container {
  grid-area: logo;
}

.intro__header {
  grid-area: header;
}

.intro__photo {
  width: 280px;
  height: 380px;
  border-radius: 14px;
  background: #333
}

.intro__logo {
  width: 84px;
  height: 81px;
  border: 1px solid #000000;
  border-radius: 90px;
  background: #333;
}

.intro__header {
  margin: 0.3em 0;
  font-family: 'Gloria Hallelujah', cursive;
  font-size: 40px;
  line-height: 130%;
  text-align: center;
}

.part-2__section {
  padding: 20px;
}

.part-2__header {
  margin: 0px;
  font-family: 'Gloria Hallelujah', cursive;
  font-size: 40px;
  letter-spacing: 0.05em;
}

.part-2__balloon-container {
  float: left;
}

.part-2__balloon {
  width: 257px;
  height: 356px;
}

.part-2__about-myself {
  font-family: 'Cabin Sketch', cursive;
  font-size: 30px;
  text-align: justify;
  line-height: 56px;
  letter-spacing: 0.05em;
}

.part-2__about-myself::after {
  content: '';
  clear: both;
  display: table;
}

.skills__section {
  padding: 20px;
}

.skills__grid-container {
  display: grid;
  justify-content: space-between;
  grid-template-areas: 
    "header header" 
    "law it";
  column-gap: 20px;
  row-gap: 5px;
}

.skills__header {
  grid-area: header;
}

.skills__law-container {
  grid-area: law;
}

.skills__it-container {
  grid-area: it;
}

.skills__header {
  margin-top: 0;
  margin-bottom: 0;
  font-family: 'Gloria Hallelujah', cursive;
  font-size: 40px;
  letter-spacing: 0.05em;
  text-align: right;
}

.skills__law-container,
.skills__it-container {
  width: 600px;
  font-family: 'Cabin Sketch', cursive;
  font-size: 42px;
}

.skills__law-list,
.skills__it-list {
  margin-top: 0;
  margin-bottom: 0;
  list-style: none;
}

.skills__law-marker,
.skills__it-marker {
  padding-left: var(--skills-marker-icon-space-width);
}

.skills__law-marker::before,
.skills__it-marker::before {
  content: '';
  display: inline-block;
  margin-right: var(--skills-marker-icon-margin-right);
  margin-left: calc(var(--skills-marker-icon-space-width) * -1);
  width: var(--skills-marker-icon-width);
  height: var(--skills-marker-icon-width);
  background-size: contain;
  background-repeat: no-repeat;
}

.skills__law-marker::before {
  background-image: url('../pictures/blackboard_list_law.jpg');
}

.skills__it-marker::before {
  background-image: url('../pictures/great_idea_list_it.jpg');
}

.experience__section {
  padding: 20px;
}

.experience__header {
  margin: 0px;
  font-family: 'Gloria Hallelujah', cursive;
  font-size: 40px;
  letter-spacing: 0.05em;
}

.experience__frame {
  margin: 30px;
  border: 8px solid #a843c9;
  background: #cfacf4;
  border-radius: 30% 70% 70% 30%/30% 30% 70% 70%;
  box-shadow: 15px 15px 50px rgba(0,0,0,0.2);
  animation: anim-ramka-1 10s infinite;
}

@keyframes anim-ramka-1 {
  0% {
    border-radius: 30% 70% 70% 30%/30% 30% 70% 70%;
    box-shadow: 15px 15px 50px rgba(0,0,0,0.2);
}
  25% {
    border-radius: 58% 42% 75% 25%/76% 46% 54% 24%;
}
  50% {
    border-radius: 50% 50% 33% 67%/55% 27% 73% 45%;
    box-shadow: -10px -5px 50px rgba(0,0,0,0.2);
}
  75% {
    border-radius: 33% 67% 58% 42%/63% 68% 32% 37%;
}
}

.experience__work-container,
.experience__internship-container {
  font-family: 'Cabin Sketch', cursive;
  font-size: 35px;
  text-align: center;
  margin-top: 25px;
}

.experience__work-description,
.experience__internship-description {
  font-family: 'Cabin Sketch', cursive;
  font-size: 25px;
  text-align: justify;
  margin-left: 20px;
}

.experience__conclusion-container {
  font-family: 'Cabin Sketch', cursive;
  font-size: 35px;
  text-align: justify;
  margin-top: 50px;
}

.contact__section {
  padding: 20px;
}

.contact__header {
  margin: 0px;
  text-align: right;
  font-family: 'Gloria Hallelujah', cursive;
  font-size: 40px;
  letter-spacing: 0.05em;
}

.contact__mail-container,
.contact__telegram-container {
  margin-top: 20px;
  font-family: 'Cabin Sketch', cursive;
  font-size: 40px;
  text-align: justify;
}

.contact__mail {
  width: 85px;
  height: 55px;
}

.contact__telegram {
  width: 110px;
  height: 80px;
}