html,
body {
    font-family: sans-serif;
    background-color: #f8f9fa;
}

header .navbar-brand {
    font-family: 'Inconsolata', monospace;
    font-size: 20px;
    color: #000;
    text-transform: uppercase;
}

header .nav-item {
    text-transform: uppercase;
    margin-left: 50px;
}

header .nav-item a::after {
    content: '';
    display: block;
    width: 100%;
    background-color: rgb(51, 7, 175);
    height: 3px;
    transform: scale(0);
    transition: all .3s;
}

header .nav-item a:hover::after {
    transform: scale(1);
}

header .nav-item a:active {
    transform: scale(1);
    font-size: 20px;
    color: #ed0c0c;
    border: 3px solid #0000EE;
}

.content {
    width: 100%;
    /* height: 500px; */
}

.content-about {
    font-size: 12px;
}

.ym,
.mouns,
.year {
    display: block;
    margin: 5px;
    font-size: 10px;
}

.cmpl th {
    background: #ccc;
    /* Цвет фона */
    text-align: center;
    /* Выравнивание по левому краю */
}

.cmpl,
th {
    border: 1px solid black;
    /* Параметры границы */
    padding: 2px;
    /* Поля в ячейках */
    font-size: 14px;
    text-align: center;
}

.cmpl,
td {
    border: 1px solid black;
    /* Параметры границы */
    padding: 2px;
    /* Поля в ячейках */
    font-size: 14px;
    /* text-align: center; */
}

.cmpl tr:hover {
    background-color: #E6E6E6;
    font-size: 18px;
    color: #0B610B;
}

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

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


/* Medium Devices, Desktops */

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

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


/* Small Devices, Tablets */

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

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


/* Extra Small Devices, Phones */

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