.kotak {
    width: 200px;
    height: 50px;
    background: rgba(255,255,255,0.4);
    border-radius: 4px;
    border: 1px solid rgba(255,255,255,0.2);
    position: absolute;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    display: flex;
    margin: 0 auto;
    justify-content: center;
    align-items: center;
    color: blue;
}

@media (max-width: 459px){
    .kotak1 {
        top: 276px;
        right: -260px;
        z-index: 2;
    }
}
@media (min-width: 460px) and (max-width: 900px){
    .kotak1 {
        top: 296px;
        right: -280px;
        z-index: 2;
    }
}
@media (min-width: 901px) and (max-width: 1200px){
    .kotak1 {
        top: 226px;
        right: -280px;
        z-index: 2;
    }
}
@media (min-width: 1201px) and (max-width: 1399px){
    .kotak1 {
        top: 366px;
        right: -280px;
        z-index: 2;
    }
}
@media (min-width: 1400px){
    .kotak1 {
        top: 396px;
        right: -280px;
        z-index: 2;
    }
}

.kotak2 {
    top: 156px;
    right: -200px;
    z-index: 3;
}

@media (max-width: 360px){
    .kotak3 {
        top: 226px;
        right: -370px;
        z-index: 4;
    }
}
@media (min-width: 361px) and (max-width: 459px){
    .kotak3 {
        top: 266px;
        right: -420px;
        z-index: 4;
    }
}
@media (min-width: 460px) and (max-width: 900px){
    .kotak3 {
        top: 266px;
        right: -480px;
        z-index: 4;
    }
}
@media (min-width: 901px) and (max-width: 1200px){
    .kotak3 {
        top: 236px;
        right: -460px;
        z-index: 4;
    }
}
@media (min-width: 1201px) and (max-width: 1399px){
    .kotak3 {
        top: 296px;
        right: -520px;
        z-index: 4;
    }
}
@media (min-width: 1400px){
    .kotak3 {
        top: 296px;
        right: -600px;
        z-index: 4;
    }
}

@media (max-width: 360px){
    .kotak4 {
        top: 126px;
        right: -340px;
        z-index: 3;
    }
}
@media (min-width: 361px) and (max-width: 459px){
    .kotak4 {
        top: 136px;
        right: -430px;
        z-index: 3;
    }
}
@media (min-width: 460px) and (max-width: 900px){
    .kotak4 {
        top: 136px;
        right: -470px;
        z-index: 3;
    }
}
@media (min-width: 901px) and (max-width: 1200px){
    .kotak4 {
        top: 116px;
        right: -430px;
        z-index: 3;
    }
}
@media (min-width: 1201px) and (max-width: 1399px){
    .kotak4 {
        top: 136px;
        right: -530px;
        z-index: 3;
    }
}
@media (min-width: 1400px){
    .kotak4 {
        top: 136px;
        right: -560px;
        z-index: 3;
    }
}

@media (max-width: 699px){
    .kotak5 {
        top: 176px;
        right: -340px;
        z-index: 4;
    }
}
@media (min-width: 700px) and (max-width: 1000px){
    .kotak5 {
        top: 205px;
        right: -360px;
        z-index: 4;
    }
}
@media (min-width: 1001px) and (max-width: 1399px){
    .kotak5 {
        top: 185px;
        right: -360px;
        z-index: 4;
    }
}
@media (min-width: 1400px){
    .kotak5 {
        top: 256px;
        right: -400px;
        z-index: 4;
    }
}