
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..700;1,100..700&display=swap');



div.scroll-container {
    background-color: #333;
    overflow: auto;
    white-space: nowrap;
    padding: 10px;
    border: 1px solid;
}
 
div.scroll-container img
{
    padding: 10px
 }

body {
    background: url("../images/background_image.jpg");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 100%;
    font-family: "Josefin Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-size: 100px;
    color: white;
}


header{ 
  display: flex;
  padding: 10px;
  background-color: rgba(0,0,0,.5);
  color: #fff;
}

nav{  
    background-color: rgba(0,0,0,.5);
    font-size: 50px;
    font-weight: 200;
}

a {
    color:#fff;
    text-decoration: none;
}

a:hover {
    background-color: rgba(36, 34, 34, 0.5);
    transition: 0.5s;
}

div.selected{
    background-color: rgba(36, 34, 34, 0.5);
    display: inline;
}

footer{
    display:flex;
    left: 750px;
    text-align:center;
    font-size:25px;
    background-color: rgba(0,0,0,.5);
    width:50%;
}
main.homepage {
    position:relative;
    top: 150px;
    text-align: center;
    left:300px;
    font-size: 50px;
    background-color: rgba(36, 34, 34, 0.75);
    border: 3px solid #5e5e5e;
    width: 50%;
    line-height: 100px;
    height: 100%;
    display:inline-block;
}

main.homepage2 {
    position:relative;
    top: 150px;
    font-size: 50px;
    background-color: rgba(36, 34, 34, 0.75);
    border: 3px solid #5e5e5e;
    padding: 70px 0;
    margin: auto;
    width: 50%;
    line-height: normal;
}

p.p1 {
    display:block;
}

p.p2 {
    display:block;
    font-size: 27px;
    position: relative;
    top: 50px;
}


div.title, section.title2 {
    text-align: justify;
    font-size: 40px;
}
figure.printbutton {
    text-align: center;
    background-color: #5e5e5e;
    border: 2px solid #333;
}

section.chutneyingredients1 {
    text-align:left;
    font-size: 30px;
    padding: 20px;

}
  
ul.chutneyingredients2 {
    font-size: 20px;
    font-weight: 100;
    line-height: 30px;
}

ul.chutneymethod {
    background-color: rgba(36, 34, 34, 0.75);
    font-size: 20px;
    line-height: 30px;

}

section.method {
    background-color: rgba(36, 34, 34, 0.75);
    font-size: 20px;
    line-height: 30px;

}

p.chutney{
    font-size: 25px;
    font-weight: 200;
}

p.notes1, p.notes2, section.notes1, section.notes2 {
    padding: 30px;
    text-align: justify;
    margin: 30px;
    font-size: 20px;

}

form {
    margin: auto;
    text-align: center;
    font-size: 25px;
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
      
}

ul {
    font-size:30px;
}

sup {
    font-size:10px;
}
    
table, th, td {
    border: 1px solid;
    font-size: 20px;
    font-weight: 200;
}

label {
    display: block;
}

textarea#ingredients, textarea#method, textarea#equipment {
    width: 100%;
    line-height: 10px;
    height: 75px;
}


