body {
    --color-1: #E63946;
    --color-2: #F1FAEE;
    --color-3: #A8DADC;
    --color-4: #457B9D;
    --color-5: #1D3557;

    --color-1-dark: #8f232b;
    --color-2-dark: #9ca29a;
    --color-3-dark: #668385;
    --color-4-dark: #294a5f;
    --color-5-dark: #15253c;

    display: flex;
    flex-wrap: wrap;
    font-family: "Calibri";

    color: black !important;
    fill: black !important;
    background-image: linear-gradient(60deg, var(--color-5) 0%, var(--color-3) 80%, var(--color-1) 100%);
    min-height:100vh;
    height:fit-content;
}

body > * {
    margin: 2em;
    padding: 2em;
    border-radius: 1em;

    box-shadow: 0.2em 0.2em 0.2em;

    transition: all 0.5s;
    background-color: white;
    max-width: 85%;
}

body > *:hover {

    box-shadow: 5px 5px 1em;

    transition: all 0.5s;
}

.section {
    margin-bottom: 2em;
    font-weight: bolder;
    font-size: 1.2em;
}
.ql-container{
    height:auto ;
}
.ql-editor{
    min-height:60vh ;
}
#text-edit {
    flex-grow: 2;
    flex-shrink: 2;
    flex-basis: 60%;
    max-height:90vh;
    height: fit-content;
    overflow-y:auto;
}

#file-management {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 30%;
    align-items: center;
    align-content: center;
    height: fit-content;
}

#file-management #upload-field-outer {
    position: relative;
}

#file-management #upload-field-inner {
    position: relative;
    height: 10vh;
}

#file-management #upload-field-inner > * {
    position: absolute;
    top: 0;
}

#file-management > * {
}

#file-management input {
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
}

.btn svg, .btn img, .btn object {
    width: 5em;
    height: auto;
    color: var(--color-1);
    fill: var(--color-1);
    cursor: pointer;
}

.btn {
    display: flex;
    cursor: pointer;
    font-weight: bold;
    padding: .5em 1em;
    border-radius: 0.2em;
    width: 100%;


    align-items: center;

    background-color: var(--color-3);
    background-image: linear-gradient(45deg, var(--color-4), var(--color-4), rgba(0, 0, 0, 0));

    box-shadow: 3px 3px 0 3px var(--color-4-dark);

    transition: all .5s
}

.btn:hover {
    background-color: var(--color-1);

    box-shadow: 1px 1px 0 1px var(--color-4-dark);

    transition: all .5s;
}

.btn #fileNameMaj{
    max-width : 100%;
    overflow-x:hidden;
}

@keyframes hover {
    from {
        position: relative;
        bottom: 0;
    }
    to {
        position: relative;
        bottom: 0.5em;
    }
}

.btn + .ready {
    margin: 1em;
    border-radius: 0.5rem;
    transition: all 1s;
    animation: hover 1s alternate-reverse infinite ease-in-out;
}

#file-management progress {
    width: 100%;
}

#file-management progress, progress::-moz-progress-bar, progress::-webkit-progress-value {
    background: blue;
    color: blue;
}

#error {
    color: var(--color-1);
    opacity:1;
    font-weight: bolder;
    position: relative;
    bottom: 0;
    transition: all 1s;
    min-width : 5em;
    min-height : 2em;
}

#error .hidden {
    opacity:0;
    position: relative;
    bottom: 1em;
    transition: all 1s;
}

@media (max-aspect-ratio: 1/1) {
    body {
        display: flex;
        flex-direction: column;
    }
}