*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* border: solid 1px blue; */
    /* overflow-x: hidden; */
}
:root{
    --color1: rgb(251,234,5);
    --color1dark: rgb(222, 207, 5);
    --color1light: rgba(251, 235, 5, 0.2);
    --color2: rgb(60,68,75);
    --color2light:rgba(60, 68, 75, 0.95);
    --color3: rgb(255,255,255);
    --color4: rgb(40, 140, 40);
    --color5:rgb(116, 19, 19);
    --color5light:rgba(116, 19, 19, 0.2);
    --colorpolice: rgb(50, 50, 50);
    --colorpolice2: rgb(110, 110, 110);
    --colorpolice2: rgb(210, 210, 210);
    --colorbg1: rgba(10,10,10,0.5);
    --colorbg2: rgba(10,10,10,0.3);
    --colorbg3: rgba(10, 10, 10, 0.1);
}
html {
    font-family: sans-serif;
    color: var(--colorpolice);
}
/* ------------ BODY ------------- */
body{
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
    overflow-x: hidden;
}
/* ------------ NAV ------------- */
nav{
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    padding: 0 5em;
    background: var(--colorbg1);
    height: 5em;
    width: 100vw;
    z-index: 200;
}
.logo img{
    height: 3em;
}
.searchbar{
    display: flex;
    /* margin-right: 5em; */
    background: var(--color3);
    border-radius: 15px;
    padding: 0.2em ;
}
.searchbar input:first-of-type{
    width: 25vw;
    padding: 0.2em 1em;
    background: var(--color3);
    border: solid 1px var(--color3);
    border-radius: 15px;
    color: var(--colorpolice);
}
.searchbar input:first-of-type:focus{
    outline: none;
    border: solid 1px var(--color1);
}
.searchbar input:last-of-type{
    cursor: pointer;
    padding: 0.3em 1em;
    background-color: var(--color1);
    border: none;
    border-radius: 15px;
    color: var(--color2);
}
.searchbar input:last-of-type:hover{
    background: var(--color1dark);
}
.searchbar input:last-of-type:active{
    transform: scale(0.9);
}
.logout{
    display: flex;
    flex-direction: column;
    align-items: center;
    /* margin-right: 1.5em; */
    text-decoration: none;
    color: var(--color3);
}
.logout:hover{
    color: var(--color1);
}
.logout svg{
    width: 1em;
}
.logout span{
    text-transform: uppercase;
    font-size: 0.6em;
}
.research{
    position: inherit;
    top: 3.4em;
    width: 24vw;
    left: calc(50vw - 15vw + 0.4em);
    padding: 0.2em;
    border: solid 1px var(--colorbg2);
    background-color: var(--color3);
    /* background: red; */
}

/* ------------ HEADER ------------- */
header{
    margin-top: 5em;
}
/* ------------ MAIN ------------- */
main{
    width: 90vw;
    margin-bottom: 3em;
}
table{
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    color: var(--colorpolice);
    font-size: 0.8em;
}
th, td {
    text-align: start;
    border-bottom: solid 1px var(--color2);
    padding: 0.6em 0.4em;
    width: auto;
}
th{
    background-color: var(--colorbg2);
    user-select: none;
}
.add_button{
    background: var(--color2);
    color: var(--colorpolice2);
    border-radius: 5px;
}
.add_button:hover{
    color: var(--color3);
}
.add_button:active{
    transform: scale(0.92);
}
/* ------------ FOOTER ------------- */
footer{
    display: flex;
    position: absolute;
    bottom: 0;
    justify-content: end;
    align-items: center;
    height: 3em;
    width: 100vw;
    /* background: var(--color2); */
}
footer a{
    display: flex;
    align-items: center;
    text-decoration: none;
    color: var(--color2);
    margin-right: 1.5em;
}
footer a:hover{
    cursor: pointer;
    color: var(--color1);
}
footer svg{
    height: 1em;
    padding-right: 0.2em;
}
footer span{
    text-transform: uppercase;
    font-weight: 700;
    
}

@media screen and (max-width: 640px){
    nav{
        justify-content: space-around;
        padding: 0;
    }
}