/* TODO: block of rules doesn`t want work properly on phone*/

#rules {
    padding: 5%;
    padding-top: 2%;
    top: calc(180px - 80%);
    left: 5%;
    height: 35%;
    width: 70%;
    background-color: var(--background-rules-color);
    font-size: 2.7vmin;
    transition: top var(--time-of-appearing);
}

#rules h2 {
    font-size: 4vmin;
    color: var(--text-add-window-color);
}

#rules-block {
    background-color: inherit;
    color: var(--text-add-window-color);
}

#rules img {
    width: min(10vw, 70px);
    left: calc(100% + 10px);
    transform: rotate(90deg);
}

#rules img:hover {
    transform: scale(1.5, 1.5) rotate(90deg);
}