.main-wrapper {
    border:none;
    overflow: hidden;
}

.carousel-wrapper {
    height: 100vh;
    position: fixed;
    width: 100vw;
    display: block;
    margin: 0px 0px ;
    border: inherit;
    overflow:hidden;
}

.carousel-item {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 25px 50px;
    opacity: 0;
    transition: all 0.5s ease-in-out;
}
.arrow{
    border: solid black;
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 12px;
}
.arrow-prev {
    left: 4vw;
    position: absolute;
    top: 50%;
    transform: translateY(-50%) rotate(135deg);

}
.arrow-next {
    right: 4vw;
    position: absolute;
    top: 50%;
    transform: translateY(-50%) rotate(-45deg);
}

[id^= "item"] {
    display: none;
}
.item-1 {
    z-index: 2;
    opacity: 1;
    background-image: url("./IMG/1.jpg");
    background-position:center;
    background-repeat:no-repeat;
    background-size: contain;
}
.item-2 {
    background-image: url('./IMG/2.jpg');
    background-position:center;
    background-repeat:no-repeat;
    background-size: contain;
}
.item-3 {
    background-image: url('./IMG/4.jpg');
    background-position:center;

    background-repeat:no-repeat;
    background-size: contain;
}

*:target ~ .item-1{
    opacity: 0;
}
#item-1:target ~ .item-1 {
    opacity: 1;

}
#item-2:target ~ .item-2, #item-3:target ~ .item-3 {
    z-index: 3;
    opacity: 1;
}