* {
  margin: 0;
  padding: 0;
  cursor: none;
  
}

body, html {
  width: 100%;
  height: 200vh;
}
.cursor {
  position: fixed;
  pointer-events: none;
  width: 32px;
  height: 32px;
  background-image: url('/img/cursors/cursor.gif');
  background-size: cover;
  z-index: 9999;
}

body {
color: #e99432;
background: rgb(63, 29, 15);
display: grid;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}





button{
  background: #025b61;
  color: #6ed3b5;
  min-height: 50px;
  min-width: 80px;
  border-radius: 15px;
  font-weight: bolder;
  font-size: 1em;
  border: none;
  margin: 5px;
  
}

main {

  justify-content: center;
  padding:0;
  margin: 10px;
}
header {
color: #db9327;
background-color: #80400b;
margin: 0px;
text-align: center;

font-weight: bolder;
font-size: 1.6em;
}

p {
  font-size: 1em;
}

.inv {
display: none;
}

.vis {
  display: block;
  margin: 0;
  padding: 0;
  justify-content: center;
  text-align: center;
}

.cbg {
  display: block;
  position: fixed;
  z-index: 5;
  top: 25px; left: 25px;
}


img {
  max-width: 100%;
  
}

.img {
  max-width: 450px;
  
}


.image {
  display: flex;
  border-radius: 25px;
  height: 150px;
  max-height:250px;
  max-width:35%;
  border: 10px solid #ed7e22;
  overflow:hidden;
  cursor: pointer;
  padding: 0;
  margin: 0;
  
}

h1 {
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-weight: normal;
padding: 15px;
color: #ed7e22;
text-align: center;
text-transform: capitalize;
}


.CDA .image-container{
display: flex;
flex-wrap: wrap;
gap:15px;
justify-content: center;
min-width: 60%;
width: 100%;
padding: 0px;
margin: 0px;
}


.CDA .image-container .image img{
max-height:250px;
max-width:350;
object-fit: cover;
transition: .2s linear;

}

.CDA .image-container .image:hover img{
transform: scale(1.1);
}

.CDA .popup-image {
position: fixed;
top:0; left:0;
background: rgba(0,0,0,.9);
height:100%;
width:100%;
z-index: 100;
display: none;
}

.CDA .popup-image span{
position: absolute;
top:0; right:10px;
font-size:40px;
font-weight: bolder;
color: #e7522d;
cursor: pointer;
z-index: 100;
}

.CDA  .popup-image img{
position: absolute;
top:50%; left:50%;
transform: translate(-50%, -50%);
border:5px solid #e99432;
border-radius: 5px;
width: 90%;
object-fit: cover;
}




.bgACEOC .image-container2{
display: flex;
flex-wrap: wrap;
gap:15px;
justify-content: center;
min-width: 40%;
width: 100%;
padding: 0px;
margin: 0px;
}


 

.bgACEOC .image-container2 .image img{
max-height:250px;
max-width:350;
object-fit: cover;
transition: .2s linear;

}

.bgACEOC .image-container2 .image:hover img{
transform: scale(1.1);
}

.bgACEOC .popup-image2 {
position: fixed;
top:0; left:0;
background: rgba(0,0,0,.9);
height:100%;
width:100%;
z-index: 100;
display: none;
}

.bgACEOC .popup-image2 span{
position: absolute;
top:0; right:10px;
font-size:40px;
font-weight: bolder;
color: #e7522d;
cursor: pointer;
z-index: 100;
}

.bgACEOC  .popup-image2 img{
position: absolute;
top:50%; left:50%;
transform: translate(-50%, -50%);
border:5px solid #e99432;
border-radius: 5px;
width: 750px;
object-fit: cover;
}




.bgGDE .image-container3{
display: flex;
flex-wrap: wrap;
gap:15px;
justify-content: center;
min-width: 40%;
width: 100%;
padding: 0px;
margin: 0px;
}


.bgGDE .image-container3 .image img{
max-height:250px;
max-width:350;
object-fit: cover;
transition: .2s linear;
}

.bgGDE .image-container3 .image:hover img{
transform: scale(1.1);
}

.bgGDE .popup-image3 {
position: fixed;
top:0; left:0;
background: rgba(0,0,0,.9);
height:100%;
width:100%;
z-index: 100;
display: none;
}

.bgGDE .popup-image3 span{
position: absolute;
top:0; right:10px;
font-size:40px;
font-weight: bolder;
color: #e7522d;
cursor: pointer;
z-index: 100;
}

.bgGDE  .popup-image3 img{
position: absolute;
top:50%; left:50%;
transform: translate(-50%, -50%);
border:5px solid #e99432;
border-radius: 5px;
width: 750px;
object-fit: cover;
}




.post .image-container4{
display: flex;
flex-wrap: wrap;
gap:15px;
justify-content: center;
min-width: 60%;
width: 100%;
padding: 0px;
margin: 0px;
}


.post .image-container4 .image img{
max-height:250px;
max-width:350;
object-fit: cover;
transition: .2s linear;

}

.post .image-container4 .image:hover img{
transform: scale(1.1);
}

.post .popup-image4 {
position: fixed;
top:0; left:0;
background: rgba(0,0,0,.9);
height:100%;
width:100%;
z-index: 100;
display: none;
}

.post .popup-image4 span{
position: absolute;
top:0; right:10px;
font-size:40px;
font-weight: bolder;
color: #e7522d;
cursor: pointer;
z-index: 100;
}

.post  .popup-image4 img{
position: absolute;
top:50%; left:50%;
transform: translate(-50%, -50%);
border:5px solid #e99432;
border-radius: 5px;
width: 90%;
object-fit: cover;
}



.prev {

margin: 10px;
position: fixed;
bottom: 2%; left: 15%;
padding: 5px;
background-color: #ffe791;
color: #ed7e22;
font-weight: bolder;
font-size: 2em;
border: 5px solid #e4b96c;
border-radius: 15px;
z-index: 5;
}
.next {

margin: 10px;
position: absolute;
bottom:2%; right: 15%;
padding: 5px;
background-color: #ffe791;
color: #ed7e22;
font-weight: bolder;
font-size: 2em;
border: 5px solid #e4b96c;
border-radius: 15px;
z-index: 5;
}

.prev2 {

margin: 10px;
position: absolute;
bottom:2; left: 15%;
padding: 5px;
background-color: #ffe791;
color: #ed7e22;
font-weight: bolder;
font-size: 2em;
border: 5px solid #e4b96c;
border-radius: 15px;
z-index: 5;
}
.next2 {

margin: 10px;
position: absolute;
bottom:2%; right: 15%;
padding: 5px;
background-color: #ffe791;
color: #ed7e22;
font-weight: bolder;
font-size: 2em;
border: 5px solid #e4b96c;
border-radius: 15px;
z-index: 5;
}

.prev3 {

margin: 10px;
position: absolute;
bottom:2%; left: 15%;
padding: 5px;
background-color: #ffe791;
color: #ed7e22;
font-weight: bolder;
font-size: 2em;
border: 5px solid #e4b96c;
border-radius: 15px;
z-index: 5;
}
.next3 {

margin: 10px;
position: absolute;
bottom:2%; right: 15%;
padding: 5px;
background-color: #ffe791;
color: #ed7e22;
font-weight: bolder;
font-size: 2em;
border: 5px solid #e4b96c;
border-radius: 15px;
z-index: 5;
}

.prev4 {

margin: 10px;
position: absolute;
bottom:2%; left: 15%;
padding: 5px;
background-color: #ffe791;
color: #ed7e22;
font-weight: bolder;
font-size: 2em;
border: 5px solid #e4b96c;
border-radius: 15px;
z-index: 5;
}
.next4 {

margin: 10px;
position: absolute;
bottom:2%; right: 15%;
padding: 5px;
background-color: #ffe791;
color: #ed7e22;
font-weight: bolder;
font-size: 2em;
border: 5px solid #e4b96c;
border-radius: 15px;
z-index: 5;
}


a {
  color: #ffe791;
  text-decoration: none;
  font-style: normal;
  
}

footer {
  background-color: #290d06;
  padding: 25px;
  color: #e4b96c;
  text-align: center;
  margin-top: 600px;
}