* {
	 box-sizing: border-box;
	 /* font-family: 'BFFont'; */
	 /* font-family: "Roboto", "Helvetica", "sans-serif"; */
	 color: rgb(211, 90, 90);
}

 body {
	 margin: 0;
	 padding: 0;
	 background-color: #151b1d;
	 
}
 main {
	 min-width: 200px;
	 max-width: 800px;
	 margin: 80px auto;
	 padding: 10px;
}
 main .wrap {
	 padding: 40px 20px;
	 background-color: #fff;
}
 main .title {
	 font-size: 2em;
	 text-align: center;
	 margin: 20px auto 40px;
	 text-transform: uppercase;
}
 header nav {
	 /* background-color: rgba(0, 0, 0, 0.8); */
	 background-image: url("../images/menuback2.jpg");
	 background-size:cover;

	 background-size: 100%;	 position: fixed;
	 top: 0;
	 left: 0;
	 width: 100%;
	 height: 100%;
	 visibility: hidden;
	 transition: all 0.3s ease-in-out;
	 z-index: 9;
	 overflow: hidden;
}
 header nav ul {
	backdrop-filter: blur(2px);
	 list-style-type: none;
	 padding: 0;
	 margin: 0;
	 position: absolute;
	 left: 50%;
	 top: 100px;
	 transition: all 0.3s ease-in-out;
	 transform: translateX(-50%);
	 height: calc(100%); /* Adjust the height based on your layout */
	 overflow-y: auto;
}
 header nav ul li {
	 /* transform: translateY(50px); */
	 opacity: 0;
}
 header nav ul li a {
	 display: block;
	 font-size: 2em;
	 text-decoration: none;
	 padding: 10px 0;
	 text-align: center;
	 color: #fff;
	 font-weight: 300px;
	 transition: all 0.2s ease-in-out;
	 text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}
 header nav ul li a:hover {
	 color: #e84a5f;
}
 .toggle-btn {
	 display: block;
	 position: fixed;
	 z-index: 10;
	right: 10px;
	 top: 10px;
	 cursor: pointer;
}
 .toggle-btn .bar {
	  width: 30px; 
	 height: 2px;
	 margin: 7px auto;
	 background-color: #fff;
	 transition: all 0.3s ease-in-out;
	 box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.3);
}
 .toggle-btn .bar:nth-child(2) {
	 width: 20px;
}
 #toggle:checked ~ nav {
	 opacity: 1;
	 visibility: visible;
}
 #toggle:checked ~ nav ul {
	 top: 70px;
}
 #toggle:checked ~ nav ul li {
	 transform: translateY(0px);
	 opacity: 1;
}
 #toggle:checked ~ nav ul li:nth-child(1) {
	 transition: all 0.3s cubic-bezier(0.6, 0, 0.8, 1.5) 0.1s;
}
 #toggle:checked ~ nav ul li:nth-child(2) {
	 transition: all 0.3s cubic-bezier(0.6, 0, 0.8, 1.5) 0.2s;
}
 #toggle:checked ~ nav ul li:nth-child(3) {
	 transition: all 0.3s cubic-bezier(0.6, 0, 0.8, 1.5) 0.3s;
}
 #toggle:checked ~ nav ul li:nth-child(4) {
	 transition: all 0.3s cubic-bezier(0.6, 0, 0.8, 1.5) 0.4s;
}
 #toggle:checked + label.toggle-btn .bar {
	 background-color: red;
}
 #toggle:checked + label.toggle-btn .bar:nth-child(2) {
	 transform: translateX(50px);
	 opacity: 0;
}
 #toggle:checked + label.toggle-btn .bar:nth-child(1) {
	 transform: translateY(10px) rotate(45deg);
}
 #toggle:checked + label.toggle-btn .bar:nth-child(3) {
	 transform: translateY(-8px) rotate(-45deg);
}
 .wholepq{
	background-image: url('../images/pq.png');
    background-repeat: repeat-y;
    background-size: 100% 100%;
    width: 100%;
    height: 100%;
	padding-bottom: 300px;

	
 }
 #wholepq {
	position: relative;
	overflow: hidden;
  }
  
  #wholepq::before {
	content: "";
	position: absolute;
	background-image: url('../images/pq.png');
    background-repeat: repeat-y;
    background-size: 100% 100%;
    width: 100%;
    height: 100%;
	z-index: -1;
	padding-bottom: 300px;
	transform: translateX(-45%);
  }
  

 body{
    font-family: 'BFFont' !important;
}

@font-face {
	font-family: BFFont;
	src: url('../font/brutal-fekal.woff');
  }
  h1{
  }
  p{
	font-family: BFFont;
	font-size: x-large;
  }

  @media (min-width:1200px) {
	.middlecol{
		width:90%;
	}
	.bordercol{
		width:5%;
	}
  }

  @media (max-width:1200px) {
	.middlecol{
		width:90%;
	}
	.bordercol{
		width:5%;
	}
  }
  .logomenu{
	width: 50px;;
  }
 @media (max-width:800px){
	  .toggle-btn__cross {
	width: 200px;
	height: 200px;
 }
  .toggle-btn__cross img {
    width: 100%;
    height: auto;
}
 }
 @media (max-width:550px){
	.toggle-btn__cross {
  width: 100px;
  height: 100px;
}
.toggle-btn__cross img {
  width: 100%;
  height: auto;
}
#toggle:checked ~ nav ul li{
	font-size: xx-small;
}
.logoul{
	top:10px;
}
#toggle:checked ~ nav ul .logoul {
	top: 10px;
}
.logomenu{
	width: 30px;;
  }
  a{
	font-family: 'BFFont'
  }
}