.colored-box{
    background: linear-gradient(#e49031, #d57521);
    border-bottom: 1px solid rgb(197, 197, 197);
    width: 100%;
    margin: 0;
    text-align: center;
    align-items: center;
    display: block;
}
.header-container h1, .header-container img{
    display: inline-block;
    vertical-align: middle;
}
.header-container img{
    margin-left: 10px;
}
.parent-container{
    margin: 0 auto;
    display: grid;
    gap: 1rem;
}
@media (min-width: 300px) {
    .parent-container { grid-template-columns: repeat(2, 1fr); }
    h1{font-size: 1.5rem;}
    h2{font-size: 1rem;}
    .text-container{font-size: 0.8rem;}
    .text-container.show{font-size: 0.8rem;}
}
@media (min-width: 600px) {
    .parent-container { grid-template-columns: repeat(3, 1fr); }
    h1{font-size: 1.5rem;}
    h2{font-size: 1.2rem;}
    .text-container{font-size: 1rem;}
    .text-container.show{font-size: 1rem;}
}
@media (min-width: 900px) {
    .parent-container { grid-template-columns: repeat(4, 1fr); }
    h1{font-size: 2rem;}
    h2{font-size: 1.4rem;}
    .text-container{font-size: 1rem;}
    .text-container.show{font-size: 1rem;}
  }

.recipe-container{
    padding-left: 20px;
    margin: 5px;
    display: table;
    width: 90%;
}
.text-container{
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.5s ease-in-out;
}
.text-container.show {
    max-height: 500px;
}
.image{
    width: 50%;
    height: 65%;
    object-fit: cover;
    border: 0.1rem solid #797979;
    box-sizing: border-box;
    border-radius: 10px;
    box-shadow: 0 10px 40px -12px rgba(16,24,40,.1);
    transition: width 0.3s ease-in-out, height 0.3s ease-in-out;
}
.image:hover{
    width: 70%;
    height: 70%;
}
.image.hover{
    width: 70%;
    height: 70%;
}
.wrap-image{
    border: 10px solid white;
    width: 40%;
    height: auto;
    float: left;
}
.button-container{
    text-align: left;
    padding-left: 10px;
    border-bottom: 1px solid black;
}
.button-to-elsewhere{
    background-color: #e49031;
    border:2px solid #e49031;
    color: black;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 1rem;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 4px;
    font-family: "Comic Sans MS";
    transition-duration: 0.4s;
}
.button-to-elsewhere:hover{
    background-color: #d57521;
    color: black;
    border:2px solid #d57521;
}
footer{
    text-align: center;
    padding: 3px;
    background-color: #d57521;
    border-top: 2px solid rgb(197, 197, 197);
    color: black;
}
body{
    font-family: "Comic Sans MS";
    margin: 0;
}
.glow {
    font-size: 48px;
    font-weight: bold;
    color: red;
    text-align: center;
    animation: glow-animation 1s ease-in-out infinite alternate;
}

@keyframes glow-animation {
    0% {
        text-shadow: 0 0 20px #ff0000, 0 0 30px #ff0000, 0 0 40px #ff0000, 0 0 50px #ff0000, 0 0 60px #ff0000, 0 0 70px #ff0000, 0 0 80px #ff0000;
    }
    100% {
        text-shadow: 0 0 30px #ff0000, 0 0 40px #ff0000, 0 0 50px #ff0000, 0 0 60px #ff0000, 0 0 70px #ff0000, 0 0 80px #ff0000, 0 0 90px #ff0000;
    }
}
.funny-image{
    width: 2%; 
    height: 2%;
}
.funny-image2{
    padding-left: 400px;
}
.generic-padding{
    padding-left: 10px;
}
.recipe-submit{
    text-align: center;
    max-width: fit-content;
    margin-left: auto;
    margin-right: auto;
}
.name-container{
    text-align: center;
    max-width: fit-content;
    margin-left: auto;
    margin-right: auto;
}
.name-submit{
    display: inline-block;
    margin-right: 10px;
}
.name-submit-name{
    display: block;
}
.contact-container{
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.contact-info{
    text-align: center;
    max-width: fit-content;
    display: block;
    margin-left: auto;
    margin-right: auto;
    /* display: block;
    margin-left: auto;
    margin-right: auto; */
}
input{
    width: 300px;
    box-sizing: border-box;
    padding: 5px;
}
textarea{
    width: 100%;
}
label{
    text-align: left;
    display: block;
}
.label center{
    text-align: center;
}
.center{
    text-align: center;
}