body { color: white; font-size: 1.2vw; margin: 0; font-family: Arial; display: flex; flex-direction: column; position: relative; background-color: #f7e1d4; } .navbar { border-radius: 2vw; display: flex; align-items: center; justify-content: center; gap: 2vw; height: 5vw; background-color: #FD8335; border: 0.2vw solid #FD8335; } .navbar a { color: #f7e1d4; position: relative; text-decoration: none; } .navbar a::after { content: ''; position: absolute; left: 0; bottom: -.1vw; height: 0.1vw; width: 100%; background: #f7e1d4; transform: scaleX(0); transition: transform 0.3s ease; } .navbar a:hover::after { transform: scaleX(1); } .content { flex-wrap: wrap; display: flex; justify-content: center; gap: 1vw; background-color: #fcd2b7; border-radius: 2vw; border: 0.2vw solid #FD8335; margin-top: 0.5vw; margin-bottom: 0.5vw; margin-left: 10vw; margin-right: 10vw; padding: 1vw; flex: 1; } .content > * { /* Выбираем все прямые дочерние элементы */ flex-grow: 1; /* Заставляем дочерние элементы занимать доступное пространство */ } .n-b-content { padding: 1vw; border-radius: 2vw; background-color: #FD8335; color: #f7e1d4; font-weight: 700; font-size: 3.2vw; flex: 1 1 30%; /* Позволяет элементам уменьшаться и настраивать ширину */ box-sizing: border-box; } #n-b-cob { margin-left: 4vw; } #n-b-descr { margin-top: 0.5vw; width: 40vw; color: #f7e1d4; font-size: 1vw; } #n-b-button { cursor: pointer; border-radius: 2vw; padding: 1vw; font-size: 1vw; color: #FD8335; background-color: #f7e1d4; display: inline-block; transition: border-radius 0.3s ease; } #n-b-button:hover { border-radius: 1vw; } a { text-decoration: none; } a:hover { text-decoration: none; }