header{
    background: rgb(109,117,131);
background: linear-gradient(0deg, rgba(109,117,131,1) 50%, rgba(140,130,142,1) 100%);
    padding: 0.375rem;
    height: 6.25rem;
    font-family: "Zen Dots", sans-serif;
    font-weight: 400;
    font-style: normal;
}

body{
    background-color: #6D7583;
    font-family:monospace;

}

footer{
    text-align: center;    
    height: 4.25rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: rgb(109,117,131);
    background: linear-gradient(180deg, rgba(109,117,131,1) 63%, rgba(140,130,142,1) 100%);
}
    button#menu-button {
        height: 2rem;
        width: 2rem;
        display: block;
        border: none;
        background-image: url(../img/Icons/hamburger-menu.svg); 
        background-repeat: no-repeat;
        background-size: cover;
        
    }    
    #menu {
        display: none;
    }
    #menu.show-nav {
        display: block;
        position: absolute;  /* position the menu */
        z-index: 100;
        top: -62px;
        right: -11.81rem;       
        background-color: rgb(135 132 145);  /* style the dropdown menu */
        padding: 0rem;
        width: 37.6%;
        margin: 0 auto;
        border: 7px solid #444;
        left: 0.9rem;
    }  
    #menu-button:hover {
        cursor: pointer;
        }

    #menu-button {
        position: absolute;
        right: 0.5rem;
        top: 0.5rem;
        padding: 0;
        background-color: transparent;
        z-index: 10;
    }
    .hide-text {
        text-indent: 100%;
        white-space: nowrap;
        overflow: hidden;
        padding: 0;
    }
    .icon a img {
        width: 2rem;
        height: auto;
    }
    li.icon {
        width: 100%;
        height: 2.5rem;
        margin: 1.3rem 0;  /* space apart for easier finger tapping */
    }
      li.icon a {
        display: flex;  /* place logo and span side by side */
        justify-content: start; /* align left */
         /* vertically align */
        
        font-family: arial, helvetica, sans-serif; /* style span text as desired */
        font-weight: bold;
        text-decoration: none;  /* remove underline */
        font-size: 1.5rem;
        margin: 0; 
        height: 2.3rem;
    }
    @media only screen and (min-width: 64em) {
        button#menu-button {
            display: none;
        }

        #menu {
            display: flex;
        }
    }
    img#logo{
        height: 88px;     
        width: auto;
        margin: 3rem auto;
        margin-top: 10px;
        margin-bottom: 0;
        display: flex;
    }
h1{font-size: 2em;
    text-align: center;
    margin-top: 30px;
    margin-bottom: 0;
    font-weight: 500;
    
}
h2{font-size: 1.6818em;
    padding-top: 25px;
    padding-bottom: 25px;
    text-align: center;

}
h3{font-size: 1.5874em;}
h4{font-size: 1.4142em;}
h5{font-size: 1.2599em;}
h6{font-size: 1.1225em;}
p{font-size: 1em;
    text-align: center;
    padding-top: 5px;
    font-weight: 100;
    font-family:serif;
}
small{font-size: .8909em;}

.name{
   text-align: center;
   letter-spacing: 4.5px;
}

/* img{
    width: auto;
    height: 25%;
    
} */
.backporsche{
    max-width: 100%;
    height: auto;
}

form{
font-size: large;
font-weight: 600;
border: 5px solid #8c828e;
padding: 1rem;
}

fieldset{
border: 5px;
margin: 0 0.5rem 2rem 0.5rem;
padding: 1rem;
}

label, input{
display: black;
width: 100%;
}

legend{

}

textarea{
width: 100%;
margin: 0.125rem 0 1.2rem 0;
}



input[type="submit"]{
margin: 0 0 0.55rem;
background-color: #9b939d;
}

input[type="text"]{

}

input[type="tel"]{
margin: 0.125rem 0 1.2rem 0;
}

.button{
width: 5rem;
height: 1.3rem;
color:rgb(0 0 0);
border-radius: 0.5rem;
background-color: #cba2b7;
}

.button:hover{
filter: opacity(0.5);
}

.align-right{
display: flex;
justify-content: end;
}

.button:active{
.
}

/* =========== LoVeHA Rule for SVG Links =========== */

a:link svg {
    fill: #A4ADB3;
}

a:visited svg {fill: #4D494E;}




a:hover svg  {
    animation: wiggle 0.5s infinite;
}

a:active svg {fill: rgb(192 201 200);}


li.currentPage::before {
    position: absolute;
    content: " ";
    top: -8px;
    left: -2px;
    display: block;
    z-index: 1;
    height: 1rem;
    width: 1rem;
    background-size: cover;
    background-repeat: no-repeat;    
}

.icon svg {
    width: 118%;
    height: auto;
    fill: #307E71;
    height: auto;
}

a span{
    display: block;
    width: 100%;
    text-align:center ;
    font-size: 0.55rem;
    position: absolute;
    top: 1.1rem;
    margin-top: 1.4rem ;
}
.box_pic{
    border: 10px solid #8c828e;
    padding: 10px;
    box-shadow: 0px 5px 15px;
    text-align: center;
    margin-top: 13px;
}

ol, ul{
    list-style: none;
    text-align: center;
    margin-top: 20px;
}

.homenav{
 font-size: xx-large;
 padding-bottom: 30px;

}

.tpnav{
font-size: xx-large;
padding-bottom: 30px;
}

.horsenav{
 font-size: xx-large;
 padding-bottom: 30px;
}

.fuelnav{
 font-size: xx-large;
 padding-bottom: 30px;
}

.contactnav{
    list-style: none;
    padding-bottom: 30px;
}

.top3{
padding-bottom: 0;
margin-top: 8px;
}

.vehicle{
padding-top: 0;
}

.figcaption{
    font-size: x-small;
}