/* Global Settings */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    color: #fff;
}

ul {
    list-style: none;
}

body, html {
    background: #121212;
    height: 100%;
    margin: 0;
    overflow-y: hidden;
}

/* /Global Settings */

/* Content Grid */

.content-grid {
    display: grid;
    grid-template-columns: .35fr repeat(5, 1fr) 1fr;
    grid-template-rows: auto 0fr repeat(4, 1fr);
    grid-auto-columns: 1fr;
    grid-auto-flow: row;
    grid-template-areas:
    "menu header header header header header header"
    "menu main main main main main chat"
    "menu main main main main main chat"
    "menu gamemode gamemode gamemode gamemode gamemode chat"
    "menu gamemode gamemode gamemode gamemode gamemode chat"
    "menu gamemode gamemode gamemode gamemode gamemode chat";
    height: 100%;
    grid-gap: 10px;
}

.content__grid-profile {
    display: grid;
    grid-template-columns: .35fr repeat(5, 1fr) 1fr;
    grid-template-rows: auto 0fr repeat(4, 1fr);
    grid-auto-columns: 1fr;
    grid-auto-flow: row;
    grid-template-areas:
    "menu header header header header header header"
    "menu profile profile profile profile profile chat"
    "menu profile profile profile profile profile chat"
    "menu profile profile profile profile profile chat"
    "menu profile profile profile profile profile chat"
    "menu profile profile profile profile profile chat"
    "menu profile profile profile profile profile chat";
    grid-gap: 10px;
    height: 100%;
}

.content-grid--saper {
    display: grid;
    grid-auto-columns: 1fr;
    grid-template-columns: .35fr repeat(5, 1fr) 1fr;
    grid-template-rows: auto 0fr repeat(4, 1fr);
    grid-template-areas:
    "menu header header header header header header"
    "menu saper saper saper saper saper chat"
    "menu saper saper saper saper saper chat"
    "menu saper saper saper saper saper chat"
    "menu saper saper saper saper saper chat"
    "menu saper saper saper saper saper chat"
    "menu saper saper saper saper saper chat";
    grid-gap: 10px;
}


/* /Content Grid */

/* Header */

.header {
    grid-area: header;
    border-radius: 20px;
    background: #17181C;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    align-self: start;
}

/* /Header */

/* Menu */

.menu {
    grid-area: menu;
    background: #17181C;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    border-radius: 20px;
    align-self: start;
}

/* /Menu */

/* Chat */

.chat {
    grid-area: chat;
    background: #16171B;
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
    border-radius: 20px;
    height: 90%;
    position: relative;
    z-index: 3;
}

/* /Chat */

/* Main */

.main {
    grid-area: main;
    width: 82%;
    height: 90%;
    margin: 2% auto 0 8%;
}

/* /Main */

/* GameMode */

.gamemode {
    grid-area: gamemode;
    height: 70%;
    width: 100%;
}

/* /GameMode */

/* Profile */

.profile {
    display: flex;
    grid-area: profile;
    height: 95%;
    border-radius: 50px;
    background: #17181C;
    box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.25);
    margin: 10px 39px 18px 13px;
}

/* /Profile */

/* Saper */

.saper {
    grid-area: saper;
    /*height: 96.2%;*/
}

/* /Saper */