:root{
    color-scheme: light dark;
    --background-1-dark:rgb(0, 1, 32);
    --background-2-dark:rgb(23,23,54);
    
    --background-1-light:rgb(217, 249, 255);
    --background-2-light:rgb(255,255,255);

    --forground-default-dark:rgb(255, 255, 255);
    --forground-header1-dark:rgb(165, 219, 255);
    --forground-header2-dark:rgb(175, 177, 200);
    
    --forground-default-light:rgb(0, 0, 0);
    --forground-header1-light:rgb(0, 4, 83);
    --forground-header2-light:rgb(13, 0, 59);
}

body{
    background-color:light-dark(var(--background-1-light), var(--background-1-dark));
    color:light-dark(var(--forground-default-light), var(--forground-default-dark));
    font-family:sans-serif;
    transition:.5s;
    overflow:hidden;
}
h1{
    color:light-dark(var(--forground-header1-light), var(--forground-header1-dark));
}
h2{
    color:light-dark(var(--forground-header2-light), var(--forground-header2-dark));
}
button{
    position:absolute;
    transform-origin:center;
    padding:2dvi;
    border-style:solid;
    border-radius:1dvi;
    transition:.5s;
    background-color:light-dark(var(--background-2-light), var(--background-2-dark));
    border-color:light-dark(var(--header-2-light), var(--header-2-dark));
    border-width: 2px;
    
}
button:hover{
    transform: scale(110%, 110%);
}
button:active{
    transition:.1s;
    transform:scale(90%, 90%);
}



#authorize_button{
    position:absolute;
    width:50%;
    max-width:50vh;
    height:20%;
    max-height:20vh;
    transform:translate(-50%, -50%);
    left:50%;
    top:50%;
}

#signout_button{
    position:absolute;
    top:2vh;
    left:2vw;
}
#selectFile{
    display:grid;
    grid-template-areas : "a a";
    grid-auto-columns: 47% 47%;
    gap:3%;
    overflow-y:scroll;
    position:absolute;
    top:calc(50% + 5em);
    left:50%;
    transform:translate(-50%, -50%);
    border-style:solid;
    width:70%;
    max-width:70vh;
    height:80%;
    max-height:80vh;
    border-color:light-dark(var(--background-2-light), var(--background-2-dark));
    padding:5%;
    border-radius: 10px;
    
}
#selectFile>button{
    position:relative;
    aspect-ratio: 1 / 1;
}
#selectFile>button>img{
    position:absolute;
    transform:translate(-50%, -50%) scale(2);
    width:15%;
    height:15%;
    bottom:10%;
    left:50%;
}
#selectFile>button>p{
    position:absolute;
    text-align:center;
    font-size: 18pt;
    left:50%;
    top:0;
    transform:translate(-50%, -20%); 
}

#numberSelector{
    position:absolute;
    transform:translate(-50%, -50%);
    left:50%;
    top:10rem;
    width:78%;
    height:3rem;
    font-size: 2rem;
}

#nameCollection{
    position:absolute;
    transform:translate(-50%, -50%);
    top:50%;
    left:50%;
}
#nameCollection>h1{
    font-size: 4em;
    color:light-dark(var(--forground-default-light), var(--forground-default-dark));
}