styles.css

@font-face {
    font-family: IBM Plex Sans;
    src: url('fonts/IBMPlexSans-Regular.ttf') format('truetype');
}

body{
    font-family: 'IBM Plex Sans';
    font-size: 2vmax;
    background-color: #222222;
    width: 100vw;
    height: 100vh;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

#main_box{
    position: absolute;
    margin-left: calc(50vw - 30vmax);
    margin-right: calc(50vw - 30vmax);
    
    padding: 5vmax;
    width: fit-content;

    border: 3px;
    border-style: solid;
    border-color: white;
    border-radius: 4em;
    background-color: #111111;

    display: flex;
    flex-direction: column;
    justify-content: center;
    vertical-align: middle;
    align-items: center;
}

#cogs_logo{
    width: 10em;
    padding-bottom: 2em;
}

#login_button{
    display: inline-block;

    border: 2px;
    border-style: solid;
    border-color: white;
    border-radius: 2em;

    background-color: #5865F2;
    color: white;
    text-align: center;

    padding: 2em;
    width: fit-content;

    flex-grow: 1;
}

#camera_list{
    font-size: medium;

    position: absolute;
    margin-left: calc(50vw - 30vmax);
    margin-right: calc(50vw - 30vmax);
    
    padding: 2em;
    width: fit-content;

    border: 3px;
    border-style: solid;
    border-color: white;
    border-radius: 4em;
    background-color: #111111;

    display: flex;
    flex-direction: column;
    justify-content: center;
    vertical-align: middle;
    align-items: center;
}

.camListObject{
    display: block;

    border: 2px;
    border-style: solid;
    border-color: white;
    border-radius: 2em;

    background-color: #171717;
    color: white;
    text-align: center;

    padding: 2em;
    width: calc(100% - 6em);
    margin: 1em;
    margin-left: 3em;
    margin-right: 3em;

    flex-grow: 1;
    flex: 1;

    cursor: pointer;
}

.camListObject:hover{
    background-color: #444444;
}

#scanner_box{
    height: 80%;
    width: 100%;
    background-color: wheat ;
}