body {
    margin: 0;
    background-color: rgb(13, 13, 13);
    /* background-color: rgb(242, 242, 242); */ /* White Theme*/
}

.hero {
    height: 85vh;
}

#btn_support_server:hover {
    background-color: rgba(216, 216, 216, 0.23);
}

.dotted-bg-left {
    background-image:
        radial-gradient(ellipse at left, transparent, rgb(13, 13, 13) 80%),
        radial-gradient(circle, rgba(199, 199, 199, 0.73) 0.5px, transparent 1px);
    background-size: cover, 40px 40px;
    background-position: center, 0 0;
}
.dotted-bg-right {
    background-image:
        radial-gradient(ellipse at right, transparent, rgb(13, 13, 13) 80%),
        radial-gradient(circle, rgba(199, 199, 199, 0.73) 0.5px, transparent 1px);
    background-size: cover, 40px 40px;
    background-position: center, 0 0;
}
.dotted-bg-top {
    background-image:
        radial-gradient(ellipse at top, transparent, rgb(13, 13, 13) 80%),
        radial-gradient(circle, rgba(199, 199, 199, 0.73) 0.5px, transparent 1px);
        /* radial-gradient(ellipse at top, transparent, rgb(242, 242, 242) 80%), */ /* White Theme*/
        /* radial-gradient(circle, rgba(56, 56, 56, 0.73) 0.5px, transparent 1px); */ /* White Theme*/
    background-size: cover, 40px 40px;
    background-position: center, 0 0;
}
.dotted-bg-bottom {
    background-image:
        radial-gradient(ellipse at bottom, transparent, rgb(13, 13, 13) 80%),
        radial-gradient(circle, rgba(199, 199, 199, 0.73) 0.5px, transparent 1px);
    background-size: cover, 40px 40px;
    background-position: center, 0 0;
}
.dotted-bg-top-left {
    background-image:
        radial-gradient(ellipse at top left, transparent, rgb(13, 13, 13) 80%),
        radial-gradient(circle, rgba(199, 199, 199, 0.73) 0.5px, transparent 1px);
    background-size: cover, 40px 40px;
    background-position: center, 0 0;
}
.dotted-bg-top-right {
    background-image:
        radial-gradient(ellipse at top right, transparent, rgb(13, 13, 13) 80%),
        radial-gradient(circle, rgba(199, 199, 199, 0.73) 0.5px, transparent 1px);
    background-size: cover, 40px 40px;
    background-position: center, 0 0;
}
.dotted-bg-bottom-left {
    background-image:
        radial-gradient(ellipse at bottom left, transparent, rgb(13, 13, 13) 80%),
        radial-gradient(circle, rgba(199, 199, 199, 0.73) 0.5px, transparent 1px);
    background-size: cover, 40px 40px;
    background-position: center, 0 0;
}
.dotted-bg-bottom-right {
    background-image:
        radial-gradient(ellipse at bottom right, transparent, rgb(13, 13, 13) 80%),
        radial-gradient(circle, rgba(199, 199, 199, 0.73) 0.5px, transparent 1px);
    background-size: cover, 40px 40px;
    background-position: center, 0 0;
}

.navbar-toggler {
    border: none;
}
.navbar-toggler:focus {
    box-shadow: none;
}

.bg-blur {
    backdrop-filter: blur(10px);
}

.notification:hover {
    background-color: rgba(45, 45, 45, 0.33);
    border-radius: 8px;
    cursor: pointer;
}

.notification .delete-btn {
    display: none;
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
}

.notification:hover .delete-btn {
    display: flex;
    opacity: 1;
    pointer-events: auto;
}

.square {
    width: 12.5%; /* 100% / 8 colonnes */
    aspect-ratio: 1 / 1; /* carré parfait */
    border: 1px solid #ccc; /* juste pour voir les cases */
    box-sizing: border-box;
  }
  

/* .hover-danger:hover {
    color: var(--bs-danger);
} */

#serverSelector {
    border: solid 2px #242424;
    transition: 0.4s;
}

#serverSelector:hover {
    background-image:
        radial-gradient(ellipse at top left, transparent, rgb(13, 13, 13) 100%),
        radial-gradient(circle, #c60505ba 0.5px, transparent 1px);
    background-size: cover, 40px 40px;
    background-position: center, 0 0;
    border: solid 2px #872626;
}

.card-cover {
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    box-shadow: 10px -200px 77px -108px rgba(0,0,0,0.75) inset;
    border: none;
}