body{
    overflow: hidden;
}

main{
    transform: translate(50vw, 0) translate(-50%, 0);

    margin-top: 40px;

    width: min(1000px, 80vw);
    height: calc(100vh - 40px);

    border-left-style: solid;
    border-right-style: solid;
    border-color: rgb(70, 70, 70);
    border-width: 1px;
}

div.all_games{
    overflow-y: scroll;
    overflow-x: hidden;

    margin-top: 40px;

    width: min(1000px, 80vw);
    height: calc(100vh - 40px);

    border-top-style: solid;
    border-color: rgb(70, 70, 70);
    border-width: 1px;
}

div.game{
    width: min(calc(980px - 16px), calc(80vw - 20px - 16px));
    height: calc(150px - 16px);

    padding: 8px;

    background-color: rgb(40, 40, 40);

    border-radius: 8px;

    margin: 10px;
}

img.game{
    float: left;
    margin-top: 0px;

    width: 130px;
    height: 130px;

    border-radius: 8px;

    pointer-events: none;
}

h1.game{
    float: left;

    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: 16px;

    pointer-events: none;
}

p.game{
    margin-top: 0px;
    margin-left: calc(16px + 130px);

    pointer-events: none;
}

p.time{
    margin-top: 40px;
    margin-bottom: 4px;
    margin-left: calc(16px + 130px);

    color: rgb(150, 150, 150);

    pointer-events: none;
}


div.create_game{
    position: absolute;

    top: 8px;

    width: min(1000px, 80vw);
    height: min(800px, calc(100vw));

    padding: 8px;

    background-color: rgb(40, 40, 40);

    border-radius: 8px;

    overflow-x: hidden;
    overflow-y: scroll;
}

input.create_game{
    outline: none;

    margin: 4px;

    background-color: transparent;

    border-style: none;
    border-bottom-style: solid;
    border-width: 1px;
    border-color: white;

    font-size: 1.5em;

    color: white;
}

div.create_game_button{
    background-color: rgb(40, 40, 40);

    padding: 4px;
    border-radius: 4px;
    margin: 4px;

    font-size: 1.5em;

    width: fit-content;
}

div.create_game_button:hover{
    background-color: rgb(70, 70, 70);
}


div.hub_button{
    position: relative;

    background-color: rgb(40, 40, 40);

    padding: 4px;
    border-radius: 4px;
    margin: 4px;

    margin-bottom: 32px;

    top: 16px;

    font-size: 1.5em;

    width: fit-content;

    float: left;
}

div.hub_button:hover{
    background-color: rgb(70, 70, 70);
}

label.hub_button{
    position: relative;

    background-color: rgb(40, 40, 40);

    padding: 4px;
    border-radius: 4px;
    margin: 4px;

    margin-bottom: 32px;

    top: 16px;

    font-size: 1.5em;

    width: fit-content;

    float: left;
}

label.hub_button:hover{
    background-color: rgb(70, 70, 70);
}