body {
    background: lightblue; /* Цвет фона веб-страницы */
}

.maxwidth {
    position: absolute;
    background: lightgreen;
    border: 0px solid rgb(100, 100, 100);
    left: 0%;    top: 0px;
    width: 100%; height: 100%;
}

/* =============== HOME ====================== */
.side-left {                               /* mobile */
    display: none;
}
.telefono {                                      /*mobile */
    display: block;
    border: 0px solid red;
    position: absolute;
    left:  0.0%;   top:0.0%;
    width: 100.0%;   height: 99.9%;

}

.logo {                                      /* mobile */
    display: block;
    background: lightgreen;
    position: absolute;
    left: 0.0%;      top:0.0%;
    width: 100.0%;   height: 10.0%;
    padding-left: 10%;    padding-top: 0.5%;
}

.menu-left {                                  /* mobile */
    display: block;
    background: lightgreen;
    border: 0px solid red;
    position: absolute;
    left: 0.5%;     top:9.5%;
    width: 10.0%;   height: 70.0%;
    padding-left: 3%;
}

.menu-right {                                  /* mobile */
    display: block;
    background: lightgreen;
    border: 0px solid red;
    position: absolute;
    left: 90.0%;    top:10.0%;
    width: 10.0%;   height: 70.0%;
    padding-left: 3%;
}

.telefono-tast {                               /* mobile */
    display: block;
    background: lightgreen;
    border: 0px solid red;
    position: absolute;
    left: 10.0%;    top:10.0%;
    width: 80.0%;   height: 70.0%;
}

.telefono-list {                               /* mobile */
    display: block;
    background: lightgreen;
    border: 0px solid red;
    position: absolute;
    left: 10.0%;    top:10.0%;
    width: 80.0%;   height: 85.0%;
}

.tastatura {                                   /* mobile */
    display: block;
    background: lightgreen;
    position: absolute;
    left: 0.0%;      top: 80.0%;
    width: 100.0%;   height: 20.0%;
}

.button-menu {                               /* mobile */
    position: absolute;
    left: 5%;      top: 0.0%;
    width: 9vw;    height: 9vw;
    border: 3px solid white; border-radius: 10px;
}

.button-menu-1 {                               /* mobile */
    display: block;
    position: absolute;
    left: 0.0%;       top: 0.0%;
    width: 50px;    height: 50px;
    background: green;  /*rgb(40, 100, 60);*/
    vertical-align: middle;
    border: 3px solid brown; border-radius: 10px;
    padding-left: 1%;
    color: white;    font-size: 5.0vw;
}


.computer {                                  /* mobile */
    display: none;
}

.side-right {                                /* mobile */
    display: none;
}

.poisk-parola {                              /* mobile */
    display: block;
    background: white;
    position: absolute;
    border: 0px solid red; border-radius: 5px;
    left: 0.5%;      top: 0.5%;
    width: 99.0%;  height: 99.0%;
}

.poisk {                                /* mobile */
    display: block;
    background: white;
    position: absolute;
    border: 2px solid green; border-radius: 5px;
    left: 0.5%;      top: 0.5%;
    width: 82.8%;    height: 8.0%;
    color: brown;    font-size: 5.8vw;
    padding-left: 1%;
}
.sign-count {                                /* mobile */
    display: block;
    background: white;
    position: absolute;
    border: 2px solid green; border-radius: 5px;
    left: 83.8%;     top: 0.5%;
    width: 15.7%;    height: 8.0%;
    color: brown;    font-size: 4.9vw;
    padding-right: 1%;
    text-align: center;
}

.titolo_parte {                                /* mobile */
    display: block;
    color: green;  font-size: 4.2vw;
    font-style: italic;
    margin-top: 0.0em; margin-bottom: 0.0em;
}

.parola {                                /* mobile */
    background: white;
    position: absolute;
    border: 0px solid red;
    left: 2.0%;      top: 8.5%;
    width: 98.0%;    height: 91.3%;
    color: brown;    font-size: 5.7vw;
    overflow-y: scroll;
}

.par_min {                                /* mobile */
    color: brown;    font-size: 5.0vw;
}

.prim {                                /* mobile */
    color: brown;    font-size: 4.3vw;
}

.cong {                                /* mobile */
    color: green;    font-size: 3.8vw;
}

.button-tastatura {                               /* mobile */
    position: absolute;
    left:0.0%;       top:0%;
    width:10%;    height:25%;
    background: rgb(40, 100, 60);
    vertical-align: middle;
    border: 2px solid white; border-radius: 8px;
    padding-left: 0%;
    color: white;    font-size: 6.0vw;
    text-align: center;
}

.button-tastatura-min {                               /* mobile */
    position: absolute;
    left:0.0%;       top:0%;
    width:10%;    height:25%;
    background: rgb(40, 100, 60);
    vertical-align: middle;
    border: 2px solid white; border-radius: 8px;
    padding-left: 2%;
    color: white;    font-size: 5.0vw;
}

.link {                                  /* mobile */
    link:  brown;
    vlink: brown;
    alink: brown;
    color: brown;
    text-decoration: none;
}
.link:hover {
    color: red;
    text-decoration: none;
}

.link_t {                                /* mobile */
    link:  white;
    vlink: white;
    alink: white;
    color: white;
    text-decoration: none;
}
.link_t:hover {
    color: red;
    text-decoration: none;
}

.link_w {                                /* mobile */
    link:  white;
    vlink: white;
    alink: white;
    color: white;
    text-decoration: none;
}
.link_w:hover {
    color: yellow;
    text-decoration: none;
    text-shadow: -2px 1px 4px black;
    font-size: 0.95vw;
}

.link-b {                                /* mobile */
    link:  black;
    vlink: black;
    alink: black;
    color: black;
    text-decoration: none;
}
.link-b:hover {
    color: red;
    text-decoration: none;
}


<!--   =================  End MEDIA Mobile ======================  -->

<!--   =================== MEDIA COMPUTER ======================  -->

body {  }

@media (min-width: 450px) {

.maxwidth {                              /* computer */
    position: absolute;
    background: white;
    border: 0px solid rgb(50, 50, 50);
    left: 0%;    top:0.0%;
    width: 100%; height: 100%;
    padding-top: 0%;
    margin: 0;
}

.side-left {                               /* computer */
    display: block;
    background:  darkgreen;
    border: 0px solid red;
    position: absolute;
    left: 0.0%;     top:0.0%;
    width: 17.95%;   height: 99.9%;
    padding-left:0%; padding-top: 0%;
    color: black; font-size: 1.1vw;
}
.telefono {                                      /* computer */
    display: block;
    background:  lightgreen;
    border: 0px solid blue;
    position: absolute;
    left:  18.0%;   top:0.0%;
    width: 32.1%;   height: 99.9%;
    padding-left:0%; padding-top: 0%;
    color: black; font-size: 1.1vw;
}

.computer {                                 /* computer */
    display: block;
    background:  white /*rgb(235, 235, 235) */;
    border: 0px solid brown;
    position: absolute;
    left: 50.15%;     top:0.0%;
    width: 31.9%;   height: 99.9%;
    padding-left:0%; padding-top: 0%;
    color: black; font-size: 1.1vw;
}

.side-right {                               /* computer */
    display: block;
    background:  darkgreen;
    border: 0px solid black;
    position: absolute;
    left: 82.1%;     top:0.0%;
    width: 17.9%;   height: 99.9%;
    padding-left: 0;
    font-size: 12px;
}

.logo {                                      /* computer */
    display: block;
    border: 0px solid red;
    position: absolute;
    left:  18.0%;   top:0.0%;
    width: 32.0%;   height: 10.0%;
    padding-left: 3.5%;    padding-top: 0.5%;
    padding-right 3.5%;
}

.menu-left {                                  /* computer */
    display: block;
    background: lightgreen;
    border: 0px solid red;
    position: absolute;
    left: 18.0%;     top:10.0%;
    width: 3.2%;   height: 70.0%;
    padding-left: 3%;
}

.menu-right {                                  /* computer */
    display: block;
    background: lightgreen;
    position: absolute;
    left: 46.8%;    top:10.0%;
    width: 3.2%;   height: 70.0%;
    padding-left: 3%;
}

.telefono-tast {                                  /* computer */
    display: block;
    background: lightgreen;
    left: 21.2%;    top:10.0%;
    width: 25.6%;   height: 70.0%;
    padding-left: 0;
}

.telefono-list {                                  /* computer */
    display: block;
    background: lightgreen;
    left: 21.2%;    top:10.0%;
    width: 25.6%;   height: 85.0%;
    padding-left: 0;
}

.tastatura {                                  /* computer */
    display: block;
    background: lightgreen;
    position: absolute;
    left: 18.0%;     top: 80.0%;
    width: 32.0%;   height: 20.0%;
}

.titolo_parte {                              /* computer */
    display: block;
    color: green;  font-size: 1.25vw;

}

.button-menu {                               /* computer */
    position: absolute;
    left: 5%;      top: 0.0%;
    width: 3vw;    height: 3vw;

}

.button-menu-1 {                             /* computer */
    display: block;

}

.poisk-parola {                              /* computer */
    display: block;
    background: white;
    position: absolute;
    border: 0px solid green; border-radius: 5px;
    left: 0.5%;    top: 0.5%;
    width: 99.0%;  height: 99.0%;
}

.poisk {                                /* computer */
    display: block;
    color: brown;    font-size: 1.7vw;
}

.sign-count {                                /* computer */
    display: block;
    color: brown;    font-size: 1.5vw;
    display: inline-block;
    vertical-align: middle;
    display: flex;
    align-items: center;
    justify-content: center;
}

.parola {                                /* computer */
    display: block;
    color: brown;    font-size: 1.6vw;
}

.par_min {                                /* mobile */
    color: brown;    font-size: 1.4vw;
}
.prim {                                /* computer */
    color: brown;    font-size: 1.2vw;
}

.cong {                                /* computer */
    color: green;    font-size: 1.0vw;
}

.button-tastatura {                               /* computer */
    color: white;    font-size: 1.9vw;
}

.button-tastatura-min {                               /* computer */
    color: white;    font-size: 1.7vw;
}

.image-logo {                               /* computer */
    background: none;
    position: absolute;
    left: 2%;        top: 1%;
    width: 95%;    height: 15.0%;
}

.menu {                                    /* computer */
    display: block;
    background: none;
    border: 0px solid black;
    position: absolute;
    left:0.0%;        top:17.0%;
    width: 100%;      height: 50%;
}


}
 <!--   =================== END of MEDIA COMPUTER ======================  -->

/* =============== EFFECTS ====================== */


/* -------------------------------------- */
.scale-size {
    transform: scale(1.0)
}
.scale-size:hover {
    transition: 0.5s;         /* Время эффекта */
    transform: scale(1.1);    /* Увеличиваем масштаб */
}
/* -------------------------------------- */
.scale-size-small {
    transform: scale(1.0)
    border: 0px solid white;
}
.scale-size-small:hover {
    transition: 0.3s;         /* Время эффекта */
    transform: scale(0.9);    /* Увеличиваем масштаб */
    border: 0px solid gray;
}
/* ---------------image----------------------- */
.scale-size-big {
    transform: scale(1.0)
    -webkit-transform-origin: top;
}
.scale-size-big:hover {
    border: 2px solid white;
    transition: 1.8s;         /* Время эффекта */
    transform: scale(1.7);    /* Увеличиваем масштаб */
    -webkit-transform-origin: top;

}
/* ---------------schede----------------------- */
.scale-size-big1 {
    transform: scale(1.0)
    -webkit-transform-origin: top;
}
.scale-size-big1:hover {
    border: 2px solid white;
    transition: 1.8s;         /* Время эффекта */
    transform: scale(1.7);    /* Увеличиваем масштаб */
    -webkit-transform-origin: top;

}
/* -------------------------------------- */
.scale-border {
       border: 0px solid white;
}
.scale-border:hover {
       transition: 0.2s;        /* Время эффекта */
       border: 2px solid white; /* Помещаем рамку */
}

[data-tooltip] {
    position: relative; /* Относительное позиционирование */
   }
[data-tooltip]::after {
    content: attr(data-tooltip); /* Выводим текст */
    position: absolute; /* Абсолютное позиционирование */
    width: 300px; /* Ширина подсказки */
    left: 0; top: 0; /* Положение подсказки */
    background: #3989c9; /* Синий цвет фона */
    color: #fff; /* Цвет текста */
    padding: 0.5em; /* Поля вокруг текста */
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); /* Параметры тени */
    pointer-events: none; /* Подсказка */
    opacity: 0; /* Подсказка невидима */
    transition: 1s; /* Время появления подсказки */
   }
[data-tooltip]:hover::after {
    opacity: 1; /* Показываем подсказку */
    top: 2em; /* Положение подсказки */
   }