के अलावा के परिवर्तन हैडर लेआउट में पानी का छींटा

@import url('https://fonts.googleapis.com/css?family=Cinzel:300,400,500,600,700|Muli:200,300,400,500,600|Open+Sans:200,300,400,500,600|Oswald:200,300,400,500,600&subset=latin-ext');
@import url('https://fonts.googleapis.com/css?family=Montserrat:200,200i,300,300i,400,400i,500,500i');
@import url('https://fonts.googleapis.com/css?family=Raleway:300,400,500,600,800&subset=latin-ext');
@import url('https://fonts.googleapis.com/css?family=Roboto+Mono:200,300,400,500');

a { color: rgb(146, 146, 146); cursor: pointer; text-decoration: none; -o-transition: color 2.0s ease-out, background .1s ease-in; -ms-transition: color 2.0s ease-out, background .1s ease-in; -moz-transition: color 2.0s ease-out, background .1s ease-in; -webkit-transition: color 2.0s ease-out, background .1s ease-in; transition: all 1.67s ease-out; padding: 10px 10px 10px 10px }
a.fails { color: rgb(146, 146, 146); }
a.success { box-shadow: inset 0px 0px 20px 2px #96ffa2ab, 0px 0px 0px 4px rgb(165, 255, 200); border-radius: 18px; padding: 4px 50px 4px 10px; color: #147b01 !important; }
a.tool-ref { background: #dcdcdc4f; padding: 1px 3px 2px 3px; font-weight: 600; vertical-align: bottom; border-radius: 5px; color: rgb(35, 84, 148); border: 1px inset transparent }
a.tool-ref:hover { background: #fff; border: 1px outset #00ffc8; color: #3df5b4; text-decoration: underline }
a:hover, a:focus { color: #00efb8 !important; transition-duration: 2.75 s !important; transition-property: transform !important }
a:hover:before, a:focus:before, span:hover:before { pointer-events: none; position: absolute; z-index: -1; content: ''; opacity: .75; color: radial-gradient(ellipse at center, rgba(0, 0, 0, .11) 50 %, rgba(0, 0, 0, 0.30) 90 %) !important; transition-duration: 1.5 s; transition-property: transform opacity 0.95 }
blockquote { border-left: 4px lightgrey solid; padding-left: 1rem; margin-top: 2rem; margin-bottom: 2rem; margin-left: 0rem }
body { font-size: 1.15rem; line-height: 1.1; font-weight: 400; font-family: "Oswald", "Muli", "Open Sans", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; color: rgb(50, 50, 50) }
body { margin: 0; overflow-x: hidden; text-align: center }
button#clear-pipeline { background-color: #cccccc24 !important; color: #000000bd !important; border: 2px outset; border-color: #d4d4d4a3; }
button#initiate-pipeline { font-size: 90%; padding: .67% 6% .67% 6%; border-width: 1px; margin: 2%; mix-blend-mode: color; letter-spacing: 8px; text-transform: uppercase; border-radius: 200px }
button#initiate-pipeline:hover { border-color: #00ffb54a; border-width: 0.5px; box-shadow: inset 0px -30px 0px -5px #efefef4a; background-blend-mode: exclusion; background: #ffffff5e; animation: pact-gradient-text-flow 5s infinite linear; }
button#refresh-downloads-links:hover { border: 2px inset #d9d9d921 }
button#sign-on-submit, button#log-out-submit, button#refresh-downloads-links, button.submit-buttons { background: rgb(65, 0, 255); mix-blend-mode: luminosity; margin-top: 1px; border: 2px outset #aaa; font-size: 60%; border-radius: 100px; letter-spacing: .5rem; display: inline-flex; }
button#sign-on-submit:hover, button#log-out-submit:hover, button.submit-buttons:hover { background-color: rgba(117, 117, 117, 0.5) !important; filter: invert(1) brightness(0.75) contrast(1.5) saturate(2) }
button, .button { margin-bottom: 0rem }
button, .button, button:focus { outline: none !important }
code { font-family: 'Roboto Mono', monospace; font-size: 0.85rem !important }
div.dash-spreadsheet, .dash-freeze-left, .dash-spreadsheet, .dash-spreadsheet-container, .dash-freeze-left, .dash-grow { max-width: 100% !important }
h1 { font-size: 3.5rem; font-family: 'Montserrat'; text-rendering: optimizeLegibility; color: #0d04a5; font-weight: 500; text-decoration: none; border-bottom: 0.0px solid gray; line-height: 4rem; text-decoration: underline }
h2 { font-family: 'Oswald', serif; color: var(--pph-color-8); cursor: default; font-weight: 300; font-size: 2rem; }
h3 { font-size: 2.0rem; font-family: 'Montserrat', sans-serif; font-weight: 300; color: rgb(32, 92, 188); cursor: default }
h4 { font-size: 1.5rem; font-family: 'Oswald', sans-serif; color: var(--pph-color-57); font-weight: 400; cursor: default }
h5 { font-size: 1.2rem; font-family: 'Muli', sans-serif; cursor: default }
h6 { font-size: 1.1rem; color: #333; font-weight: 400 }
header.a:link { color: rgb(18, 116, 165) }
hr { margin-top: 2%; justify-content: center; margin-bottom: 3% }
hr { margin-top: 3rem; margin-bottom: 3.5rem; border-width: 0; border-top: 1px solid #E1E1E1 }
input, textarea, select, fieldset { margin-bottom: 0rem }
input:-internal-autofill-previewed, input:-internal-autofill-selected, textarea:-internal-autofill-previewed, textarea:-internal-autofill-selected, select:-internal-autofill-previewed, select:-internal-autofill-selected { background-color: #ffffff00 !important }
label, legend { display: block; margin-bottom: 0px }
label>.label-body { display: inline-block }
p { margin-top: 0 }
p, h2, h4, h5, h6 { margin-top: .5%; margin-bottom: 1% }
p, ul, ol { margin-bottom: 0.75rem }
pre, dl, figure, table, form { margin-bottom: 0rem }
section.wrapper { padding: 10px 0 }
span.menubar-title:hover { color: rgb(13, 4, 145) !important }

.button, button, input[type="submit"], input[type="reset"], input[type="button"] { display: inline-block; padding: 0 25px; color: #000000; text-align: center; font-size: 14px; font-weight: 500; font-family: "Cinzel", serif !important; line-height: 32px; text-decoration: none; white-space: nowrap; background-color: #ffffffcc !important; border-radius: 30px; border: 1px ridge #00000050; cursor: pointer; box-sizing: border-box }
.button.button-primary, button.button-primary, input[type="submit"].button-primary, input[type="reset"].button-primary, input[type="button"].button-primary { color: #00000075 !important; background-color: #33C3F050; border-color: #33C3F0 }
.button.button-primary:hover, button.button-primary:hover, input[type="submit"].button-primary:hover, input[type="reset"].button-primary:hover, input[type="button"].button-primary:hover, .button.button-primary:focus, button.button-primary:focus, input[type="submit"].button-primary:focus, input[type="reset"].button-primary:focus, input[type="button"].button-primary:focus { color: #00000075 !important; background-color: transparent; border-color: #1EAEDB }
.button:focus, button:focus, input[type="submit"]:focus, input[type="reset"]:focus, input[type="button"]:focus { color: #5C5D86; border-color: #00000075 !important }
.button:hover, button:hover, input[type="submit"]:hover, input[type="reset"]:hover, input[type="button"]:hover { border-color: #00FFC050; background: #00000075 }
.fader-line-long { display: flex; border: none; color: #fff0; height: 1px; background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 650, from(rgba(200, 210, 220, 0.5)), to(#fff0)); }
.fader-line-short { display: flex; border: none; color: #fff0; height: 1px; background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 350, from(rgba(120, 120, 150, 0.5)), to(#fff0)) }
.hr-style-2 { border-top: 3px double #8c8b8b; margin: 10px 10px 10px 10px; width: 67% }
.hvr-float-shadow, .workflow-css label { display: inline-block; vertical-align: middle; position: relative; -webkit-transition-duration: 1.0s; transition-duration: 1.0s; -webkit-transition-property: transform; transition-property: transform; text-rendering: optimizeLegibility }
.hvr-float-shadow:before, .workflow-css label:before { pointer-events: none; position: absolute; z-index: 99; content: ''; top: 180%; left: -10%; height: 6px; width: 120%; opacity: 0.05; background: -webkit-radial-gradient(center, ellipse, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%); background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%); -webkit-transition-duration: 0.15s; transition-duration: 0.15s; -webkit-transition-property: transform, opacity; transition-property: transform, opacity }
.hvr-float-shadow:hover, .hvr-float-shadow:focus, .hvr-float-shadow:active, .workflow-css label:hover, .workflow-css label:focus, .workflow-css label:active { -webkit-transform: translateY(-1px)translateY(-1px); color: rgba(0, 215, 198, 1.0); opacity: 0.99; animation-name: anim-rainbow-flow-keys; animation-duration: 1s; animation-iteration-count: infinite; mix-blend-mode: hard-light }
.hvr-float-shadow:hover:before, .hvr-float-shadow:focus:before, .hvr-float-shadow:active:before, .workflow-css label:hover:before, .workflow-css label:focus:before, .workflow-css label:active:before { opacity: 0.9; -webkit-transform: translateY(-1px); transform: translateY(1px) }

<!DOCTYPE html>
<html>

<head>

</head>

<body>
  <div>
    <h1>ML Dashboard</h1>
    <h2>PIPELINE</h2>
    <hr style="margin-left: 25%; width: 50%;">
    <h3 style="margin-top: -10px; text-align: center;">Step One: Upload [e.g., insert expected data input files].</h3>
    <h2 style="margin-top: -0.75%;">Then, click “Launch Pipeline” to launch analysis.</h2>
    <hr style="margin-left: 25%; width: 50%;">
    <div id="upload-data">
      <div class="" aria-disabled="false" style="position: relative;">
        <div style="background-color: rgba(255, 255, 255, 0.5); border-color: transparent; border-radius: 100px; border-style: solid; border-width: 1px; box-shadow: rgba(0, 0, 50, 0.16) 0px 1px 5px 2px; margin: 2% 15%; padding: 0.5%; text-align: center;">Drag/Drop ⤓ file(s) here —or—<a class="hvr-float-shadow" style="font-weight: 400; margin-bottom: 5px;">

    
    
John Collins
           
    
    

          2021-11-19 19:54:35