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. fix that nigger shit now!: <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>