.flex-center {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    height: 100rem;
    position: relative;
    /* overflow: hidden; */
    transition: all 1s;
    border: 2px solid var(--gray10);
    width: 130%;
    left: -15%;
    
}

.make-full-screen {
    width: 130%;
    left: -15%;
}

.remove {
    display: none;
}

.full-screen {
    position: absolute;
    font-size: 2.4rem;
    width: 3.6rem;
    height: 7.2rem;
    cursor: pointer;
    right: 0%;
    z-index: 99;
    background-color: var(--gray10);
    border: 2px solid var(--gray70);
    color: var(--gray70);
    border: none;
    border-radius: 5px;
    transform: translate(0%);
    transition: all .2s;
}
.full-screen::after {
    content: ">";
    display: block;
    transition: all .2s;
}

.make-full-screen .full-screen::after {
    transform: rotate(180deg);
}


.full-screen:hover {
    transform: translate(5%);
}

.make-full-screen
.full-screen:hover { 
    transform: translate(-5%);
}

    .section-parse {
    padding: 9.8rem 0;
    }

    .container {
        max-width: 130rem;
        margin: 0 auto;
    }

    .file-upload-form {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .file-label {
        font-size: 3rem;
        color: var(--secondary-1);
        padding: 2.4rem 1.2rem;
        cursor: pointer;
        width: 80%;
        height: 80%;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all .2s;
    }
    
    .file-label:hover {
        transform: translateY(-10px);
    
    }

    .place-holder {
        display: none;
        background-color: var(--secondary-3);
        position: absolute;
        width: 80vw;
        height: 100vh;
        color: var(--secondary-1);
    }
    .text {
        
        font-size: 2.4rem;
    }
        

.send-form {
    /* filter: blur(1px); */
    border: none;
    color: var(--primary-1);
    font-size: 3.6rem;
} 

.send-form::after {
    content: ">>";
    position: absolute;
    right: 25%;
    opacity: 0;
    transition: all .2s;
}

.cover:hover .send-form::after {
    right: 22%;
    opacity: 1;
}

.cover {
    background-color: rgba(0,0,0,.75);
    cursor: pointer;
    transition: all .2s;
    position: absolute;
    width: 100%;
    height: 100%;
    display: none;
    border: none;

}



.send-form::after,
.send-form {
  --bg-size: 400%;
  --color-one: #F3845E;
  --color-two: #CE3500; 
  font-size: clamp(3rem, 25vmin, 8rem);
  background: linear-gradient(
                90deg,
                var(--color-one),
                var(--color-two),
                var(--color-one)
              ) 0 0 / var(--bg-size) 100%;
  color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
  animation: move-bg 8s infinite linear;
}

.title-div {
        text-align: center;
        margin-bottom: 6rem;
        margin-top: 6rem;
}

.title-div h1 {
    font-size: 7.2rem;
    margin-bottom: 1.2rem;
    color: var(--gray90);
}

.title-div h2 {
    font-size: 6rem;
    margin-bottom: 2.4rem;
    color: var(--gray80);
}
.title-div p {
    font-size: 3rem;
    margin-bottom: 9.6rem;
    color: var(--gray70);
}

.step-container {
    margin-bottom: 9.6rem;
}

.option-names {
    
    display: flex;
    width: 100%;
    justify-content: space-around;
    font-size: 3.2rem;
    margin-bottom: 4.2rem;
    color: var(--gray60);
}




.all-files {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    align-items: start;
    justify-content: start;
    align-content: start;
    justify-items: center;
    font-size: 1.6rem;
    row-gap: 1.2rem;
}

.file-div {
    border-radius: 2px;
    width: 8rem;
    height: 10rem;
    /* height: 100%; */
    padding: 1.2rem;
    
}

.tag-div {
    width: 22rem;
    height: 10rem;
    /* height: 100%; */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}


.file-div,
.tag-div {
    border-radius: 5px;
    cursor: pointer;
    color: var(--gray50);
    transition: all .2s;

    box-shadow: 12.31px 12.31px 62px #803C00, -12.31px -12.31px 62px #FF8600;
}

.chosen,
.file-div:hover,
.tag-div:hover {
    transform: rotateX(6deg) translateY(-6px);
    color: var(--gray40);
    background-color: transparent;

    box-shadow: 0 8px 0 0 rgba(0,0,0,.25);
 }

.split {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    color: var(--gray60);
}
.upload-svg {
    opacity: .25;
}

.all-metric-tags {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-items: center;
    justify-content: center;
    align-content: center;
    justify-items: center;
    font-size: 1.6rem;
    row-gap: 1.2rem;
}