body {
   overflow-y: auto;
}

h2 {
   margin: 3px;
   font-size: 130%;
   font-family: 'Oswald-Light', Helvetica, Arial;
   user-select: none;
}

.file {
   margin: 3px;
   font-size: 120%;
   font-family: 'Oswald-Light', Helvetica, Arial;
   user-select: none;
}

.block_border {
   /*бордер для блока*/
   border-radius: 0px 10px 0px 10px;
   border: 2px solid rgba(83, 89, 98, 0.5);
   padding: 5px;
   margin: 10px 0px;
}

.control_color {
   border-radius: 4px;
   width: 35px;
   height: 35px;
}

#progress {
   appearance: none;
   -moz-appearance: none;
   -webkit-appearance: none;
   border: none;
   margin-top: 10px;
   background: #eee;
   border: 0;
   width: 90%;
   height: 25px;
   border-radius: 9px;
   color: #9c3;
   color: rgb(1, 212, 47);
}

#progress::-webkit-progress-bar {
   background: #eeeeee;
   border-radius: 9px;
}

#progress::-webkit-progress-value {
   background: linear-gradient(to bottom, #cf9 0%, #9c3 100%);
   border-radius: 9px;
}

#progress::-moz-progress-bar {
   background: linear-gradient(to bottom, #cf9 0%, #9c3 100%);
   border-radius: 9px;
}

p {
   text-align: center;
   font-size: 130%;
   font-family: 'Oswald-Light', Helvetica, Arial;
}


.input__wrapper {
   text-align: center;
   font-family: 'Oswald-Light', Helvetica, Arial;
}

.input__file {
   opacity: 0;
   visibility: hidden;
   /*position: absolute;*/
}

.input__file-icon-wrapper {
   height: 60px;
   width: 60px;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
   -webkit-box-pack: center;
   -ms-flex-pack: center;
   justify-content: center;
}

.input__file-button-text {
   line-height: 1;
   margin-top: 1px;
}

.input__file-button {
   width: 100%;
   height: 60px;
   border: 2px solid rgba(83, 89, 98, 0.5);
   background: rgb(118 127 140);
   color: #242424;
   font-size: 1.125rem;
   font-weight: 700;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
   -webkit-box-pack: start;
   -ms-flex-pack: start;
   justify-content: center;
   border-radius: 3px;
   cursor: pointer;
   margin: 0 auto;
   border-radius: 0px 10px 0px 10px;
}

.input__file-button:hover {
   background: rgb(101, 131, 172);
}

#body_animations {
   margin: 0%;
   height: 100px;
   display: flex;
   justify-content: center;
   align-items: flex-end;
}

.animat {
   margin: 2px;
   border-radius: 20px 20px 0px 0px;

}

#image {
   display: none;
   width: 100%;
   border-radius: 0px 10px 0px 10px;
   margin-top: 10px;
   margin-bottom: 10px;
   box-shadow: 5px 5px 10px rgb(34, 34, 34);
}

#canvas {
   position: absolute;
   left: 0;
}

.error_contener_on {
   /*Буфер ошибки отсутствия сервиса*/
   position: fixed;
   display: flex;
   align-items: center;
   justify-content: center;
   bottom: 20%;
   left: 10%;
   width: 80%;
   height: 20%;
   border-radius: 5px;
   background-color: rgba(253, 87, 65, 0.9);
   font-family: 'OpenGostTypeA-Regular', sans-serif;
   font-size: 2em;
   color: #000;
   box-shadow: 2px 2px 5px rgb(63, 54, 54);
   user-select: none;
   transition: 0.5s;
}

.error_contener_off {
   /*Буфер ошибки отсутствия сервиса*/
   position: fixed;
   display: flex;
   align-items: center;
   justify-content: center;
   bottom: 20%;
   left: -2000px;
   width: 80%;
   height: 20%;
   border-radius: 5px;
   background-color: rgba(253, 87, 65, 0.9);
   font-family: 'OpenGostTypeA-Regular', sans-serif;
   font-size: 2em;
   color: #000;
   box-shadow: 2px 2px 5px rgb(63, 54, 54);
   user-select: none;
   transition: 3s;
}