@font-face {
    font-family: 'Montserrat';
    src: url('../docs/font/montserrat.php') format('truetype');
    font-weight: medium;
    font-style: normal;
}
@font-face {
    font-family: 'futura';
    src: url('../docs/font/futura_book.php') format('truetype');
    font-weight: medium;
    font-style: normal;
}
@font-face {
    font-family: 'spacemono';
    src: url('../docs/font/spacemono.php') format('truetype');
    font-weight: medium;
    font-style: normal;
}
:root{
    --background-color_light: white;
    --background-color_dark: #0e1113;
    --navbar_height: 64px;
}
.opposit-color{
    color : var(--p_opposit);
}

html, body{
    overflow-x: hidden;
    padding: 0;
}
body, #loadingScreen{
    background-color: var(--p_background-color);
}
#contentCon{
    display: flex;
    justify-content: space-between;
    overflow-x: hidden;
    overflow-y:visible;
}
#content{
    width: 85%;
    color: var(--p_opposit);
    padding-left: 10px;
    box-sizing: border-box;
}
#followCon{
    width: 15%;
}
.follow_image img{
    width: 1.5em;
    height: 1.5em;
    border-radius: 50%;
}
.followItem{
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--p_opposit);
}
.invertable{
    filter: var(--is_invert);
}

@keyframes loadingLogo{
    0%{
        opacity: 1;
    }
    50%{
        opacity: .1;
    }
    100%{
        opacity: 1;
    }
}

#loadingScreen span{
    animation-name: loadingLogo;
    animation-duration: 2s;
    animation-delay: 1s;
    animation-iteration-count: infinite;
}