/* Externals */

@font-face {
  font-family: Inconsolata;
  src: url(/fonts/inconsolata/Inconsolata-VariableFont_wdth,wght.ttf);
}
@font-face {
  font-family: NothingYouCouldDo;
  src: url(/fonts/Nothing_You_Could_Do/NothingYouCouldDo-Regular.ttf);
}

/* Document Level */
:root {
  /* Persistant Colors */
  --transparent: rgb(0,0,0,0);
  /* monochromatics */
  --black: #000;  /* rgb() */
  --grey1: #111;  /* rgb() */
  --grey2: #222;  /* rgb() */
  --grey3: #333;  /* rgb() */
  --grey4: #444;  /* rgb() */
  --grey5: #555;  /* rgb() */
  --grey7: #777;  /* rgb() */
  --grey9: #999;  /* rgb() */
  --greya: #aaa;  /* rgb() */
  --greyb: #bbb;  /* rgb() */
  --greyc: #ccc;  /* rgb() */
  --greyd: #ddd;  /* rgb() */
  --white: #fff;  /* rgb() */
  
  /* legacy
  --darkgrey: #333;
  --medigrey: #555;
  --litegrey: #bbb;*/
  
  /* brand colors */
  --mwx_darkgreen: #393;   /* rgb() */
  --mwx_green: #0c0;       /* rgb() */
  --mwx_litegreen: #9c0;   /* rgb() */
  --mwx_yellow: #ed0;      /* rgb() */
  --mwx_liteyellow: #fe7;  /* rgb() */
  --mwx_yelorange: #fc0;   /* rgb() */
  --mwx_orange: #f90;      /* rgb() */
  --mwx_redorange: #f60;   /* rgb() */
  --mwx_red: #f30;         /* rgb() */
  --mwx_purplered: #f39;   /* rgb() */
  --mwx_purple: #72c;      /* rgb() */
  --mwx_darkpurple: #52b;  /* rgb() */
  --mwx_darkblue: #03c;    /* rgb() */
  --mwx_blue: #06c;        /* rgb() */
  --mwx_bluegreen: #0cc;   /* rgb(0, 204, 204) */
  
  
  /* official colors */
  --facebook_blue: #0866ff; /* rgb(8, 102, 255) */
  --youtube_red: #ff0033;   /* rgb(255, 0, 51) */
  
  /* System Colors (default:light)*/
  --mws_primary_foreground:   /*#111*/ var(--grey1);          /*cr 18.88:1*/
  --mws_primary_background:   /*#fff*/ var(--white);          /**/
  --mws_primary_link:         /*#03c*/ var(--mwx_darkblue);   /*cr 8.95:1*/
  --mws_primary_hover:        /*#72c*/ var(--mwx_purple);     /*cr 7.27*/
  --mws_running_foreground:   /*#111*/ var(--grey1);          /*cr 9.83:1*/
  --mws_running_background:   /*#bbb*/ var(--greyb);          /**/
  --mws_running_button:       /*#aaa*/ var(--greya);          /**/
  --mws_running_link:         /*#03c*/ var(--mwx_darkblue);   /*cr 4.66:1*/
  --mws_running_hover:        /*#52b*/ var(--mwx_darkpurple); /*cr 4.68:1*/
  --mws_contrast_foreground:  /*#fff*/ var(--white);         /*cr 12.63:1*/
  --mws_contrast_background:  /*#333*/ var(--grey3);         /**/
  --mws_contrast_link:        /*#f90*/ var(--mwx_orange);    /*cr 5.9:1*/
  --mws_contrast_hover:       /*#fc0*/ var(--mwx_yelorange); /*cr 8.35:1*/
  /* Menu Colors (default:light) */
  --mwx_menu_outline: #333;
  --mwx_menu_home: rgba(119, 187, 119, 1);
  --mwx_menu_resources: rgba(255, 170, 85, 1);
  --mwx_menu_games: rgba(119, 187, 238, 1);
}
/* */
.dark-mode-override {  
  /* System Colors (default:dark)*/
  --mws_primary_foreground:  /*#fff*/ var(--white);          /*cr 7.45:1*/
  --mws_primary_background:  /*#555*/ var(--grey5);          /**/
  --mws_primary_link:        /*#fc0*/ var(--mwx_yelorange);  /*cr 4.93:1*/
  --mws_primary_hover:       /*#fe7*/ var(--mwx_liteyellow); /*cr 6.3:1*/
  --mws_running_foreground:  /*#fff*/ var(--white);          /*cr 12.63:1*/
  --mws_running_background:  /*#333*/ var(--grey3);          /**/
  --mws_running_button:      /*#222*/ var(--grey2);          /**/
  --mws_running_link:        /*#f90*/ var(--mwx_yelorange);  /*cr x:1*/
  --mws_running_hover:       /*#fc0*/ var(--mwx_liteyellow); /*cr x:1*/
  --mws_contrast_foreground: /*#111*/ var(--grey1);          /*cr 9.83:1*/
  --mws_contrast_background: /*#bbb*/ var(--greyb);          /**/
  --mws_contrast_link:       /*#03c*/ var(--mwx_darkblue);   /*cr 4.66:1*/
  --mws_contrast_hover:      /*#52b*/ var(--mwx_darkpurple); /*cr 4.68:1*/
  /* Menu Colors (default:dark) */
  --mwx_menu_outline: #fff;
  --mwx_menu_home: #4F6A4F;
  --mwx_menu_resources: #856341;
  --mwx_menu_games: #4F6A7E;
}
.light-mode-override {
  /* System Colors (default:light)*/
  --mws_primary_foreground:  /*#111*/ var(--grey1);          /*cr 18.88:1*/
  --mws_primary_background:  /*#fff*/ var(--white);          /**/
  --mws_primary_link:        /*#03c*/ var(--mwx_darkblue);   /*cr 8.95:1*/
  --mws_primary_hover:       /*#72c*/ var(--mwx_purple);     /*cr 7.27*/
  --mws_running_foreground:  /*#111*/ var(--grey1);          /*cr 9.83:1*/
  --mws_running_background:  /*#bbb*/ var(--greyb);          /**/
  --mws_running_button:      /*#aaa*/ var(--greya);          /**/
  --mws_running_link:        /*#03c*/ var(--mwx_darkblue);   /*cr 4.66:1*/
  --mws_running_hover:       /*#52b*/ var(--mwx_darkpurple); /*cr 4.68:1*/
  --mws_contrast_foreground:  /*#fff*/ var(--white);         /*cr 12.63:1*/
  --mws_contrast_background:  /*#333*/ var(--grey3);         /**/
  --mws_contrast_link:        /*#f90*/ var(--mwx_orange);    /*cr 5.9:1*/
  --mws_contrast_hover:       /*#fc0*/ var(--mwx_yelorange); /*cr 8.35:1*/
  /* Menu Colors (default:light) */
  --mwx_menu_outline: #333;
  --mwx_menu_home: rgba(119, 187, 119, 1);
  --mwx_menu_resources: rgba(255, 170, 85, 1);
  --mwx_menu_games: rgba(119, 187, 238, 1);
}

@media (prefers-color-scheme: dark) {
  :root {    
    /* System Colors (default:dark)*/
  --mws_primary_foreground:  /*#fff*/ var(--white);          /*cr 7.45:1*/
  --mws_primary_background:  /*#555*/ var(--grey5);          /**/
  --mws_primary_link:        /*#fc0*/ var(--mwx_yelorange);  /*cr 4.93:1*/
  --mws_primary_hover:       /*#fe7*/ var(--mwx_liteyellow); /*cr 6.3:1*/
  --mws_running_foreground:  /*#fff*/ var(--white);          /*cr 12.63:1*/
  --mws_running_background:  /*#333*/ var(--grey3);          /**/
  --mws_running_button:      /*#222*/ var(--grey2);          /**/
  --mws_running_link:        /*#f90*/ var(--mwx_yelorange);  /*cr x:1*/
  --mws_running_hover:       /*#fc0*/ var(--mwx_liteyellow); /*cr x:1*/
  --mws_contrast_foreground: /*#111*/ var(--grey1);          /*cr 9.83:1*/
  --mws_contrast_background: /*#bbb*/ var(--greyb);          /**/
  --mws_contrast_link:       /*#03c*/ var(--mwx_darkblue);   /*cr 4.66:1*/
  --mws_contrast_hover:      /*#52b*/ var(--mwx_darkpurple); /*cr 4.68:1*/
  /* Menu Colors (default:dark) */
  --mwx_menu_outline: #fff;
  --mwx_menu_home: #4F6A4F;
  --mwx_menu_resources: #856341;
  --mwx_menu_games: #4F6A7E;
  }
}

html {
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;  
}

/* Body Level */
body {
  font: 16px Inconsolata, Consolas, "Courier New", Courier, Monospace;
  padding: 0px;
  margin: 0px;
  color:var(--mws_primary_foreground);
  background-color:var(--mws_primary_background);
}
p {
  line-height:1.4;
}
sup {
    line-height: 0;
}
a:link, a:visited {
  color: var(--mws_primary_link);
  /* color: light-dark(var(--light-bg), var(--dark-bg)) */
  font-weight: bold;
}
a:hover, a:active {
  color: var(--mws_primary_hover);
  /* color:light-dark(var(--mwx_purple), var(--mwx_orange)); */
  font-weight: bold;
  /* text-shadow: 0 12px 16px 0 var(--black),0 17px 50px 0 var(--black); */
}

/* Div Class Spatial Formatting */
.dcsf_full {
  position: relative;
  width: 100%;
}
.dcsf_single {
  position: relative;
  width: 90%;
  max-width: 940px;
  margin: 0px auto;
  float: none;
  clear: both;
}
.dcsf_single_center {
  width: 90%;
  max-width: 940px;
  margin: 0px auto;  
}
.dcsf_half {
  position: relative;
  width: 50%;
  /* min-width: 382.5px; */
  margin: 0px auto;
  float: left;
}
.dcsf_padding {
  /* reserved */
}

/* Accents and Effects */
.color_gradient {
  background: linear-gradient(
                to right, 
                var(--mwx_bluegreen)   0%, 
                var(--mwx_bluegreen)   4%, 
                var(--mwx_blue)       13%, 
                var(--mwx_darkblue)   21%, 
                var(--mwx_purple)     29%, 
                var(--mwx_purplered)  38%, 
                var(--mwx_red)        46%, 
                var(--mwx_redorange)  54%, 
                var(--mwx_orange)     63%, 
                var(--mwx_yelorange)  71%, 
                var(--mwx_yellow)     79%, 
                var(--mwx_litegreen)  88%, 
                var(--mwx_darkgreen)  96%, 
                var(--mwx_darkgreen) 100%);
}

/* Polariod Effect */
/* Use Example
<div class="pol_container" style="transform: rotate(5deg); --w: 250px">
  <div class="pol_image">
    <img src="" alt="" style="object-fit:cover;">
  </div>
  <div class="pol_text">
  </div>
</div>

*/
.pol_container {
  --w:200px;
  width:var(--w);
  height:calc(var(--w)*1.2);
  background-color: var(--white);
  box-shadow: 5px 7px 7px 5px #000;
}
.pol_image {
  width:88.6%;
  height:73.8%;
  margin: 5.7% auto 5%;
  border: 1;
}
.pol_text {
  width:90%;
  height:13.5%;
  margin: 5.7% auto 5.7%;
  text-align: center;
  font-family: NothingYouCouldDo, Cursive;
  color: #222;
}


/* social media classes */
.social {
  vertical-align: middle;
  height: 75px;
  margin: 12px;
}

/* Responsive layouts - width < 850px go to tablet mode */
@media (max-width: 850px) {

  /* Shift body containers */
  .dcsf_half {
    position: relative;
    width: 100%;
    max-width: 940px;
    margin: 0px auto;
    float: none;
    clear: both;
  }
}

/* Responsive layouts - width < 600px go to mobile mode */
@media (max-width: 600px) {
  #header_image {
    display:none;
  }
  /* Shift body containers */
  .dcsf_half {
    position: relative;
    width: 100%;
    max-width: 940px;
    margin: 0px auto;
    float: none;
    clear: both;
  }
}