*,*:before,*:after{box-sizing:border-box;margin:0;padding:0;border:none}body{font-family:Montserrat,sans-serif;display:grid;grid-template-rows:auto 1fr auto;height:100vh;color:var(--text-color);background-color:var(--background-color);padding:0;margin:0}header{display:grid;grid-row:1;grid-template-columns:3.4rem 1fr 3.4rem;padding:.75rem 1.5rem}header #logo{height:2.5rem;width:2.5rem}header nav{margin:0 auto}header nav ul{display:grid;grid-auto-flow:column;gap:.5rem;height:100%;list-style-type:none}header nav ul li{margin:auto 0}header nav ul li a{text-decoration:none;color:var(--text-color);font-size:1.125rem;padding:.75rem 1.5rem;border:1px solid transparent;border-radius:.5rem;text-decoration:underline;text-decoration-color:transparent;transition:all .3s ease-in-out}header nav ul li a:hover{text-decoration:underline;text-decoration-color:var(--bronze-color);border-color:#0000001a}header nav ul li a:active{border-color:var(--border-color);box-shadow:inset 0 0 5px var(--shadow-color)}header nav ul li a.current-page{text-decoration:underline;text-decoration-color:var(--bronze-color)}main{display:block;position:relative;grid-row:2;padding:2rem 1rem;width:100%;max-width:768px;margin:0 auto}main h1{font-size:1.5rem;margin:1rem 0}footer{grid-row:3;background-color:var(--bronze-color);color:var(--accent-text-color);border-top:1px solid var(--border-color);text-align:center;padding:.5rem 0;font-size:.75rem}.button{background-color:var(--bronze-color);vertical-align:middle;color:var(--accent-text-color);text-transform:uppercase;padding:.75rem 1.25rem;font-size:.875rem;text-decoration:none;border-width:0;border-top:1px solid var(--border-shine-color);border-bottom:1px solid rgba(0,0,0,.1);border-radius:.5rem;box-shadow:2px 2px 5px var(--shadow-color);transition:all .2s ease-in-out;cursor:pointer}.button:hover{opacity:.9;box-shadow:2px 2px 3px var(--shadow-color)}a.button{display:inline-block}button:has(.button-icon){position:relative;padding-right:3rem}button:has(.button-icon) .button-icon{position:absolute;top:50%;transform:translateY(-50%);right:1rem}.error-text{color:var(--red-color)}.error-session-container{position:fixed;width:max-content;top:4.5rem;left:50%;transform:translate(-50%)}.error-session{display:inline-block;width:fit-content;background-color:var(--red-color);color:var(--accent-text-color);font-size:.875rem;padding:.5rem 1rem;border-top:1px solid var(--border-shine-color);border-bottom:1px solid var(--border-color);border-radius:.5rem;box-shadow:1px 1px 5px var(--shadow-color)}.error-session svg{opacity:.7;vertical-align:middle;margin-left:.5rem;cursor:pointer;transition:opacity .2s ease-in-out}.error-session svg:hover{opacity:1}#info{margin:1rem 0;list-style-type:none}#info>li{margin-bottom:1.5rem}#info h2{font-size:1.375rem;margin-bottom:.5rem}#info>li>*:not(h2){margin-left:.25rem}#info ul,#info ol{padding-left:1.125rem}@media(min-width:768px){header{grid-template-columns:1fr 41.2rem 1fr}header #logo{margin-left:auto}}#dropzone,#dropzone menu{list-style-type:none}#dropzone{background-color:#f5f5f5;margin:2rem 0;border-radius:.5rem}#dropzone li:has(input[type=file]){position:relative}#dropzone li:has(input[type=file]) label{display:block;width:100%;height:100%;text-align:center;font-size:1.125rem;color:var(--text-color);padding:1rem}#dropzone li:has(input[type=file]) label #status{font-weight:600;margin:.5rem 0;opacity:.9}#dropzone li:has(input[type=file]) label #info{display:block;font-size:.85rem;margin:.5rem 0;opacity:.7}#dropzone li:has(input[type=file]) label input[type=file]{position:absolute;opacity:0;top:0;left:0;width:100%;height:100%;cursor:pointer}#dropzone .zone-icon{overflow:visible;color:var(--bronze-color);display:block;margin:1rem auto}#dropzone .zone-icon circle.shadow{filter:drop-shadow(0 0 3px var(--shadow-color))}#dropzone .zone-icon path.shadow{filter:drop-shadow(0 0 12px var(--shadow-extra-color))}#dropzone .drop-complete{text-align:center}#dropzone .drop-complete h3{margin:.5rem 0}#dropzone .drop-complete p{margin:1rem 0}#dropzone .drop-complete button{margin-bottom:1rem}#dropzone .drop-complete .zone-icon{transition:fill .3s ease-in-out}#dropzone .drop-complete menu{display:grid;grid-auto-flow:column;gap:1rem}#dropzone .drop-complete menu :first-child{margin-right:0;margin-left:auto}#dropzone .drop-complete menu :last-child{margin-left:0;margin-right:auto}#dropzone li:not(menu>li){border:1px solid var(--border-color);padding:.75rem 1rem}#dropzone li:not(menu>li):not(:first-child){border-top-width:0px}#dropzone li:not(menu>li):first-child{border-radius:.5rem .5rem 0 0}#dropzone li:not(menu>li):last-child{border-radius:0 0 .5rem .5rem}#dropzone li:not(menu>li):only-child,#dropzone li:not(menu>li):first-child:has(+:last-child[style*="display: none"]){border-radius:.5rem}#dropzone li:not(menu>li):has(input[type=file]){border-style:dashed}#dropzone li:not(menu>li).file-list{display:grid;grid-template-columns:1fr auto}#dropzone li:not(menu>li).file-list:has(menu){padding:0 0 0 1rem;border-right:none}#dropzone li:not(menu>li).file-list:has(menu) menu{display:grid;grid-auto-flow:column}#dropzone li:not(menu>li).file-list:has(menu) menu li>button{height:100%;background-color:var(--bronze-color);color:var(--accent-text-color);padding:1.125rem 1rem;border-top:1px solid var(--border-shine-color);border-left:1px solid var(--border-color);transition:color .2s ease-in-out,background-color .2s ease-in-out;cursor:pointer}#dropzone li:not(menu>li).file-list:has(menu) menu li>button:disabled{opacity:.6;cursor:not-allowed}#dropzone li:not(menu>li).file-list:has(menu) menu li:last-child>button{border-right:1px solid var(--border-color)}#dropzone li:not(menu>li).file-list:has(menu) menu li:first-child>button:hover{background-color:var(--red-color)}#dropzone li:not(menu>li).file-list:has(menu) menu li:last-child>button:hover{background-color:var(--green-color)}#dropzone li:not(menu>li).file-list:has(menu) #file-total{display:grid;grid-template-columns:auto 1fr;font-size:.9rem;text-transform:uppercase;font-weight:600;margin:auto 0}#dropzone li:not(menu>li).file-list:has(menu) #file-total div{grid-column:1;grid-row:2}#dropzone li:not(menu>li).file-list .file-name{font-weight:600;padding-bottom:.25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#dropzone li:not(menu>li).file-list .file-size{grid-row:2;font-size:.85rem;opacity:.7}#dropzone li:not(menu>li).file-list svg{overflow:visible;grid-row:1 / span 2;align-self:center;cursor:pointer;transition:fill .2s ease-in-out}#dropzone li:not(menu>li).file-list svg:hover{color:var(--red-color)}#dropzone .error{text-align:center;color:var(--accent-text-color);background-color:var(--red-color);font-size:.75rem;padding:.75rem;box-shadow:inset 0 0 8px var(--shadow-extra-color)}.expand-error{animation:expand .5s ease-out}.collapse-error{animation:collapse .5s ease-in}.bounce-in{animation:bounce-in .7s ease-out}.bounce-out{animation:bounce-out .7s ease-in}.spin{animation:spin 1s;transform-origin:50% 50%;transform-box:fill-box}@keyframes expand{0%{max-height:0;padding-top:0;padding-bottom:0}to{max-height:3rem;padding-top:.75rem;padding-bottom:.75rem}}@keyframes collapse{0%{max-height:3rem;padding-top:.75rem;padding-bottom:.75rem}to{max-height:0;padding-top:0;padding-bottom:0}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes bounce-in{0%{opacity:0;transform:scale(.3)}50%{opacity:1;transform:scale(1.05)}70%{transform:scale(.9)}to{transform:scale(1)}}@keyframes bounce-out{0%{transform:scale(1)}25%{transform:scale(.95)}50%{opacity:1;transform:scale(1.1)}to{opacity:0;transform:scale(.3)}}:root{--background-color: #f0f3f5;--text-color: #272932;--red-color: #d3365d;--green-color: #0F7173;--bronze-color: #cc9b78;--accent-text-color: #E7ECEF;--border-color: rgba(0, 0, 0, .25);--shadow-color: rgba(0, 0, 0, .2);--shadow-extra-color: rgba(0, 0, 0, .4);--border-shine-color: rgba(255, 255, 255, .1)}
