body {
                
                margin: 0;
              /*  background-color: #fcba03;*/
font-family: 'Alata';
                
            }
            
            p
            {
             font-family: 'Alata'; 
             color:white;
            }
            
            h1
            {
               font-family: 'Alata'; 
               color:white;
               text-align:center;
               /* fun facts with Freya: this is bad practice, I have the important tag since bootstrap is overwriting my fucking css, mental note btw for future Freya, migrate out bootstrap, the funky nav bar isn't fucking worth it, its just not*/
               font-size: 3rem !important;
            }
            
            
            h2
            {
              
               font-family: 'Alata'; 
               color:white;
               text-align:center;
            }
            
            
            h3
            {
               font-family: 'Alata'; 
              
              color:white;
            }
            
            li
            {
              font-family: 'Alata'; 
              color:white;
              
            }
            
            .ListedLink
            {
               font-size: 14px;
              
            }
            
            
            
            img {
  max-width: 100%;
  height: auto;
}
            
        /*    p.center
         *   {
          *    font-family: 'Alata'; 
           *  color:white;
            * text-align:center;
            }*/
            
.navbar-nav li.nav-item a.nav-link{
  color:white;
   font-size: 25px;
 text-align: center;
  padding-left:20px;
  padding-right:20px;
  padding-top: 10px;
  padding-bottom: 10px;
  
  font-family: 'Alata'; 
}

.navbar-nav li.nav-item a.nav-link.active{
    color:black;
    background-color: #e8e8e8;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    border-top-right-radius: 15px;
    border-top-left-radius: 15px;
    box-shadow: 1px 1px 10px 5px #ffffff;
    
    font-family: 'Alata'; 
}


.pSidebar{
  color:white;
}


.grid-container {
  display: grid;
  grid-template-columns: 25% 75%;
}

.imgContainer {
 display: grid;
 align-items: center; 
 grid-template-columns: 1fr 1fr;
 column-gap: 5px;
}


.Contact
{
  padding: 10px;
  background-color: #e8e8e8;
  border-style: ridge;
border-color: #e8e8e8;
border: 30px 30px 30px 30px; 

  
  width: 250px;
  height: 200px;
}

.Contact h3
{
  color:black;
}

.Contact li
{
   color:black;
}

.Contact p
{
  
  color:black;
}

.ShopContainer {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 70%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
}

/* Then style the iframe to fit in the container div with full height and width */
.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

.Categories {
  display: grid;
  z-index:2;
  position: relative;

  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 10px;
  padding: 10px;
  grid-auto-columns: 200px;
  text-align:center;
  padding-bottom: 20px;
  
}

.Galleries {
  /*display: grid;
  
  position: relative;

  grid-template-columns: fit-content(50%);
  gap: 10px;
  padding: 10px;
  grid-auto-columns: 200px;*/
  z-index:0;
  text-align:center;
  padding-bottom: 20px;
}

.Categories > a > div {
 
  
  padding: 15px;
  
  text-align: center;
  color: #212529;
  transition-duration: 0.1s;
}

.Categories > a > div:hover {
  background-color: #2a2e34;
  color: #cccccc;
  
}

/*For individual products*/
.Categories > div {
   padding: 15px;
  padding-top: 25px;
  text-align: center;
  color: #212529;
}

.Categories > div > p {
 text-align:center;
  
}

.Categories > a > div > p {
 text-align:center;
  
  
}

.Button{
   background-color: #ffffff;
  border: none;
  color: #000000;
  padding: 20px 62px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 25px;
  cursor: pointer;
  font-family: 'Alata'; 
  margin:auto;
  display:block;
  z-index:2;
  position: relative;
}

.ShopButton{
  padding: 10px;
  background-color: #427aa1;
  color: #ffffff;
  width: 100%;
  border-radius: 10px;
}

.ShopButton:hover{
  background-color: #f1f1f1;
  border: 2px solid #427aa1;
  color: #212529;
}

footer {
  display: grid;
  
 
  padding-top: 500px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 10px;
  padding: 10px;
  grid-auto-columns: 200px;
}

#container {
                max-width: 1600px;
                /* this is the width of the layout! */
                
                margin: 0 auto;
                /* this centers the entire page */
            }
            
            #header {
                width: 100%;
                background-color: #000000;
                /* header color here! */
                display: flex;
                justify-content: center ;
                
                
            }

#flex {
                display: flex;
  flex-direction: row;
            }
            
            
            
                        /* this colors BOTH sidebars
    if you want to style them separately,
    create styles for #leftSidebar and #rightSidebar */
            aside {
                background-color: #1b0b4c;
                width: 300px;
                padding: 20px;
                font-size: smaller;
                /* this makes the sidebar text slightly smaller */
            }


            /* this is the color of the main content area,
    between the sidebars! */
            main {
              
                background-color: #000000;
                flex: 1;
                padding: 20px;
                order: 2;
            }

            /* what's this "order" stuff about??
    allow me to explain!
    if you're using both sidebars, the "order" value
    tells the CSS the order in which to display them.
    left sidebar is 1, content is 2, and right sidebar is 3! */

             #leftSidebar {
                order: 1;
            }

            #rightSidebar {
                order: 3;
            }
            
            
            
            .navbar{
    

    margin-top: 20px;
    margin-bottom: 50px;
    font-size: 2.4rem;
    /*font-family: 'Alata';*/
    position: relative;
    z-index:3;
}




 @media only screen and (max-width: 731px) {
          #flex {
                    flex-wrap: wrap;
                }

                aside {
                    width: 100%;
                }
          
          main 
          {
                    order: 1;
                }

                #leftSidebar {
                    order: 2;
                }

                #rightSidebar {
                    order: 3;
                }
                
                .imgContainer {
 display: inline;
 align-items: center; 
 grid-template-columns: 50% 50%;
 column-gap: 5px;
}


 }