/****** body ******/

            html, 
            body {
                max-width: 100%;
                overflow-x: hidden;
                background-color: rgba(0,0,0,0); 
            }

           /****** fonts ******/
            
            @font-face { 
                font-family: 'B612'; src: url(/indeximg/jummbox/B612-Regular.otf); }
            
            
            @font-face { 
                font-family: 'B612'; src: url(/indeximg/jummbox/B612-Regular.otf); }


            body {
                background-color: transparent;
                color: #ffffff;
                /* default font color */
                font-family: 'B612';
                /* default font */
                font-size: 20px;
                /* default font size */
                padding: 10px;
            }

svg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index:-10;
}

    img{
     filter: drop-shadow(2px 1px  #000000);
   }


.links {
    position: fixed;
    bottom: 20px;
    right: 20px;
    font-size: 18px;
    font-family: sans-serif;
}
a {
    text-decoration: none;
    color: black;
    margin-left: 1em;
}
a:hover {
    text-decoration: underline;
}
a img.icon {
    display: inline-block;
    height: 1em;
    margin: 0 0 -0.1em 0.3em;
}
            
            
a:link {
  color: pink;
  background-color: transparent;
  text-decoration: none;
}

a:visited {
  color: pink;
  background-color: transparent;
  text-decoration: none;
}

a:hover {
  color: white;
  background-color: transparent;
  text-decoration: underline;
}

            /****** wrappers ******/

            #wrapper {
                max-width: 1200px;
                /* width of entire page - can be changed but i don't recommend anything bigger than 1000! got to make sure the page fits on the screen */
                max-height: 100%;
                width: fit-content;
                height: fit-content;
                width: -moz-fit-content;
                height: -moz-fit-content;
                animation: fadeEffect 1s;
                margin: auto;
            }

            @keyframes fadeEffect {
                from {
                    opacity: 0;
                }

                to {
                    opacity: 1;
                }
            }

            #mainwrapper {
                margin - top: 15px;
                /* space between containers */
                display: flex;
                gap: 15px;
                /* space between containers */
                justify-content: center;
                justify-content: space-between;
            }
            
                        /****** main containers ******/

            #main {
                width: 900px;
                /* width of main container - should add up to 100 when added to #sidebar width */
                height: 240px;
                /* you can make this taller if you'd like */
                border: 3px solid transparent;
                border-radius: 20px;
                /* border of main container */
                padding: 10px;
                overflow: auto;
                background-color: rgba(74,77,147,0.9);
                color: #ffffff;
                /* background color of main container */
                overflow-y: hidden;
                /* hide vertical */
                overflow-x: hidden;
                /* hide horizontal */
                              box-shadow: 6px 6px rgba(0,0,0,0.9);
}

            #key {
                width: 150px;
                /* width of main container - should add up to 100 when added to #sidebar width */
                height: 130px;
                /* you can make this taller if you'd like */
                border: 3px solid transparent;
                border-radius: 20px;
                /* border of main container */
                padding: 10px;
                overflow: auto;
                background-color: rgba(74,77,147,0.9);
                color: #ffffff;
                /* background color of main container */
                overflow-y: hidden;
                /* hide vertical */
                overflow-x: hidden;
                /* hide horizontal */
                              box-shadow: 6px 6px rgba(0,0,0,0.9);
}


            #big {
                text-align: left;
                width: 700px;
                /* width of main container - should add up to 100 when added to #sidebar width */
                height: 500px;
                /* you can make this taller if you'd like */
                border: 3px solid transparent;
                border-radius: 20px;
                /* border of main container */
                padding: 0px;
                overflow: auto;
                background-image: url();
                background-color: rgba(74,77,147,0.8);
                color: #ffffff;
                /* background color of main container */
                overflow-y: scroll;
                /* hide vertical */
                overflow-x: hidden;
                /* hide horizontal */
                              box-shadow: 6px 6px rgba(0,0,0,0.8);
}

            .responsive-iframe {
              border: 0px;
              width:750px;
              background:transparent;
            }

 /* Style the buttons that are used to open and close the accordion panel */
.accordion {;
background-color: #4a4d93;;
color: #ffffff;
  cursor: pointer;
font-family: 'B612';
                /* default font */
                font-size: 15px;
                /* default font size */
                padding: 10px;
  width: 100%;
  text-align: left;
  border: none;
  outline: none;
  transition: 0.4s;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .accordion:hover {
  background-color: #33243f;
}

/* Style the accordion panel. Note: hidden by default */
.panel {
  font-size: 13px;
  padding: 0 18px;;
  display: none;
  overflow: none;
} 

        .parent {
        display: flex;
        justify-content: center;
        justify-content: space-between;
        width:980px;
        }

            #imagefloat  {
            float: right;    
             margin: -20px 15px 0px 10px;

            }
            
            


            #foo {
                position: fixed;
                bottom: -12px;
                left: 8px;
            }
            
            #foo img {
                filter:         url(~"data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
                -webkit-filter: grayscale(100%);
                -moz-filter:    grayscale(100%);
                -ms-filter:     grayscale(100%);
                -o-filter:      grayscale(100%);
                filter: gray; 
            }

            #foo img:hover {
                filter: none;
                cursor: pointer;
            }