@font-face {
    font-family: 'Archfont';
    src: url('fonts/Koblenz-Serial-Bold/Koblenz-Serial-Bold.ttf');
}

body{
    background-color:#070F2B !important;
    font-family: 'Archfont';
}

/* Header */

.header{
    padding:50px;
}

.headerh{
    color:white !important;
    padding-top:50px;
    padding-bottom:50px;
}

/* Sections */

#chat{
    background-color:#070F2B !important;
    width:100%; 
    height: calc(80vh + 10px) !important;
    color:white; 
    text-align:left;
    overflow-y:scroll;
    overflow-x:scroll;
}

#send_message{
    width:100%;
    padding-bottom:0px !important;
}

#contimg{
    width:80%;
}

#titlemainposts{
    background-color:#070F2B;
    padding:15px;
    box-shadow: 5px 5px 20px 5px inset #1e2330;
    border:0px;
    border-radius:5px;
    font-size:15px;
}

.textbox{
    background-color:#181b28 !important;
    box-shadow: 5px 5px 10px 5px #08090d !important;
    border:0px !important;
    border-radius:5px !important;
    font-size:15px !important;
}

.empty{
    background-color:#181b28 !important;
    outline:none !important;
    border:0px !important;
}

.empty:focus{
    background-color:#181b28 !important;
    outline:none !important;
    border:0px !important;
}

/* Card */

.card{
    background-color:#070F2B !important;
    border:0px !important;
    margin-top:50px !important;
}

.card-header{
    background-color:#070F2B !important;
    padding:15px !important;
    box-shadow: 5px 5px 10px 5px #08090d !important;
    border:0px !important;
    border-radius:5px !important;
    font-size:15px !important;
}

.card-title{
    margin-top:25px !important;
}

.card-body{
    text-align:left !important;
}

.card-text{
    margin-bottom:25px !important;
}

.card-text a{
    border-radius:5px !important;
    margin:10px !important;
    margin-left:0px !important;
    margin-right:5px !important;
}

.card-text p{
    margin-bottom:25px !important;
}

.pfp{
    box-shadow: 5px 5px 10px 5px #08090d !important;
}

#message1{
    display:flex;
}

.pfp_part{
    display:block;
    width:70px;
    padding:5px;
}

#message_normal_text{
    display:block;
    padding:5px;
}

#chat_cader{
    display:grid;
    grid-template-rows: 3fr 0fr;
}

/* Navigation Bar */

#navbar{
    background-color:#070F2B !important;
    margin:0px;
    width:40%;
    margin-left:30%;
    margin-right:30%;
    height:auto;
    font-size:10px;
    box-shadow: 2px 2px 10px 2px #08090d;
    padding:10px;
    border-radius:5px;
}

#link{
    font-family: 'Archfont';
    transition:0.4s;
    font-size:15px !important;
}

#link:hover{
    transition:0.4s;
    color:#e91e63;
}

.linkbutton{
    background-color:#0c0e14 !important;
    border:0px;
    color:#0070E0;
    padding:0px;
}

.linkbutton:hover{
    text-decoration:underline;
}

audio::-webkit-media-controls-panel{
    box-shadow: 5px 5px 10px 5px #08090d !important;
    border:2px solid #181b28;
    border-radius:0px !important;
    font-size:15px !important;
    padding:10px;
}

/* Buttons */

#button{
    border:2px solid #e91e63;
    color:white;
    font-size:15px;
    font-family: 'Archfont';
}

#button:hover{
    transition:0.2s;
    background-color:#e91e63;
}

/* Upload Section */

#send{
    border-radius:5px;
    margin-left:10px;
    border:1px solid #e91e63;
    color:white;
    font-family: 'Archfont';
}

#send:hover{
    transition:0.2s;
    background-color:#e91e63;

}

input[type="file"] {
    display: none;
}

.custom{
    border: 1px solid #ccc;
    display: inline-block;
    padding: 6px 12px;
    cursor: pointer;
}

#file1{
    border-radius:30px;
    border:0px;
    color:white;
    font-family: 'Archfont';
}

.label{
    background-color:#181b28 !important;
    border-radius:5px;
    margin-top:10px;
    padding:10px;
}

.label::file-selector-button {
    transition:0.5s;
    background-color:transparent !important;
    border:0px;
    border-radius:5px;
    padding:5px;
    color:white;
}

.label::file-selector-button:hover {
    transition:0.5s;
    background-color:#e91e63 !important;
    border:0px;
    border-radius:5px;
    padding:5px;
    color:white;
}

#file1:hover{
    transition:0.2s;
    background-color:#181b28;
}

/* Containers */

#modal{
    background-color:#0c0e14 !important;
    border:0px;
}

#content1{
    margin-left:20px !important;
    margin-right:200px !important;
}

.center{
    display:flex;
    justify-content:center;
}

.principal-div{
    margin-left:300px;
    margin-right:300px;
}

/* Scroll Bar */

::-webkit-scrollbar {
    width:0px;
}

::-webkit-scrollbar-track {
    background: #181b28;
}

::-webkit-scrollbar-thumb {
    background: #181b28;
    border-radius:30px;
}

::-webkit-scrollbar-thumb:hover {
    background: #181b28;
}

#chat::-webkit-scrollbar{
    
    width:0px;
    height:0px;
}

@media only screen and (max-width: 1600px) {
    #navbar{
        background-color:#070F2B !important;
        margin:0px;
        width:60%;
        margin-left:20%;
        margin-right:20%;
        height:auto;
        font-size:10px;
        box-shadow: 2px 2px 10px 2px #08090d;
        padding:10px;
        border-radius:5px;
    }
    
    .principal-div{
        margin-left:10%;
        margin-right:10%;
    }

}
@media only screen and (max-width: 700px) {

    body{
        margin:0px !important;
        overflow-y:scroll;
    }

    /* Header */

    .headerh{
        paddng:20px important;
        font-size:30px !important;
        font-size:40px !important;
    }

    .label{
        background-color:#181b28 !important;
        border-radius:5px;
        margin-top:10px;
        padding:5px;
        width:200px;
    }

    /* Navigation Bar */

    #navbar{
        width:100% !important;
        margin:0px;
        margin-right:0px;
        border-radius:5px;
        padding:20px;
    }

    #link{
        display:block;
        padding:10px;
    }

    .navbar-brand{
        padding:20px !important;
    }

    #link{
        padding:20px !important;
    }

    /* Containers */

    .principal-div{
        margin-left:30px;
        margin-right:30px;
    }

    #content1{
        margin-left:0px !important;
        margin-right:0px !important;
    }

    /* Section */
    
    #contimg{
        width:100%;
    }
    
    .chat-form{
        margin:0px !important;
        border-radius:0px !important;
    }

    /* Row, Containers, Modals */

    .row1{
        margin:50px !important;
    }

    #row1{
        display:flex;
        justify-content: initial !important;
        margin:20px !important;
    }

    .col-8{
        width:100% !important;
    }

    .col-4{
        width:100% !important;
    }

    #modal{
        margin:0px;
        border-radius:0px;
    }

}