/* Coucou toi qui regarde dans le code


/‾‾‾‾‾\ /‾‾‾‾‾] [‾‾‾‾‾‾‾‾] |‾‾‾‾‾] |‾‾‾‾‾\ |‾‾‾‾‾\ |‾| /‾/
| |‾| | | |‾‾‾   ‾‾|  |‾‾  | |‾‾‾  |     | |     | | |/ /
| | | | | |        |  |    |  ___] |     / |     / |  _/
| |_| | | |___     |  |    | |___  | |\ \  | |\ \  | |
\_____/ \_____]    |__|    |_____] |_| \_\ |_| \_\ |_|
MADE ON EARTH BY HUMANS */
/* IMPORTER LES POLICES */
@import url('https://fonts.googleapis.com/css2?family=Hind:wght@300;400;500;600;700&family=Homenaje&family=Hubballi&family=Josefin+Sans:ital,wght@0,100..700;1,100..700&display=swap');

/* PAGE */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(#1F2F3A, #2A2440);
    height: 100vh;
    width: 100vw;
}

a {
    text-decoration: none;
}

header {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

header img {
    width: calc(1vw + 3vh);
}

header h1 {
    font-size: calc(1vw + 3vh);
    font-family: "Homenaje";
    font-weight: 100;
    margin-left: 1vh;
}

.element {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #D9D9D911;
    max-width: 90vw;
    min-width: 40vw;
    margin: 2vh;
    padding: 1vh;
    border-radius: 1vh;
    transition: 150ms;
}

.element:hover {
    background-color: #00000000;
    border: 1px #fff solid;
}

.element h1 {
    font-family: "Hubballi";
    font-weight: 100;
    font-size: 4vh;
    text-align: center;
    color: #fff
}

.element h2 {
    font-family: "Hind";
    font-weight: 200;
    font-size: 3vh;
    color: #73ACED
}

#signalement {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #978E31;
    padding: 1vh;
    border-radius: 1vh;
}

#signalement img {
    width: 3vh;
}

#signalement h3 {
    color: #fff;
    font-family: "Josefin Sans";
    font-weight: 350;
    font-size: 3vh;
    margin-left: 1vh;
}

#survey {
    margin: 2vh;
    background-color: #ffffff20;
    padding: 1.5vh 2vh;
    border-radius: 2vh;
}

#survey h1 {
    color: #fff;
    font-family: "Hind";
    font-weight: 300;
    font-size: 2.5vh;
}

#selection_browser {
    user-select: none;
    background-color: #D9D9D920;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 1vh;
}

#selection_browser:hover {
    cursor: pointer;
}

#selection_browser h2{
    color: #9A9A9A;
    font-family: "Hind";
    font-weight: 300;
    font-size: 2vh;
}

#browser_logo {
    display: none;
    width: 2vh;
    margin-right: .5vh;
}

.down_arrow_svg {
    width: 1.5vh;
    margin-right: .5vh;
}

#browser_list {
    display: none;
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    min-width: 35vh;
    background-color: #ffffff50;
    backdrop-filter: blur(1vh); 
    padding: 1vh;
    border-radius: 1.5vh;
}

.browser_section {
    display: flex;
    align-items: center;
    justify-content: start;
    padding-left: .5vh;
    border-radius: .5vh;
}

.browser_section:hover {
    cursor: pointer;
    background-color: #00000060;
}

.browser_section img {
    width: 3vh;
    margin-right: 1vh;
}

#browser_input {
    display: none;
    color: #fff;
    font-family: "Hind";
    font-size: 2vh;
    width: 100%;
    margin-top: 1vh;
    padding: 1vh 2vh;
    background-color: #D9D9D920;
    border: none;
    border-radius: 1vh;
}

#browser_input:focus {
     outline: none;
}

#browser_input::placeholder {
    color: #9A9A9A;
    font-family: "Hind";
    font-size: 2vh;
}

#signal_input {
    margin-top: 1vh;
    background-color: #D9D9D920;
    width: 100%;
    min-height: 10vh;
    max-height: 50vh;
    color: #fff;
    font-family: "Hind";
    font-size: 2vh;
    border: none;
    padding: 1vh 2vh;
    border-radius: 1vh;
    resize: vertical;
}

#signal_input:focus {
    outline: none;
}

#signal_input::placeholder {
    color: #9A9A9A;
    font-family: "Hind";
    font-size: 2vh;
}

#signal_input::-webkit-scrollbar {
    display: none;
}

#pseudo_file_input {
    margin-bottom: .5vh;
    display: flex;
    align-items: center;
    justify-content: start;
    padding: 0 1vh;
    border-radius: 1vh;
}


#big_file_input {
    display: flex;
    align-items: center;
}

#pseudo_file_input:hover{
    cursor: pointer;
    background-color: #D9D9D910;
}

#pseudo_file_input img {
    width: 2vh;
}

#pseudo_file_input h1 {
    color: #73ACED;
    font-size: 1.5vh;
    margin: .8vh;
}

#pseudo_file_input h2 {
    color: #9A9A9A;
    font-family: "Hind";
    font-size: 1.5vh;
    font-weight: 100;
}

#cross {
    display: none;
    width: 3vh;
    height: 3vh;
    border-radius: 1vh;
    padding: .5vh;
}

#cross:hover {
    background-color: #b3363650;
}

#file_input {
    display: none;
}

#send_button {
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #509A4A;
    border-radius: 1vh;
    width: 10vh;
    transition: 125ms;
}

#send_button:hover {
    cursor: pointer;
    transform: translateY(-.5vh);
    box-shadow: .5vh .5vh .5vh #00000030;
    background-color: #61a95d;
}