.new_main { display: flex; flex-wrap: nowrap; overflow-x: auto; margin-right: 4%; justify-content: flex-start; margin-top: 5px; gap: 5px; padding-bottom: 50px; padding-top: 50px; padding-left: 4%; scrollbar-width: none; -ms-overflow-style: none; position: relative; } .new_main::-webkit-scrollbar { display: none; /* Chrome, Safari, Opera */ } .new_main > .new_column{ margin: 5px; flex: 0 0 auto; /* Reset flex to not grow or shrink */ min-width: 180px; /* Set a minimum width for each column */ } .new_column { position: relative; width: 180px; height: 250px; border-radius: 5px; overflow: visible; display: inline-block; white-space: nowrap; background-color: #27292F; margin: 5px; opacity: 1; transition: opacity 0.9s ease; } .small_card { display: none; position: absolute; top:-50px; left:-60px; width: 310px; height: 350px; background: #27292F; color: white; opacity: 0; transition: opacity 0.9s ease; z-index: 999; } .small_card:first-child{ left: 0px; } .new_column:hover .small_card { display: block; opacity: 1; /* Change opacity to 1 on hover */ box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.3); border-radius: 10px; } .new_column:hover .small_card:first-child{ left: 0px; } .new_column:hover{ background:none; border-radius: 5px; } .new_column .movie_poster { width: inherit; height: inherit; border-radius: 5px; } .new_column:hover .movie_poster{ width: 100%; height: auto; display: none; } .poster_container { position: relative; height: 50%; width: 100%; background-size: cover; background-position: center; border-radius: 10px 10px 0px 0px; } .small_card:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to top, #27292F 45%, transparent 100%); z-index: 1; border-radius: 10px; } .small_card .card_header { margin: 5px; display: flex; justify-content: space-around; position: relative; z-index: 2; } .small_card .movie_info { margin-left: 12px; margin-right: 12px; position: relative; word-wrap: break-word; z-index: 2; } .add_btn{ margin-left: 2%; width: 25%; background-color: #35373E; align-items: center; height: 43px; color: #FCFCFD; font-family: "JetBrains Mono",monospace; font-size: 18px; line-height: 1; border-radius: 6px; border-width: 0; box-shadow: rgba(45, 35, 66, 0.4) 0 2px 4px,rgba(45, 35, 66, 0.3) 0 7px 13px -3px,#35373E 0 -3px 0 inset; box-sizing: border-box; transition: box-shadow .15s,transform .15s; user-select: none; -webkit-user-select: none; touch-action: manipulation; white-space: nowrap; will-change: box-shadow,transform; } .add_btn:focus { box-shadow: #D6D6E7 0 0 0 1.5px inset, rgba(45, 35, 66, 0.4) 0 2px 4px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset; } .add_btn:hover { box-shadow: rgba(45, 35, 66, 0.4) 0 4px 8px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #35373E 0 -3px 0 inset; transform: translateY(-2px); } .add_btn:active { box-shadow: #D6D6E7 0 3px 7px inset; transform: translateY(2px); } ul.below_watch_btn { padding-left: 0; list-style-type: none; } ul.below_watch_btn li { display: inline-block; margin-right: 5px; color: white; font-family: "Inter", sans-serif;; font-size: 14px; font-weight: bolder; } ul.below_watch_btn li:last-child { margin-right: 0; } ul.below_watch_btn li::after { content: "•"; margin-left: 5px; color: #D6D6E7; } ul.below_watch_btn li:last-child::after { content: ""; } .small_card .movie_info div.story { color: #D6D6E7; font-size: 13px; font-family: "Inter", sans-serif; white-space: normal; word-wrap: break-word; line-height: normal; } .small_card .volume_control{ position: absolute; color:white; bottom: 8px; right: 16px; } @media screen and (max-width:600px){ .scroll-wrapper{ display: none; } .button-30{ width: 90%; } .add_btn{ margin-top: 5px; margin-left: 0px; width: 80%; } } hr.download { border-top: 1px dashed #4a4f61; width: 95%; margin-top: 5%; margin-bottom: 5%; } .swal2-popup { max-height: 600px; overflow-y: auto; } .swal2-popup::-webkit-scrollbar { display: none; } .swal2-popup::-webkit-scrollbar-thumb { background: #36395A; }