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

body {
    height: 98vh;
    background-image: linear-gradient(orange, white, green);
    background-repeat: no-repeat;
    position: relative;
    display: flex;
    justify-content: space-around;
   
}


.sidebar {
    width: 500px;
    padding: 10px;
    height: 98%;
    overflow: hidden;
    position: relative;
    background: #f4f4f4;
    border-right: 2px solid #ccc;
}
.scroll-container {
    position: absolute;
    top: 0;
    width: 98%;
    padding: 10px;
    animation: scrollUp 20s linear infinite;
}
.scroll-container .map{
    width: 100%;
}
.map img{
    width: 100%;
}


@keyframes scrollUp {
    0% { transform: translateY(5%); }
    100% { transform: translateY(-100%); }
}

.item {
    padding: 15px;
    border-bottom: 1px solid #ddd;
    cursor: pointer;
}
.details {
    flex-grow: 1;
    padding: 20px;
    display: none;
    background: #fff;
}
.show {
    display: block;
}