не отображается белый фон на экране

import React from 'react';
import './App.css';
import Button from '@mui/material/Button';
import {AppBar, Toolbar} from '@material-ui/core';
 import {  Container,  Grid, IconButton, Paper, Typography, } from '@mui/material';
import { Box } from '@mui/system';
import MenuIcon from '@material-ui/icons/Menu';
import { makeStyles } from '@material-ui/core/styles';





const useStyles = makeStyles((theme) => ({
  root: {
    flexGrow: 1,
  },
  menuButton: {
    marginRight: theme.spacing(3),
  },
  title: {
    flexGrow: 1,
  },
   mainFeaturesPost:{
    pasition: "relative", 
    color: theme.palette.common.white, 
     marginBottom: theme.spacing(21),
         backgroundSize: 'cover',
        backgroundRepeat: 'no-repeat', 
        backgroundPasition: 'center'
       
   }, 
   overlay:{
     position:"absalute", 
     top:'0', 
     buttom:'0', 
     right:'0', 
     left:'0', 
     backgraundOverlay:"rgbsa{0,0,0,.21}"
   },
   mainFeaturesPostContent:{
     pasition:"relative", 
     padding: theme.spacing(17),
     marginTop: theme.spacing(3)
     
   },
   mainContent:{
     display: "block", 
     pasition:"relative", 
     padding: theme.spacing(12),
     marginTop: theme.spacing(2), 
     
   },
   mainButtons:{
     pasition:"absolute",
    display: "flex", 
    backgraundOverlay:"rgbsa{0,0,0,.21}"

   },
}));

function App(){
  const  classes = useStyles();
  
  return(
     <>
    <AppBar pasition="fixed">
      <Toolbar> </Toolbar>
     <IconButton edge="start" color="inherit" aria-label="menu" className={classes.menuButton}>
       <MenuIcon/>
       <Typography variant='h6' className={classes.title}>Progerlib</Typography>
       <Box>
         <Button color="inherit" variant="outline">Log in</Button>
       </Box>
       <Box color="red">
         <Button color="secondary" variant="conteined">Sign up</Button>
       </Box>
     </IconButton>
    </AppBar>
    
    <main>
      <Paper className= {classes.mainFeaturesPost}
     
      >
       <Container fixed> 

    <Grid container>
      <div className={classes.overlay}></div>
      <Grid item-md={6}></Grid>
      <div className={classes.mainFeaturesPostContent}>
      <Typography
      component="h5"
      variant='h6'
       color="inherit"
       gutterBottom
      >
       Обучаем веб программированию, созданию игр и разработке ПО. 
       Проходите курсы, решайте задачи, просматривайте новости и становитесь настоящим мастерами программирования! 

      </Typography>
      <Typography
      component="h5"
      variant="h2"
       color="inherit"
       poragraph
    
      >
    

      </Typography>
      <Button variant="contained" color="secondary">
      Learn more 
      </Button>
      
    </div>
      
      </Grid>   
       </Container>
      </Paper>
      <div className={classes.mainContent}>
      <Container maxWidth='lg'> </Container> 
      <Typography variant='h2' color="textprimary" align='center' gutterButtom>It Progerlib</Typography>
      <Typography variant='h4' color='secondary' align='center' poragraph> Обучаем веб программированию, созданию игр и разработке ПО.
       Проходите курсы, решайте задачи, просматривайте новости и становитесь настоящим мастерами программирования!</Typography>
       </div>
       <div className={classes.mainButtons}>
       <Grid container spacing={4} jusify='center'></Grid>
       <Grid item>
         <Button variant='conteined' color='red' > Start now</Button>
       </Grid>
       <Grid item>
         <Button variant='outline' align='center' color='primary'>Learn more</Button>
       </Grid>
       </div>
      
    </main>
    </>
  
  )
      } 
    
export default App();

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>