body {
    height: 100vh;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    background-repeat: no-repeat;
    overscroll-behavior-y: none;
    overscroll-behavior-x: none;
    -webkit-font-smoothing: antialiased;
}
p {
    margin-bottom: 0;
    font-size: medium;
}
.blueSection {
    background-color: #3498db;
    color: #fff;
    text-align: center;
    padding: 10px 0;
    position: absolute;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas:
    'left middle right';
    width: 100%;
    top: 0;
    left: 0;
    font-family: 'Roboto Mono', monospace;
}

.leftText {
    grid-area: left;
    text-align: left;
    margin-left: 1em;
}

.middleText {
    grid-area: middle;
    text-align: center;
}

.rightText {
    grid-area: right;
    text-align: right;
    margin-right: 1em;
}
.mainWrapper {
    height: 70vh;
    width: 90vw;
    display: flex;
    gap: 1em;
    padding: 2em;
    border-radius: 20px;
    background-color: rgb(255, 255, 255);
}
.mainName {
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 4em;
    font-family: 'Luxurious Roman', cursive;
    text-align: end;
    overflow: hidden;
    filter: drop-shadow(3px 3px 1px rgb(174, 174, 174));
}
.mainUpload {
    border-left: 3px solid black;
    justify-content: center;
    align-items: center;
    width: 50%;
    display: flex;
    flex-direction: column;
    filter: drop-shadow(3px 3px 2px rgb(174, 174, 174));
}
.uploadWrapper {
    display: flex;
    flex-direction: column;
    gap: 2em;
}
form {
    justify-content: center;
    display: flex;
    flex-direction: column;
    gap: 2em;
}
.fileLink {
    display: flex;
    gap: 1em;
}
.fileLink button{
    filter: drop-shadow(0px 0px 50px rgb(153, 153, 153));
}
.info {
    justify-content: center;
    display: flex;
    gap: 2em;
}
.info div {
    justify-content: center;
    align-items: center;
    display: flex;
    gap: 0.5em;
}
.fileCount {
    border: 2px solid rgb(153, 153, 153);
    border-radius: 15px;
    padding: 10px;
    background-color: rgb(247, 247, 247);
    font-size: 1em;
}
.watermark {
    display: flex;
    position: absolute;
    bottom: 1em;
    right: 1em;
    color: rgb(174, 174, 174);
    font-family: 'Playfair Display', serif;
    font-size: 1.5em;
}
.watermarkText {
    margin-right: 0.5em;
}
.watermark img {
    width: 1em;
    height: 1em;
}
#dropZone {
    background: gray;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999;
    opacity: 0.6;
    visibility: hidden;
}
#barParent {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
#progressBar {
    width: 100%;
    height: 10px;
    background-color: lightgray;
    display: none;
}
#progress {
    width: 0;
    height: 100%;
    background-color: green;
}

@media screen and (max-width: 900px) {
    input {
        font-size: 120%;
    }
    .mainWrapper {
        flex-direction: column;
        height: 90vh;
        width: 100vw;
    }
    .blueSection {
        display: none;
    }
    .mainName {
        width: 100%;
        border-bottom: 3px solid black;
        padding-bottom: 5vh;
        font-size: 2em;
    }
    .mainUpload {
        width: 100%;
        border-left: 0;
        padding-top: 1vh;
        font-size: 2em;
    }
    .uploadWrapper {
        gap: 0.8em;
    }
    form {
        align-items: center;
        gap: 0.5em;
    }
    #fileInput {
        text-align: right;
        background: lightgray;
        display: block;
    }
    .fileLink {
        gap: 0.2em;
    }
    .fileLinkText {
        font-size: 1.3em;
        text-align: center;
    }
    .fileSubmit {
        padding: 0.2em;
    }
    .fileCount {
        font-size: 0.4em;
    }
    .info div {
        gap: 0.2em;
    }
    .watermark {
        font-size: 1em;
    }
}