Файл "styles.css"

В При створенні ванільних шаблонів (index.html), я використовую два файла .css якщо потрібно то їх об'єдную.
Перший файл "styles.css"  містить дефолтні стилі тастилі блоків для швидкого відображення сторінки, в процесі роботи для медіазапитів підключаю ➫"sitka.css", а усі інші стилі у файлі ➫"nuz.css" який містить додаткові стилі, для другорядних блоків: карточки, форми, блоки які знаходяться в районі футера.

Дефолтні стилі "styles.css":

/* rullan.in.ua  12.02.2021 - made in Ukraine  */
@media (prefers-reduced-motion: no-preference) {
/* Прокручування відбувається плавно. Час та функція переходу встановлюються безпосередньо браузером.*/
:root {scroll-behavior: smooth;}
}
@media (prefers-reduced-motion: reduce) {	
/* Видаляємо всі анімації та переходи для людей, які не хочуть їх не використовувати */
* {animation-duration: 0.01ms !important;animation-iteration-count: 1 !important;transition-duration: 0.01ms !important;scroll-behavior: auto !important;}
}
:root {
    --bs-blue: #0d6efd;
    --bs-indigo: #6610f2;
    --bs-purple: #6f42c1;
    --bs-pink: #d63384;
    --bs-red: #dc3545;
    --bs-orange: #fd7e14;
    --bs-yellow: #ffc107;
    --bs-green: #198754;
    --bs-teal: #20c997;
    --bs-cyan: #0dcaf0;
    --bs-gray: #6c757d;
    --bs-gray-dark: #343a40;
    --bs-gray-100: #f8f9fa;
    --bs-gray-200: #e9ecef;
    --bs-gray-300: #dee2e6;
    --bs-gray-400: #ced4da;
    --bs-gray-500: #adb5bd;
    --bs-gray-600: #6c757d;
    --bs-gray-700: #495057;
    --bs-gray-800: #343a40;
    --bs-gray-900: #212529;
    --bs-black: #000;
    --bs-white: #fff;

  --font: 'Roboto Condensed', sans-serif;
  --bs-font: "Panton-Black", monospace;
  --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
  --marglr: 0 auto;
  --margsect: 40px auto;
}
/*--- При фокусі зникає надпис в полі ---*/
input::-webkit-input-placeholder       {opacity: 1; transition: opacity 0.3s ease;}
input::-moz-placeholder                {opacity: 1; transition: opacity 0.3s ease;}
input:-moz-placeholder                 {opacity: 1; transition: opacity 0.3s ease;}
input:-ms-input-placeholder            {opacity: 1; transition: opacity 0.3s ease;}
input:focus::-webkit-input-placeholder {opacity: 0; transition: opacity 0.3s ease;}
input:focus::-moz-placeholder          {opacity: 0; transition: opacity 0.3s ease;}
input:focus:-moz-placeholder           {opacity: 0; transition: opacity 0.3s ease;}
input:focus:-ms-input-placeholder      {opacity: 0; transition: opacity 0.3s ease;}

@font-face {
    font-family: 'RobotoLight';
    src: url('font/RobotoLight.eot'); /* IE9+ */
    src: url('font/RobotoLight.woff') format('woff'), /* All browsers */
         url('font/RobotoLight.ttf') format('truetype');
}
@font-face {
    font-family: 'RobotoRegular';
    src: url('font/RobotoRegular.eot'); /* IE9+ */
    src: url('font/RobotoRegular.woff') format('woff'), /* All browsers */
         url('font/RobotoRegular.ttf') format('truetype');
}
@font-face {
    font-family: 'RobotoBold';
    src: url('font/RobotoBold.eot'); /* IE9+ */
    src: url('font/RobotoBold.woff') format('woff'), /* All browsers */  
         url('font/RobotoBold.ttf') format('truetype');
}
body {color:#adb6c1;min-height:100%; height: 100%; margin: 0;font-family: "Tektur", sans-serif; font-size:11px;  font-optical-sizing: auto;  font-weight: 400; font-style: normal;}
#ramka {max-width:100%; position: relative; overflow-x: hidden;  min-height:100vh}
.str-5 {height:5px;}.str-10 {height:10px;}.str-20 {height:20px;}.str-30 {height:30px;}.str-40 {height:40px;} .str-50 {height:50px;}.str-60 {height:60px;} .str-70 {height:70px;}.str-80 {height:80px;} .str-90 {height:90px;}.str-100 {height:100px;}
.clear{display:table; width:100%;min-height:1px;font-size:2px;float:none;clear: both;}
hr.eleghr {border: 0;height: 1px;background-image: -webkit-linear-gradient(left, rgba(105,106,105,0), rgba(105,106,105,0.75), rgba(105,106,105,0));background-image: -moz-linear-gradient(left, rgba(105,106,105,0), rgba(105,106,105,0.75), rgba(105,106,105,0));background-image: -ms-linear-gradient(left, rgba(105,106,105,0), rgba(105,106,105,0.75), rgba(105,106,105,0));background-image: -o-linear-gradient(left, rgba(105,106,105,0), rgba(105,106,105,0.75), rgba(105,106,105,0));}

hr {margin: 1rem 0;color: var(--linia);background-color: currentColor;border: 0;opacity: 0.25;}
.bottom-hr::after{display: block; border-bottom: 1px solid var(--linia); content: ""; width: 100%; height: 1px;opacity: 0.8;position:absolute;bottom: 5px; left:0;}
button {border-radius: 0;border:none;background: none;}
button:focus:not(:focus-visible) {outline: 0;}
input, button, select, optgroup, textarea {margin: 0;font-family: inherit;font-size: inherit;line-height: inherit;}
button, select {text-transform: none;}
[role=button] {cursor: pointer;}
select {word-wrap: normal;}select:disabled {opacity: 1;}
[list]::-webkit-calendar-picker-indicator {display: none;}
button, [type=button], [type=reset], [type=submit] {-webkit-appearance: button;}button:not(:disabled), [type=button]:not(:disabled), [type=reset]:not(:disabled), [type=submit]:not(:disabled) {cursor: pointer;}
::-moz-focus-inner {padding: 0;border-style: none;}
.qoute {margin:10px 0; padding:10px 10px 10px 40px;}
.qoute-v2 q {quotes: "\00AB\00A0" "\00A0\00BB";}
.qoute q {quotes: "\201c" "\201d" "\2018" "\2019"; font-size:1.4em; font-style: italic;}

table {caption-side: bottom;border-collapse: collapse;}
caption {padding-top: 0.5rem;padding-bottom: 0.5rem;color: #6c757d;text-align: left;}
th {text-align: inherit;text-align: -webkit-match-parent;}
thead, tbody, tfoot, tr, td, th {border-color: inherit;border-style: solid;border-width: 0;}
td, th {border-bottom: 1px solid rgba(50, 58, 100, 0.9); padding:8px 10px;}
tr:nth-child(even){background: rgba(23, 36, 53, 0.8);}
tr:hover {background: rgba(23, 36, 53, 0.9);}

h6, h5, h4, h3, h2, h1 {display:inline-block; line-height: 1.25; position:relative; text-transform: uppercase; margin:0 0 0.5rem 0;font-family: "Handjet", sans-serif;  font-optical-sizing: auto;  font-weight: 300; font-style: normal;}
h1{font-size: calc(1.5rem + 1.3vw);}
h2{font-size: calc(1.4rem + 1.1vw);}
h3{font-size: calc(1.3rem + 0.9vw);}
h4{font-size: calc(1.2rem + 0.7vw);}
h5{font-size: 1.3rem;}
h6{font-size: 1.2rem;}
.texkontyr {text-shadow: black 1px 1px 0, black -1px -1px 0, black -1px 1px 0, black 1px -1px 0;}
.texkontyrw {text-shadow: white 1px 1px 0, white -1px -1px 0, white -1px 1px 0, white 1px -1px 0;}
s {text-decoration:none;font-style:normal;}
p {margin:0 0 1rem 0; font-size: 13px; line-height: 1.4; letter-spacing: 1px;}
sub, sup {display: inline-block;}
/*-- 1 FLEX --*/
[class*='row-'], .row{display:flex; flex-flow: row wrap; justify-content: space-between; gap: 1rem;}
.row-c {justify-content:center; align-items:center; align-content: center;}
.row-ltc{justify-content: start; align-items:center; align-content: center;}
.row-r {justify-content: end; align-items:start; align-content:start;}
.row-rtc {justify-content: end; align-items:center; align-content: center;}
.nowrap {flex-wrap: nowrap;}

a {color: #4bb0c4;text-decoration: none;}
a:hover {filter: hue-rotate(-140deg);}
a:not([href]):not([class]), a:not([href]):not([class]):hover {color: inherit;text-decoration: none;}

/*-- GRID --*/
.block {display: grid; grid-gap: 10px; grid-template: 60px minmax(200px, max-content) 40px / 240px 1fr 300px;  grid-template-areas:
    "hed hed hed"
    "asdl mains asdr"
    "fot fot fot";
}
.headers {grid-area: hed;}
.asidel {grid-area: asdl;}
.asider {grid-area: asdr;}
.tilos {grid-area: mains;}
.footers {grid-area: fot;}
/* ====  Дизайн :) ==========*/

/* ====  Далі усілякі дрібниці :) ==========*/


 /*Knopka vverh*/
#back-top {font:800 44px/1.4 Georgia, serif; position:fixed; right:20px;padding:0;line-height:.8;border-radius:3px;color:#000;background:#c9d7bc;}

 /*DLE elemens*/
  /*poisk*/
#q_search{display:block;width:38%;position:absolute;right:20px;top:20px;z-index:700;}
#story {width:77%;padding-left:20px;float:left;margin-right:3%;height:30px;border-radius:3px;background:rgba(6,5,19,0.4);color:#fff;border: 1px solid #334272;}
#q_search button{margin:0;float:left;width:16%;}
#story:focus{border: 1px solid #93a297; color:#000; border-radius:3px;background:#fff; box-shadow:0 0 10px 0 rgba(117,140,126,0.9);}
  /*speedbar*/
.speedbar {position:absolute;top:52px;left:71px;z-index:95;color:#4e4e4e;}
.speedbar .over::before{content:""; display:inline-block;width:25px;height:16px; background:url(../images/sprit.png)  -426px -453px;}