/*--Developed by Emily Walker 2025-09-28 Version#0.3 */

/* changed name of web.css to match the changes with other file names*/
/*Version11*/
/*element selectors are ordered by order of appearence in html files. 
 ids and classes are grouped with their own kind and then sorted alphabeticaly.
 Elements are sorted aplphabeticaly.
*/
/*CSS for phone/SMALL*/

/* Viewport Settings SMALL */

* {
    box-sizing: border-box;
    font-family: Verdana, 'Times New Roman', sans-serif; /*Website fonts*/
    font-size: 1em;
    line-height: 2em;
    z-index:2;
}

#wrapper { /*Centers the entire page and adds the background color*/
    background-color: #FFFFFF;
}

.gridOuter {
    display: grid;
    grid-template-areas:
        "one"
        "two"
        "three"
        "four";
    grid-template-columns: auto;
    grid-template-rows: auto auto auto auto;
}

header {
    grid-area: one;
    grid-column: 1/2;
    grid-row: 1/2;
}

nav {
    grid-area: two;
    grid-column: 1/2;
    grid-row: 2/3;
}

main {
    grid-area: three;
    grid-column: 1/2;
    grid-row: 3/4;
}

footer {
    grid-area: four;
    grid-column: 1/2;
    grid-row: 4/5;
}

.grid2SidePage {  
/*Used on Heartland Shelter home page and our vet page and for the individual grids on the our mission divs*/
    display:grid;
    grid-template-areas: 
    "two"
    "one" ;
    grid-template-columns: auto;
    grid-template-rows: auto;
}

.sideone {
    grid-area: one;
    margin-right: auto;
    margin-left: auto;
    padding: 2%;
}

.sidetwo {
    grid-area: two;
    margin-right: auto;
    margin-left: auto;
    padding: 2%;
}

/* Viewport Settings SMAll */

header {
    display:flex; 
    align-items:center; 
    background-color: #670132;
    margin-bottom: 0;
    padding: 2%;
    
}

header img {
        display:none;
}

    header a {
        text-decoration: none;
        color: #c5ad94;
        text-align: center;
    }      

 header h1  {
    display:inline-block;    
 }          

nav {
 background-color:black;
 margin:0; 
 padding:2.3%;

}

    nav a { /*Removes default underline*/
        /*Text*/
        color: white;
        text-decoration: none;
        font-weight: bold;
        padding: 0em;
        text-align: center;
        font-size: .9em; 
        line-height:1.5em;
    }

    nav ul {
        font-size: 1.2em;
        list-style: none;
        margin: 0;
        padding-left: 0;
    }

    nav li {
        
        border-bottom: 1px solid #29485d;
        margin-top: 0;
        margin-bottom: 0;
    }

footer {
    background-color: #670132;
    margin:0;
}

footer ul {
    list-style:none;
    margin:0;
}

    footer ul li {
        color: #c5ad94;
        line-height: 1.5em;
        vertical-align: central;
        padding-bottom: 2%;
        margin: 0;
    }

footer img {
    display:none;
}

    footer h2 {
        margin-top:2%;
        margin-left: auto;
        margin-right: auto;
    }

    footer a {
        color: #e1a95f;
        font-size: .9em;
        text-decoration: none;
        margin-left:0;
    }

    footer a:hover{
        color:white;
    }

    footer p {
        color: #e1a95f;
        font-size: .9em;
        line-height: 1.5em;
        vertical-align: central;
        padding-bottom: 2%;
        margin: 0;
    }

#copyright { /*Located on the right side of footer*/
    float: right;
    margin: 1%;
    margin-right: 5%;
    margin-left: 5%;
}

h1 {
    font-size: 2em;
    color: #e1a95f;
}
h2 {
    font-size: 1.2em;
    color: #e1a95f;
}

main h2 {
   color: #670132;
}

main a {
    text-decoration: none;
    color: #cb410b;
}

    main a:hover {
        color: #670132;
    }


h3 {
    text-align:left;
    font-size:1em;
}

p {
    margin: 2%;
}

section {
    display:block;
    margin-top:5%;
    margin-bottom:10%; 
}

ul li::marker {
    color: #670132;
}

ul {
    list-style: square;
}



.buttons {
}
    .buttons ul {
        list-style: none;
    }

    .buttons a {
        gap: 1em;
        flex-wrap: nowrap;
        background-color: #DF9166;
        color: black;
        text-decoration: none;
        padding: 5px;
        display: inline-block;
        margin: 1%;
    }

    .buttons a:hover{
        color:#FFFFFF;
    }
/*Origional Orange  #cb410b*/

.centered {
    text-align: center;
    display: flex;
    justify-content: center;
}

.middleContent {
    margin-top: auto;
    margin-bottom: auto;
}

.graycolor {
    background-color: #f1efeb;
}

.burntOrange {
    background-color: #DF9166
}

.burntOrangeBoarder {
    border: solid 4px #DF9166;
}

.imgcontainer {
    display: flex;
    justify-content: center;
    align-items: center;
}

.textcenter {
    text-align: center; 
}

/* End of Table SMALL */
/*End of CSS for phone/SMALL*/

@media (min-width: 820px) {
    /*MEDIUM CSS
  triggers at 820px
*/
    /* Viewport Settings*/
    * {
        font-size: 1.02em;
    }

    

    .grid2SidePage {
        display: grid;
        grid-template-areas:
        "one two";
        grid-template-columns: auto auto;
        grid-template-rows: auto;
    }

    .sideone {
        grid-area: one;
        margin-right: auto;
        margin-left: auto;
        padding: 2%;
    }

    .sidetwo {
        grid-area: two;
        margin-right: auto;
        margin-left: auto;
        padding: 2%;
    }

    /*Viewport Settings */
    header {
        gap: 5%;
    }

        header img {
            display: inline;
            width: 100%;
        }

    nav ul {
        display: flex;
        flex-wrap: nowrap;
        gap: 1em;
    }

    nav a {
        background-color: #efefef;
        color: black;
        display: block;
        border: 1px solid #333;
        padding: 5px;
    }

    nav a:hover {
      color: #670132;
    }

    footer ul {
        position: relative;
        right: 22%;
    }

    footer ul li {
        margin-left:0%;
        margin-top:1%;
    }

    footer img {
        display:flex;
        width: 100%;
        height: auto;
        position:relative;
        right:53%;
        
    }
    
    #copyright{
        float:left;
    }
    /* End of MEDIUM CSS*/
}

@media (min-width: 1250px) {
/* Start of LARGE CSS*/

    #wrapper {
        width: 90%;
        margin: auto;
        border: 1px solid #000033;
        box-shadow: 3px 3px 3px #333;
    }
  
    /* End of LARGE CSS*/
}