/* Marks code */
/* default - small devices */

.grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-gap: 10px;
}
.cell {
    background-color: rgb(220, 220, 220);
    height: 100px;
}

[class*="col"] {
    grid-column-end: span 12;
}
* {
    box-sizing: border-box;
    font-family: roboto;
}

/* below 600px typically tablet*/

@media only screen and (max-width: 600px) {
    .sm1 {
        grid-column-end: span 12;
    }
    .sm2 {
        grid-column-end: span 6;
    }
    .sm3 {
        grid-column-end: span 4;
    }
    .sm4 {
        grid-column-end: span 3;
    }
    .sm6 {
        grid-column-end: span 2;
    }
    .sm12 {
        grid-column-end: span 1;
    }
}

/* above 601px typically tablet*/

@media only screen and (min-width: 601px) {
    .md1 {
        grid-column-end: span 12;
    }
    .md2 {
        grid-column-end: span 6;
    }
    .md3 {
        grid-column-end: span 4;
    }
    .md4 {
        grid-column-end: span 3;
    }
    .md6 {
        grid-column-end: span 2;
    }
    .md12 {
        grid-column-end: span 1;
    }
}

/* above 1025px typically desktop*/

@media only screen and (min-width: 1025px) {
    .col1 {
        grid-column-end: span 12;
    }
    .col2 {
        grid-column-end: span 6;
    }
    .col3 {
        grid-column-end: span 4;
    }
    .col4 {
        grid-column-end: span 3;
    }
    .col6 {
        grid-column-end: span 2;
    }
    .col12 {
        grid-column-end: span 1;
    }
}

/* jabz code starts im so sorry*/
/* Home page code */

/* Header Section */
.grid{
    background-color: #e1e7d7;
}

header {
    display: flex;
    grid-column: span 6;
    grid-column-end: 10;
    justify-content: center;
    align-items: center;
    color: #2c351e;
    padding: 10px;
    margin: 0;
    background-color: none;
}

.logo {
    max-width: 100px;
    margin-right: 20px;
}

.logo img {
    width: 100%;
    height: auto;
}

.foot{
    grid-column: span 12;
    height: 175px;
}

/* Navigation */
.navbar {
    grid-column: span 8;
    padding: 5px;
    grid-column-end: 11;
    text-align: center;
}

.navbar ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    }

.navbar li {
    text-align: center;
    display: inline;
    margin: 0 10px;
}

.navbar a {
    display: block;
    border-radius: 4px;
    background-color: #964b22;
    color: white;
    text-decoration: none;
    width: 150px;
    height: 40px;
    padding: 10px 20px;
    font-size: 17px;
}

/* Main Content */
.main {
    grid-column: span 8;
    grid-column-end: 11;
    padding: 20px;
}

.main p {
    line-height: 30px;
    text-align: justify;
    font-size: 1.1rem;
    
}

/* Bottom Section */
.bottom {
    grid-column: span 8;
    grid-column-end: 11;
    display: grid;
    gap: 20px;
    padding: 20px;
    align-content: center;
}

.button {
    display: block;
    width: 150px;
    background-color: #333;
    color: white;
    font-size: 1.5rem; 
    text-align: center;
    text-decoration: none;
    padding: 15px 20px;
    border-radius: 4px; 
    margin: auto;
      
}
.placeholder1 img,.placeholder2 img {
    width: 100%;
    height: 100%;
    background-color: #5f5656;
    margin: auto;
    text-align: center;
    align-content: center;
    font-size: 30px;
}

/* Footer */
footer {
    grid-column: span 12;
    text-align: center;
    padding: 20px;
    background-color: none;
    color: lightgray;
}
    
.bottom {
     grid-template-columns: 1fr;
    }
    
/* code for Recipes */

.recmiddle {
    display: grid;
    grid-column: span 8;
    grid-column-end: 11;
    align-content: center;
    
}
.recmiddle img {
    display: block;
    width: 100%;
    height: 100%;
    margin: auto;
    padding: 0;
    
    
}
.maininfo{
    display: grid;
    grid-column: span 8;
    grid-column-end: 11;
}

.small {
    display: inline-block;
    grid-column: span 6;
    grid-column-end: 11;
    text-align: center;
    padding: 10px;
    font-size: 1.2rem;
}

.listcon {
    display: grid;
    grid-column: span 8;
    grid-column-end: 11;
    padding: 10px;
}

.ingredients {
    display: block;
    grid-column: span 3;
    grid-column-end: 6;
    
}

.method{
    display: inline-block;
    grid-column: span 5;
    grid-column-end: 11;  
}

ul li {
    list-style-type: none;
    text-align: left;
    padding: 5px;
    font-size: 15px;
}
    
/* note to self - ue sidebard border? figure out how to remove gap */

ol li {
    padding-bottom: 10px;
    text-align: left;
}

blockquote {
    display: inline-block;
    grid-column: span 5;
    grid-column-end: 11;  
    color: #964b22;
    font-size: 15px;
    text-align: justify;
    font-style: italic;

}

.foot {
    display: grid;
    grid-column:span 8;
    grid-column-end: 11;
}

.recbutton {
    display: inline-block;
    grid-column: span 3;
    grid-column-end: 5; 
    width: 150px;
    height: 55px;
    text-align: center;
    align-content: center;
    background-color: #964b22;
    color: white;
    font-size: 1rem; 
    text-decoration: none;
    padding: 10px 10px;
    border-radius: 4px; 
}

/* Calendar stuff */

.calendar-container {
    grid-column: span 8;
    grid-column-end: 11;
    background-color: none;
    width: 100%;
    max-width: 1000px;
    justify-content: center;
    margin-bottom: 50px;
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
    padding: 10px;
    background-color: #fff;

}
.calendar-header{
    padding: 0;
}

.day-of-week {
    text-align: center;
    font-weight: bold;
    background-color: #8ea071;
    padding: 10px;
    border-radius: 4px;
}


.day {
    background-color: #dbe3ce;
    padding: 15px;
    text-align: center;
    position: relative;
    border-radius: 4px;
}

.event-day {
    background-color: #964b22;
    color: white;
    padding: 15px;
    text-align: center;
    position: relative;
    border-radius: 4px;
}

/* Contact Stuff */

h2 {
    grid-column: span 2;
    grid-column-end: 5;
    display: inline-block; 
    color: #2c351e

}
.conmain{
    display: grid;
    grid-column: span 8;
    grid-column-end: 11;
}
.conmain p{
    display: inline-block;
    grid-column: span 3;
    grid-column-end: 6;
    line-height: 30px;
}
.contact { 
    display: inline-block;
    grid-column: span 5;
    grid-column-end: 11;
    margin-left: 20px;
}

.textbox, .emailbox{
    border: 1px solid #000000;
    padding: 15px;
    box-sizing: border-box;
    width: 300px;
    border-radius: 5px;
    margin-bottom: 10px;
    color: gray;
}

.textbox {
    height: 300px;
}

.emailbox {
    height: 40px;
    
}

.conbutton{
    display: block;
    width: 86px;
    background-color: #964b22;
    color: white;
    font-size: 15px; 
    text-align: center;
    text-decoration: none;
    padding: 5px 10px;
    border-radius: 5px; 
    border: none;
    
}