body{
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-style: normal;

    background-color: rgb(232 202 197);
    padding: 0; /*no inner white space*/
    margin: 0; /*white space outside the box*/
}



header{
    background-color:rgb(0 0 0);
    background-image: url(../img/headphones-md.jpg);
    padding: 1.875em;
    height: 6.25rem;
    color: white;
    font-size: 3.125rem;  
    font-family: "broadacre-thin-4", sans-serif;
    font-weight: 100;
    font-style: normal;  
    background-size: 88%; 
    
}

header span{
    position: relative;
    top: 1.175rem;
    display: inline-block;
    left: 0.25rem   
}

header div {
    flex: 5;
    padding-bottom: 156px;
    text-align: center;
    margin-top: -31px;
    font-size: 35px;
    display: flex;
    margin-left: -35px;
    font-family: "broadacre-thin-4", sans-serif;
    font-weight: 100;
    font-style: normal; 
}


nav{
    margin: 0rem auto; /* shorthand for 2rem top/bottom and zero right/left (they're the same)*/
    
}


nav ul.navigation{
    list-style-type: none;
    position: relative ; /* make the /<li> go side by side*/
    justify-content: space-between; /*switch to chrome to play with this*/
    
}
    

nav ul li{
    display: block;
    /*margin-right: 16px;*/
    height: 0;
    line-height: 0;
    flex: 1;
    text-align: center;
    padding: 1rem;
    
    
    }

nav ul li a{
    display: block;
    height: 100%;
    width: 100%;
}

    a{
         text-decoration: none;
    }
    a span{
        font-size: 15px;
    }

    main{
        margin-left: 2.5rem;
        padding: 1rem;
        margin: 0px;

    }

    p{
        border: 2px solid rgb(255, 245, 243) ;
        background-color: rgb(255, 245, 243) ;
        border-radius: 25px;
        color: black;
        margin-top: 20px;
        margin-right: 10px;
        margin-left: 9px;
        padding: 11px;
        font-family: "soleil", sans-serif;
        font-weight: 400;
        font-style: normal;
    }
    

    img{
        margin-left: 0px;
        margin-top: 14px;
        margin-bottom: 5px;
        border-radius: 25px;
    }



    h1
    { 
        font-size: 1.6rem;
        margin: 21px ;
        font-style: normal;
        color: rgb(0 0 0);
        font-family: "broadacre-thin-4", sans-serif;
        font-weight: 100;
        font-style: normal;  
    }

    h2{
        font-family: "soleil", sans-serif;
        font-weight: 700;
        font-style: normal;
        margin-left: 21px;
        color:rgb(74 0 0);
    }

    .bold-text {
        font-weight: bold;
        font-style: normal;
    }
    .quote{
        font-family: "soleil", sans-serif;
        font-weight: 400;
        font-style: italic;
    }
    
    footer{
        text-align: center;
        background:rgb(43, 42, 42);
        border: 1px solid rgb(43, 42, 42);/*stroke*/
        padding: 1.875rem;
        margin: 2rem auto;
        height: 14.6rem;
        color: white; 
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    
    footer p{
        text-align: center;
        color: white;
        background-color: rgb(43, 42, 42);
        padding: 0.9375rem;
        font-size: 10px;
        border: none;
        margin-bottom: 62px;
        margin-left: 15px;
    }

    
      
      footer nav ul {
        list-style-type: none; 
        padding: 0; 
      }
      
      footer nav ul li {
        display: inline; 
        margin: 0 10px; 
      }
      
      footer nav ul li a {
        color: white; 
        text-decoration: none; 
        font-weight: normal; 
        font-size: 12px;
      }
      
      footer nav ul li a:hover {
        text-decoration: underline; 
      }
      
    

   
    #logo{
        height: 3rem;
        width: auto;
        flex: 1;
        margin-top: -84px;
        padding-left: 8px;
        padding-right: 211px;
        position: absolute;
        margin-left: -92px;
    }
    button#menu-button {
        height: 2rem;
        width: 2rem;
        display: block;
        border: none;
        background-image: url('data:image/svg+xml,<svg viewBox="0 -2 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns" fill="%23000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><title>hamburger-2</title><desc>Created with Sketch Beta.</desc><defs></defs><g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage"><g id="Icon-Set" sketch:type="MSLayerGroup" transform="translate(-308.000000, -1037.000000)" fill="%23ffffff"><path d="M336,1063 L312,1063 C310.896,1063 310,1062.1 310,1061 C310,1059.9 310.896,1059 312,1059 L336,1059 C337.104,1059 338,1059.9 338,1061 C338,1062.1 337.104,1063 336,1063 L336,1063 Z M336,1057 L312,1057 C309.791,1057 308,1058.79 308,1061 C308,1063.21 309.791,1065 312,1065 L336,1065 C338.209,1065 340,1063.21 340,1061 C340,1058.79 338.209,1057 336,1057 L336,1057 Z M336,1053 L312,1053 C310.896,1053 310,1052.1 310,1051 C310,1049.9 310.896,1049 312,1049 L336,1049 C337.104,1049 338,1049.9 338,1051 C338,1052.1 337.104,1053 336,1053 L336,1053 Z M336,1047 L312,1047 C309.791,1047 308,1048.79 308,1051 C308,1053.21 309.791,1055 312,1055 L336,1055 C338.209,1055 340,1053.21 340,1051 C340,1048.79 338.209,1047 336,1047 L336,1047 Z M312,1039 L336,1039 C337.104,1039 338,1039.9 338,1041 C338,1042.1 337.104,1043 336,1043 L312,1043 C310.896,1043 310,1042.1 310,1041 C310,1039.9 310.896,1039 312,1039 L312,1039 Z M312,1045 L336,1045 C338.209,1045 340,1043.21 340,1041 C340,1038.79 338.209,1037 336,1037 L312,1037 C309.791,1037 308,1038.79 308,1041 C308,1043.21 309.791,1045 312,1045 L312,1045 Z" id="hamburger-2" sketch:type="MSShapeGroup"></path></g></g></g></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: 0;
        right: 0.6rem;
        
        background-color:rgb(255, 245, 243) ;  /* style the dropdown menu */
        padding: 1rem;
        width: 95%;
        margin: 0 auto;
        border: 4px solid rgb(255, 245, 243);
    }  


    #menu-button {
        position: absolute;
        right: 0.5rem;
        top: 0.5rem;
        padding: 0;
        background-color: transparent;
        z-index: 10;
    }
    #menu-button:hover {
        cursor: pointer;
     }
    li.icon {
        width: 100%;
        height: 1.8rem;
        margin: 1.3rem 0;  /* space apart for easier finger tapping */
    }

    .hide-text {
        text-indent: 100%;
        white-space: nowrap;
        overflow: hidden;
        padding: 0;
    }
    .icon a img {
        width: 2rem;
        height: auto;
    }

    li.icon a {
        display: flex;  /* place logo and span side by side */
        justify-content: start; /* align left */
        align-items: center; /* 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: 1.5rem;
    }


form {
    border: 2px solid rgb(254 254 254);
    padding: 1rem;
    margin-right: -33px;
    margin-right: 6px;
  }



fieldset{
    border: 1px solid #444;
    margin: 00.5rem 2rem 0.5rem;
    padding: 1rem;
}

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

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

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

.button{
    width: 5rem;
    color: white;
    border-radius: 0.5rem;
}

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

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

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

input[type="reset"]{
    background-color: rgb(128 0 0);
    
}