div.video.container { display: flex; color: var(--text-color); width: 90%; margin: 16px auto 16px auto; border: solid 1px #00000033; border-radius: 8px; box-shadow: 1px 1px 8px #00000033; padding: 16px; background-color: #ffffff22; backdrop-filter: blur(3px); } div.video.container video#videoplayer { flex-grow: 1; border-radius: 12px; height: auto; max-width: 55%; } div.video.container div.videoobjects { display: grid; padding: 24px; } div.video.container div.videodetails h1#videotitle { padding: 0 12px; } div.dropdown-container { display: flex; flex-direction: column-reverse; } div.video.container div.download-dropdown { position: relative; display: inline-block; padding: 12px; width: 25px; height: 25px; background-color: #21afff; box-shadow: 1px 1px 8px #00000033; border-radius: 50px; transition-duration: 0.35s; } div.video.container div.download-dropdown:hover { box-shadow: 1px 1px 8px #00000088; } div.video.container div.download-dropdown img { width: 25px; height: 25px; } div.video.container div.download-dropdown div.dropdown-content { display: none; position: absolute; font-size: 80%; min-width: 135px; background-color: #edeeee; box-shadow: 1px 1px 8px #00000033; border-radius: 8px; text-align: center; } div.video.container div.download-dropdown:hover div.dropdown-content { display: block; } div.video.container div.download-dropdown div.dropdown-content ul { list-style-type: none; padding-left: 0; } div.video.container div.download-dropdown div.dropdown-content ul li { padding: 4px; } div.video.container div.download-dropdown div.dropdown-content ul li:hover { background-color: #dcdfdf; } div.video.container div.download-dropdown div.dropdown-content ul li a { text-decoration: none; color: var(--text-color); } @media screen and (max-width: 800px) { div.video.container { display: block; } div.video.container video#videoplayer { width: 100%; max-width: none; } div.video.container div.download-dropdown { display: block; margin-left: auto; margin-right: auto; margin-top: 12px; } }