@import './login.css';
@import './rooms.css';
@import './components/chat-window.css';
@import './components/login-form.css';
@import './components/room-list.css';
@import './components/room-card.css';
@import './components/spinner.css';
@import './components/message-card.css';
@import './components/notification.css';
@import './components/user-info.css';
@import './components/user-edit-modal.css';

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: "Lucida Console", "Courier New", monospace;
}

button {
    all: unset
}

body {
    position: relative;
    background: rgb(5,0,80);
    background: linear-gradient(45deg,#0000 calc(25%/3), #293a85 0 calc(50%/3),
    #0000 0 calc(250%/3), #293a85 0 calc(275%/3),
    #0000 0),linear-gradient( 45deg,#293a85 calc(25%/3), #0000 0 calc(50%/3),
    #293a85 0 25%, #0000 0 75%,
    #293a85 0 calc(250%/3), #0000 0 calc(275%/3),
    #293a85 0),
    linear-gradient(-45deg,#0000 calc(25%/3), #293a85 0 calc(50%/3),
    #0000 0 calc(250%/3), #293a85 0 calc(275%/3),
    #0000 0),linear-gradient(-45deg,#293a85 calc(25%/3), #0000 0 calc(50%/3),
    #293a85 0 25%, #0000 0 75%,
    #293a85 0 calc(250%/3), #0000 0 calc(275%/3),
    #293a85 0)
    #568473;
    background-size: 64px 64px;
    background-position: 0 0, 32px  32px;
    width: 100vw;
    height: 100vh;
}

.main-wrapper {
    background-color: rgba(0, 0, 0, 0.75);
    height: 100%;
    padding: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.notifications-wrapper {
    position: absolute;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    bottom: 1rem;
    right: 1rem;
    width: 400px;
    list-style-type: none;
}

.modal-wrapper {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 0;
    left: 0;
}

.invisible {
    visibility: hidden !important;
}

.visible {
    visibility: visible !important;
}

.display-none {
    display: none !important;
}