@font-face {
    font-family: scifi;
    src: url('../../../assets/fonts/scifi2.otf');
}

::-webkit-scrollbar {
    display: none;
}

#log-out {
    position: fixed;
    width:200px;
    bottom:10px;
    right:15px;
    background-color:rgb(123, 0, 0);
    color:rgb(216, 1, 1);
    font-family:scifi;
    font-weight:100;
    padding:15px 50px;
    border:none;
    box-sizing: border-box;
    font-size:20px;
    cursor:pointer;
    transition-duration: 0.2s;
}
#log-out:hover {
    transition-duration: .2s;
    transform: translateY(-5px) scale(1.03);
}
.hide {
    display:none;
}
.home_btn {
    position: fixed;
    width:200px;
    bottom:10px;
    left:15px;
    font-family:scifi;
    font-weight:100;
    padding:15px 50px;
    border:none;
    box-sizing: border-box;
    font-size:20px;
    cursor:pointer;
    transition-duration: 0.2s;
    background-color:rgb(9, 219, 247);
    color:rgba(0, 0, 255, 0.422);
}
.home_btn:hover {
    transition-duration: .2s;
    transform: translateY(-5px) scale(1.03);
}

body {
    background:rgb(0,27,38);
    font-family:"scifi";
    overflow:hidden;
    color:white;
    text-align: center;
}
* {
    font-weight:100;
}
.center {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.chat_wrapper {
    background:rgba(0, 0, 0, 0.219);
    height:auto;
    width:60vw;
    padding:20px;
    box-shadow: 0px 0px 20px rgb(9, 219, 247);
}
.chat_wrapper input {
    background-color:black;
    color:white;
    border:none;
    padding: 20px;
    box-sizing: border-box;
    width:78%;
    margin-right:4%;
}
.chat_wrapper input:focus {
    outline:rgb(9, 219, 247) 2px solid;
}
.chat_wrapper button {
    width:18%;
    font-size:100%;
    cursor:pointer;
    transition-duration: 0.2s;
    background:rgb(9, 219, 247);
    color:rgba(0, 0, 255, 0.422);
    font-family:scifi;
    border:none;
}
.chat_wrapper button:hover {transform: scale(0.9);transition-duration: 0.2s;}
.msg_input {
    display:flex;
}
.chat {
    background:black;
    height:60vh;
    margin: 20px 0px;
}

.fadeIn {
    opacity:1;
    transition-duration: 0.3s;
}
.fadeOut {
    opacity: 0;
    transform: scale(0.75);
}