body {
  background-color: rgb(47, 47, 110);
}
.homebar {
    display: flex;
    align-items: center;
    background-color: rgb(101, 103, 222);
    padding: 10px;
    margin: 10px;
}

.title {
    font-family: "Archivo Black", sans-serif;
    font-weight: bold;
}

.left {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px; /* space between logo and title */
}


.center {
    flex: 1;
    display: flex;
    justify-content: center;
    gap: 10px;
}

.right {
    flex: 1;
    display: flex;
    justify-content: flex-end;
}

.logo {
    width: 25px;
    height: 25px;
}

.nav {
    background-color: rgb(6, 195, 220);
    color: rgb(103, 66, 66);
    text-decoration: none;
    padding: 3px;
}

.options {
    position: relative;
    display: inline-block;
}
.optionsBtn {
    background-color: rgb(6, 195, 220);
    color: rgb(103, 66, 66);
    text-decoration: none;
    padding: 3px;
    width: 100px;
    border-color: rgb(6, 195, 220);
}


.optionsContent {
    display: none;
    position: absolute;
    z-index: 0;
}

.optionsContent button {
    float: none;
}

.show {display:block;}

.title {
    color: rgb(103, 66, 66);
    font-weight: bold;
    font-size: 15px;
}
.login {
    background-color: rgb(30, 218, 168);
    color: rgb(103, 66, 66);
    text-decoration: none;
    padding: 3px;
}
.login_area {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 75vh;
}
.error {
    color: red;
}

.siteGuilds {
    display: flex;
    flex-wrap: wrap; 
    gap: 10px;     
    justify-content: center; 
    align-items: flex-start;
    height: auto;   
}

.guildBox {
    background-color: rgb(121, 133, 167);
    color: rgb(103, 66, 66);
    text-decoration: none;
    padding: 3px;
    width: 40mm;
    height: 35mm; 
    border: 1px solid rgb(6, 195, 220);
    box-sizing: border-box; 
}
.guildIcon {
    width: 30px;
    height: 30px;
}