body{margin: 0%; background-color: rgb(240, 218, 188);}

.headd{background-image: url('churchh.webp');
background-repeat: no-repeat; background-size: cover;
background-position: center; font-size: 40px; padding: 40px; padding-bottom: 80px; padding-top: 80px; color: rgb(229, 235, 240); }

.headd:hover{color: rgb(223, 217, 209);}
#datee{font-size: 20px; color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); ;}

a{text-decoration: none; color: black;}
.firstul{list-style: none; display: flex; background-color: rgb(186, 145, 86); margin-top: 0; position: sticky; top: 0; box-shadow: 10px 12px 37px black;}
.firstmenu{margin-left: 10px; font-size: 18px; padding-top: 20px; padding-bottom: 23px;}
.firstul a{background-color:  rgb(207, 161, 104); padding: 6px; border-radius: 8px; }

.firstul a:hover{background-color: rgb(199, 137, 56); transition: all 0.2s ease-in-out; padding: 7px; border-bottom: 4px solid;}
#mimi {font-size: 21px;}
.qwert{display: flex;justify-content: center;}
.introwrite{font-size: 27px; color: rgb(0, 0, 0); width: 1200px; text-align: center; border: 2px solid black; padding: 10px; border-radius: 20px; box-shadow: 10px 10px 40px 10px black;}
.popculture{text-align: center; font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;}
#gal{border-radius: 200px; border: 3px solid rgb(255, 255, 255); }
.albumm{width: 240px; text-align: center; font-weight: bold;}
.out{ width: 220px; font-family: Arial, Helvetica, sans-serif;}
#gal:hover{transform: scale(1.03); transition: 0.3s ease-in-out;  border: 4px solid; border-color: rgb(30, 28, 28);}
.diffrientcolor{background-color: rgb(207, 174, 112); padding-top: 40px; padding-bottom: 60px;}
.popculture:hover{color: rgb(74, 66, 56);}
.reverend{font-size: 30px;}

.popularthings{display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); column-gap: 1px;}
.articleheading{display: none;}
  



.search{margin-top: 15px; margin-left: 350px; font-size: 20px;}
#mexico{background-color: white; padding: 4px; padding-left: 12px; padding-right: 12px; border-radius: 20px;}
.mmm{font-size: 17px; border-radius: 17px;}
.mmm:hover{background-color: antiquewhite;}

#searchbox{font-size: 15px; outline: none; border: none; width: 170px;}

#haha{cursor: pointer; padding-top: 6px;}
.place{margin-top: 60px; margin-left: 40px; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); row-gap: 10px;}

.you{width: 300px;  text-align: center; background-color: antiquewhite;  box-shadow: 4px 1px  10px black;}
#abs{position: absolute; display: none;}


.king{font-size: 30px; margin-left: 40%; color: rgb(99, 93, 60);}

.beggingyou{position: absolute; left: 88px; list-style: none; margin-top: 20px; display: none;}
.firstmenu:hover .beggingyou{display: block;}
.begin:hover{padding-bottom: 4px; transition: 0.3s ease-in-out;}


.begin{margin-bottom: 16px;}
.begin a{padding-left: 15px; padding-right: 15px;}

.articleul{list-style: none; position: absolute; left: 164px; margin-top: 20px; display: none;}

.subarticle{margin-bottom: 16px; }
.subarticle a{padding-left: 15px; padding-right: 15px;}
.subarticle:hover{padding-bottom: 4px; transition: 0.3s ease-in-out;}
.firstmenu:hover .articleul{display: block;}
#authorr{display: none;}

.galleryul{position: absolute; left: 298px; margin-top: 20px; list-style: none; display: none;}

.orange{ width: 100%;}
.crayfish{font-size: 20px;}

.boxing{display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));row-gap: 10px; column-gap: 10px; width: 94%; margin-left: 3%;}
.compactt{font-size: 27px; text-decoration: underline;}
.preview{text-align: center; font-size: 35px; text-decoration: underline;}

#erotic{border-radius: 10px;}
#erotic:hover{scale: 0.91; transition: 0.5s ease-in-out; border: 2px solid rgb(80, 78, 78); border-radius: 15px;}
.rules{font-size: 20px; font-family: "IBM Plex Mono", monospace;
  font-weight: 100;
  font-style: normal;}
.free{border: 1px solid black; margin-left: 70%;}
.uiux{padding-left: 23px; padding-right: 23px; padding-bottom: 20px; text-align: left;}
.bright{background-color: rgb(248, 244, 238); width:100%;}
.inside{text-align: center; margin-left: 10%; box-shadow:5px 10px 30px black; width: 80%;}


.subgallery{margin-bottom: 16px;}
.subgallery a{padding-left: 15px; padding-right: 15px;}
.firstmenu:hover .galleryul{display: block;}

#picmixx{border-radius: 150px; border: 4px solid white;}

.qqq{border-radius: 30px;}
.qqq:hover{background-color: rgb(195, 167, 131);}

.hear{ text-align: center;}

.butt{font-size: 16px; padding: 8px; padding-left: 15px; padding-right: 15px; border-radius: 20px; background-color: antiquewhite;}
.butt:hover{background-color: rgb(221, 186, 140); transition: 0.3s ease-in-out;}

.fa-brands{font-size: 20px; margin-left: 7px; margin-right: 7px; color: white;}
.fa-brands:hover{color: rgb(117, 113, 113);}

.clapul{list-style: none;}
.lastul{list-style: none;}
.finally{display:flex; justify-content: center; padding-top: 50px; color: white;}

.topp{text-align: center; margin-top: 0; padding-bottom: 10px;}
.topp a{color: white; font-size: 25px;}
.topp a:hover{color: rgb(117, 113, 113);}

.finally a{color: white;}
.finally a:hover{color: rgb(117, 113, 113);}
.info{width: 300px;}
.cobalt{ width: 300px; }
.clap{margin-bottom: 5px;}
.comeon{margin-bottom: 5px;}



.overallo{background-color: rgb(35, 33, 33);}
#daddy{border-radius: 80px; display: none;}



.classic{display: grid; grid-template-columns: repeat(2, 2fr); margin-left: 20%;}
#Heroes{border-radius: 200px;}
#Heroes:hover{border: 1px solid black; transition: 0.1s ease-in-out;}
.kick{font-size: 18px; font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; }

.ground{ width: 300px;}

.original{position:absolute; left: -40px; top: 100px;}
#open{display: none;}
#open:checked{display: none;}
.contextul{list-style: none; font-size: 20px; transition: 0.4s ease-in-out;}
#close{display: none;transition: 0.4s ease-in-out;}
#company:checked ~ #ee{display: none; transition: 0.4s ease-in-out;}
#company{display: none; transition: 0.4s ease-in-out;}


#company:checked ~ #company{display: none;}
.context{padding-bottom: 3px; padding-top: 5px; padding-left: 15px; background-color: antiquewhite; width: 150px; transition: 0.4s ease-in-out; font-size: 14px;}
.context:hover{background-color: rgb(204, 172, 131); transition: 0.4s ease-in-out;}
.context a{padding-right: 120px;}


#company:checked ~ #ee{display: block; }
#company:checked ~ #open{display: none;}
#company:checked ~ #close{display: block; transition: 0.4s ease-in-out;}

#ee{display: none; transition: 0.4s ease-in-out;}
#open{background-color: rgb(223, 151, 57); padding: 3px; border-radius: 5px;}
.new{text-align:right; display: none; transition: 0.4s ease-in-out;}


@media(max-width:1260px){.firstmenu{font-size: 15px;}
#mimi{font-size: 15px;
}
.headd{font-size: 30px; padding: 20px; padding-bottom: 30px; padding-top: 40px;}

.search{margin-left: 190px;}}


@media(max-width:1050px){
.firstmenu{font-size: 12px;}
.search{margin-left: 130px;}
#mimi{font-size: 15px;}
.beggingyou{position: absolute; left: 40px;}
.articleul{ position: absolute; left: 90px;}
.galleryul{position: absolute; left: 150px;}

.headd{font-size: 25px; padding: 15px; padding-bottom: 25px; padding-top: 20px; }
}



@media(max-width:990px){

.search{margin-left: 130px;}
.kick{font-size: 15px; width: 100%;}

}


@media(max-width:922px){

#searchbox{font-size: 11px; outline: none; border: none; width: 100px;}
.introwrite{font-size: 15px;}


}

@media(max-width:830px){.search{margin-left:70px;}}


@media(max-width:769px){#mimi{display: none;}
#lola{display: none;}
.kick{font-size: 10px;}
#Heroes{width: 60%;}
.butt{font-size: 10px;}
.popularthings{display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); column-gap: 20px;}
#gal{width: 140px; height: 140px;}
.albumm{width:140px;}
.popculture{font-size: 20px;}
.finally{font-size: 13px;}
.topp a{font-size: 20px;}
.uiux{font-size: 13px; padding-left: 1%; padding-right: 1%;}
.inside{width: 100%; margin-left: 0%;}
#machala{width: 60%;}
.clap a{font-size: 11px;}
.comeon a{font-size: 11px;}
.lastul a{margin-right: 50px;}
.fa-brands{margin: 0; margin-right: 2px;}

}



@media(max-width: 703px){
.boxing{display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));row-gap: 10px; column-gap: 10px; width: 94%; }
.www{height: 90%;}
}

@media(max-width: 405px){
 .boxing{display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));row-gap: 6px; column-gap: 6px; width: 94%; }
 .crayfish{font-size: 13px;}
}




@media(max-width: 677px){
#searchbox{font-size: 8; width: 70px;}
.firstmenu{margin-left: 5px;}

#Heroes{width: 40%;}
.kick{font-size:7px;
width: 130%;
}
.reverend{font-size: 17px;}
}


@media(max-width: 605px){#loss{display: none;} #authorr{display: block;}
.headd{box-shadow: 10px 12px 37px black;}



}


@media(max-width:581px){
#datee{font-size: 10px;}

.headd{font-size: 20px; padding: 10px; padding-bottom: 20px; padding-top: 20px; }
}

@media(max-width: 565px){#searchbox{ width: 30px;} 
.rules{font-size: 13px;}
.preview{font-size: 23px;}
}

@media(max-width:530px){.firstul{display: none;}
.new{display: block;}
#open{display: block;}
.butt{font-size: 15px;}
.kick{width: 280%; font-size: 16px; margin-left: 14px; position: relative; right: 70px;}
#Heroes{display: none;}
.classic{ width: 200px;}
#daddy{display: block; margin-left: 25%; width: 50%;}
.boxing{display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));row-gap: 10px; column-gap: 10px; width: 94%; }
}

@media(max-width:449px){
.headd{font-size: 21px; padding: 10px; padding-bottom: 9px; padding-top: 9px; }
}