* {
            box-sizing: border-box;
        }
        header {
            display: block;
            width: 100%;
            background-color: #4068a8;
            margin-bottom: 8px;
        }
        body {
            padding: 0;
        }
        #bio::placeholder {
            color:lightslategray;
        }
        .uBio {
            color:lightslategray;
        }

        .comPlayer {
            display: block;
            margin-left:0;
            width: 100%;
            min-height: 400px;
            border: 1px solid #4068a8;
            padding-top: 6px;
            padding-right: 0px;
            margin-right: 0;
        }
        .comic-strip {
            padding-left: 0;
            width: 100%;
        }
        img#comic-strip {
            display: block;
            position: relative;
            left: 3px;
            margin-left: 0;
            width: 98%;
            padding-left: 0;
        }
        
        .uComment {
            display: block;
            position: static;
            top: 5px;
            margin-top: 0;
            margin-left: 50px;
        }
        tr.show-comic {
            display: table-row;
        }
        
/* Menus */
        
        nav.btn {
            width: 30px;
        }
        .menuBtn {
            display: block;
            background-color: #4068a8;
            width: 30px;
            height: 2px;
            margin-bottom: 1px;
        }
        nav {
            position: relative;
            left: 5%;
        }
        nav > a {
            display: inline-block;
            width: calc(90%/4);
        }
        nav > a:link {
            text-decoration: none;
        }
        nav > ul {
            margin: 8px;
        }
        #menu {
            display: none;
        }
        #menu > li {
            position: relative;
            left: 26px;
            width: 100%;
            margin-bottom: 0;
        }
        .saveComic {
            display: inline-block;
            background-color: #4068a8;
            color: #FFFFFF;
            width: 82px;
        }
        a.m-item:link {
            text-decoration: none;
        }
        .uName {
            color: #0800f0;
        }
/* Errors */
        .frmErr {
            color: #FF0000;
        }
        .frmSucces {
            color:#00FF00;
        }
        hr#rule2 {
            border: 1px solid #4068a8;
            margin-top: 0;
        }
        img#logo {
            height: 90px;
            margin:0;
        }
        #hdrlft > img {
            display:block;
            margin-left:auto;
            margin-right:auto;
            margin-top: 10px;
            width:50%;
            border: 2px solid #000;
            border-radius: 15px;
        }
        p > img#aboutImg {
            width: 90px;
        }
        img#postImg {
            display:block;
            width: 80%;
            margin-left: auto;
            margin-right: auto;
        }

        #h1-home {
            margin-left: 10px;
            color: #4068a8;
        }
        #site-title {
            width: 100%;
            font-family: "Courier New";
            text-shadow: 1px 1px 2px #777;
            color: #fff;
            font-size: 2.1em;
            text-align: right;
        }
        #site-hook {
            color: #FFF;
            font-family: Georgia;
            text-align: right;
            margin-right: 22px;
        }
        
        #hdrrt > hr {
            border-top: 1px solid #FFF;
        }
        #comic-title {
            display: inline;
            position: relative;
            left: 10px;
            font-family: Georgia;
            font-size: 1.4rem;
            margin: 0 0 0;
        }
        #comic-strip {
            position: relative;
            width: 92%;
            left: 25px;
            margin-top: 0;
        }
        .wrapper {
            border: 1px solid black;
            width: 90%;
            max-width: 1536px;
            margin-inline: auto;
            position: relative;
            height: 300px;
            margin-top: 2rem;
            overflow: hidden;
            mask-image: linear-gradient(
              to right,
              rgba(0,0,0,0),
              rgba(0,0,0,1) 20%,
              rgba(0,0,0,1) 80%,
              rgba(0,0,0,0)
              );
        }
        .commentArea {
            display: inline-block;
            width: 100%;
            height: 250px;
        }
        
        @keyframes scrollLeft {
            to {
                left: -520px;
            }
        }
        .item {
            width: 520px;
            height: 300px;
            border: 5px double #526af7;
            position: absolute;
            left: max(calc(460px * 4), 100%);
            overflow: hidden;
            animation-name: scrollLeft;
            animation-duration: 30s;
            animation-timing-function: linear;
            animation-iteration-count: infinite;
        }
        .item1 {
            animation-delay: calc(30s / 4 * (4 - 1) * -1);
            text-align: center;
        }
        .item2 {
            animation-delay: calc(30s / 4 * (4 - 2) * -1);
        }
        .item3 {
            animation-delay: calc(30s / 4 * (4 - 3) * -1);
        }
        .item4 {
            animation-delay: calc(30s / 4 * (4 - 4) * -1);
        }
        #comic {
            width: 580px;
            height: 225px;
            border: 5px double #526af7;
        }
        
        .com-nav-lt {
            display: inline-block;
            background-color: #4068a8;
            border: 2px solid black;
            color: #fff;
            padding: 1px;
        }

        .prevNav a{
            background-color: #4068a8;
            width:82px;
            color:#FFF;
            padding-right: 3px;
        }
        .com-nav-rt {
            display: inline-block;
            background-color: #4068a8;
            border: 2px solid black;
            color: #fff;
            text-align: right;
            padding-right: 0;
        }
        .nxtNav a {
            background-color: #4068a8;
            width:82px;
            color:#FFF;
            padding-right: 3px;
        }
        
        img.responsive {
            width: 98%;
        }
        #columnlft {
            display: inline-block;
            margin-left: 0;
            width: 100%;
            height: min-max(800px, 80vh);
        }
        #columnrt {
            display: inline-block;
            width: 100%;
        }
        footer {
            display: block;
            height: min-max(24vh, 200px);
            background-color: #4068a8;
            margin-top: 20px;
        }
        footer > p#siteby {
            display: block;
            position: relative;
            margin: auto;
            width: 50%;
            height: 100px;
            top: 20px;
            font-family: "Times New Roman";
            font-size: .9em;
            color: #FFF;
        }
        #site-inquiry {
            width: 100%;
        }
        input[type="text"] {
            display:inline-block;
            border: none;
            border-bottom: 1px dotted black;
            width: 100%;
        }
        input[type="email"] {
            display:inline-block;
            border: none;
            border-bottom: 1px dotted black;
            width: 100%;
        }
        input[type="password"] {
            display:inline-block;
            border: none;
            border-bottom: 1px dotted black;
            width: 100%;
        }
        textarea {
            width: 100%;
        }
        button {
            width: 100%;
        }
/* Admin form */
        .frmError {
            color: red;
        }
        
        .frmContainer {
            display: block;
            width: 100%;
        }
        .frmContainer > div.admLogin {
            display: inline-block;
            width: 48%;
            position: relative;
            top: 0;
            margin-top:0;
            padding-top:0;
        }
        .frmContainer > .admLogin > p {
            position: relative;
            top: -34px;
        }
        .frmContainer > .admLogin > p > ul {
            position: relative;
            top: 0;
        }
        .frmContainer > .admLogin > ul {
            position:relative;
            top: 0;
        }
        .frmContainer > .admLogin > ul > li{
            display: block;
            position:relative;
            top: -40px;
            width: 49%;
        }
        .frmContainer > div.loginFrm {
            display: inline-block;
            width: 50%;
        }
        input[id=usrn] {
            display: inline-block;
            width: 78%;
        }
        input[id="username"] {
            display: inline-block;
            margin-bottom: 0px;
            width: 78%;
        }
        input[id="passwd"] {
            display: inline-block;
            position: relative;
            top: 0px;
            width: 78%;
        }
        input[type=submit] {
            display: block;
            width: 99%;
            margin-left: auto;
            margin-left: auto;
            margin-top: 8px;
        }
        h5.commentsTitle {
            display: block;
            position: relative;
            top: 0;
            margin-left: 10px;
        }
        .commentFrm {
            display: inline-block;
            position: relative;
            margin-left: 13px;
            padding:0;
            top: -70px;
            width: 95.5%;
            height: 130px;
            
        }
        #userComment {
            height: 40px;
        }
        
        .tooltip {
      position: relative;
      display: inline-block;
      cursor: pointer;
    }
    .postStamp {
        color:darkslategray;
    }

    .tooltip .tooltip-text {
      visibility: hidden;
      width: 160px;
      background-color: #333;
      color: #fff;
      text-align: center;
      padding: 8px;
      border-radius: 4px;

      /* Positioning */
      position: absolute;
      z-index: 1;
      bottom: 125%; /* Position above the link */
      left: 50%;
      transform: translateX(-40%);
      opacity: 0;
      transition: opacity 0.3s;
    }

    .tooltip .tooltip-text::after {
      content: "";
      position: absolute;
      top: 100%; /* Arrow appears at the bottom of the tooltip */
      left: 50%;
      transform: translateX(-50%);
      border-width: 6px;
      border-style: solid;
      border-color: #333 transparent transparent transparent;
    }

    .tooltip:hover .tooltip-text {
      visibility: visible;
      opacity: 1;
    }
@media screen and (min-width: 780px){
    #site-title {
        font-size: 2.8em;
    }
    #columnlft {
        width: 70%;
    }
    #columnrt {
        width: 30%;
    }
    #menu {
        display: block;
    }
    #menu > li {
        display: inline-block;
        width: calc(100%/6);
    }
    nav.btn {
        display: none;
    }
}