body {
    background-color: rgb(233, 228, 222);
    color: #000000;
}
#container {
    display: grid;
    grid-template-columns: minmax(0px, 1fr) repeat(6, minmax(0, 175px)) minmax(0px, 1fr);
    grid-auto-rows: minmax(0px, auto);
}
.flexbox{
    display: flex;
}
#calendar{
    width: 100%;
    background-color: #627E8B;
    border-left-style: outset;
    border-color: #000000;
    border-width: 5rem;
}
#hbar {
    grid-row: 1 / 2;
    grid-column: 1 / -1;
    width: 100%;
    background-color: #627E8B;
}
nav,a:hover {
    background-color: rgb(19, 19, 18);
  }
#logo {
    background-image: url(myLogoMaker_11-2-2023_120552_PM.png);
    background-color: #483E2E;
    grid-row: 1/ 3;
    grid-column: 2 / 3;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
}
#homehero {
    grid-column: 1 / -1;
    grid-row: 3 / 4;
    background-image: url(Canyon-Snow-State-Park-Zion-National-Park-is-one-of-Utahs-USA-Canyon-rocks-composed-of-burnt-red-and-cream-sandstone-1600x1200.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;

}
#mainimg {
    float: right;
    padding: 2%
}
#secimg {
    float: left;
    padding: 2%;
}
iframe {
    float: left;
    width: 350px;
    padding: 1em;
    height: 250px;
}
#contacthero {
    grid-column: 1 / -1;
    grid-row: 3 / 4;
    background-image: url(misslesson.jpg);
    background-repeat: no-repeat;
    height: 300px;
    background-size: cover;
    width: 100%;

}
#eventhero {
    grid-column: 1 / -1;
    grid-row: 3 / 4;
    background-image: url(potluck.jpeg);
    background-repeat: no-repeat;
    height: 300px;
    background-size: cover;
    width: 100%;
}
#lovehero{
    grid-column: 2 / -2;
    grid-row: 3 / 4;
    background-image: url(christshand.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;

}
header,h1 {
    grid-row: 1 / 2;
    grid-column: 3 / -2;
    background-color: #627E8B;
}
h1 {
    text-align: left;
    padding-left: .5rem;
    color: #483E2E;
}
#nbar {
    grid-row: 2 / 3;
    grid-column: 1 / -1;
    background-color: #EE6C50;
}
nav {
    background-color: #EE6C50;
    grid-row: 2 / 3;
    grid-column: 3 / -1;
}
a {
    grid-column: 3 / -2;
    text-align: center;
    text-decoration: none;
    color: #483E2E;
    font-weight: bolder;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}
#pntemple {
    grid-column: 2 / -2;
    grid-row: 3 / 4;
    background-image: none;
    height: 200px;
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
}
#wrapper {
    display: grid;
    grid-template-columns: repeat(3, minmax(0px, 325px));
    grid-auto-rows: minmax(0px, auto);
}
main {
    grid-row: 4 / 7;
    grid-column: 2 / -2;
}
#l{
    grid-column: 1 / 2;
    grid-row: 1 / 2;
}
#love {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
}
#s {
    grid-row: 1 / 2;
    grid-column: 3 / 4;
}
#share {
    grid-column: 3 / 4;
    grid-row: 2 / 3;
}
#groupdinner {
    
    grid-column: 1 / 4;
    grid-row: 3 / 4;
    
    width: 100%;
}
#i {
    grid-row: 4 / 5;
    grid-column: 1 / 2;
}
#invite {
    grid-row:  5/ 6;
    grid-column: 1 / 2;
}
#w {
    grid-row: 4 / 5;
    grid-column: 3 / 4;
}
#give {
    grid-row: 5 / 6;
    grid-column: 3 / 4;
}
h2 {
    text-align: center;
}
form {
    display: grid;
    grid-auto-rows: minmax( 0px, auto);
    grid-template-columns: 200px 1fr;
    gap: .75rem;
    width: 100%;
   }
 input {
    font-size: 1rem;
    padding: 10px;
    color: #666666;
    background-color: #fafafa;
    border: none;
 }
 
 input:focus {
    outline: none;
    background-color: #f0f0f0;   
 }  
 label {
    padding: 10px;
    text-align: right;
 }
 #mySubmit {
    width: 10rem;
    grid-column: 2 / 3;
 }
 #req {
    text-align: right;
 }
footer {
    grid-row: 7 / 8;
    grid-column: 2 / -2;
    text-align: center;
    background-color: #EE6C50;
}
.slider{
    float: right;
    width: 350px;
    padding: 1em;
    height: 250px;
}


/*tables style starts here*/
@media only screen and (max-width: 992px) {
    nav {
        text-decoration: none;
        text-align: center;
        background-color: #EE6C50;
        grid-row: 2 / 3;
        grid-column: 2/ -2;
    }
    #pntemple {
        grid-column: 2 / -2;
        grid-row: 3 / 4;
        background-image: none;
        background-size: cover;
        background-repeat: no-repeat;
        width: 100%; 
    }
}


/*mobile style starts here*/
@media only screen and (max-width: 768px) {
    header,h1 {
       text-align: center;
       font-size: xxx-large;
    }
    nav {
        text-decoration: none;
        text-align: center;
        background-color: #EE6C50;
        grid-row: 2 / 3;
        grid-column: 2 / -2;
    }
    nav, a {
        display: flex;
        flex-direction: column;
        text-align: center;
        padding-left: 1.5rem;
        padding-top: .25rem;
        grid-column: 1 / 2;
        font-size: larger;
    }
    form {
        display: flex;
        flex-direction: column;
    }
    label {
        text-align: left;
    }
    #wrapper {
        display: grid;
        grid-template-columns:minmax(0, 768px);
        grid-template-rows: auto;
    }
    header, h1 {
        grid-column: 1 / -1;

    }
    main {
        text-align: left;
    }
    #l{
        grid-column: 1 / 2;
        grid-row: 1 / 2;
    }
    #love {
        grid-column: 1 / 2;
        grid-row: 2 / 3;
    }
    #s {
        grid-row: 6 / 7;
        grid-column: 1 / 2;
    }
    #share {
        grid-column: 1 / 2;
        grid-row: 7 / 8;
    }
    #i {
        grid-row: 4 / 5;
        grid-column: 1 / 2;
    }
    #invite {
        grid-row: 5 / 6;
        grid-column: 1 / 2;
    }
    #w {
        grid-row: 8 / 9;
        grid-column: 1 / 2;
    }
    #give {
        grid-row: 9 / 10;
        grid-column: 1 / 2;
    }
    #empty {
        height: 0;
    }
    #lookingglass {
        background-image: none;
    }
    #nbar {
        background-color: #EE6C50;
        grid-row: 2 / 3;
        grid-column: 1 / -1;
    }
    #logo {
        display: none;
    }
    #secimg {
        float: none;
    }
    #mainimg {
        float: none;
    }
    header, h1 {
        text-align: center;
    }
    #ns {
        background-image: none;
    }
    #pntemple {
        background-image: url(christshand.jpg);
        background-position: center;
        grid-column: 5 / -1;
        grid-row: 2 / 3;
    }
    #groupdinner {
        display: none;
    }

}