Файл "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 {max-width:100%;width:100%; position:relative; overflow-x:hidden; font-family: RobotoLight, Arial, sans-serif; font-size:12px; font-weight: 100; color: var(--blacktext); background:var(--white);}
figure, iframe,code{width:100%;max-width: 100%;padding:0; margin:0;}
body, div, section, header, article, main, aside, footer, textarea, input, button, nav, ol, ul, li, a  {padding:0; margin:0;border-style: none;display:block;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
table {border:none;border-collapse:collapse;}
td {text-align:left;vertical-align:top;padding:0; margin:0;}
s, u, i {text-decoration:none;font-style:normal;}
b, strong {font-family: RobotoBold, Arial, sans-serif; font-weight: 800;}
pre {white-space: pre-wrap; word-wrap: break-word; border-radius:16px; line-height: 1.6; border: 1px dashed var(--gray); padding:15px;}
pre s {color: var(--yellow); font-weight:bold; font-size:1.1em;}
img {max-width: 100%;max-height: 100%;}
.icon {width:17px; height:17px;}
a {cursor:pointer; text-decoration:none;}
a:not([class]) {color:var(--blue01);text-decoration-skip-ink: auto;}
a:not([class]):hover, a:not([class]):focus {color:var(--blue01);}
a:focus{outline:none;}
a[href^="http"], a[href^="https"] {color: var(--blue01);text-decoration: none;}
a[href^="http"]:hover, a[href^="https"]:hover {color: darkgreen;text-decoration: underline;}
.btn{cursor:pointer;}
h1,h2,h3,h4,h5 {font-family: RobotoBold, Arial, sans-serif;}
p {text-align: justify;color:var(--dark);font-size:14px;line-height:1.4; margin:0 0 10px 0;}
svg {width: 1.7rem;height: 1.7rem;}
hr {margin: 1rem 0; color:inherit; background-color:currentColor; border:none; border-top: 1px solid var(--gray02);opacity: 0.9;}
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));}
.a-center{text-align: center;width:100%;vertical-align: baseline;}
/* otstyp */
.clear{display:table; width:100%;min-height:1px;font-size:2px;float:none;clear: both;}.clear:before, .clear:after{float:none;content:"";display: block;height:2px;width:100%;clear:both;}
.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;}
/* knopki */
.knop_v2 {padding:10px 20px 8px 20px; font-size:18px; letter-spacing:2px; line-height:1; text-transform:uppercase; color:var(--black); border: 2px solid var(--black); background: var(--jovt);}
/* maket */
.ramka  {overflow-x:hidden;}
.footmenu {max-width:1600px; margin: var(--marglr);}
.sect {max-width:1600px; margin: var(--margsect);}
/*-- END shablon --*/

/*-- FLEX --*/
.row, [class*='row-']{display:flex; flex-flow: row nowrap; justify-content: space-between; gap: 1rem;}
.row-ct {justify-content:center; gap: 1rem;}
.row-c {justify-content:center; align-items:center; align-content: center; gap: 1rem;}
.row-bc {align-items:center; align-content: center; gap: 1rem;}
.row-lt {justify-content: start; align-items:start; align-content:start; gap: 1rem;}
.row-ltc {justify-content: start; align-items:center; align-content: center; gap: 1rem;}
.row-rt {justify-content: end; align-items:start; align-content:start; gap: 1rem;}
.row-rtc {justify-content: end; align-items:center; align-content: center; gap: 1rem;}
.row-s {justify-content: space-evenly; align-items: center; align-content: center; gap: 1rem;}
.row-bc > div {align-self: center; }
.row-s > div {align-self: start;}
.row-clmn {flex-flow: column nowrap;}
.row-clmnc {flex-flow: column nowrap; justify-content: center; align-content: center;align-items: center;}

/*-- 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;}