/* Last Updated on 18 January 2025, 8:20pm */
:root {
    --sans-font: -apple-system, BlinkMacSystemFont, "Avenir Next", Avenir, "Nimbus Sans L", Roboto, Noto, "Segoe UI", Arial, Helvetica, "Helvetica Neue", sans-serif;
    --mono-font: Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", monospace;
    --nav-menu-font: Monospace, Consolas, "Andale Mono", "Ubuntu Mono";
    --color-fg: #000000;
    --color-bg: #FFFFFF;
    --color-android: #a4c639;
    --a-fg: blue;
    --h4: #373737;
    --text-font-size: 20px;
    --code-font-size: 20px;
    --footer-font-size: 20px;
    --input-font-size: 20px;
}
path { fill: black; }

article,
aside,
figcaption,
figure,
footer,
header,
hgroup,
section {
  display: block;
}

html {
  margin: 0;
  padding: 0;
  font-family: var(--sans-font);
  scroll-behavior: smooth;
  overflow: auto;
}

/* Content */
body {
  margin: 0;
  padding: 0;
  font-size: var(--text-font-size);
  font-family: var(--sans-font);
  color: var(--color-fg);
  background-color: var(--color-bg);
}

::selection {
  color: black;
  background: yellow;
}
a {
color: white;
}
/* header */
header {
color: black;
background-color: white;
/* position: fixed; */
width: 100%;
z-index: 3;
}
header img {
    vertical-align: middle;
}
header ul {
    margin: 0;
    padding: 0;
    list-style: none;
    overflow: hidden;
}
  
header li a, header li a:visited {
    display: block;
    padding: 0.75rem 20px 0.7rem 20px;
    text-decoration: none;
    border-bottom: 1px solid #333;
    color: blue;
    background: transparent;
}
header li a:hover,
header .menu-btn:hover {
    color: black;
}

header .logo {
    display: block;
    float: left;
    font-size: 2rem;
    font-weight: bold;
    padding: 10px 20px;
    text-decoration: none;
    color: yellow;
    text-shadow: 3px 3px 0 #333;
}
  
  /* menu */
  
header .menu {
    clear: both;
    max-height: 0;
    transition: max-height .2s ease-out;
}
  
  /* menu icon */
  
  header .menu-icon {
    cursor: pointer;
    display: block;
    float: right;
    padding: 28px 20px;
    position: relative;
    user-select: none;
  }
  
  header .menu-icon .navicon {
    color:var(--color-bg);
    background: var(--color-fg);
    display: block;
    height: 2px;
    position: relative;
    transition: background .2s ease-out;
    width: 18px;
  }
  
  header .menu-icon .navicon:before,
  header .menu-icon .navicon:after {
    color:var(--color-bg);
    background: var(--color-fg);
    content: '';
    display: block;
    height: 100%;
    position: absolute;
    transition: all .2s ease-out;
    width: 100%;
  }
  
  header .menu-icon .navicon:before {
    top: 5px;
  }
  
  header .menu-icon .navicon:after {
    top: -5px;
  }
  
  /* menu btn */
  
  header .menu-btn {
    display: none;
  }
  
  header .menu-btn:checked ~ .menu {
    max-height: 240px;
  }
  
  header .menu-btn:checked ~ .menu-icon .navicon {
    background: transparent;
  }
  
  header .menu-btn:checked ~ .menu-icon .navicon:before {
    transform: rotate(-45deg);
  }
  
  header .menu-btn:checked ~ .menu-icon .navicon:after {
    transform: rotate(45deg);
  }
  
  header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
  header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
    top: 0;
  }
  section {
    margin: 0.5em 0.75em;
    font-size: 1.2rem;
    min-height: 600px;
  }
  section p {
    font-size: var(--text-font-size);
    line-height: 160%;
  }
  section img {
    width: 100%;
    height: auto;
  }

code {
    font-size: var(--code-font-size);
    vertical-align: middle;
}
footer {
    margin: 1rem 0;
    padding: 1rem;
    font-family: var(--mono-font);
    font-size: 80%;
    color: var(--color-ag);
    clear: both;
}
footer a, footer a:visited {
    color: var(--a-fg);
    padding:0.25rem 0.5rem 0.25 0;
}
footer a:hover {
    color: var(--color-bg);
    background-color: var(--color-fg);
    text-decoration: none;
}
h1 { 
    margin: 0.25em 0;
    font-size: 2.5rem;
    font-weight: normal;
  }
  h4 {
    font-style: italic;
  }

input[type=text], textarea {
    margin: 0.5rem 0;
    padding:5px;
    font-family: var(--mono-font);
    font-size: var(--input-font-size);
    border:1px solid gray;
    width: 97%;

}
button {
    margin: 1rem 0 0.5rem 0;
    font-size: var(--input-font-size);
    background-color: (--color-bg);
}
blockquote {
    margin-left:0;
    padding-left:1rem;
    border-left:15px solid gray;
    text-align: justify;
    font-family: var(--mono-font);
}
pre code {
    word-wrap: break-word;
    color:pink;
}
/* Custom */
.emoji {
    font-size: 3rem;
    vertical-align: middle;
}
.dabba {
    width:100%;
    float:none;
    vertical-align: middle;
    border: 1px solid black;
    margin: 1rem 0;
    padding: 1rem;
    /* to prevent the padding from changing width, use box-sizing */
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
    text-align: justify;
}
.idabba {
    width: 50%;
    float:left;
    vertical-align: middle;
    /* to prevent the padding from changing width, use box-sizing */
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}
.image {
    box-shadow: 1px 1px 0.5rem 1px rgba(0,0,0,1);
}
p.jumbo {
    font-family:'Times New Roman', Times, serif;
    font-size:1.7rem;
    font-style: italic;
}
div.jumbo {
    margin:0 0 2rem 0;
    font-family: var(--mono-font);
    font-size: 1.2rem;
    display: block;
}
.center {
    text-align: center;
}
.right {
    margin:0 auto;
    padding:0;
    clear:both;
}
.grid {
    display:flex;
    flex-wrap: wrap;
}
.coll{
    flex:1 1 1 1;
}

/* Desktop */
@media (min-width: 48rem) {
    header, main, footer {
      margin: auto;
      max-width:1280px;
    }
    header {
        padding-top: 1rem;
    }
    header span {
        font-family:Helvetica, sans-serif;
        font-size:2rem;
    }
    header ul {
      margin: 0.25em 0.25em;
    }
    header li {
      float: left;
      z-index: 99;
    }
    header li a {
      margin: 0.5rem 1.5rem 0 0;
      padding: 0.5rem 0.5rem 1rem 0.5rem;
      text-align: center;
      border-bottom:5px solid black;
      font-family:var(-nav-menu-font);
      font-variant: small-caps;
    }
    header li a:hover {
        border-bottom: 5px solid gray;
    }
    header .logo {
      display: inline-block;
    }
    header .menu {
      clear: none;
      max-height: none;
      background-color: white;
    }
    header .menu-icon {
      display: none;
    }
    .wrappr {
      background-color: var(--color-bg);
    }
    header .logo {
      float: none;
    }
    main {
    }
    .right {
        margin: 0;
        padding: 0;
        float:right;
        display:block;
    }
    .right img {
        background:gold
    }
    section {
      text-align: left;
      vertical-align: top;
      padding: 1rem 0;
    }
    section img {
        width: auto;
        height: auto;
    }
    .dabbas {
        clear: both;
    }
    .dabba {
        width:47%;
        float:left;
        margin-right: 1rem;
    }
    .dabba h2 {
        font-weight: normal;
    }
    .dabba input {
        width: 98%;
    }
    .dabba textarea {
        width: 98%;
        height: 200px;
    }
    .idabba {
        width:100px;
        float:left;
    }
    .image {
        margin-left: 1.5rem;
        padding:0;
    }    
    footer {
        /* to prevent the padding from changing width, use box-sizing */
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
}