body {
    background: radial-gradient(circle,rgba(33, 36, 61, 1) 0%, rgba(23, 6, 8, 1) 100%);
    background-size: 100vw 100vh;
    color:#847d9d;
    font-size: 14px;
}

.main-header {
    text-align:center;
    text-shadow: 0px 0px 10px #72e5ff3b;
    font-size: 3em;
}

html {
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    color: white;
}

a:link {
    color: #7076ec;
}

a:active {
    color: #a7a7a7;
}

a:visited {
    color: #4d5199;
}

a:hover {
    color: #fd9494;
}

a.invalid {
    text-decoration: line-through;
}

.index {
    margin: auto;
    display: flex;
    justify-content: center;
    padding: 0px;
    height: 50px;
}

#form {
    color:#6a6baa;;
}

.form-inline {
    display: flex;
    flex-direction: row;
    gap: 10px;
}

.form-check-label {
    margin: 5px;
}

.file-entry {
    margin-bottom: 8px;
    display: flex;
    width: 100%;
    background: #08111e;
    padding: 8px 20px 8px 20px;
    position: relative;
}

.file-size {
    float: right;
    width: 20%;
    text-align: right;
}

.file-name {
    width: 80%;
    overflow-wrap: anywhere;
}

#clipboard-copy {
    position: absolute;
    right: 0px;
    top: 0px;
    width: 38px;
}

#button-submit {
    width:  90%;
}
#button-clear {
    flex-grow: 1;
}

#files {
    margin: 0px 0px auto;
    padding: 20px;
    background: #481f3e;
    width: 100%;
    border-radius: 5px;
    color: #e6a5cf;
    box-shadow: #0000006e 2px 2px 4px;
}

#response-container {
    overflow-wrap: anywhere;
    color: rgb(172, 103, 103);
    margin-top: 20px;
}

#successful-container {
    overflow-wrap: anywhere;
    position: relative;
}

hr {
    margin-top: 10px;
    margin-bottom: 10px;
    border: 0;
    border-top-width: 0px;
    border-top-style: none;
    border-top-color: currentcolor;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    border-top: 2px solid #293c5e;
}

.glyphicon {
    padding-right: 7px;
}

#file-container {
    max-height: 60vh;
    overflow-y: auto;
    scrollbar-color: #726b6b #1a1815;
    scrollbar-width: thin;
    padding-right: 6px;
}

#main-container {
    width: 60%;
    padding: 40px;
    margin: 40px auto auto auto;
    background: #292f3a63;
    box-shadow: #000 0px 0px 5px;
    max-width: 1200px;
    min-width: 400px;
}

#title-bar {
    color:#6a6baa;;
    font-size: 2em;
    padding: 0px 0px 15px 0px;
}

/* this is the container, not the actual progress bar*/
#upload-bar {
    width: 100%;
    position: relative;
    height: 8px;
    margin-top: 5px;
    margin-bottom: 10px;
}

#currently-uploading {
    font-size: 1em;
    text-align: left;
    color:#4facfe;
    overflow-wrap:anywhere;
}

.form-control {
    color: #7394dc;
    background-color: #181717;
    background-image: none;
    border: 1px solid #3e4358;
}

/* PLEASE fucking stop this browser autofill style change bullshit */ 
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
    border: 1px solid rgb(141, 94, 151);
    -webkit-text-fill-color: rgb(127, 97, 164);
    -webkit-box-shadow: 0 0 0px 1000px #202020 inset;
    transition: background-color 5000s ease-in-out 0s;
    caret-color: #ef84cc;
}

.btn-default {
    background-color: #3c3c4c;
    color: #a4a4a4;
    border-color: #3f3f3f;
}

.btn-default:hover {
    background-color: #525274;
    color: #a4a4a4;
    border-color: #3f3f3f;
}

.btn-default:active {
    background-color: #6b6bb2;
    color: #a4a4a4;
    border-color: #3f3f3f;
}

.btn-default:focus {
    background-color: #6b6bb2;
    color: #a4a4a4;
    border-color: #3f3f3f;
}

.btn-primary {
    background-color: #4e3860;
    border-color: #1f0f2b;
    color: #b785c8
}

.file-progress {
    background-color: #4facfe;
    position: absolute;
    left: 0;
    bottom: 0;
    height: 4px;
    border-radius: 2px;
}

.anim-scroll {
    background-image: linear-gradient(
    90deg,
        #4facfe 0%,
        #3a2045 25%,
        #4facfe 50%,
        #3a2045 75%,
        #4facfe 100%
    );
    background-size: 200% 100%;
    animation: loading-shimmer 4.0s linear infinite;
}

.success-message {
    font-size: 1.25em;
    color:#7b89da;
}

.success-message span {
    color: #a34991;
    font-weight: bold;
    background-color: #12121a;
    padding: 5px 8px;
    border-radius: 4px;
}

.btn-danger {
    background-color: #4f2534;
    color: #b87575;
    border-color: #3f3f3f;
}

.btn-danger:hover {
    background-color: #8c3151;
    color: #e7abab;
    border-color: #3f3f3f;
}

.btn-danger:active {
    background-color: #680c2c;
    color: #b67e7e;
    border-color: #7f7272;
}

.btn-danger:focus {
    background-color: #4f2534;
    color: #a4a4a4;
    border-color: #3f3f3f;
}

#message-container {
    color:#5ca588;
}

@keyframes loading-shimmer {
    from {
        background-position: 200% 0;
    }
    to {
        background-position: -200% 0;
    }
}