body {
    margin: 0;
}
.back {
  height: 100vh; /* Fallback for browsers that do not support Custom Properties */
  height: calc(var(--vh, 1vh) * 100);
}
.back {
    width: 100%;
    background: linear-gradient(180deg, #CD9BAF 55%, #EBD7DF 55%);
	background:#CD9BAF;
    overflow: hidden;
    position: absolute;
}
.back-img {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    max-width: 600px;
    position: absolute;
    height: 100vh;
}
.back-img img {
	position: absolute;
}
img#stol {
    left: 50%;
    bottom: -35%;
    transform: translate(-50%, 0);
    width: 172%;
    height: 80%;
}
img#desc {
    left: 50%;
    bottom: 44%;
    transform: translate(-50%, 0);
    height: 40%;
}
img#kaktus {
    left: 14%;
    bottom: 41%;
    transform: translate(-50%, 0%);
    height: 10%;
}
img#karty {
    left: 80%;
    bottom: 27%;
    transform: translate(-50%, 0%);
    height: 10%;
}
#kruzhka {
    position: absolute;
    left: 81%;
    bottom: 37%;
    height: 9%;
}
div#kruzhka img {
    height: 60px;
}
img#podstavka {
    left: 50%;
    bottom: 38%;
    transform: translate(-50%, 0%);
    height: 5%;
    max-width: 70%;
}
.mob-img {
    position: absolute;
    left: 0%;
    bottom: 25%;
    height: 28vh;
}
img#mob {
    height: 100%;
	position: relative;
}
img#zametki {
    left: 76%;
    bottom: 90%;
    transform: translate(-50%, 0%);
    height: 7%;
}
img#lang {
    left: 76%;
    bottom: 87%;
    transform: translate(-50%, 0);
    height: 7%;
}
 

.vapour {
    position: absolute;
    display: flex;
    z-index: 1;
    padding: 0 12px;
    left: 62%;
    bottom: -70%;
    transform: translate(32%, 0%);
}
.vapour span {
    position: relative;
    bottom: 50px;
    display: block;
    margin: 0 -2px 50px;
    min-width: 6px;
    height: 50px;
    background: #fff;
    animation: animate 5s linear infinite;
    animation-delay: calc(var(--i) * -0.2s);
    filter: blur(3px);
    border-radius: 50%;
    opacity: 1;
}
@keyframes animate {
  0% {
    transform: translateY(0) scaleX(1);
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  50% {
    transform: translateY(-40px) scaleX(5);
  }
  95% {
    opacity: 0;
  }
  100% {
    transform: translateY(-80px) scaleX(10);
    opacity: 0;
  }
}





.bat {
    display: flex;
    flex-direction: row;
}
.segment {
  width: 0px;
  height: 25px;
  background-color: #e72487;
  float: left;
}

#body {
  width: 60px;
  height: 25px;
  border: solid #fff 2px;
  float: left;
}

#head {
  width: 5px;
  height: 15px;
  margin-top: 10px;
  background-color: #fff;
  float: left;
}
.prgoress-item {
    color: #fff;
    font-weight: bold;
    text-align: center;
    font-size: 32px;
}
.bat-item {
    transform: scale3d(0.5, 0.2, 2.5) skew(-48deg, 40deg);
    flex-direction: column;
    align-items: center;
    gap: 10px;
    position: absolute;
    display: flex;
    top: 53%;
    right: 17%;
}
#start {
    position: absolute;
    left: 50%;
    bottom: 25%;
    transform: translate(-50%, -50%);
    width: 37%;
    max-width: 65%;
    max-height: 8%;
}

#desc {
	animation: 0.9s desc ease;
}
@keyframes desc {
  from {  transform: translate(-50%, -200vh); }
  to {  transform: translate(-50%, 0); }
}

#podstavka {
	animation: 1.2s podstavka ease;
}
@keyframes podstavka {
  from {  transform: translate(-50%, 200vh); }
  to {  transform: translate(-50%, 0); }
}

div#kruzhka img {
	animation: 1.5s kruzhka ease;
}
@keyframes kruzhka {
  from {  transform: translate(100vw, 0%); }
  to {  transform: translate(0, 0); }
}

.vapour {
	animation: 1.5s vapour ease;
}
@keyframes vapour {
  from {  transform: translate(100vw, 0%); }
  to {  transform: translate(32%, 0); }
}

img#kaktus {
	animation: 1.8s kaktus ease;
}
@keyframes kaktus {
  from {  transform: translate(-100vw, 0%); }
  to {  transform: translate(-50%, 0); }
}

img#karty {
	animation: 2.1s karty ease;
}
@keyframes karty {
  from {  transform: translate(100vw, 0%); }
  to {  transform: translate(-50%, 0); }
}

.mob-img {
	animation: 2.4s mob-img ease;
}
@keyframes mob-img {
  from {  transform: translate(-100vw, 0%); }
  to {  transform: translate(0, 0); }
}

img#zametki {
	animation: 2.7s zametki ease;
}
@keyframes zametki {
  from {  transform: translate(-50%, -100vh); }
  to {  transform: translate(-50%, 0); }
}

img#lang {
	animation: 3s zametki ease;
}
@keyframes zametki {
  from {  transform: translate(-50%, -100vh); }
  to {  transform: translate(-50%, 0); }
}


#start {
	animation: 3.3s start ease;
}
@keyframes start {
  from {  opacity: 0; transform: translate(-50%, -50%) scale(0.7); }
  to {  opacity: 1; transform:translate(-50%, -50%)  scale(1);}
}


div#start img {
	animation: pulse 3s linear;
    animation-iteration-count: infinite;
	width: 100%;
}
@keyframes pulse {
  0% {  transform: scale(0.9); }
  50% {  transform: scale(1);}
  100% {  transform: scale(0.9);}
}





img#kot {
    position: fixed;
    left: -4%;
    bottom: -22%;
    z-index: 1;
    animation: 1.8s kot ease;
    width: 13vw;
}
@keyframes kot {
  from {  transform: translate(-100vw, 0%); }
  to {  transform: translate(0, 0); }
}
img#cvety-fon {
    position: fixed;
    right: -3%;
    bottom: -12%;
    z-index: 1;
    width: 13vw;
	animation: 1.8s cvety-fon ease;
}
@keyframes cvety-fon {
  from {  transform: translate(0, 100vw); }
  to {  transform: translate(0, 0); }
}
img#knigi {
    position: fixed;
    z-index: 1;
    width: 14vw;
    left: -4%;
    top: 9%;
	animation: 1.8s knigi ease;
}
@keyframes knigi {
  from {  transform: translate(0, -100vw); }
  to {  transform: translate(0, 0); }
}
img#portret {
    position: fixed;
    z-index: 1;
    width: 10vw;
    right: -2%;
    top: 10%;
	animation: 1.8s portret ease;
}
@keyframes portret {
  from {  transform: translate(100vw, 0); }
  to {  transform: translate(0, 0); }
}




@media (max-width:500px) {
	#body {
  width: 18vw;
  height: 25px;
  border: solid #fff 2px;
  float: left;
}
.back {
    background: linear-gradient(180deg, #CD9BAF 55%, #EBD7DF 55%);
}
.mob-img {
    bottom: 21%;
    left: -4%;
}
#start {
    bottom: 15%;
    width: 72%;
}
img#karty {
    bottom: 17%;
}
img#cvety-fon, img#portret, img#kot, img#knigi, img#stol {
	display: none;
}
.bat-item {
    transform: scale3d(0.5, 0.2, 2.5) skew(-48deg, 40deg);
    flex-direction: column;
    align-items: center;
    gap: 10px;
    position: absolute;
    display: flex;
    top: 15vh;
    right: 11vw;
}
}