/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
    @font-face { 
        src: url(https://cinni.net/fonts/basiic.ttf); 
        font-family: basiic; /*adabelle*/
      }

    @font-face { 
      src: url(fonts/GrapeSoda.ttf); 
      font-family: GrapeSoda; /*GrapeSoda*/
    }
    
    #s-m-t-tooltip{
      /* basic */
      max-width: 300px;
      text-decoration: underline;
      z-index: 100;
      margin: 24px 14px 7px 12px;
      /* style and design */
      padding:10px;
      background: linear-gradient(180deg,#fff,#ebebeb);
      border: 1px solid rgba(0,0,0,.4);
      border-radius: 3px;
      box-shadow: 5px 5px 3px -3px rgba(0,0,0,.4);
      text-decoration:none;
    }
    
    #s-m-t-tooltip::before{
      background: url("data:image/svg+xml;charset=utf-8,%3Csvg width='20' height='20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M.5 1.5v18h18l-18-18Z' fill='%23fff' stroke='%23fff'/%3E%3Cpath d='M1 19.5H.5v-18l18 18H18' stroke='%23939393'/%3E%3C/svg%3E");
      content: "";
      height: 18px;
      left: 1em;
      position: absolute;
      top: -18px;
      width: 18px;
    }
    
      ::selection {
      color:white;
        background-color:  #3399ff;
    }
    ::-moz-selection {
      color:white;
        background-color:  #3399ff;;
    }
     
     mark{
    background-color: #3399ff;
    color: #fff;
    }  
    
    body {
      background-color: white;
      background-image: url('images/graphics/bg.png');
      background-repeat: repeat;  
      color: black;
      font-family: basiic;
      font-size:17px;
        margin: 0px;
    }
    
    p{
      margin:0px}
    a {
    transition: .4s;
    text-decoration:none!important;
      color:black;
    
    }
    
           .window-body ul{
        font-size: 15px!important;
        line-height: 135%!important;

      }
      

      #s-m-t-tooltip{
        /* basic */
        max-width: 300px;
        text-decoration: underline;
        z-index: 100;
        margin: 35px 14px 6px 5px;
        /* style and design */
        padding:10px;
        background: linear-gradient(180deg,#fff,#ebebeb);
        border: 1px solid rgba(0,0,0,.4);
        border-radius: 3px;
        box-shadow: 5px 5px 3px -3px rgba(0,0,0,.4);
        text-decoration:none;
      }
      
      #s-m-t-tooltip::before{
        background: url("data:image/svg+xml;charset=utf-8,%3Csvg width='20' height='20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M.5 1.5v18h18l-18-18Z' fill='%23fff' stroke='%23fff'/%3E%3Cpath d='M1 19.5H.5v-18l18 18H18' stroke='%23939393'/%3E%3C/svg%3E");
        content: "";
        height: 18px;
        left: 1em;
        position: absolute;
        top: -18px;
        width: 18px;
      }

      #main{
        margin: auto;
        width:72vw;
        padding-top:10px;
        padding-bottom:30px;
        text-align: center;

        }
        
        .mainBox{
        border-width:7px;
        border-style:solid;
        border-image: url("border.png") 7 fill round;
        font-family: basiic;
        font-size:17px;
        padding:10px;

      }

      .w-auto{
        width: auto;
        height: 100%;
      }

      .pixel{
        image-rendering: pixelated;
      }

      .h-auto{
        height: auto;
        width: 100%;
      }
      

      #flex {
        display: flex;
        justify-content: space-between;
        grid-gap: 20px; 
        margin-bottom: 10px;     
        }
        
        .flexChild {
          background-position: center;
          background-size: cover;
          background-attachment: fixed;
          padding: 0px;
          text-align: center;
          width: fit-content;
        }
      
          
  .child-equal {
    flex: 1;
  }
  .child-small {
    flex: 0.3;
  }

      #cont {
        display: grid;
        grid-template-columns: 26% 74%;
        grid-gap: 20px; 
        margin-bottom: 10px;
       
        } 

        #cont .mainBox{
          padding: 10px;
        } 

        #column {
          background-position: center;
          background-size: cover;
          background-attachment: fixed;
          padding:0px;
          text-align:center;
        }

         h3{
          color:white; 
          text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black, 0 0; 
          margin: 0px;
          margin-bottom:-15px; 
          z-index:3; 
          position: relative; 
          font-size:30px!important;
          z-index:10;
          text-align: center;
        }

        
        h4{
          color:white; 
          text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black, 0 0; 
          margin: 0px;
          margin-bottom: 5px;
          font-size:25px!important;
        }

        .webHidden{
          visibility: hidden;
          height: 0px;
        }
    
        #titleFront{
          margin-left:50px;
          font-family: GrapeSoda;
          color:white;
          width:370px;
          font-size:80px;
          padding-top:10px;
          text-align:left;
          background-position: right center;
          background-size: contain;
          background-repeat: no-repeat;
        }  
        
        #titleFront p{
          filter: drop-shadow(1px 1px 0 black) drop-shadow(-1px 1px 0 black) drop-shadow(0 -1px 0 black) drop-shadow(1px 0 black);
        }

        table{
          background-color:transparent;
          border: none!important;
          border-radius: 5px;
          font-family: basiic!important;
        }
        
        table > tbody > tr > :not(:last-child){
          border:none!important;
        }
        
        #mobileNav{
          position: sticky;
          top: 0px;
          z-index: 99;
          width: 100%;
        }

        #mobileNav a{
          color:black!important;
        }
        #mobileNav a:hover{
          color:white!important;
          transition-duration: 0ms;
        }


        
      @media (max-width: 800px) {
        #main{
          width: 80%;
          margin: auto;
        }

        #titleFront{
          font-size: 10vw;
          margin-left:10vw;
          width:47vw;
        }

        #flex {
          flex-direction: column;
          
        }
        
        .mobileHidden{
          visibility: hidden;
          height: 0px;
          position: absolute;
        }

        .webHidden{
          visibility:visible;
          height: auto;
        }

        ul[role="menubar"] > [role="menuitem"] {
          padding: 10px 1.5vw!important;
          font-size: 2vw;
        }
    
      }