:root {
  --maincolor1: hsl(14, 70%, 85%);
  --maincolor2: hsl(345, 15%, 65%);
  --effectcolor: hsl(15, 90%, 33%);
  --fontcolor: hsl(210, 15%, 15%);
  --bgcolor: hsl(341, 29%, 87%);

  --failed_pic: url("data:image/svg+xml,<svg fill='hsla(0, 0%, 100%, 1)' class='bi bi-emoji-dizzy-fill' width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'><path d='M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zM4.146 5.146a.5.5 0 0 1 .708 0l.646.647.646-.647a.5.5 0 1 1 .708.708l-.647.646.647.646a.5.5 0 1 1-.708.708L5.5 7.207l-.646.647a.5.5 0 1 1-.708-.708l.647-.646-.647-.646a.5.5 0 0 1 0-.708zm5 0a.5.5 0 0 1 .708 0l.646.647.646-.647a.5.5 0 0 1 .708.708l-.647.646.647.646a.5.5 0 0 1-.708.708l-.646-.647-.646.647a.5.5 0 1 1-.708-.708l.647-.646-.647-.646a.5.5 0 0 1 0-.708zM8 13a2 2 0 1 1 0-4 2 2 0 0 1 0 4z'/></svg>");
  
  --fontbase: 'Roboto', sans-serif;
  --decofont: 'Lora', serif;

  --fontsize_normal: clamp(1rem, 3vmin, 3vmin);
  --fontsize_big: clamp(2rem, 15vmin, 15vmin);
  --iconsize: clamp(1.4rem, 4.2vmin, 4.2vmin);
  --iconradius: clamp(0.7rem, 2.1vmin, 2.1vmin);
  --gap: clamp(0.5rem, 1.5vmin, 1.5vmin);
  --section_gap: clamp(150px, 5vmin, 5vmin);
  --least_width: 320px;
  --least_height: 500px;
  --max_width: 2000px;
}

* {
  margin: 0;
  padding: 0;
  margin-block: 0;
  margin-inline: 0;
  background: none;
  border: none;
  outline: none;
}
body, #root, #main_body {
  width: max(var(--least_width), 100%);
  min-height: var(--least_height);
  scroll-behavior: smooth;
  font-family: var(--fontbase);
  font-size: var(--fontsize_normal);
  color: var(--fontcolor);
  text-align: left;
  transition-duration: 2s;
}
body {
  background: var(--bgcolor);
}
#main_body {
  max-width: var(--max_width);
}
:not(i) {
  line-height: 1.2;
  letter-spacing: 0.05rem;
  word-break: break-word;
}
h1, h2, h3, h4, h5, h6, p, a {
  margin-block: var(--gap);
  margin-inline: var(--gap);
}
h1 {
  font-size: var(--fontsize_big);
}
p {
  max-width: 630px;
}
.rotateX {
  -webkit-animation: RotateX 5s ease infinite;
  -moz-animation: RotateX 5s ease infinite;
  -o-animation: RotateX 5s ease infinite;
  animation: RotateX 5s ease infinite;
}
.rotateZ {
  -webkit-animation: RotateZ 10s ease infinite;
  -moz-animation: RotateZ 10s ease infinite;
  -o-animation: RotateZ 10s ease infinite;
  animation: RotateZ 10s ease infinite;
}
.horizontalBackgroundMove {
  -webkit-animation: HorizontalBackgroundMove 10s linear infinite;
  -moz-animation: HorizontalBackgroundMove 10s linear infinite;
  -o-animation: HorizontalBackgroundMove 10s linear infinite;
  animation: HorizontalBackgroundMove 10s linear infinite;
}

@-webkit-keyframes RotateX {
  0%{transform: rotateX(0deg)}
  33%{transform: rotateX(120deg)}
  66%{transform: rotateX(240deg)}
  100%{transform: rotateX(360deg)}
}
@-moz-keyframes RotateX {
  0%{transform: rotateX(0deg)}
  33%{transform: rotateX(120deg)}
  66%{transform: rotateX(240deg)}
  100%{transform: rotateX(360deg)}
}
@-o-keyframes RotateX {
  0%{transform: rotateX(0deg)}
  33%{transform: rotateX(120deg)}
  66%{transform: rotateX(240deg)}
  100%{transform: rotateX(360deg)}
}
@keyframes RotateX {
  0%{transform: rotateX(0deg)}
  33%{transform: rotateX(120deg)}
  66%{transform: rotateX(240deg)}
  100%{transform: rotateX(360deg)}
}

@-webkit-keyframes RotateZ {
  0%{transform: rotateZ(0deg)}
  100%{transform: rotateZ(360deg)}
}
@-moz-keyframes RotateZ {
  0%{transform: rotateZ(0deg)}
  100%{transform: rotateZ(360deg)}
}
@-o-keyframes RotateZ {
  0%{transform: rotateZ(0deg)}
  100%{transform: rotateZ(360deg)}
}
@keyframes RotateZ {
  0%{transform: rotateZ(0deg)}
  100%{transform: rotateZ(360deg)}
}

@-webkit-keyframes RiseUp {
  0%{
    transform: translateY(90%);
    clip-path: inset(0% 0% 90% 0%);
  }
  100%{
    transform: translateY(0%);
    clip-path: inset(0% 0% 0% 0%);
  }
}
@-moz-keyframes RiseUp {
  0%{
    transform: translateY(90%);
    clip-path: inset(0% 0% 90% 0%);
  }
  100%{
    transform: translateY(0%);
    clip-path: inset(0% 0% 0% 0%);
  }
}
@-o-keyframes RiseUp {
  0%{
    transform: translateY(90%);
    clip-path: inset(0% 0% 90% 0%);
  }
  100%{
    transform: translateY(0%);
    clip-path: inset(0% 0% 0% 0%);
  }
}
@keyframes RiseUp {
  0%{
    transform: translateY(90%);
    clip-path: inset(0% 0% 90% 0%);
  }
  100%{
    transform: translateY(0%);
    clip-path: inset(0% 0% 0% 0%);
  }
}
@-webkit-keyframes Extend {
  0%{
    clip-path: inset(50% 0%);
    height: 0%;
    overflow: hidden;
  }
  100%{
    clip-path: inset(0% 0%);
    height: 100%;
  }
}
@-moz-keyframes Extend {
  0%{
    clip-path: inset(50% 0%);
    height: 0%;
    overflow: hidden;
  }
  100%{
    clip-path: inset(0% 0%);
    height: 100%;
  }
}
@-o-keyframes Extend {
  0%{
    clip-path: inset(50% 0%);
    height: 0%;
    overflow: hidden;
  }
  100%{
    clip-path: inset(0% 0%);
    height: 100%;
  }
}
@keyframes Extend {
  0%{
    clip-path: inset(50% 0%);
    height: 0%;
    overflow: hidden;
  }
  100%{
    clip-path: inset(0% 0%);
    height: 100%;
  }
}

@-webkit-keyframes Loading {
  0%{background-position-y: 0%;}
  100%{background-position-y: 100%;}
}
@-moz-keyframes Loading {
  0%{background-position-y: 0%;}
  100%{background-position-y: 100%;}
}
@-o-keyframes Loading {
  0%{background-position-y: 0%;}
  100%{background-position-y: 100%;}
}
@keyframes Loading {
  0%{background-position-y: 0%;}
  100%{background-position-y: 100%;}
}

@-webkit-keyframes HorizontalBackgroundMove {
  0%{background-position-x: 0%;}
  100%{background-position-x: 100%;}
}
@-moz-keyframes HorizontalBackgroundMove {
  0%{background-position-x: 0%;}
  100%{background-position-x: 100%;}
}
@-o-keyframes HorizontalBackgroundMove {
  0%{background-position-x: 0%;}
  100%{background-position-x: 100%;}
}
@keyframes HorizontalBackgroundMove {
  0%{background-position-x: 0%;}
  100%{background-position-x: 100%;}
}

@-webkit-keyframes Floating {
  0%{transform: rotate3d(0, 1, 0, 180deg) translate(0%, -5%);}
  33%{transform: rotate3d(0.25, 0, 1, 15deg) translate(5%, -5%);}
  66%{transform: rotate3d(0.25, 1, 0, 180deg) translate(-5%, 5%);}
  100%{transform: rotate3d(0, 1, 0, 180deg) translate(0%, -5%);}
}
@-moz-keyframes Floating {
  0%{transform: rotate3d(0, 1, 0, 180deg) translate(0%, -5%);}
  33%{transform: rotate3d(0.25, 0, 1, 15deg) translate(5%, -5%);}
  66%{transform: rotate3d(0.25, 1, 0, 180deg) translate(-5%, 5%);}
  100%{transform: rotate3d(0, 1, 0, 180deg) translate(0%, -5%);}
}
@-o-keyframes Floating {
  0%{transform: rotate3d(0, 1, 0, 180deg) translate(0%, -5%);}
  33%{transform: rotate3d(0.25, 0, 1, 15deg) translate(5%, -5%);}
  66%{transform: rotate3d(0.25, 1, 0, 180deg) translate(-5%, 5%);}
  100%{transform: rotate3d(0, 1, 0, 180deg) translate(0%, -5%);}
}
@keyframes Floating {
  0%{transform: rotate3d(0, 1, 0, 180deg) translate(0%, -5%);}
  33%{transform: rotate3d(0.25, 0, 1, 15deg) translate(5%, -5%);}
  66%{transform: rotate3d(0.25, 1, 0, 180deg) translate(-5%, 5%);}
  100%{transform: rotate3d(0, 1, 0, 180deg) translate(0%, -5%);}
}