/*Color codes for current theme: #304862; #9BB7DE; #5B4124; #EFDA96; #B6C9EA; */

/*Root area, many colors and settings overlap to accommodate changes between themes. Things must remain redundant in order for the main code to be copy and paste-able*/

:root {
       /*Colors*/
     --bg: url('/resources/images/misc_images/S.png'); /*"Background" Background page image*/ /*Star tiles*/
     --bc: rgba(239,218,150,0.85);   /*"Background color" Background color for the header*/ /*The transparent yellow*/
     --mc: #9BB7DE;                  /*"Main-color" Main content area*/ /*Light blue*/
     --sc: #EFDA96;                  /*"Side-color" Sidebar and button color*/ /*Yellow*/
     --tc: #304862;                  /*"text-color" Text color*/ /*Dark blue*/
     --otc: #E7E7E8;                 /*"Outer-text-color" Marquee and footer text color*/ /*Off-white*/
     --lt: #5B4124;                  /*"Link text" For the sidebar's dropdown text color*/ /*Brown*/
     --hc: #304862;                  /*"Hover-color" Shadow, background, text and link-hover color*/ /*Dark blue*/
     --lc: #5B4124;                  /*Link-color" Color of links before hover*/ /*Brown*/
     --hln: #B6C9EA;                 /*"Hover-link-nav" Background color for nav links on hover*/ /*lighter --mc color*/
     --fc: #EFDA96;                  /*"Footer-color" Color of the link in the footer*/ /*Brown*/
     
       /*Sizing*/
     --br-c: 2px;                    /*"Border Radius content" Border radius size for header, sidebar, and main area*/
     --br-e: 4px;                    /*"Border Radius element" Border radius size for C.box, buttons, images, and other things*/
     --ol-o: 4px;                    /*"Outline-offset" Second border position*/
     
       /*Borders*/
     --b-c: 10px double #5B4124;     /*"Border-content" large area borders*/ /*Color is brown*/
     --b-b: 7px double #5B4124;      /*"Border-button" Button borders*/
     --b-g: 10px double #5B4124;     /*"Border-gallery" Gallery border*/
     --b-h: 7px double #304862;      /*"Border hover" Hovered button borders*/
     --b-w: 3px dashed #5B4124;      /*"Bordered-words" Divider borders*/
     --ol: 3.5px solid #5B4124;      /*"Outline" Second border lines*/
     --olb: 0 solid #ffffff;         /*"Outline-button" Outline for buttons*/
     --olbh: 0 solid #ffffff;        /*"Outline-button-hover" Outline of buttons and links on hover*/        
     
       /*shadows*/ /*side-to-side, up and down, blur, opacity*/
     --ts: -2px 0 #304862, 0 2px #304862, 2px 0 #304862, 0 -2px #304862; /*"Text shadow" Footer and marquee*/
     --bs:  6px 6px 10px 4px rgba(91,65,36,0.9);            /*"Box-shadow" Border color shadows*/
     --hbs: 9px 4px 10px 4px rgba(91,65,36,0.9);            /*"Hover box-shadow" Border color shadows*/
     --ebs: 12px 12px 10px 4px rgba(48,72,98,0.9);          /*"Element box-shadow" Background color shadows*/
     --bbs:  6px 6px 10px 4px rgba(48,72,98,0.9);           /*"Button box-shadow" Main-content button color shadows*/
     --bhbs: 9px 4px 10px 4px rgba(48,72,98,0.9);           /*"Button hover box-shadow" Main-content button color shadows*/
  }
  
/*THIS AREA IS A COPY PASTE FOR ALL THEMES WITH ONLY SLIGHT ALTERATIONS BETWEEN THEM, IN ORDER FOR THEMES TO WORK, THE ROOT CODES MUST NOT BE TOUCHED; ONLY THEIR VAULES*/  
        
/*fonts file*/
            @font-face {
                font-family: Cadman;
                src: 
                url('/resources/Cadman_Roman.otf'),
                url('/resources/fonts/1_Cadman_Roman.woff'),
                url('/resources/fonts/2_Cadman_Italic.woff'),
                url('/resources/fonts/3_Cadman_Bold.woff'),
                url('/resources/fonts/4_Cadman_Bold_Italic.woff');
            } 
            

            header {
                width: auto;
                height: 140px;
                margin: 10px 0 45px;
                border: var(--b-c);
                outline: var(--ol);
                outline-offset: var(--ol-o);
                background-color: var(--bc);
                box-shadow: var(--ebs);
                border-radius: var(--br-c);
                box-sizing: border-box;
            }
            
            
            body {
                font-family: 'Cadman';
                margin: 0;
                font-size: 20px;
                color: var(--tc);
                background-image: var(--bg);
                background-size: auto;
                background-repeat: repeat;
                background-attachment: fixed; 
            }
            
            
            footer {
                width: 100%;
                height: 60px;
                padding: 5px;
                text-align: center;
                color: var(--otc);
                text-shadow: var(--ts);
            }
            
            
/*Gen layout info*/            
            #container {
                max-width: 1200px;   
                margin: 0 auto;
            }
            
 /*All links on the page besides NAV */
            #container a {
                color: var(--lc);
                font-weight: bold;
                text-decoration:none;
                display:inline-block;
                margin: 1px;
            }
            
            #container a:hover {
                color: var(--hc);
                text-decoration:underline;
                transform:rotate(-6deg);
            }
            
 /*Nav link on hover*/
            #container li a:hover {
                color: var(--hc);
                text-decoration:underline;
                transform:rotate(-6deg);
            }
            
            
/*"H" is footer link class*/
            a.H {
                color: var(--fc);
                font-weight: bold;
                text-decoration:none;
                display:inline-block;
                margin: 1px;
            }
            
            a.H:hover {
                color: var(--fc);
                text-decoration:none;
                transform:rotate(-180deg); 
            }
            
            
/*Image link*/
            #img a:hover {
                color: var(--hc);
                text-decoration:underline;
                transform:rotate(0deg);
            }
/*iframe*/            

             #audioDiv iframe {
                width: 100%;
                aspect-ratio: 16 / 9;
                height: auto;
            } 
            

/*Nav info*/
            #navbar {
                height: 45px;
                width: 100%;
            }
            
            #navbar ul {
                display: flex;
                padding: 0;
                margin: 0;
                list-style-type: none;
                justify-content: space-evenly;
            }
            
            #navbar li {
                padding-top: 28px;
            }

 /*Nav links*/
            #navbar li a {
                background-color: var(--sc);
                border: var(--b-b);
                outline: var(--olb);
                padding: 3px 15px;
                box-shadow: var(--bs);
                border-radius: var(--br-c);
                color: var(--lc);
                font-weight: 800;
                text-decoration: none;
                display:inline-block;
            }

 /*Nav link on hover*/
            #navbar li a:hover {
                background-color: var(--hln);
                border: var(--b-h);
                outline: var(--olbh);
                padding: 3px 15px;
                box-shadow: var(--hbs);
                color: var(--hc);
                text-decoration:none;
                transform:rotate(6deg);
            }
            

            #flex {
                display: flex;
            }
            
            
/*Side-bar info*/  
            #rightSidebar, #leftSidebar {
                max-width: 200px;
                height: fit-content;
                padding: 15px;
                border: var(--b-c);
                outline: var(--ol);
                outline-offset: var(--ol-o);
                font-size: smaller;
                text-align: left;     
                background-color: var(--sc);
                box-shadow: var(--ebs);
                border-radius: var(--br-c);
                box-sizing: border-box;

            }  

            #rightSidebar {
                margin-left: 50px;
                order: 1;
            }
            
            #leftSidebar {
                margin-right: 50px;
                order: 0;
            }
              
              
/*Main content info*/
            main {
                max-width: 1200px;
                padding: 60px;
                margin-bottom: 30px;
                border: var(--b-c);
                outline: var(--ol);
                outline-offset: var(--ol-o);
                order: 1;
                background-color: var(--mc);
                background-size: 100% 100%;
                box-shadow: var(--ebs);
                border-radius: var(--br-c);
                box-sizing: border-box;
                height: fit-content;
                flex: 1;
            }
            

/*Heading*/  
            h1,
            h2,
            h3 {
                color: var(--tc);
            }

            h1,
            h2 {
                font-size: 25px;
                text-align: center;
                border-bottom: var(--b-w);
            }   
            
            
/*HTML Line*/
            hr.dashed {
                   border-top: var(--b-w);
                   border-bottom: none;
                   margin-top: 20px;
                   margin-bottom: 20px;       
            }  
            
            figure {
                margin: 0;
                display: table;
                width: 1px;
            } 
            
            figcaption {
                margin: 0px 15px 5px 15px;
            }  
            
            
/*HTML writing styles*/
            strong {
                color: var(--hc); 
            }

            article {
                   margin-bottom: 20px;
            }    

            .indent {
                   margin-left: 12px;

            }    
            
            .bigger {
                   font-size:120%;
                   border-bottom: var(--b-w);             
            }  
            
            .smaller {
                   font-size:65%;   
            } 
            
            
/*Color select change*/
            ::-moz-selection { /* Code for Firefox */
                   color: var(--mc);
                   background-color: var(--tc);
            }

            ::selection {
                   color: var(--mc);
                   background-color: var(--tc);
            }
            
            
/*Small marquee*/
            .mar {
                   font-size:120%;
            } 
            
            
/*Column list info*/            
            .columns {
                    columns:2;
                    column-gap:15px;
            }
            
            .columns ul {
                    margin-top:0;
            }           
            
 
/*Chara-info sheet info*/            
            .tabs{
                display: flex; 
                flex-direction: row; 
                  
            }   

            .left {
                width: 60%;
                margin-right: 20px;

            }

            .right {
                width: 40%; 
                padding-top: 30px;

            }

            table {
                background-color: var(--sc);
                border: var(--b-g);
                outline: var(--olb);
                box-shadow: var(--bs);
                border-radius: var(--br-c);
                color: var(--lc);
                margin-top: 25px;
                width: 100%; 
                text-align: center;
                        
            }

            td, th, tr {
                padding: 5px 15px;
            }

           
           
/*Image classes*/           
            .img2 {
               display: block;
               margin-left: auto;
               margin-right: auto;
               border: var(--b-g);
               border-radius: var(--br-c);
               box-shadow: var(--bs);
            }  
                 

/*Image gallery info*/           
            .gallery {
                display: flex;
                flex-flow: wrap;
                justify-content: center;
            }
           
            .gallery img {
                       transition: 1s;
                       border: var(--b-g);
                       border-radius: var(--br-c);
                       margin: 20px 15px 5px 15px;
            }
           
           .gallery img:hover {
                       transform: scale(1.5);
            }   
           
            .hover_img a { position:relative; }
            .hover_img a span { position:absolute; display:none; z-index:99; }
            .hover_img a:hover span { display:block; }
           
           
/*Default button info*/
            .button {
                font-family: 'Cadman';    
                background-color: var(--sc);
                border: var(--b-b);
                outline: var(--olb);
                padding: 3px 15px;
                color: var(--lt);
                box-shadow: var(--bbs);
                border-radius: var(--br-c);
                font-weight: 800;
                text-decoration: none;
                display:inline-block;
                margin: 1px;
                margin-top: 5px;
            }

            .button:hover {
                background-color: var(--hln);
                border: var(--b-h);
                outline: var(--olbh);
                padding: 3px 15px;
                color: var(--hc);
                box-shadow: var(--bhbs);
                text-decoration:none;
            }

            .X {
              position:absolute;
              top:8px;
              left:240px;
              padding: 0 5px;
              background-color: var(--sc);
              border: var(--b-b);
              outline: var(--olb);
              border-radius: var(--br-c);
              color: var(--lt);

            }   
            
            .X:hover {
               background-color: var(--hln);
               border: var(--b-h);
               outline: var(--olbh);
               color: var(--hc);

            }    
            
/*Drop down button details for sidebar*/  
            .dropper {
              font-size: 17.5px;
              line-height: 32px;    
            }

            .dropbutton {
              background-color: var(--sc);
              border:  var(--b-b);
              outline: var(--olb);
              color: var(--lt);
              box-shadow: var(--bs);
              border-radius: var(--br-c);
              padding: 2px 8px;
              margin: 6px auto
            }

            .dropbutton:hover {
              background-color: var(--hln);
              border:  var(--b-h);
              outline: var(--olbh);
              color: var(--hc);
              box-shadow: var(--hbs);
              }

              
            .droplink {
              color: var(--lt); 
            }  
              
            .dropbutton:hover .droplink {
              color: var(--hc);
            }
              
            .dropdown, .dropdownP {
              background-color: var(--sc);
              border:  var(--b-b);
              border-radius: var(--br-c); 
              outline: var(--olb);
              color: var(--lt);
              padding: 5px 10px;
              margin-top: 8px;
              box-shadow: var(--bs);
            }  

            .dropdownP {
              max-height: 450px;
              overflow: auto;  
              box-shadow: var(--bbs);
            }

/*Setting's tab*/
            /*aside*/
            #settings {
              position: fixed;
              left: 0;
              top: 0;
              height: 100%;
              width: 300px;
              padding: 10px;
              display: none;
              overflow: auto;
              font-size: smaller;
              background-color: var(--sc);
              border: var(--b-c);
              outline: var(--ol);
              outline-offset: var(--ol-o);  
              box-shadow: var(--ebs);
              border-radius: var(--br-c);
              box-sizing: border-box;
              z-index: 5;
              
            }   


            #side-tabs {
             position: fixed;
             bottom: -10px;
             left: -51px;
            }

            #side-tabs ul {
            list-style-type: none;

            }    
            
            #side-tabs li a {
              font-size: smaller; 
              padding: 0 3px;
              margin: 5px 6px;
              border: var(--b-b);
              outline: var(--olb);
              background-color: var(--sc);
              box-shadow: var(--bbs);
              border-radius: var(--br-e);
              box-sizing: border-box;
              color: var(--lt);
              transition: left 0.5s;
              text-decoration: none;
              
            }

            #side-tabs li a:hover {
                background-color: var(--hln);
                border: var(--b-h);
                outline: var(--olbh);
                box-shadow: var(--bbs);
                color: var(--hc);
                text-decoration:none;
                transform:rotate(0deg);
                transform:translate(5px);
            }


/*Marquee info*/
            .container {
                        overflow: hidden;
                        white-space: nowrap;
            }

            .scrolling {
                       animation: marquee 10s linear infinite;
                       display: inline-block;
                       padding-right: 20px;
                       color: var(--otc);
                       text-shadow: var(--ts);
            }

            @keyframes marquee {
            from {
                      transform: translateX(0);
            }
            to { 
                      transform: translateX(-100%);
              }
            }
            
/*END OF COPY PASTE AREA*/

              /*MEDIA QUERY 1000*/
          
            @media only screen and (max-width: 1000px) {
                #flex {
                    flex-wrap: wrap;
                }

                .left {
                    width: 100%;
                    padding-bottom: 10px;
                }

                .right {
                    width: 100%;
                    padding-bottom: 5px;
                }
                
                .columns {
                   columns:2;
                }  
                
                .img3 {
                   float: left;
                   margin-right: 30px;
                }
                
                main {
                    /*order: 1;*/
                    padding: 40px;
                    order: 2
                }

                #leftSidebar, #rightSidebar {
                    margin-left: 50px;
                    margin-right: 50px;
                }

                #navbar ul {
                    flex-wrap: wrap;
                }  
                
                #navbar li {
                    padding-left: 4px;
                    padding-right: 4px;
                }
            }
            
            
            
            /*MEDIA QUERY 700*/

            @media only screen and (max-width: 700px) {
              
                .tabs{ 
                  flex-direction: column; 
                }

                #leftSidebar, #rightSidebar {
                    order: 1;
                    margin-bottom: 30px;
                    max-width: 550px;
                    margin-left: 50px;
                    margin-right: 50px;
                }


                main {
                    /*order: 1;*/
                    padding: 30px;
                }
                
                #navbar li {
                    padding-left: 2px;
                    padding-right: 2px;
                }
            }
            
            
            
            /*MEDIA QUERY 500*/
          
            @media only screen and (max-width: 500px) {
              
                .columns {
                   columns:1;
                }
                
                header {
                    height: 150px;
                }
                
                main {
                    /*order: 1;*/
                    padding: 20px;
                } 
                
                #navbar li {
                    padding-top: 12px;
                    z-index: 1;
                }
            }        
             
/* Start https://www.cursors-4u.com */ * {cursor: url(https://cur.cursors-4u.net/holidays/hol-4/hol325.cur), auto !important;} /* End https://www.cursors-4u.com */