* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

@font-face {
    font-family:Persona5MenuFontPrototype-Regular ;
    src: url(../fonts/Persona5MenuFontPrototype-Regular.ttf);
}

 @font-face {
    font-family:p5hatty-1 ;
    src: url(../fonts/p5hatty-1.ttf);
 }

 body {
    background: #ff0000;
    font-family:Persona5MenuFontPrototype-Regular ;
 }

header {
    background: #000;
    padding: 45px;
   width: 110%;
    transform: skewY(-3deg); /* after searching for commands by pressing 
    random things i found out how to make it tilt */


}

nav {
    text-align: center;
    transform: skewY(3deg);
}

nav a {
    color: white;
    text-decoration: none;
    margin: 20px;
    font-size: 20px;
    letter-spacing: 2px;
  
}

nav a:hover {
color: #c40000;
}

/* main content */

#allmain {
    position: relative;
    width: 900px;
    height: 500px;
    margin: 100px auto;

 
}

#black-box {
position: absolute;
width: 100%;


}

#photo {
    position: absolute;
    top:50%;
    left: 70%;

    transform: translate(-50%, -50%);
}

#photo img {
    width: 1100px
}

#story {
position: relative;
width: 1000px;
height: 300px;
margin: 150px auto;


display: grid;
place-items: center;
transform: skewY(-3deg);

}

#red-box {
position: absolute;
height: 80%;

}
#story h1 {
transform: skewY(3deg);
color: white;
text-align: center;
}

#story h2 {
transform: skewY(3deg);
color: white;
font-family: p5hatty-1;
text-align: center;


}