body { height: 99.9%; margin: 0; padding: 0; } a { color: blue; } a:hover { text-decoration: underline; } #video { width: 100%; margin: 3px; } #modal-video-container { display: none; background: white; position: fixed; top: 50%; left: 50%; height: 100%; width: 100%; transform: translate(-50%, -50%); border: black 1px solid; } .video-container-bar { display: flex; justify-content: right; } #close-and-reset-video-container { margin-top: 0.25rem; margin-right: 0.25rem; border: 1px solid black; } #close-and-reset-video-container:hover { background: black; color: white; } #download-video-container { margin: 10px; justify-content: center; } #download-video-container a { display: none; padding-left: 5px; padding-right: 5px; padding-top: 5px; padding-bottom: 5px; width: 100%; background: #0a0; border-radius: 5px; font-size: 30px; color: white; height: 30px; } #download-video-container a.active { display: block; } #download-video-container a embed { height: 30px; } #video-container { display: flex; align-items: center; justify-content: center; flex-direction: column; height: 100%; } .block { display: block; } .application-container { display: flex; align-items: center; justify-content: center; flex-direction: column; height: 100%; background: #000; color: white; } #download-form { display: flex; justify-content: center; flex-direction: column; } #download-form-button { margin-top: 5px; height: 50px; font-size: 1.5rem; background: #fff; color: black; border: none; } h2 { font-size: 2rem; } #modal-loading { display: none; position: fixed; top: 50%; left: 50%; height: 100%; width: 100%; transform: translate(-50%, -50%); border: black 1px solid; justify-content: right; align-items: center; } #modal-loading.active { display: flex; } #modal-loading embed { width: 10%; } #poping-notice { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); border: black 1px solid; width: 91%; background: white; padding: 10px; border-radius: 15px; max-height: 100%; overflow-y: scroll; } #poping-notice.active { display: block; } #poping-notice-container-bar { display: flex; justify-content: center; font-size: 5rem; } #close-poping-notice { width: 150px; height: 150px; align-items: center; display: flex; text-align: center; justify-content: center; border-radius: 50%; background: #0f0; color: black; } #close-poping-notice:hover { background: black; color: white; } @media screen and min-width(750px) { #poping-notice { width: auto; height: auto; } #poping-notice-container-bar { justify-content: right; } }