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

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

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

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

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

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

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

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

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

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

body{
    margin-left: 50px; 
    background-color: rgb(249, 255, 197);
}


h1{
    color: rgb(3, 155, 79);
    font-family: Rye-regular, sans-serif;
    font-size: 4em;
    text-shadow: 3px 3px 5px rgb(224, 12, 48);
    position: relative;
    top: -10px;
    left: 10px;
}

h2{
    color: rgb(3, 119, 61);
    font-family: DMSerifText-Regular;
    text-shadow: 3px 3px 5px rgb(224, 12, 48);
    
}

#p2{
    color: rgb(235, 27, 27);
    font-family: Bangers-Regular;
    text-shadow: 3px 3px 5px rgb(224, 12, 48);
}
#p1{
    color: black;
    font-weight: bold;
    position: relative;
    top: -10px;
    left: 10px;
}
#L2{
    color: black;
    font-weight: bold; 
}

#B1{
    background-color: rgb(130, 196, 77);
}

#B2{
    background-color: rgb(54, 144, 218);
}

#ingredients{
    background-color: rgba(164, 224, 169, 0.568);
}

#instructions{
    background-color: rgba(164, 224, 169, 0.568);
}

#catagory{
    background-color: rgba(164, 224, 169, 0.568);
}

#recipe_name{
    background-color: rgba(164, 224, 169, 0.568);
}

#box1{
    
    margin-bottom: 10px;
    margin-top: 10px;
    position: relative;
    top: -430px;
    left: 800px;
}    

#boxpic{
    position: absolute;
}
#box2{
    margin-bottom: 10px;
    margin-top: 10px;
    position: relative;
    top: -430px;
    left: 300px;
}

#box5{
    
    width: 300px;
    height: 250px;
    color: black;
    font-family: DMSerifText-Regular;
    font-size: 1em;
    font-weight: bold;
    margin-bottom: 10px;
    margin-top: 10px;
    position: absolute;
    top: 130px;
    left: 350px;
  
}