:root {
                --header-image: none;
                --body-bg-image: url('');

                /* colors */
                --content: #43256E;
            }
            
            body {
                font-family: 'Arial';
                margin: 0;
                background-color: #cdd1b6;
                color: black;
                background-image: var(--body-bg-image);
                
          
            }
            
            
            
            a:link {
  text-decoration: underline;
  color:blue;
}

a:visited {
  text-decoration: underline;
  color:blue;
}

a:hover {
  color:green;
  text-decoration: underline;
}

a:active {
  color:yellow;
  text-decoration: none;
}

.tilta {
    width:100%;
}

.tiltb {
    width:100%;
}



            * {
                box-sizing: border-box;
            }

#borderimg { 
  border: 22px solid transparent;
  padding: none;
  background: #C47F3A;
  border-image: url(https://bennizone.net/graphix/layout/frameborder.png) 20% round;
}

           
            #container {
                max-width: 1200px;
                /* if you change the above, change at the bottom  too*/
                margin: 0 auto;
            }

            /* all links EXCEPT the navigation */
            #container a {
                color: darkblue;
                font-weight: bold;
            }


            #navbar {
                height: 40px;
                background-color: #7c806a;
                width: 100%;
            }

            #navbar ul {
                display: flex;
                padding: 0;
                margin: 0;
                list-style-type: none;
                justify-content: space-evenly;
            }

            #navbar li {
                padding-top: 10px;
            }

            /* navigation links*/
            #navbar li a {
                color: blue;
                font-weight: 800;
            }

            #navbar li a:hover {
                color: green;
                text-decoration: underline;
            }

            #flex {
                display: flex;
            }

            /* sidebars (to style them separately, create styles for #leftSidebar and #rightSidebar) */
            aside {
                background-color: #999c87;
                width: 55%;
                padding: 20px;
            }

            main {
                background-color: #999c87;
                flex: 1;
                padding: 10px;
                order: 2;
            }

           

            */ #leftSidebar {
                order: 1;
            }

            #rightSidebar {
                order: 3;
            }

            footer {
                background-color: #7c806a;
                width: 100%;
                height: 40px;
                padding: 10px;
                text-align: center;
            
            }
            
            
.bgblue {
  
  background-color:blue;
  color:white;
  
}

            /* zig-zag box */
.box {
                background-color: white;
                color:black;
                border: none;
                padding-left: 10px;
                padding-right: 10px;
                padding-top: 0px;
                padding-bottom: 3px;
                mask: repeating-conic-gradient(from 60deg at 7px 50%,#0000,#000 1deg 59deg,#0000 60deg 180deg) -7px 50%/100% 8.08px
}



.navselect {
                background-color: cyan;
                color:black;
                border: none;
                padding-left: 10px;
                padding-right: 10px;
                padding-top: 0px;
                padding-bottom: 3px;
                mask: repeating-conic-gradient(from 60deg at 7px 50%,#0000,#000 1deg 59deg,#0000 60deg 180deg) -7px 50%/100% 8.08px
}

.yellowbox {
                background-color: yellow;
                color:black;
                border: none;
                padding-left: 20px;
                padding-right: 20px;
                padding-top: 10px;
                padding-bottom: 10px;
                mask: repeating-conic-gradient(from 60deg at 7px 50%,#0000,#000 1deg 59deg,#0000 60deg 180deg) -7px 50%/100% 8.08px
}


.notebox {
                background-image: url(https://bennizone.net/graphix/notebook_lines.png);
                color:black;
                border: none;
                padding-left: 20px;
                padding-right: 20px;
                padding-top: 10px;
                padding-bottom: 10px;
                mask: repeating-conic-gradient(from 60deg at 7px 50%,#0000,#000 1deg 59deg,#0000 60deg 180deg) -7px 50%/100% 8.08px
}


.bbox {
                background-image: url(https://bennizone.net/graphix/rainbowbg.png);
                color:black;
                border: none;
                padding-left: 20px;
                padding-right: 20px;
                padding-top: 10px;
                padding-bottom: 10px;
                mask: repeating-conic-gradient(from 60deg at 7px 50%,#0000,#000 1deg 59deg,#0000 60deg 180deg) -7px 50%/100% 8.08px
}

.greenbox {
                background-color: green;
                color:black;
                padding-left: 0px;
                padding-right: 0px;
                padding-top: 10px;
                padding-bottom: 0px;
                mask: conic-gradient(from 165deg at top,#0000,#000 1deg 29deg,#0000 30deg) 50%/9.11px 100%
}

.bluebox {
                background-color:blue;
                color:white;
                border: none;
                padding-left: 20px;
                padding-right: 20px;
                padding-top: 10px;
                padding-bottom: 10px;
                mask: repeating-conic-gradient(from 60deg at 7px 50%,#0000,#000 1deg 59deg,#0000 60deg 180deg) -7px 50%/100% 8.08px
}


.greybox {
                background-color:#D2DCA3;
                color:black;
                border: none;
                padding-left: 10px;
                padding-right: 10px;
                padding-top: 10px;
                padding-bottom: 10px;
                mask: repeating-conic-gradient(from 60deg at 7px 50%,#0000,#000 1deg 59deg,#0000 60deg 180deg) -7px 50%/100% 8.08px
}


.moreyellow {
                background-color: #dfec3f;
                color:black;
                border: none;
                padding-left: 10px;
                padding-right: 10px;
                padding-top: 10px;
                padding-bottom: 10px;
                mask: repeating-conic-gradient(from 60deg at 7px 50%,#0000,#000 1deg 59deg,#0000 60deg 180deg) -7px 50%/100% 8.08px
}


.moregreen {
                background-color: #8FDA54;
                color:black;
                border: none;
                padding-left: 10px;
                padding-right: 10px;
                padding-top: 10px;
                padding-bottom: 10px;
                mask: repeating-conic-gradient(from 60deg at 7px 50%,#0000,#000 1deg 59deg,#0000 60deg 180deg) -7px 50%/100% 8.08px
}


.moreblue {
                background-color: #61cad5;
                color:black;
                border: none;
                padding-left: 10px;
                padding-right: 10px;
                padding-top: 10px;
                padding-bottom: 10px;
                mask: repeating-conic-gradient(from 60deg at 7px 50%,#0000,#000 1deg 59deg,#0000 60deg 180deg) -7px 50%/100% 8.08px
}


.moregreen {
                background-color: #75BD3D;
                color: black;
                border: none;
                padding-left: 10px;
                padding-right: 10px;
                padding-top: 10px;
                padding-bottom: 10px;
                mask: repeating-conic-gradient(from 60deg at 7px 50%,#0000,#000 1deg 59deg,#0000 60deg 180deg) -7px 50%/100% 8.08px
}


.moremag {
                background-color: #F96AD7;
                color: black;
                border: none;
                padding-left: 10px;
                padding-right: 10px;
                padding-top: 10px;
                padding-bottom: 10px;
                mask: repeating-conic-gradient(from 60deg at 7px 50%,#0000,#000 1deg 59deg,#0000 60deg 180deg) -7px 50%/100% 8.08px
}




.moreorange {
                background-color: #F9B72C;
                color: black;
                border: none;
                padding-left: 10px;
                padding-right: 10px;
                padding-top: 10px;
                padding-bottom: 10px;
                mask: repeating-conic-gradient(from 60deg at 7px 50%,#0000,#000 1deg 59deg,#0000 60deg 180deg) -7px 50%/100% 8.08px
}





#Change {
    height: auto;
    width: 80%;
}
#Change:hover {
    content: url('https://bennizone.net/graphix/change2.png');
    height: auto;
    width: 80%;
}



img.f {
  vertical-align: text-bottom;
}
            
 



.ezgallery.horizontal { 
  display: grid;
  grid-gap: 5px;
  gap: 5px;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  grid-auto-rows: minmax(100px, auto);
}

.ezgallery.horizontal a {
  text-align: center;
}

.ezgallery.horizontal img {
  text-align: center;
  vertical-align: middle;
  margin: 0 5px 5px 0;
  max-width: 100px;
  max-height: 100px;
  object-fit: contain;
  object-position: bottom;
}

            #topBar {
                width: 100%;
                height: auto;
                padding: 10px;
                background-color: transparent;
            }


            /* BELOW THIS POINT IS MEDIA QUERY */

            /*
    in order to keep things responsive, take your new height,
    and then subtrack it by 100. use this new number as the 
    "max-width" value below
    */

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

                aside {
                    width: 100%;
                }

                /* the order of the items is adjusted here for responsiveness!
      since the sidebars would be too small on a mobile device.
      feel free to play around with the order!
      */
                main {
                    order: 1;
                }

                #leftSidebar {
                    order: 2;
                }

                #rightSidebar {
                    order: 3;
                }

                #navbar ul {
                    flex-wrap: wrap;
                }