*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-select: none;
}

body{
  height: 100vh;
  background-color: black;
  color: white;
  overflow: hidden;
}

header{
  text-align:center;
  padding:2rem;
}

@keyframes fadein {
  from {opacity: 0;}
  to {opacity: 1;}
}

span{
  transition: ease .5s;
}

span:hover{
  font-size:1.2em;
}

.fullest{
  opacity: 0;
  animation-name: fadein;
  animation-delay: 1s;
  animation-duration: 4s;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
  width:100%;
  height:calc(100% - 92px);
  /* height:100%; */
  display: flex;
  justify-content: center;
  align-items: center;
}

img{
  /* width:250px; */
  transition: ease .2s;
  max-width:450px;
  cursor: grab;
}

img:active{
  transform: scaleY(.95) scaleX(1.05);
  cursor:grabbing;
}

.jumleft{
  animation-name:left;
  animation-duration: .2s;
  animation-timing-function: ease;
}

.jumright{
  animation-name:right;
  animation-duration: .2s;
  animation-timing-function: ease;
}

@keyframes left {
  from {
    opacity: 0;
    transform: translateX(-100px) scaleY(.8) scaleX(1.2);
    pointer-events:none;
  }
  to {
    opacity: 1;
    transform: translateX(0px) scaleY(1) scaleX(1);
  }
}

@keyframes right {
  from {
    opacity: 0;
    transform: translateX(100px) scaleY(.8) scaleX(1.2);
    pointer-events:none;
  }
  to {
    opacity: 1;
    transform: translateX(0px) scaleY(1) scaleX(1);
  }
}

button{
  width:3rem;
  height: 3rem;
  font-size:2rem;
  font-family: 'Times New Roman', Times, serif;
  font-weight: bolder;
  color:#7f7f7f;
  background:none;
  border:3px solid #7f7f7f;
  border-radius:3px;
  cursor: pointer;
  transition: ease .1s;
}

button:hover{
  color:white;
  border: 3px solid white;
  transform: scale(1.1);
}

button:active{
  color:#7f7f7f;
  border: 3px solid #7f7f7f;
  transform: scaleY(.8) scaleX(1.3);
  transition: linear 0s;
}

/* .btnsss{
  display: flex;
  justify-content: space-between;
  width:30rem;
  position: absolute;
  z-index: -9999;
} */

.btnsss{
  min-width:600px;
  position: absolute;
  display: flex;
  justify-content: space-between;
  z-index: 99;
  pointer-events: none; /* Add this line to make it able to click through the div */
}

/* #left{
  margin-right:2rem;
}

#right{
  margin-left:2rem;
} */




@media only screen and (max-width: 768px) {
  button{
    width:2.5rem;
    height:2.5rem;
    font-size:1.5rem;
  }

  .btnsss{
    min-width:0;
    display: flex;
    position:relative;
    column-gap: 2rem;
    margin-top:2rem;
  }

  img{
    /* transform: scale(.7); */
    height:220px;
  }

  img:active{
    transform: scaleY(.95) scaleX(1.05);
  }

  .fullest{
    flex-direction: column;
  }

  #visits{
    visibility:hidden;
  }

}

.invertbtn{
  color:#080808;
  border:#080808 1px solid;
  background:none;
  width:2rem;
  aspect-ratio: 1;
  cursor: pointer;
  transition: 500ms;
}

.invertbtn:hover{
  color:white;
  border:white 1px solid;
}

.invertation{
  animation-name: invertation;
  animation-timing-function: ease-in-out;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}

.goback{
  animation-name: goback;
  animation-timing-function: ease-in-out;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}

@keyframes goback{
  from{
    filter: invert(100%);
    transform: scaleX(-1);
  }
  to{
    filter: invert(0%);
    transform: scaleX(1);
  }
}

@keyframes invertation {
  from{
    filter: invert(0%);
    transform: scaleX(1);
  }
  to{
    filter: invert(100%);
    transform: scaleX(-1);
  }
}

#visits{
  position: fixed;
}