/* CSS Reset & Vars Styles v3.0 by Ron Craig*/
/* Written 29 Oct 2020 : Revised 15 Nov 2024 */
/* Flexbox startup
   # - id="" - can only be used 1nce per page
   . - class="" - can be used multiple times per page */
/*  The width & height properties do not include padding, border, & margin of the element  */

/* May have to use Cntrl+F5 to reset website cash to have some revisions of css to take effect */

  /* @import url('https://fonts.googleapis.com/css2?family=Anek+Telugu&family=Gemunu+Libre:wght@300;400&family=Noto+Sans+Symbols+2&family=Rationale&family=Sarpanch&family=Tomorrow:ital,wght@0,200;0,400;1,600&family=ZCOOL+QingKe+HuangYou&family=Zen+Dots&display=swap'); */
  /* font-family: 'Anek Telugu', sans-serif;
  font-family: 'Gemunu Libre', sans-serif;
  font-family: 'Noto Sans Symbols 2', sans-serif;
  font-family: 'Rationale', sans-serif;
  font-family: 'Sarpanch', sans-serif;
  font-family: 'Tomorrow', sans-serif;
  font-family: 'ZCOOL QingKe HuangYou', cursive;
  font-family: 'Zen Dots', cursive; */

  @import url('https://fonts.googleapis.com/css2?family=Play:wght@400;700&display=swap');
  @import url('https://fonts.googleapis.com/css2?family=Titillium+Web:ital,wght@1,200;1,300;1,400;1,700&display=swap');
  @import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,wght@1,200;1,300;1,400;1,700&display=swap');
  @import url('https://fonts.googleapis.com/css2?family=PT+Sans:ital@1&display=swap');
  @import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@1,300&display=swap');
  @import url('https://fonts.googleapis.com/css2?family=Fira+Mono&display=swap');
  /* @import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap'); */
  /* @import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@1,200;1,400;1,700&display=swap'); */
  /* @import url('https://fonts.googleapis.com/css2?family=B612+Mono&display=swap'); */
  /*@import url('https://fonts.googleapis.com/css2?family=Saira:ital,wght@0,200;0,400;1,200;1,400;1,700&display=swap');*/
  /* @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Symbols+2&display=swap'); */
  /* @import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;700&display=swap'); */
  /* font-family: 'Dancing Script', cursive; */
  @import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;700&family=Roboto:ital,wght@0,400;0,700;1,400;1,700&display=swap');
  /* font-family: 'Dancing Script', cursive;
  font-family: 'Roboto', sans-serif; */
  @import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');
  /*font-family: 'Ubuntu', sans-serif;*/

  /*@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css');*/
  @import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css');
  /*  -------------------------------------- Reset Section ------------------------------------------ */
  /* Basic Setup & Master Reset */
  :root {
    --max-width:1250px;
    --inner-width:1050px;
    --html-tag:#fe5b33;
    --css:#007db7;
    --js:#fa9c2a;
    --bg-navbar:#111; //#a0f;  //#800080;
    --bg-test: ; //#bbb;
    --primary-color:#28a745;
    --secondary-color:#0284d0;
    --forth-color:#f0f;
    --page-1-color:steelblue;
    --page-2-color:tan;
    --page-3-color:teal;
    --page-4-color:slateblue;
  }
  * {
    box-sizing:border-box;
    margin:0;
    padding:0;
    border:0;
  }
  html { font-size:62.5%; }
  html {
    scrollbar-width: auto;
    scrollbar-color: var(--bg-navbar) #333;
  }
  body {
    color:#333;
    font:italic 2rem/1.4 Roboto,Arial,Helvetica,sans-serif; /* /2.5rem */
    /* background:#aaa url('http://ocarc.us/images/brickbg.jpg') repeat; */
    /* background:#333 url('https://source.unsplash.com/1600x900/?star,space') no-repeat center center/cover; */
    background:#333 url('https://source.unsplash.com/featured/?star') no-repeat center center/cover;
    /* background:#fff; */
    background-attachment:fixed;
    /* position:relative; */
  }
  body:before {
    content:'';
    position:fixed;
    background:rgba(0,0,0,0.5);
    z-index:-1;
    top:0;
    left:0;
    width:100%;
    height:100%;
  }
  body * { z-index:2; }
  button, input, textarea, select { font:inherit; }
  a {
    text-decoration:none;
    color:#f90;
  }
  ul { list-style:none; }
  p { margin:1rem 0; }
  hr { width:100%; border:1px solid #ccc; margin:0 0 1rem; }
  h1, h2, h3 {
    padding:1rem 0;
    color:#f91;
    text-align:center;
    font-style:italic;
    line-height:1.2;
    font-family:cursive, sans-serif;
  }
  img {
    width:100%;
    border-radius:5px;
  }

  .container {
    max-width:var(--max-width);
    margin:0 auto;
    padding:0 1rem;
    overflow:auto;
    /* border:1px solid #fff;
    border-width:0 1px 1px; */
  }
  .contents { z-index:2; }

  /* Navbar top */
  #navbar {
    position:sticky;
    top:0;
    z-index:10;
  }
  .navbar {
    width:100%;
    height:60px; /* 70px common */
    position:sticky;
    top:0;
    background:var(--bg-navbar);
    overflow:auto;
    z-index:10;
  }
  .navbar .container {
    max-width:var(--max-width);
    height:100%;
    padding:0 2rem;
    display:flex;
    justify-content:space-between;
    align-items:center;
    /* flex-direction:row-reverse; */
    position: relative;
    /* border:1px solid #fff;
    border-width:0 1px; */
  }
  .navbar .container .logo,
  .navbar .container .logo a {
    font:italic bold 3rem cursive, sans-serif;
  }
  .navbar .container .logo a:hover {
    color:#ff0;
    border:none;
    background:transparent;
  }
  .navbar .container a {
    font:italic 2rem cursive, sans-serif;
  }
  .navbar .container .btn  { display:none;padding:0.8rem 3rem; }
  @media(max-width:768px) {
    .navbar .container .btn { display:block; }
    .page-menu { display:none; }
  }
  .navbar ul {
    display:flex;
  }
  .navbar ul li a {
    display: inline-block;
    margin-left: .5rem;
    padding: .5rem 1.5rem .8rem;
    color:#fff;
    text-align: center;
    border: 1px solid var(--bg-navbar);
    border-radius: 5px;
  }
  .navbar ul li a:hover,
  .navbar .current {
    border: 1px solid #fff;
    color: #ff0;
    background: #00f;
  }

  /* .navbar ul {
    display:flex;
    align-items:center;
  }
  .navbar ul li {}
  .navbar ul li a {
    margin:0 2px;
    padding:10px;
    color:#fff;
    border-radius:5px;
  }
  .navbar ul li a:hover,
  .navbar ul li a.current {
    background:#00f;
  } */

  /* Page flexbox */
  .page-container {
    max-width:var(--max-width);
    margin:auto;
    padding:0.5rem;
    display:flex;
    /* justify-content:center; */
    /* align-items:center; */
    /* align-content:center; */
    /* flex-direction:row-reverse; */
    /* border:1px solid #fff;
    border-width:0 1px 1px; */
  }
  .page-menu {
    flex:0 0 200px;
    z-index:9;
  }
  #ToC {
    width:200px;
    position:fixed;
  }
  .page-main {
    flex:0 1 var(--inner-width);
    margin:auto;
    padding:0.5rem;
    text-align:center;
    /* border:1px solid #fff;
    border-width:0 1px 1px 1px; */
  }
  .main { width:100%; text-align:center; }
  .header, .headr2 {
    min-height:120px;
    display:flex;
    justify-content:center;
    align-items:center;
    /* margin:0 auto; */
    padding:0 0 1rem;
    text-align:center;
    color:#f91;
    font:italic bold 4.4rem/1.2 cursive, sans-serif;
    /* border:1px solid #fff;
    border-width:0 1px 1px; */
  }

  .imgslydr {
    display:flex;
    max-width:1019px;
    margin:20px auto 15px;
    overflow-x:auto;
    scrollbar-color: #333 #555;
  }
  @media(max-width:1250px) {
    .imgslydr { max-width:765px; }
  }
  @media(max-width:1020px) {
    .imgslydr { max-width:510px; }
  }
  @media(max-width:550px) {
    .imgslydr { max-width:254px; }
  }
  .imgslyd {
    flex:1 0 248px;
    width:248px;
    height:183px;
    margin:0 3px;
    border-radius:5px;
  }

  .pstyl {
    margin:0 auto 10px;
    padding:10px;
    border:1px solid #aaa;
    border-radius:10px;
    text-align:center;
    color:#333;
    /* font:italic bold 2.4rem/1.3 Arial, Helvetica, sans-serif; */
    font:italic bold 2.4rem Georgia, serif;
  }
  .spanBlok {
    margin:0 auto;
    display:block;
    color:#333;
    font:italic bold 2.4rem Arial, Helvetica, sans-serif;
  }
  .msgStyleFancy { font:italic bold 2.2rem/1.4 cursive, sans-serif; }
  .msgLink {
    text-decoration:none;
    color:#f91;
    font:italic bold 3.6rem/1.4 cursive, sans-serif;
  }
  .videos { display:flex; }
  .vid50 {
    width:50%;
    padding:5px;
  }
  .vid50 iframe {
    width:90%;
    height:260px;
  }
  .uTubeBtn {
    line-height:30px;
    display:flex;
    justify-content:center;
    align-items:center;
    color:#fff;
    text-align:center;
    font-weight:bold;
  }

  .skey {
    max-width:1000px;
    margin:10px auto;
    padding:10px;
    background:#ccc;
  }
  /* EOF */