first 2 hint modals not optimally sized on wider screens

[tangway]

likely due to lesser content in the first 2 hint modals, they are very narrow on wider screens

[tangway]

in .modal i was using width: max-content; max-width: 340px; which made the 1st 2 hint modals too narrow as they had less content. so i increased font-size by one step to font-size: var(--step-0); and this helped abit. then i lengthened max-width to 500px; to make it slightly smaller than .choices grid container which is at max-width: 560px; so that it is still within the perimeters of the user interface and looks better this way

this combo does not work on phone screens as the modal overflows the width of the screen when there is more content for eg. when the funfact is displayed. this is very likely caused by width: max-content;

[tangway]

added min-width: 230px; but this is too wide on phones so added min-width: min(230px, 64vw); only to .funfact modal as it's the modal with the most content. this makes it select the smaller of the 2 values so 64vw would be rendered on smaller screens this worked for chrome and firefox browsers. but on webkit 17 the funfact modal takes up the whole width of the viewport and the edges of it overflow slightly.

found out through debugging on webkit devtools that .funfact {min-width: min(230px, 64vw);} actually has no effect. it's certainly not because it cant handle CSS math functions. maybe it's due to it's specificity as im nesting this class using Sass syntax?

so i removed the above change and added max-width: min(500px, 80vw); to .modal and it fixed the problem on webkit where the funfact modal overflows slightly but for other browsers it made the modal too narrow on phone screens

so after taking a few breaks, got the idea to just add back .funfact {min-width: min(230px, 64vw);} so that it can work on chrome and firefox and this line would not have an effect in webkit cos it doesnt render it!