.wrapper {
		display: grid;
		grid-template-columns: 15% 50% 30% 5%;
		grid-template-areas: 
			"nv nv nv nv "
          ".	hd hd hd"
			".	mn pb ."
			"ft ft ft ft";
	}
	

.wrapper2 {
    display: grid;
    grid-template-columns: 1fr 80% 1fr; 
    grid-template-areas: 
        "nv nv nv"
        ".  hd  ."
        ".  mn  ."
        "ft ft ft";
    }

.wrapper2 .content {
    display: flex;
    flex-direction: column;
    align-items: center;
    grid: 30px;
}


.wrapper3 {
    display: grid;
    grid-template-columns: 1fr 80% 1fr; 
    grid-template-areas: 
        "nv nv nv"
        ".  hd  ."
        ".  mn  ."
        "ft ft ft";
}

.wrapper3 .content {
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    column-gap: normal;
}

	
	body {
		background: black;
	}

	}
	html {
  		font-size: 15px;
		font-family: 'italic', sans-serif;
	}
h1 {
font-family: "luckiest guy";
  font-weight: 600;
  font-style: normal;
    background-color: black;
    text-align: center;
    text-decoration: underline;
    font-size: 100px;
    color:#D500F5;
    text-align:center;        
        
	}
h2 {
  		font-size: 30px;
		font-family: "luckiest guy";;
  font-weight:400;
  font-style: normal;
    color: #F5009C;
    text-align:center;
   
	}


	.nav {
		grid-area: nv;
		background-color: #D500F5;
		height: 60px;
        display: flex;
    justify-content: center; 
    align-items: center;    
	}

	.nav a {
		color: black;
		margin-left: 40px;
		line-height: 50px;
		text-align: center;
		text-decoration: underline;
        font-family: "luckiest guy";
        text-align: center;
    text-decoration: underline;
    font-family: "luckiest guy";
    line-height: normal; 
        margin: . 20px;
        
	}
	.nav a:hover {
		background: white;
	}
    .header  {
        grid-area:hd;
        background: Black ;
		margin-bottom: 20px;

	}

    .header2 {
        grid-area:hd;
        background: Black ;
		margin-bottom: 20px;

	}

 .header3 {
        grid-area:hd;
        background: Black ;
		margin-bottom: 20px;

	}


	.content {
		grid-area: mn;
        background-color: black; 
        color: : black; 
        align-content: center
	}
	
	.right {
		grid-area: pb;
		margin-left: 20px;
        background-color:#F5009C;
        color : #D500F5;
        font-family: "luckiest guy";
        
	}
	.add {
		background:black;
		padding: 20px;
		margin-bottom: 20px;
        font-family: "luckiest guy";
	}


.content {
    display: flex;          
    justify-content: center; 
    column-gap: normal;              
    flex-wrap: wrap;        
    padding: 20px;
}


.content .add {
    flex:400px;        
    background: #D500F5;    
    padding: 20px;
    border-radius: 8px;
    box-sizing: border-box;
}


.content .add img {
    max-width: 100%;
    height: auto;
    display: block;
    margin:  auto;
}



.footer {
    grid-area: ft;
    width: 100%;
    background-color: #D500F5; 
    color: black; 
    padding: 20px;
    text-align: center;
    font-family: monospace;
}