body {
    font-family: 'Urbanist', sans-serif;
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes pulse2 {
    0% {
        transform: scale(0.9);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(0.9);
    }
}

.interakcja_1 {
    position: absolute;
    left: 21.5vw;
    transform: translateY(-50%);
    bottom: 48.5%;
    box-shadow: inset 0px 0px 30px 0px white;
    border: 1px solid white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 23px;
    color: white;
    width: 2.5vw;
    height: 2.5vw;
    border-radius: 10px;
    animation: pulse 2.5s infinite;
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.interakcja_2 {
    position: absolute;
    right: 21.5vw;
    transform: translateY(-50%);
    bottom: 48.5%;
    box-shadow: inset 0px 0px 30px 0px white;
    border: 1px solid white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 23px;
    color: white;
    width: 2.5vw;
    height: 2.5vw;
    border-radius: 10px;
    animation: pulse 2.5s infinite;
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.interakcja_3 {
    position: absolute;
    right: 43.5vw;
    transform: translateY(-50%);
    bottom: 25.5%;
    box-shadow: inset 0px 0px 30px 0px white;
    border: 1px solid white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 23px;
    color: white;
    width: 2.5vw;
    height: 2.5vw;
    border-radius: 10px;
    animation: pulse 2.5s infinite;
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.interakcja_4 {
    position: absolute;
    left: 45.5vw;
    transform: translateY(-50%);
    bottom: 42.5%;
    box-shadow: inset 0px 0px 30px 0px white;
    border: 1px solid white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 23px;
    color: white;
    width: 2.5vw;
    height: 2.5vw;
    border-radius: 10px;
    animation: pulse 2.5s infinite;
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.interakcja_1:hover,
.interakcja_2:hover,
.interakcja_3:hover,
.interakcja_4:hover {
    transform: scale(1.1);
    filter: drop-shadow(0px 0px 10px rgb(255, 255, 255));
    text-shadow: 1px 1px 0 #232323;
}

.interakcja_1::before,
.interakcja_2::before,
.interakcja_3::before,
.interakcja_4::before {
    content: '';
    left: -10%;
    top: -10%;
    position: absolute;
    width: 120%;
    height: 120%;
    background-color: rgba(255, 255, 255, 0.053);
    border-radius: 10px;
    transform: translate(-50%, -50%);
    z-index: -1;
    animation: pulse2 2.5s infinite;
}

.lupa_icon {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: white;
    width: 2.5vw;
    height: 2.5vw;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translate(-50%, 30px);
    }
    to {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}

.item1_container,
.item2_container,
.item3_container,
.item4_container {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 2vw;
    background: radial-gradient(circle, rgba(40, 40, 40, 0.696) 0%, rgb(26, 26, 26) 100%);
    background-color: #232323c2;
    width: 20vw;
    height: 8vw;
    border-radius: 5px;
    opacity: 0;
    animation: fadeInUp 0.5s ease-out forwards;
}

.name {
    position: absolute;
    left: 1vw;
    top: 1vw;
    width: 6vw;
    height: 1.5vw;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 550;
    color: white;
    border-radius: 3px;
}

.wyjscie {
    position: absolute;
    right: 1vw;
    top: 1vw;
    width: 1vw;
    height: 1vw;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    font-weight: bold;
    color: white;
    border-radius: 3px;
    transition: transform 0.2s ease;
}

.wyjscie:hover {
    transform: scale(1.2);
}

.opis {
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    top: 50%;
    width: 18vw;
    height: 3vw;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    border-radius: 3px;
    color: white;
}

.kupno,
.kupno3,
.kupno4 {
    position: absolute;
    left: 1vw;
    bottom: 0.5vw;
    width: 8.5vw;
    height: 1.3vw;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
    border-radius: 3px;
    background: radial-gradient(circle, rgb(199, 199, 199) 0%, rgb(168, 168, 168) 100%);
    border: 1px solid white;
    background-color: #ffffff;
    transition: transform 0.2s ease;
}

.kupno2 {
    position: absolute;
    left: 1vw;
    bottom: 0.5vw;
    width: 18vw;
    height: 1.3vw;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
    border-radius: 3px;
    background: radial-gradient(circle, rgb(199, 199, 199) 0%, rgb(168, 168, 168) 100%);
    border: 1px solid white;
    background-color: #ffffff;
    transition: transform 0.2s ease;
}

.kupno:hover,
.kupno2:hover,
.kupno3:hover,
.kupno4:hover {
    transform: scale(1.02);
}

.kupno_ammo,
.kupno_ammo2,
.kupno_ammo3 {
    position: absolute;
    right: 1vw;
    bottom: 0.5vw;
    width: 8.5vw;
    height: 1.3vw;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
    border-radius: 3px;
    background: radial-gradient(circle, rgb(199, 199, 199) 0%, rgb(168, 168, 168) 100%);
    border: 1px solid white;
    background-color: #ffffff;
    transition: transform 0.2s ease;
}

.kupno_ammo:hover,
.kupno_ammo2:hover,
.kupno_ammo3:hover {
    transform: scale(1.02);
}