/*
Theme Name: MeatBarn
Theme URI: https://meatbarn.club
Description: Custom WordPress theme for a blog about ugly porn
Author: MeatBarn + GPT helper
Version: 0.9
License: CC-BY
License URI: https://creativecommons.org/licenses/by/4.0/
Tags: MeatBarn, Porn, Gallery
Text Domain: MeatBarn.Club
*/


/* Common styles */
body {
    background-color: #3c3c3c;
    color: #ffffff;
	font-family: 'Dosis', 'Arial', sans-serif;
    min-width:320px;
	max-width:1200px;
	width:100%;
	 margin: auto;
}

a {
    color: #ffffff;
}

.clear {clear:both;}

/* Header */
.header {
    background-color: #3c3c3c;
    width:100%;
    max-width: 1200px;
}

.header-line{
    display:flex;
    align-items: center;
    justify-content: space-between;
    width:100%;
}

.header h1 {
    font-size: 24px;
    margin: 0;
}

.header p {
    font-size: 16px;
    margin: 0;
}

.logo-placeholder a{
    text-decoration:none;
}

blockquote {
	font-size:1.3em;
	margin-bottom:4em;
}

.entities{
	font-family:'Open Sans', sans-serif;
}

/*Centering of content*/
.aligncenter {
  display: grid !important;
  place-items: center !important;
}

.aligncenter img{
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* Navigation */

.menu-line{
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

.navigation {
    background-color: #3c3c3c;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
}

.menu-toggle {
    display: none;
}

.menu-toggle span {
    display: block;
    width: 25px;
    height: 3px;
    background-color: #ffffff;
    margin-bottom: 5px;
}

.menu {
    display: flex;
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.menu li {
    margin-left: 20px;
}

.menu a {
    color: #ffffff;
    text-decoration: none;
}

.menu a:hover {
    color: #ff00ff;
}

.blinking_red {
  animation: blinker 1s linear infinite;
  color: red;
}

.gallery {
	max-width:100%;
}
.wp-videoplayer_module, .wp-video{
	max-width:100%;	
}
@keyframes blinker {
  50% {
    color: white;
  }
}

#checkbox-toggle{
    display:none;
}

.hamburger{
    display:none;
    cursor:pointer;
    font-size:24px;
}

.hamburger-line{
    display:block;
    height:2px;
    position:relative;
    width:24px;
    color:white;
    background-color:white;
}

.hamburger-line::before,.hamburger-line::after{
    background-color:white;
    content:'';
    display:block;
    position:absolute;
    transition:all .3s;
    width:100%;
    height:100%;
}
.hamburger-line::before{
    top:7px;
}
.hamburger-line::after{
    top:-7px;
}

/* Search */
.search-toggle {
    position: relative;
    display: inline-block;
}

#search-toggle{
	display:none;
}

.search-toggle .search-icon {
    cursor: pointer;
}

.search-toggle .search-icon:before {
    content: "\f002";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 16px;
    color: #ffffff;
}

.search-form {
    position: absolute;
    top: 100%;
    right: 0;
	width: max-content;
    background-color: #3c3c3c;
    padding: 10px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
}

.search-toggle input[type="checkbox"]:checked ~ .search-form {
    opacity: 1;
    visibility: visible;
}

.search-form input[type="search"] {
    width: 100%;
    padding: 5px;
    border: none;
    background-color: transparent;
    color: #ffffff;
}
/*Form buttons*/
.submit {
  background-color: #3c3c3c;
  color: #ffffff;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
	border: 1px solid gray;
  transition: background-color 0.3s ease;
}

.submit:hover {
  background-color: #555555;
}

.submit:focus {
  outline: none;
}

.submit:active {
  transform: scale(0.95);
}

/*Comment form*/
.comment-form {
  margin-top: 20px;
}

.comment-notes {
  margin-bottom: 20px;
  font-size: 14px;
}

.required-field-message {
  color: #ff0000;
}

.comment-form p {
  margin-bottom: 20px;
}

.comment-form label {
  display: block;
  font-weight: bold;
  margin-bottom: 5px;
}

.comment-form textarea,
.comment-form input {
  width: 100%;
  padding: 10px;
  border: 1px solid #dddddd;
  border-radius: 5px;
  font-size: 16px;
}

.comment-form textarea {
  resize: vertical;
  height: 150px;
}
.comment-form-cookies-consent{
	display:flex;	
}

.comment-form-cookies-consent input[type="checkbox"] {
  margin-right: 10px;
  vertical-align: middle;
 width: auto;

}

/*.comment-form-cookies-consent label {
  font-size: 16px;
}*/

.comment-form-cookies-consent input[type="checkbox"]:focus + label,
.comment-form-cookies-consent input[type="checkbox"]:checked + label {
  outline: 1px dotted #000000;
}

.comment-form-cookies-consent input[type="checkbox"]:checked + label:before {
  content: "\2713";
  display: inline-block;
  margin-right: 5px;
  font-weight: bold;
}

.wp-caption{
	max-width:100% !important;
}

.wp-caption{
	max-width:100% !important;
	height: auto !important;
}

.wp-caption-text{
	font-style:italic;
	/*font-size:0.7em;*/
	line-height:1em;
}



/* Footer */
.footer {
    background-color: #3c3c3c;
    padding: 20px;
    text-align: center;
}
.footer nav{
	display:flex;
	justify-content: center;
}
.footer a {
    margin-right: 10px;
    color: #ffffff;
}

/* Main content */
.content {
    margin: 20px;
}

/* Main Page */
.container {
  max-width: 1000px;
  margin: 0 auto;
}

.main-content {
  padding: 20px;
}

.grid {
    column-count: 4;
    column-gap: 10px;
}

.grid-item {
	background-color:#333;
    display: inline-block;
    margin-bottom: 10px;
    width: 100%;
	border-radius:5px;
}


.post-thumbnail img {
    width: 100%;
    height: auto;
	border-radius:5px;
}

.post-title {
	margin:0 5px;
}

.post-title a{
	text-decoration: none;
}

.post-date {
	margin:0 5px;
  margin-top: 5px;
  color: #888888;
}

/* Single record */
.single-post {
    background-color: #3c3c3c;
    border-radius: 5px;
}

.single-post h1 {
    font-size: 24px;
    margin: 0 0 10px;
}

.single-post .post-thumbnail {
    max-width: 100%;
    height: auto;
}

.single-post .post-content {
    margin-top: 20px;
	line-height:1.5em;
}

.post-content img, .post-content p img{
	max-width:100%;
	height: auto;
}


/* Tag cloud */
.tag-cloud {
    margin-top: 20px;
}

.tag-cloud a {
    display: inline-block;
    padding: 5px 10px;
    margin-right: 5px;
    margin-bottom: 5px;
    background-color: #3c3c3c;
    color: #ffffff;
    border-radius: 5px;
    font-size: 16px;
    text-decoration: none;
}

.tag-cloud a:hover {
    background-color: #555555;
}

/* Pagination */
.pagination {
    display: flex;
    justify-content: center;
    margin-top: 20px;
	font-size:20px;
}

.pagination .page-numbers {
    display: inline-block;
    padding: 5px 10px;
    margin-right: 5px;
    background-color: #555555;
    color: #ffffff;
    border-radius: 5px;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.pagination .page-numbers:hover,
.pagination .page-numbers.current {
    background-color: #3c3c3c;
}

.pagination .page-numbers.disabled {
    opacity: 0.5;
    pointer-events: none;
}
/* Responsive Styles */
@media (max-width: 768px) {
    .menu{
        /*display:none;*/
        max-height:0;
        overflow:hidden;
        position:absolute;
        background-color:#333;
        text-align:center;
        right:0;
        left:0;
        margin-top:30px;
    }
    
    .menu li{
        line-height:200%;
    }
    
    .menu-item a:hover{
        color:#ff00ff;
    }

    #checkbox-toggle:checked ~ .menu {
        display:block;
        max-height:350%;
        transition: all .3s;
    }
    
    #checkbox-toggle:checked ~ .hamburger .hamburger-line{
        background-color:transparent;
    }
    #checkbox-toggle:checked ~ .hamburger .hamburger-line::before{
        transform:rotate(-45deg);
        top:0;
    }
    #checkbox-toggle:checked ~ .hamburger .hamburger-line::after{
        transform:rotate(45deg);
        top:0;
    }
    
    .hamburger{
    display:block;
    }
	.search-toggle .search-icon{
		margin-right:10px;
	}
}

  /* Reduce the number of columns to adapt the screen */
  @media (max-width: 960px) and (min-width: 767px) {
	  .container {
 		 max-width: 100%;
  		margin: 0 auto;
		}

    .grid {
      column-count: 3;
    }
    .grid-item {
      width: 100%;
    }
  }
  @media (max-width: 767px) and (min-width: 421px) {
	 .container {
 		 max-width: 100%;
  		margin: 0 auto;
		}
    .grid {
      column-count: 2;
    }
    .grid-item {
      width: 100%;
    }
  }
  @media (max-width: 420px) {
	  .container {
 		 max-width: 100%;
  		margin: 0 auto;
		}
	  
    .grid {
      column-count: 1;
    }
    .grid-item {
      width: 100%;
    }
	  .main-content {
  		padding: 0;
	}
	.su-row .su-column img, .su-row .su-column object {
  	max-width: 80% !important;
	}
  }