Fixed for mobile

src/app/airstrip_one/0/components/BeegText.css.ts

@@ -8,7 +8,12 @@ export const beeg_container = style({
 
 const beeg = style({
 	position: 'absolute',
-	fontSize: '3em',
+	fontSize: '1.75em',
+	'@media': {
+		'screen and (min-width: 768px)': {
+			fontSize: '3em',
+		}
+	}
 })
 
 export const beeg_dummy = style([beeg, {

src/app/airstrip_one/0/components/Marquee.css.ts

@@ -15,11 +15,16 @@ const scroll_marquee = keyframes({
 
 export const marquee_content = style({
 	position:                'relative',
-	fontSize:                '1em',
+	fontSize:                '0.75em',
 	color:                   'magenta',
 	whiteSpace:              'nowrap',
 	animationName:            scroll_marquee,
 	animationDuration:       '8s',
 	animationTimingFunction: 'linear',
 	animationIterationCount: 'infinite',
+	'@media': {
+		'screen and (min-width: 768px)': {
+			fontSize: '1em',
+		}
+	}
 })

src/app/airstrip_one/0/ministry_of_truth/page.css.ts

@@ -1,40 +1,51 @@
 import { keyframes, style } from "@vanilla-extract/css";
 
 export const center_vertical = style({
+	boxSizing:     'border-box',
 	position:      'relative',
 	display:       'flex',
 	flexDirection: 'column',
 	alignItems:    'center',
 	margin:        'auto',
-	width:         '50%',
-	border:        '0.3em solid purple'
+	width:         '100%',
+	border:        '0.3em solid purple',
+	'@media': {
+		'screen and (min-width: 768px)': {
+			width: '50%',
+		}
+	}
 })
 
 export const border = style({
-	width:  '60%',
+	width:        '61%',
 	marginBottom: '4em',
-	border: '0.3em solid purple',
+	border:       '0.3em solid purple',
 })
 
 export const big_brother_style = style({
 	display: 'block',
-	width:  '100%',
-	height: 'auto',
+	width:   '100%',
+	height:  'auto',
 })
 
 export const message_style = style({
-	boxSizing: 'border-box',
-	width: '100%',
-	height: 'max-content',
-	margin: 0,
-	border: 'none',
-	padding: '0.5em',
-	fontSize: '2em',
-	color: 'magenta',
+	boxSizing:       'border-box',
+	width:           '100%',
+	height:          'max-content',
+	margin:          0,
+	border:          'none',
+	padding:         '0.5em',
+	fontSize:        '1em',
+	color:           'magenta',
 	backgroundColor: 'black',
-	overflowWrap: 'break-word',
-	textAlign: 'center',
+	overflowWrap:    'break-word',
+	textAlign:       'center',
 	':focus': {
 		outline: 'none',
+	},
+	'@media': {
+		'screen and (min-width: 768px)': {
+			fontSize: '2em'
+		}
 	}
 })

src/app/airstrip_one/0/page.css.ts

@@ -6,14 +6,24 @@ export const center_vertical = style({
 	flexDirection: 'column',
 	alignItems:    'center',
 	margin:        'auto',
-	width:         '50%',
-	border:        '0.3em solid purple'
+	width:         '100%',
+	border:        '0.3em solid purple',
+	'@media': {
+		'screen and (min-width: 768px)': {
+			width: '50%',
+		}
+	}
 })
 
 export const big_brother_style = style({
-	width:  '40%',
+	width:  '60%',
 	height: 'auto',
-	border: '0.3em solid purple'
+	border: '0.3em solid purple',
+	'@media': {
+		'screen and (min-width: 768px)': {
+			width: '40%',
+		}
+	}
 })
 
 export const cats_div = style({