body {
    font-family: Tahoma, Verdana, Arial, sans-serif;

    margin:0px;
    padding:0px;
}
#page-container {
    position: relative;
    min-height: 99vh;
}
#content-wrap {
    /* Footer height */
    padding-bottom: 1.5rem;
}
.footer{
    position: absolute;
    bottom: 0px;
    width: 100%;
    height: 1.5rem;

    text-align: center;
}

#team_channels {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}

.teams {
    flex: 450px; /* Adjust this value dynamically based on length of content */
}

.icon_image {
    max-width: 50px;
}

.channel {
    padding: 5px;
    margin: 5px;
    border-radius: 7px;
}


button {
    border: none;
    border-radius: 3px;
    background-color: #7289da;
}
button:hover {
    background-color: #677bc4;
}

/* Dropdown button styles */
.dropbtn {
    padding: 5px;
    margin: 3px;
}
.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    /* For floatiness */
    z-index: 1;
}
.dropdown-menu-button {
    border-style: solid;
    border-width: 1px;
    border-color: black;
    box-shadow: 1px 1px 4px black;
}

.dropdown:hover .dropdown-content {
    display: block;
}

body {
    background-color: white;
}

.lobby {
    background-color: #f2f3f5;
}

.teams {
    background-color: #e3e5e8;
}

button {
    color: white;
}

@media (prefers-color-scheme: dark) {
    body {
        background-color: #202225;
        /* text colour: */
        color: white;
    }

    .lobby {
        background-color: #2f3136;
    }

    .teams {
        background-color: #36393f;
    }

    button {
        color: #3d3d3d;
    }

    a {
        color: #00b0f4;
    }
}