:root{
    background-color: #383838;
}
body {
    background-color: #383838;
    color: white;
}

.back-slide{
    filter:opacity(30%);
    height: 30px;
}

.bg-image{
    background-image: url('../../public/image/example1.jpg');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    height: 100svh;
    animation: repeat-image;
    animation-duration: 15s;
    animation-iteration-count:infinite;
    animation-timing-function: ease-in-out;
}

@keyframes repeat-image {
    0% {
        background-image: url('../../public/image/example1.jpg');
    }
    90% {
        background-image: url('../../public/image/example2.jpg'); 
    }
    100% {
        background-image: url('../../public/image/example1.jpg');
    }
  }

.bg-image-2{
    background-image: url('../../public/image/backimage.webp');
    background-repeat: repeat;
    background-size: cover;
    background-attachment: fixed;
}

.about-me{
    background-image: url('https://cdna.artstation.com/p/assets/images/images/058/003/724/large/nikita-dojza-fushimi-inari.jpg?1673187558');
    background-repeat: repeat;
    background-size: cover;
    background-attachment: fixed;
}

.bg-filter{
    backdrop-filter: blur(5px);
    height: 100svh;
    display: grid;
    place-items: center;
    align-content: center;

    animation: repeat-image-filter;
    animation-duration: 15s;
    animation-iteration-count:infinite;
    animation-timing-function: ease-in-out;
}

@keyframes repeat-image-filter {
    0% {
        backdrop-filter: blur(5px);
    }
    50% {
        backdrop-filter: blur(0px);
    }
    100% {
        backdrop-filter: blur(5px);
    }
  }

.block-image{
    width:300px;
    height:300px;
}
#floatingInput::-moz-placeholder {
    color: var(--bs-dark-color);
    opacity: 1;
  }
#floatingInput::placeholder {
    color: var(--bs-dark-color);
    opacity: 1;
  }
  #floatingInput:focus {
    padding-top:0;
    padding-bottom: 0;
  }

  .form-floating > .form-control, .form-floating > .form-control-plaintext{
    padding-top:0;
    padding-bottom: 0;
  }

  header{
    transition: all 1s;
    opacity: 0%;
    display: none;
    overflow-anchor: none;
  }

  .anim-header{
    display:block;
    opacity: 100%;
  }


.block{
    transition: all 0.5s;
    transform: scale(0);
}
.block-animation{
    transform: scale(1);
}

@keyframes heroes-anim {
    0% {
        transform: scale(0);

    }
    100% {
        transform: scale(1);
    }
  }

.block-image-animation:hover {
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);}

.about-me-block{
    transition: all 0.5s;
    transform: scale(0);
}

.about-me-block-animation{
    transform: scale(1);
}