@property --a{
    syntax: "*";
    inherits: false;
    initial-value: 1;
}

@property --b{
    syntax: "*";
    inherits: false;
    initial-value: 0.75;
}

@keyframes background-shift-body {
    0% {
        background-position: 0% 00%;
    }
    25% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 0% 100%;
    }
    75% {
        background-position: 0% 50%;
    }
    100% {
        background-position: 0% 0%;
    }
}

nav {
    top: 0;

    position: fixed;
    z-index: 10;

    width: 100vw;
    height: 7.5vh;
    background-color: #efccff;

    background-image:
        repeating-linear-gradient(30deg, #381143 0%, #230b2a 60%),
        repeating-linear-gradient(30deg, #9044a576 60%, #4e3b54a4 60%),
        repeating-linear-gradient(30deg, #381143 0%, #230b2a 60%),
        repeating-linear-gradient(30deg, #9044a576 60%, #4e3b54a4 60%);

    display: grid;
    grid-template-columns: 50% 50%;

    /* * {border: solid 1px black}; */

    #nav-div1 { 
        padding-left: 5%;
        width: 95%;
        display: flex;

        align-items: center;

    }

    #nav-div2 {
        padding-right: 5%;
        
        width: 95%;
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }
}

body {
    
    top: 0;
    margin: 0;
    padding: 0;

    font-size: 1vw;

    background-color: #D9D9D9;
    /* background-image: repeating-linear-gradient(15deg, #220e47 20%,#2c2851 47.5%); */

    background-size: 102% 102%;
    animation: background-shift-body 10s linear infinite;
    
    background-image: 
        repeating-radial-gradient(circle at 50% 80%, rgba(34, 14, 71, var(--b)) 1%,rgba(44, 40, 81, .75) 77%),
        repeating-radial-gradient(circle at 80% 20%, rgba(34, 14, 71, var(--a)) 10%,rgba(44, 40, 81, .75) 100%),
        repeating-radial-gradient(circle at 0% 60%, rgba(34, 14, 71, var(--a)) 10%,rgba(44, 40, 81, 0) 100%),
        repeating-radial-gradient(circle at 102% 82%, rgba(34, 14, 71, var(--a)) 10%,rgba(44, 40, 81, 0) 100%);
        /* repeating-linear-gradient(15deg, rgba(34, 14, 71, .75) 20%,rgba(44, 40, 81, .75) 60%); */
        /* repeating-radial-gradient(circle at 40% 30%, rgba(34, 14, 71, 0.5) 10%,rgba(44, 40, 81, 0.5) 100%); */

        /* repeating-linear-gradient(0deg, rgba(34, 14, 71, .75) 20%,rgba(44, 40, 81, .75) 60%); */
        /* repeating-conic-gradient(#220e47 30deg,#2c2851 90deg); */

    div.main-div {

        z-index: 0;

        padding-top: 9vh;
        padding-bottom: 10vh;
        width: 100vw;

        #section-3 {
            line-height: 1.2;
        }

        section.section-container {
            /* line-height: 1.2; */
            width: 75%;
            padding-bottom: 5%;

            * {
                margin-top: 2%;
                margin-bottom: 2%;
                padding-top: .125%;
                padding-bottom: .125%;
            }

            #identity-report-header {
                display: none;
            }

            #get-started-button, #try-again-button {
                padding: 1%;
                width: 12.5%;
                font-size: 1em;
                font-family: 'Space Mono', monospace;
                text-align: center;

                color: #efe6f4;
                border-radius: 10px;
                border: 0px;
                background-image: linear-gradient(45deg, #543789 20%,#6152e0 100%);

                transition: 150ms ease;
            }

            #get-started-button:hover, #try-again-button:hover {
                width: 14%;
                background-image: linear-gradient(45deg, #6152e0 20%, #543789 100%);
            }

            #get-report-button:hover {
                width: 25%;
                background-image: linear-gradient(45deg, #6152e0 20%, #543789 100%);
            }

            #try-again-button {
                display:none;
            }

            #data-p {
                display:none;
                font-size: 1.8em;
                text-align: center;    
                transform: translate(0, 40vh);
                padding-bottom: 35vh;
                
                font-family: 'Space Mono', monospace;
                color: rgb(222, 197, 218);
            }

            #get-report-button {
                padding: 1%;
                width: 23%;
                font-size: 1em;
                font-family: 'Space Mono', monospace;
                text-align: center;

                border-radius: 10px;
                color: #efe6f4;
                border-radius: 10px;
                border: 0px;
                background-image: linear-gradient(45deg, #543789 20%,#6152e0 100%);

                transition: 150ms ease;
            }

            #drop-zone-outer {
                background-color: #341c4d;
                height: 50vh;
                margin-top: -.5%;

                border-radius: 10px;
            }

            #drop-zone-buttons {
                z-index: 1;

                #files-button {
                    font-size: 1.5em;
                    font-family: 'Space Mono', monospace;
                    text-align: center;
                    padding: 5px;
                    color: #efe6f4;
                    border-radius: 10px;
                    border: 0px;
                    background-image: linear-gradient(45deg, #543789 20%,rgb(48, 40, 118) 100%);

                    transition: 150ms ease;
                }

                #clear-button {
                    font-size: 1em;
                    font-family: 'Space Mono', monospace;
                    text-align: center;
                    padding: 5px;
                    color: #efe6f4;
                    border-radius: 10px;
                    border: 0px;
                    background-image: linear-gradient(45deg, #543789 20%,rgb(48, 40, 118) 100%);

                    transition: 150ms ease;
                    /* transform: translate(0, 200%); */
                }

                #clear-button:hover, #files-button:hover {
                    background-image: linear-gradient(45deg, rgb(48, 40, 118) 20%,#543789 100%);
                }
            }

            #drop-zone-images {
                position: absolute;
                overflow-x: scroll;
                width: 65%;
                #preview {
                    width: 100%;
                    display: flex;
                    flex-direction: row;
                    justify-content: center;
                    gap: 0.1em;
                    list-style: none;
                    padding: 0;
                }

                #preview li {
                    display: flex;
                    align-items: center;
                    gap: 0.1em;
                    margin: 0;
                    width: 100%;
                    height: 100px;
                    font-family: 'Kode Mono', monospace;
                    color: #969696;
                }

                #preview img {
                    width: 100px;
                    height: 100px;
                    object-fit: cover;
                }
            }
        }   

    }

}

#popup-div {
    display: none;
    position: fixed;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, .3);

    z-index: 3;

    /* * {border: solid 5px black} */

    #popup-container {
        width: 20%;
        height: 10%;

        margin-top: 40vh;
        margin-bottom: 30vh;
        margin-left: auto;
        margin-right: auto;
        padding: 1.75%;
        padding-top: 0%;

        display: flex;
        gap: 2.5%;
        font-size: em;
        border: 0px;
        border-radius: 5px;
        
        background-color: #503c76;

        #popup-button {
            margin-top: auto;
            margin-bottom: auto;
            height: 50%;
            
            border: 0px;
            border-radius: 2px;

            background-color: rgb(70, 21, 81);
            color: #ffffff;
        }

    }
    
}

h1 {
  font-size: 2em;
  font-family: 'Martian Mono', monospace;
  text-align: left;

  background-image: linear-gradient(90deg, #f2e2f7 0%, #6152e0 40%, #543789 70%, #f2e2f7 100%);
  background-size: 200% 200%;
  background-position: 0% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;

  animation: gradientShift 6s linear infinite;
}

@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

h2 {
    font-size: 1.8em;
    font-family: 'Space Mono', monospace;
    text-align: left;
    color: #ffffff;
    /* background-color: beige; */
}

h3 {
    font-size: 1em;
    font-family: 'Martian Mono', monospace;
    text-align: left;
    color: #c17eff;
    /* background-color: beige; */
}

h4 {
    font-size: 1.2em;
    font-family: 'Space Mono', monospace;
    text-align: left;
    color: #ffffff;
    /* background-color: beige; */
}

p {
    font-size: 1.3em;
    font-family: 'Space Mono', monospace;
    text-align: left;
    color: rgb(222, 197, 218);
}

p.report-section {
    font-size: 1em;
    font-family: 'Space Mono', monospace;
    text-align: left;
    color: rgb(222, 197, 218);
    background-color: #543789;
    background-image: linear-gradient(15deg, #220e47 20%,#2c2851 70.5%);
}

@keyframes circle-animation {
    0%{
        transform: translate(0,-250%);
    }
    50% {
        transform: translate(0,-300%);
    }
    100% {
        transform: translate(0,-250%);
    }
}

#loading-container {
    display: none;
    justify-content: center;
    align-items: center;
    gap: 5%;
}

.circle {
    width: 2.5em;
    height: 2.4em;
    background-color: #503c76;
    border-radius: 50%;

    transform: translate(0,-100%);

    animation: circle-animation 1000ms ease infinite;
    animation-play-state: paused;
}

.grid-center {
    display: grid;
    place-items: center;
}

.margin-center {
    margin-left: auto;
    margin-right: auto;
}

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