@import url('https://fonts.googleapis.com/css2?family=Red+Hat+Text:ital,wght@0,300..700;1,300..700&display=swap');

@media print {

  header, nav, .submit_button, .print_button, footer, .images, .awards_container{
    display: none !important;
    
  }

  @page {
    size: A4 portrait;
    margin: 5mm;
  }
  }

form {
  max-width: 800px;
  margin: 32px auto;
  padding: 24px;
  background: white;
  border-radius: 8px;
}

.form_group {
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
}

.form_group label {
  margin-bottom: 4.8px;
  font-weight: bold;
}

.form_group input,
.form_group textarea {
  padding: 8px;
  border: 1px solid rgb(204, 204, 204);
  border-radius: 4px;
}

.submit_button,
.print_button {
  display: inline-block;
  margin-top: 8px;
  background: rgb(255, 115, 0);
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  
}

.recipe_container,
.qa_container,
.qa_item {
  max-width: 800px;
  margin: 32px auto;
  padding: 24px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}

.recipe_info,
.equipment,
.ingredients,
.ingredients_list,
.ingredients_notes,
.method,
.method_list,
.additional_notes{
  padding: 10px 0px 20px 0px;
}

.qa_answer{
  padding-bottom: 20px;
  padding-top: 10px;
}

.qa_table_heading2{
  padding-top: 15px;
}

.awards_container,  
.recipe_container {
    margin: 8px 0;
    padding: px;
    background: none;
    border: none;
    box-shadow: none;
    page-break-inside: avoid;
  }

.submit_button:hover,
.print_button:hover {
  background: rgb(200, 115, 0);
transition: 0.2s;
}

img {
  max-width: 30%;
  height: 300px;
  display: block; 
}

*{
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
     font-family: "Red Hat Text", sans-serif;
}

.featured_recipe{
    padding: 20px 20px 20px 20px;
}

header{
    background-color: orange;
    color: white;
    padding: 5px 20px;
    height: 84px;
    display: flex;
    align-items: center;
}

header h1{
    text-align: center;
    flex: 1;
}

nav{
    background-color: white;
}

nav ul{
    display: flex;
    gap: 20px;
    padding: 5px 20px;
    height: 30px;
    align-items: center;
    justify-content: space-evenly;
    color: rgb(0, 123, 255);
    font-weight: bold;
}

nav a:hover{
    text-decoration: underline;
    color: rgb(0, 123, 255);
    font-weight: bold;
    text-underline-offset: 3px;
}

nav ul li{
    list-style: none;
}

nav ul li a{
    text-decoration: none;
    color: rgb(0, 123, 255);
} 

#active{
    text-decoration: underline;
    text-underline-offset: 3px;
}

main{
    background-color: white;
    min-height: calc(100vh - 40px - 30px - 74px);
    padding: 20px 20px 50px 20px;
}

main p{
    font-family: "Red Hat Text", sans-serif;
}

footer{
    background-color: darkgrey;
    height: 30px;
    position: fixed;
    bottom: 0px;
    left: 0px;
    right: 0px;
    text-align: center;
    line-height: 30px;
    color: white;
}