this var shit isn’t working in css. it’s some scss processors code. fix that motherfucking shit. the textsts sizes isn't adjustable with that shit var shit. fuck you.: <html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
:root {
--flag-size-uk: 6em;
--text-size-uk: calc(var(–flag-size-uk) / 4);

--flag-size-spain: 4em;
--text-size-spain: calc(var(–flag-size-spain) / 3);

--flag-size-france: 5em;
--text-size-france: calc(var(–flag-size-france) / 3);

}

body {
margin: 0;
min-height: 100vh;
}

.main {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}

.backgrounds {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
width: 80%;
height: 80%;
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
}

.background {
font-weight: bold;
padding: 20px;
text-align: center;
justify-content: center;
align-items: center;
position: relative;
display: flex;
}

.background-text {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-size: var(–text-size-uk);
}

.uk:before {
content: '????';
font-size: var(–flag-size-uk);
transform: translateY(-50%) translateX(-50%) rotate(-18deg);
}

.spain:before {
content: '????';
font-size: var(–flag-size-spain);
transform: translateY(-50%) translateX(-50%) rotate(54deg);
}

.france:before {
content: '????';
font-size: var(–flag-size-france);
transform: translateY(-50%) translateX(-50%) rotate(0deg);
}

</style>
<title>Flag Backgrounds</title>
</head>
<body>
<div class="main">
<div class="backgrounds">
<div class="background spain">
<span class="background-text" style="–text-size: var(–text-size-spain)">¡SÍ, NOS IMPORTA!</span>
</div>
<div class="background uk">
<span class="background-text" style="–text-size: var(–text-size-uk)">YES, WE CARE!</span>
</div>
<div class="background france">
<span class="background-text" style="–text-size: var(–text-size-france)">OUI, NOUS NOUS SOUCIONS!</span>
</div>
<!-- Add more flags and texts styles as needed -->
</div>
</div>
</body>
</html>