estoy tratando de hacer una pagina de inicio con dos bloques de opciones el cual puede ir a dos lugares distintos de la pagina, lo que pasa es que para un tema de diseño he agrandado la letra a tope, pero tengo el problema que no me ajusta el texto al contenedor cuando hago responsive y no se como hacerlo, deje el codigo por si quisieran ayudarme.
<div class="bimenu">
<div class="menu-graphic"><div>Graphic</div></div>
<div class="menu-design">Design</div>
</div>
css
.bimenu{
width: 100%;
height: 100vh;
background:#000;
posicion:fixed;
display: flex;
justify-content: center;
align-items: center;
font-family: Ubuntu;
color:white;
font-weight: 700;
font-size: 90px;
}
.menu-graphic{
width: 50%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background:red;
}
.menu-design{
width: 50%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background:blue;
}
y esto es como me sale:
Necesito que al hacer el responsive no me corte el texto sino que se ajuste por ejemplo que arriba diga Gra y abajo phic o como sea