/*CUSTOM FONTS*/
    @font-face {
  font-family: system;
  src: url(/fonts/DeliciousHandrawn-Regular.ttf);
  font-display: swap;    
}

    @font-face {
  font-family: Ubuntu;
  src: url(https://teethy.ca/fonts/Ubuntu-Regular.ttf); /*REPLACE WITH SYMLINK ON LIVE SITE, maybe?*/
  font-display: swap;    
}

body {
  background: #444;
font-family: 'system', serif, sans-serif;
  background: url(/images/frame.png);
  background-size: cover;
  height:100%;
}

.dropbtn, .dropdown-content {
 text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; 
}

input[type=submit] {
 border-color:#444;
  color:aqua;
  background-color:#111;
  border-radius:5px;
  font-family:monospace;
}

input[type=text] {
 border-color:#444;
  color:aqua;
  background-color:#111;
  border-radius:5px;
  font-family:monospace;
}

textarea {
  margin-top:5px;
  border-width:2px;
  border-style:inset;
 border-color:#444;
  color:white;
  background-color:#111;
  border-radius:5px;
  font-family:monospace;
}

.width-fix {
  min-width:98%;
 max-width:99%;
}
.height-tuner {
 height:150px; 
}

button {
   border-color:#444;
  color:aqua;
  background-color:#111;
  border-radius:5px;
  font-family:monospace;
}

.cusbutton {background-color:#111;width: 150px; border-radius: 10px 10px 10px 10px;}
      .cusbutton h2{outline-color:#777; outline-style:outset;border-radius: 10px 10px 10px 10px;}

      .cusbutton a {text-decoration: none;color:#eee;}
      
      /*hovering over button*/
      .cusbutton:hover { background-color:#333;width: 150px;margin:auto;}
      .cusbutton:hover h2 {font-family: 'system', serif, sans-serif;outline-color:#555; outline-style:inset;}
      .cusbutton:hover a {font-family: 'system', serif, sans-serif;text-decoration: none;text-shadow: 0px 0px 8px grey;color:#ddd;}
      /*click button*/
      .cusbutton:active { background-color:#02afb5;width: 150px;margin:auto;}
      .cusbutton:active a {font-family: 'system', serif, sans-serif;text-decoration: none;text-shadow: 0px 0px 35px #5fc1f5;color:#5fc1f5;}
      .cusbutton:active h2 {font-family: 'system', serif, sans-serif;outline-color:#027175; outline-style:inset;}




/*CUSTOM UPLOAD BUTTON */
.cusbuttonUpload {
  position: relative;
  left:30px;
  background-color: #144;
  border: none;
  padding: 3px 3px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-family: 'system', serif, sans-serif;
  font-size:16px;/*Roughly matches my H2 cusbuttons*/
  margin:auto;
  cursor: pointer;
}

.cusbuttonUpload h2 {background-color:#111;outline-color:#777; outline-style:outset;margin:0px;padding:2px 40px;}
.cusbuttonUpload a {text-decoration: none;color:#eee;}

.cusbuttonUpload:hover h2 {background-color:#333;outline-color:#555; outline-style:inset;}
.cusbuttonUpload:hover a {text-decoration: none;text-shadow: 0px 0px 8px grey;color:#ddd;}
.cusbuttonUpload:active a {text-decoration: none;text-shadow: 0px 0px 8px red;color:red;}
.cusbuttonUpload:active h2 {background-color:#330000;outline-color:#290000; outline-style:inset;}
/*END OF BUTTON UPLOAD*/


/*DIV ABSOLUTE (using it for the MS-DOS logo)*/
div.absolute {
  position: absolute;
  top: 10;
  left: 10;
  width: 300px;
  
}

/*HIDE WHEN SCREEN TOO SMALL*/
@media (max-width:1275px) {
  img#hideitems {
    display: none;
  }
}

/*KEYBOARD BUTTON STYLE*/
    kbd>kbd {
  border-radius: 3px;
  padding: 1px 2px 0;
  border: 1px solid black;
}

/*div-container*/
.div-container{
  border-radius: 30px 30px 0px 0px;
background-color:#080808;
  border-style:solid;
  border-color:#222;
  position:relative;
  margin-right:2%;
  margin-left:2%;
  min-height:1270px;
}
/*Navbar*/
.navbar {
  position:static;
  border-radius: 25px 25px 0px 0px;
  overflow: hidden;
  background-color: #333;
  border-style: none none solid none;
   background-image: url('/images/loading.gif');
  background-repeat: repeat-x;
  z-index:5;
  
}

.navbar a {
  float: left;
  font-size: 32px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
   

}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 32px;  
  border: none;
  outline: none;
  color: white;
  padding: 7px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

/* Button used to open the contact form - fixed at the bottom of the page */
.open-button {
  background-color: #555;
  border: none;
  cursor: pointer;
  background-image: url('/images/loading.gif');
}
.open-button:hover a {
  background-color: rgba(0,0,0,0.9);
  color: rgba(0,0,0,0.9);
}

/* END OF Button used to open the contact form - fixed at the bottom of the page */

.navbar a:hover, .dropdown:hover .dropbtn  {
  background-color: rgba(255,0,0,0.5);
}

.dropdown-content {
  margin-left:-3px;
  display: none;
  position: absolute;
  background-image: url('/images/loading.gif');
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 5;
  border-style: hidden solid  solid solid;
  
}

.dropdown-content a {
  float: none;
  color: #eee;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: rgba(0,0,0,0.9);
  color: #eee;
}

.dropdown:hover .dropdown-content {
  display: block;
}
/*end of Navbar*/

/*Some Table Styling*/
 th, td {
  position:relative;
  border:1px solid #222;
  outline-color:#222;
  outline-style: ridge;
}
/*th {
  background-image: url('images/pixelBG-test2.png');
}*/
table {
  position:relative;
max-width:100%;
}



/* The popup form - hidden by default */
.form-popup {
  display: none;
  position: fixed;
  top:10%;
  left:25%;
  margin:auto;
  border:1px solid #000;
  outline-style: ridge;
  outline-color:#111;
  z-index: 9;
  height:85%;
  width:50%;
   background-color: black;
}

/* Add styles to the form container */
.form-container {
  max-width: 100%;
  padding: 10px;
  background-color: white;
}


/* Add a red background color to the cancel button */
.form-container .cancel {
  background-color: red;
}

/* Add some hover effects to buttons */
.form-container .btn:hover, .open-button:hover {
  opacity: 1;
}

#age-warning {
      display: none;
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      padding: 20px;
      background-color: #000;
      border: 1px solid red;
      text-align: center;
      font-family: Arial, sans-serif;
      z-index:200;
    }



    .grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 15px;
        max-width: 90%;
        margin: auto;
    }
    .post {
        border: 1px solid #ccc;
        padding: 10px;
        background: #1a1a1a;
      border-radius:15px;
      
    }


.carousel {
overflow-y:auto;
max-height;550px;
height:730px;
  margin-bottom:20px;
}
  
    .post.new-glow {
        border: 2px solid #00ffcc;
        animation: glow 1s ease-in-out infinite alternate;
    }
    @keyframes glow {
        from { box-shadow: 0 0 5px #00ffcc; }
        to { box-shadow: 0 0 15px #00ffcc; }
    }
    .timestamp {
        font-size: 0.88em;
        color: #666;
      font-family:monospace; 
    }
          .h6-footer{
       font-family:monospace; 
      }
    .h2-post {
     font-family:monospace; 
      color:white;
      text-decoration:none;
    } 
    .post-desc {
     font-family:monospace;
      color:violet;
    }
    .h4-comments {
      font-family:monospace;
      color:grey; 
    }
    .b-comments {
      font-family:monospace;
      color:aqua; 
    }
    .p-comments {
       font-family:monospace;
      color:white;
      text-decoration:underline;
     /* border-bottom-style:inset;
      border-bottom-color:#555;
      border-bottom-width:2px;*/
    }

.container-commentsec {
  margin-bottom:7px;
  position:relative;
 max-width:99%;
 max-height:250px;
  overflow:auto;
}

.debug-text {
 font-family:monospace; 
  color:red;
}


        .grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
            gap: 20px;
            padding: 10px 0px;
        }
        .post {
            background: #1a1a1a;
            border: 1px solid #444;
            padding: 10px;
            color: white;
            box-sizing: border-box;
        }
        .post img, .post video {
            width: 100%;
            max-height: 300px;
            object-fit: contain;
         background-image: url("/images/checker.png");
        }
        .grid-1, .grid-2, .grid-3 {
            display: grid;
            gap: 10px;
            margin: 10px 0;
        }
        .grid-1 { grid-template-columns: 1fr; }
        .grid-2 { grid-template-columns: repeat(2, 1fr); }
        .grid-3 { grid-template-columns: repeat(3, 1fr); }
        .new-glow {
            animation: glow 1.5s ease-in-out infinite alternate;
            border-color: #00ffe1;
        }
        @keyframes glow {
            from { box-shadow: 0 0 5px #00ffe1; }
            to   { box-shadow: 0 0 20px #00ffe1; }
        }
        .post.fade-in {
            opacity: 0;
            transform: translateY(20px);
            animation: fadeInPost 0.5s ease-out forwards;
        }
        @keyframes fadeInPost {
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        .post img {
            transition: 0.3s ease-in-out;
            cursor: pointer;

        }
        .post img:hover {
            box-shadow: 0 0 10px #00ffe1;
            transform: scale(1.02);
        }