style.css

/*
Theme Name: Basic Theme with Bootstrap 4
Version: 1.0.0
Description: Basic Theme with Bootstrap 4
Author: Ruslan Skazkopodatelev
Author URI: http://theme.skazkin.su
*/
:root {
    --main-bg-color: #0C2231;
    --main-bg-color-hover: #742e7e;
    --nav-bg-color: #2C365E;
    --main-text-color: #D5D7D8;
    --button-color: #e83e8c;
    --main-font: 'Montserrat', sans-serif;
    --title-font: 'Roboto Slab', serif;
    --code-font: 'Anonymous Pro', monospace;
    --text-shadow: 0 0 10px #000;
}
html, body {
    height: 100%;
}
body {
    font-family: var(--main-font);
    color: var(--main-text-color);
}
h1, h2, h3, h4, h5, h6,
.title,
.navbar-brand {
    font-family: var(--title-font);
    color: var(--main-text-color);
}
a {
    color: var(--button-color);
    transition: color 200ms ease-in-out;
}
a:hover, a:focus {
    color: var(--main-text-color);
}
a:link {
    text-decoration: none;
}
h1 {
    padding: 1.5rem 0;
}
.content-wrapper {
    color: var(--main-text-color);
    padding: 3rem 0;
}
.page-content {
    padding: 1.5rem 0;
    text-align: justify;
}
.wrapper {
    min-height: 100%;
    height: auto;
    margin: 0 auto -40px;
    padding: 0 0 40px;
    background: var(--main-bg-color);
}
.btn-outline-bss {
    color: var(--main-text-color);
    border-color: var(--main-text-color);
}
.btn-outline-bss:hover {
    background-color: var(--button-color);
    color: var(--main-text-color);
}
.btn-bss, .main-form-modal input[type=submit], .more-link {
    color: var(--main-text-color);
    background-color: var(--button-color);
    border-color: var(--button-color);
}
.more-link {
    padding: .25rem .5rem;
    font-size: .875rem;
    line-height: 1.5;
    border-radius: .2rem;

}
.btn-info.btn-bss:hover,
.btn-info.btn-bss:active,
.main-form-modal input[type=submit]:hover,
.main-form-modal input[type=submit]:active,
.more-link:active,
.more-link:hover {
    border-color: var(--nav-bg-color);
    background-color: var(--nav-bg-color);
    cursor: pointer;
}

.bbs-separator {
    border-top: 2px solid var(--button-color);
    border-bottom: 2px solid var(--button-color);
    border-radius: 2px;
    margin: 1rem .5rem;

}
.section-heading {
    font-size: 2.5rem;
    text-shadow: var(--text-shadow);
    font-family: var(--title-font);
}
.section-heading span {
    display: inline-block;
    padding: 0 .5rem;
    border-bottom: 4px solid var(--button-color);
    box-shadow: 0 5px 5px -5px #000a;
}
.ssh {
    padding: 1em 2em;
    background-color: black;
    color: white;
    font-family: var(--code-font);
    margin-bottom: 1em;
}
.mono {
    background-color: black;
    color: white;
    font-family: var(--code-font);
}
.list-title {
    font-weight: 700;
    margin-bottom: 1em;
}
.code pre {
    color: white;
    background-color: #263238;
}
.post-img,
.embed-gist-wrap {
    padding: 1em;
    background-color: var(--nav-bg-color);
    margin-bottom: .75em;
}
.post-img img {
    max-width: 100%;
    border-radius: 3px;
}
.embed-gist-wrap .gist .gist-file {
    margin-bottom: 0;
}
/*HEADER*/
.header-top {
    text-shadow: var(--text-shadow);
}
.header-top-info-name, .header-top-contacts-phone {
    font-size: 2rem;
    font-family: var(--title-font);
}
.header-top-info-name:after {
    content: '';
    display: block;
    width: 70px;
    border-top: 2px solid var(--button-color);
    border-bottom: 2px solid var(--button-color);
    border-radius: 2px;
}
.header-top-info img {
   width: 100%;
}
.header-top-info-description {
    padding: .3em 0 .6em;
}
.header-top a {
    color: var(--main-text-color);
}
.header-top-contacts-phone a:hover,
.header-top-contacts-phone a:focus,
.header-top-info-name a:hover,
.header-top-info-name a:focus {
    color: var(--button-color);
}
.header-top-contacts-email a:hover,
.header-top-contacts-email a:focus {
    text-decoration: underline;
}
.header-top-contacts {
    text-align: right;
}

/*/HEADER*/
/*MENU*/
.navbar-bss {
    background-color: var(--nav-bg-color)!important;
}
.form-control-bss {
    padding: .25rem .5rem;
    font-size: .875rem;
    line-height: 1.5;
}
.dropdown-menu {
    background-color: var(--main-bg-color);
    color: var(--main-text-color);

}
.dropdown-item {
    color: var(--main-text-color);
}
.dropdown-item:focus, .dropdown-item:hover {
    background-color: var(--button-color);
    color: var(--main-text-color);
}
.dropdown-item.active, .dropdown-item:active {
    color: var(--main-text-color);
    text-decoration: none;
    background-color: var(--main-bg-color-hover);
}
.header-bottom .form-inline {
    flex-wrap: nowrap;
}
/*/MENU*/
footer {
    background-color: var(--nav-bg-color);
    color: var(--main-text-color);
}
.skazkin-info {
    text-align: right;
}
.bottom-wrapper {
    padding: .5rem 0;
}
/*PAGE*/
.page figcaption {
    color: #fff;
}
/*/PAGE*/
/*PAGINATION*/
.nav-links {
    display: flex;
    justify-content: center;
}
.page-numbers {
    display: block;
    height: 2.5rem;
    width: 2.5rem;
    text-align: center;
    margin-left: -1px;
    line-height: 2.5rem;
    color: var(--main-text-color);
    background-color: var(--button-color);
    border: 1px solid var(--nav-bg-color);
    box-sizing: border-box;
    font-weight: 700;
}
span.page-numbers {
    background-color: var(--nav-bg-color);
    color: var(--main-text-color);
}
/*/PAGINATION*/
/*VANTAGES*/
.vantages-items-wrap {
    margin-left: -.5rem;
    margin-right: -.5rem;
}
.vantages-item {
    width: 265px;
    border: 4px solid var(--button-color);
    border-radius: 5px;
    box-sizing: border-box;
}
.vantages-item {
    margin: .5rem;
}
.vantages-item-heading {
    font-size: 1.25rem;
    font-family: var(--title-font);
    text-shadow: var(--text-shadow);
}
.vantages-item-img-icon:before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 5rem;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    color: var(--button-color);
    text-shadow: var(--text-shadow);
}
.vantages-item-text {
    font-size: .75rem;
    padding: .75rem;
}
.vantages-item-list-item {
    list-style: none;
}
.vantages-item-list {
    padding-left: 1rem;
}
.vantages-item-list-item:before {
    font-family: "Font Awesome 5 Free";
    font-size: .5rem;
    font-weight: 900;
    content: "\f111";
    color: var(--button-color);
    position: relative;
    bottom: 1px;
    margin-right: .5rem;
}
.vantages-item-offer {
    text-align: center;
    font-family: var(--title-font);
}
/*/VANTAGES*/
/*JUMBOTRON*/
.jumbotron {
    background-color: var(--main-bg-color);
    border: 4px solid var(--button-color);
}
.jumbotron .bbs-separator {
    margin: 1rem 0;
}
.lead, .jumbotron h1 {
    font-family: var(--title-font);
    text-shadow: var(--text-shadow);
}
/*/JUMBOTRON*/
/*MAIN FORM MODAL*/
.main-form-modal .modal-content {
    background-color: var(--main-bg-color);
    border: 4px solid var(--button-color);
}
.main-form-modal .modal-header {
    border-bottom: unset;
}
.main-form-modal .modal-footer {
    border-top: unset;
}
.main-form-modal .close {
    color: var(--button-color);
    text-shadow: unset;
    outline: none;
}
.main-form-modal .close:not(:disabled):not(.disabled):focus, .main-form-modal .close:not(:disabled):not(.disabled):hover {
    color: #fff;
}
.main-form-modal form .bbs-separator {
    margin: 1rem 0;
}
.main-form-modal input,
.main-form-modal textarea {
    padding: .5rem;
    border-radius: 4px;
}
.main-form-modal-submit {
    text-align: center;
}
.main-form-modal input:not([type=submit]), .main-form-modal label, .main-form-modal textarea {
    width: 100%;
}
.main-form-modal input:not([type=submit]), .main-form-modal textarea {
    background-color: var(--nav-bg-color);
    color: white;
    font-weight: 700;
}
.main-form-modal input, .main-form-modal textarea {
    border: 1px solid var(--button-color);
}
.main-form-modal textarea {
    height: 112px;
}
.main-form-modal .bbs-separator {
    margin: 0 1rem;
}
/*/MAIN FORM MODAL*/
/*COMMENTS*/
.comments-wrap {
    font-size: 1rem;
    margin: 3em 0;
}
.comments-wrap h3 {
    font-size: 1.25em;
}
.comment-form label {
    display: block;
}
.comment-form input:not([type=submit]), .comment-form textarea {
    background-color: var(--nav-bg-color);
    color: white;
    font-weight: 700;
    border: 1px solid var(--button-color);
    border-radius: 3px;
    padding: .5em 1em;
}
.comment-form-cookies-consent label {
    display: inline-block;
    margin-left: .5em;
}
.comment-form .form-submit input[type=submit]{
    color: var(--main-text-color);
    background-color: var(--button-color);
    border-color: var(--button-color);
    padding: .5rem;
    border-radius: 4px;
}
.comment-form .form-submit input[type=submit]:hover,
.comment-form .form-submit input[type=submit]:active,
.reply .comment-reply-link:hover,
.reply .comment-reply-link:active {
    border-color: var(--nav-bg-color);
    background-color: var(--nav-bg-color);
    cursor: pointer;
}
.reply .comment-reply-link {
    padding: .25rem .5rem;
    font-size: .875rem;
    line-height: 1.5;
    border-radius: .2rem;
    color: var(--main-text-color);
    background-color: var(--button-color);
    border-color: var(--button-color);
}
.comments-wrap .reply {
    margin-bottom: 1.5em;
}
/*/COMMENTS*/
/*MEDIA*/
@media screen and (max-width: 767px) {
    .header-top,
    .header-top-contacts {
        text-align: center;
    }
    .header-top-info img {
        width: 50%;
    }
}
/*/MEDIA*/