* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

@font-face {
    font-family: "Boulette";
    src: url(./fonts/Boulette-Regular.woff2);
}

body {
  /*  background: linear-gradient(to left, rgb(75, 255, 75),green); */
  background-color: green;

}

p {
font-family: "Boulette";
font-size: 390px;
background: -webkit-linear-gradient( rgb(247, 0, 255), rgb(47, 0, 255));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-indent: 0;
  margin-block-end: 0;
  margin-block-start: 0;
  align-items: baseline;
  display: inline-block;
 text-shadow: 1px 1px 10px rgb(43, 255, 0);
cursor:default;

}


#container {
    height: 800px;
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
margin-right: 50px;
width: 100%;

}

button{
    background: none;
    cursor: pointer;
    border: none;
}



.figure{
    position: relative;
    display: inline-block;
}

.figure .image-hover {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    object-fit: contain;
    opacity: 0;
    transition: opacity;
  }
  .figure:hover .image-hover {
    opacity: 1;
  }

  .figure:hover .image-main {
    opacity: 0;
  }


  :root {
    --how-much-letters-move: 15px
}

.loader {
    margin-left: 45px;
    display: inline-block;
}

.loader p {

    animation: move 2s ease-in-out infinite;
    
}

.loader p:nth-child(2n) {
    animation-delay: .4s;
}

.loader p:nth-child(2n + 1) {
    animation-delay: .2s;
}


@keyframes move {
    0%, 100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(var(--how-much-letters-move));
    }
}

.tab{
    margin-left: 1000px;
}

.margin-neg{
    margin-left: -500px;
}