css-helper

css-helper.css

/* Css Helper */

/* Connect CSS */
<link rel="stylesheet"href="style.css">


<!-- Browser suffixes -->
	Chrome  -chrome-
	Safari  -webkit-
  Mozilla -moz-
  IE      -ms-
  Opera   -o-

  Konqueror -khtml-


<!-- Block Elements -->
<address>
<article>
<aside>
<blockquote>
<canvas>
<dd>
<div>
<dl>
<dt>
<fieldset>
<figcaption>
<figure>
<footer>
<form>
<h1><h6>
<header>
<hr>
<li>
<main>
<nav>
<noscript>
<ol>
<output>
<p>
<pre>
<section>
<table>
<tfoot>
<ul>
<video>


<!-- Inline Elements -->
<a>
<abbr>
<acronym>
<b>
<bdo>
<big>
<br>
<button>
<cite>
<code>
<dfn>
<em>
<i>
<img>
<input>
<iframe>
<kbd>
<label>
<map>
<object>
<q>
<samp>
<script></script>
<select>
<small>
<span>
<strong>
<sub>
<sup>
<textarea>
<time>
<tt>
<var>


display:
	block; 
	inline;
	inline-block;
	none;


  
<!-- Link style order, link order -->
a:link
a:visited
a:hover
a:active



<!-- Fonts, fonts sizes -->
/* Correct including */
https://css-tricks.com/snippets/css/using-font-face/
https://www.w3schools.com/css/css3_fonts.asp
/* The @font-face rule should be added to the stylesheet before any styles. */
/* include fonts */

/* we can probably get away with */
/* best practices https://web.dev/font-best-practices/ */
/* WOFF / WOFF2 Web Open Font Format the most modern approach */
@font-face {
  font-family: 'MyWebFont';
  src:  url('myfont.woff2') format('woff2'),  /* TrueType/OpenType font that provides better compression than WOFF 1.0 */
        url('myfont.woff') format('woff');    /* The only practical thing also using WOFF buys you is Internet Explorer 11 support. */
}


/* all methods, fonts type */
@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('webfont.woff') format('woff'), /* Pretty Modern Browsers, WOFF is a font format for use in web pages */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS - TrueType is the most common font format for both the Mac OS and Microsoft Windows operating systems. */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

/* Slightly deeper browser upport */
@font-face {
  font-family: 'MyWebFont';
  src: url('myfont.woff2') format('woff2'),
       url('myfont.woff') format('woff'),
       url('myfont.ttf') format('truetype'); /* ttf will cover a few more base */
}



<!-- positions, positioning -->
/* There are five different position values: */
static
relative
fixed
absolute
sticky
/* !--> Elements are then positioned using the top, bottom, left, and right properties.  */
position: fixed - is positioned relative to the viewport



<!-- Bootstrap -->
/* Viewport */
<meta name="viewport" content="width=device-width, initial-scale=1">

/* Disable zooming */
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">


/* Sizes */
xs (for phones - screens less than 768px wide)
sm (for tablets - screens equal to or greater than 768px wide)
md (for small laptops - screens equal to or greater than 992px wide)
lg (for laptops and desktops - screens equal to or greater than 1200px wide)

.col-sm- 750px
.col-md- 970px
.col-lg- 1170px



The Bootstrap 4 grid system has five classes:
.col- 	 (extra small devices - screen width less than 576px)            < 576
.col-sm- (small devices - screen width equal to or greater than 576px)	 >= 576
.col-md- (medium devices - screen width equal to or greater than 768px)  >= 768
.col-lg- (large devices - screen width equal to or greater than 992px)   >= 992
.col-xl- (xlarge devices - screen width equal to or greater than 1200px) >= 1200



/* Media Queries - Chrome Dev Tools - Must use, responsive */

https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

/* Custom, standard */
@media screen and (max-width: 538px){}



/* Typical Device Breakpoints */
/* To keep things simple you could target five common groups: */
/* Extra small devices (phones, 600px and down) */
/* BS4 rules */
@media only screen and (max-width: 600px) {...} 

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {...} 

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {...} 

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {...} 

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {...}

/* Example */
@media (min-width: 768px) and (max-width: 887px) {
  padding: 2.5rem 2.5rem 4rem 2.5rem;
}






/* Old Method for fixed devices */
/* ----------- iPhone 4 ----------- */
/* Portrait & Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px){}
  
/* Portrait */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (orientation: portrait) {}
  
/* Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (orientation: landscape){}


/* ----------- iPhone 5SE ----------- */
/* Portrait & Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px){}

/* Portrait */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (orientation: portrait) {}

/* Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (orientation: landscape){}


/* ----------- iPhone 6/7/8 ----------- */
/* Portrait & Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px){}

/* Portrait */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px)
  and (orientation: portrait) {}

/* Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px)
  and (orientation: landscape){}


/* ----------- iPhone 6/7/8 Plus ----------- */
/* Portrait & Landscape */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px){}

/* Portrait */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px)
  and (orientation: portrait) {}

/* Landscape */
@media only screen   
  and (min-device-width: 414px) 
  and (max-device-width: 736px)
  and (orientation: landscape){}


/* ----------- iPhone X ----------- */
/* Portrait & Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px){}

/* Portrait */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px)
  and (orientation: portrait) {}

/* Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px)
  and (orientation: landscape){}


/* ----------- iPad ----------- */
/* Portrait & Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px){}

/* Portrait */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px)
  and (orientation: portrait) {}

/* Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: landscape){}


/* ----------- iPad Pro ----------- */
/* Portrait & Landscape */
@media only screen 
  and (min-device-width: 1024px) 
  and (max-device-width: 1366px){}

/* Portrait */
@media only screen 
  and (min-device-width: 1024px) 
  and (max-device-width: 1366px)
  and (orientation: portrait) {}

/* Landscape */
@media only screen 
  and (min-device-width: 1024px)
  and (max-device-width: 1366px)
  and (orientation: landscape){}


/* touch devices emulate hover states on long tap of hoverable elements. */
@media (hover: hover) {
  a:hover {
    background: blue;
  }
}





<!-- Tricky tricks -->
/*
To prevent Mobile Safari from automatically detecting phone numbers, 
add the following meta tag to the top of the page: 
*/
<meta name="format-detection" content="telephone=no">
/*** Remove static property ***/
.name {position:static !important;}


/* clearfix */
.clearfix::after {
    content: "";
    clear: both;
    display: table;
}


/*** Remove round corners on input Select type ***/
/* 100% work */
-webkit-border-radius: 0;
	border: 0;
	outline: 1px solid #D8D8D8;
	outline-offset: -1px;

/* or use only this code but Arrows remove to */
-webkit-appearance: none;

/* general properties */
appearance: none; 
-webkit-appearance: none; 
-moz-appearance: none; 

/* good arrow design */
background: #fff url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC") no-repeat 90% 50%;




/*** inputs ***/
input[type="date"]
input[type="datetime"]
input[type="month"]
input[type="week"]
input[type="time"]
input[type="number"]
input[type="range"]
input[type="text"]
input[type="url"]
input[type="search"]
input[type="email"]
input[type="tel"]
input[type="password"]
input[type="button"]
input[type="checkbox"]
input[type="radio"]
input[type="file"]



/*** Change content with css :) ***/
.myelement {
	visibility: hidden;
}

.myelement:before {
	content: 'This is new content, replacing existing content';
	visibility:visible;
}

/* option 2 */
.myelement {
	text-indent: -9999px;
	line-height:0;
}

.myelement:after {
	text-indent:0;
	content:'Welcome Back!';
	display:block;
	line-height: initial;
}
/* https://wpguru.co.uk/2014/03/how-to-replace-and-add-html-text-elements-with-css/ */




/**** Sticky footer styles
-------------------------------------------------- */
/* one method, this method it's ok but it must be adaptated for responsive*/
html {
  position: relative;
  min-height: 100%;
}
body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
}
footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
  background-color: #f5f5f5;
}


/* another method with flex, this is must used */
body{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

footer{
  margin-top: auto;
}

/* for browser support */
html{
  height: 100%;
}
body{
  min-height: 100%; /* in place of 100vh */
}




/**** Miscelaneous
-------------------------------------------------- */
/* Remove blue border on the button */
/* If you must remove it, provide alternative styling - http://www.outlinenone.com/*/
button:focus, button:active { outline: 0 !important; }



  
/***  --- Transition ---  ***/
site https://www.w3schools.com/css/css3_transitions.asp
/* About Timing https://www.w3schools.com/cssref/css3_pr_transition-timing-function.asp */

.example {
  transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay];

	
	/* You can specify a particular property as we have above, or use a value of "all" to refer to transition properties. */
  transition: all 0.5s ease;


	/* You may comma separate value sets to do different transitions on different properties. */
  transition: background 0.2s ease,
              padding 0.8s linear;

  -webkit-transition: background-color 2s ease-out;
  -moz-transition: background-color 2s ease-out;
  -o-transition: background-color 2s ease-out;
  transition: background-color 2s ease-out;
}

/* order */
.example {
    -webkit-transition: background-color 500ms ease-out 1s;
    -moz-transition: background-color 500ms ease-out 1s;
    -o-transition: background-color 500ms ease-out 1s;
    transition: background-color 500ms ease-out 1s;
}





/***  --- Selectors  ---  ***/
https://www.w3schools.com/cssref/trysel.asp

/***  --- Design  ---  ***/
/* line after text */
span::after{
	content: '';
	width: 20px;
	height: 1px;
	background-color: #fff;
	display: inline-block;
	vertical-align: middle;
	margin-left: 10px;
}



/* Download button */
https://stackoverflow.com/questions/11620698/how-to-trigger-a-file-download-when-clicking-an-html-button-or-javascript

/* Working good */
<button type="submit" class="btn btn-dark d-none d-lg-inline-block" onclick="window.location.href='CV.pages'">Download!</button>

/* jQuery method */
$("#download-button").click(function(){ window.location = 'CV.pages' });

/* another method, some artefacts then loading*/
<button type="submit" onclick="window.open('file.doc')">Download!</button>



/***  --- Remove blue line ---  ***/
button:focus {outline:0 !important;}




/*** ---  Flex , flexbox, display flex, work flex box  --- ***/
/* https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content */
/* https://css-tricks.com/snippets/css/a-guide-to-flexbox/#flexbox-background */ 
/* https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items */

.flex-container{
  display: flex; /* or inline-flex, This defines a flex container */
  flex-direction: row; /*  row-reverse | column | column-reverse */ 
  flex-wrap: nowrap; /* wrap | wrap-reverse, , flex items will all try to fit onto one line */
  flex-flow: column wrap; /* This is a shorthand for the flex-direction and flex-wrap properties, default row nowrap */
  justify-content: flex-start; /* flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe, This defines the alignment along the main axis. */
  align-items: stretch; /* flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe, This defines the default behavior for how flex items are laid out along the cross axis on the current line */
  align-content: flex-start; /* flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe */
  gap: /* The gap property defines the size of the gap between the rows and columns. shorthand for row-gap, column-gap*/
}

.flex-elements{
  order: 5; /* default is 0 */
  flex-grow: 4; /* default 0, ability for a flex item to grow if necessary. ! It accepts a unitless value that serves as a proportion. */ 
  flex-shrink: 3; /* default 1, ability for a flex item to shrink (se contracta, strânge) if necessary. */
  flex-basis: auto; /* default auto, defines the default size of an element (like width) before the remaining space is distributed */
  align-self: flex-start; /*  auto | flex-start | flex-end | center | baseline | stretch; This allows the default alignment to be overridden for individual flex items. */
  
  flex: 1 1 200px; /* flex-grow: 1; flex-shrink: 1; flex-basis: 200px; default: 0 1 auto; This is the shorthand for flex-grow, flex-shrink and flex-basis combined. */
}



/*** util codes ***/
/* center elements on center on the Y-ax position */
.flex-container{
  height: 400px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}

/* perfect centering elements */
.parent {
  display: flex;
  height: 300px; /* Or whatever */
}

.child {
  width: 100px;  /* Or whatever */
  height: 100px; /* Or whatever */
  margin: auto;  /* Magic! */
}


/* centering first and last child with justify-content property */
/* https://www.youtube.com/watch?v=f_swE9dx7f8&list=PLqHlAwsJRxAPs942EdJ1akeWpOg2yatiM&index=6 */
.child:first-child {
  margin: auto;
}

.child:last-child {
  margin: auto;
}

.child:first-child {
  margin-right: auto;
}

.child:last-child {
  margin-left: auto;
}


/* center span in flex box div */
.center {
  display: flex;
  align-items: center;
  justify-content: center;
}



/***  --- work Backgrounds  ---  ***/
/* 
  https://www.w3schools.com/css/css_background_shorthand.asp
  https://www.svgbackgrounds.com/how-to-add-svgs-with-css-background-image/
 */
 
background-color: #ffffff;
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
background-size: cover; /* background image is resized to cover the entire container */


/* shorthand */
background: #ffffff url("img_tree.png") no-repeat right top;

/* multiple bg's */
#example1 {
  background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
}

/* shorthand order of the property values */
background-color
background-image
background-repeat
background-attachment
background-position



/* phone link */
<a href="tel:123-456-7890">CLICK TO CALL</a>
<a href="tel:123-456-7890p123">CLICK TO CALL</a> 


/* List BG, reapeat bg color,  */
.element:nth-child(odd) {
  background-color: rgba(135, 200, 249, 0.09);
}



/***  --- Tricky tricks to make better things  ---  ***/
/* Font sizes fonts size */
https://www.learnui.design/blog/mobile-desktop-website-font-size-guidelines.html
https://www.editorx.com/shaping-design/article/font-size#:~:text=Optimal%20font%20sizes%20for%20desktop&text=Body%20text%20%2D%20Font%20sizes%20should,can%20be%20pleasant%20to%20read.

/* Font-sizes, Use rems not px will better fit, avoid to use em */
html {
  font-size: 62.5%;
}
body {
  font-size: 2.1rem; // equal to 21px font size
}

/* spacing and padding */
/* Padding and Buttons use em, will change with text font-size */



/* customize List */
ul {
  list-style-type: none;
  padding: 0;

  li{
    display: flex;
    margin-bottom: 1.5rem;

    span {
      padding-left: .5rem;
    }

    &::before {
      content: " ";

      /* Add a background image for the marker */
      background: center/contain no-repeat url("assets/img/icons/list-item-icon.svg");

      /* Create the box and center its contents */
      width: 24px;
      height: 24px;
      display: flex;
      justify-content: center;
      align-items: center;

      /* Additional text styles */
      color: white;
    }
  }
}



/***  --- pare impare odd eve in slider list ---  ***/

/* div.slider-item >  div.item-image-and-bg */
  &:nth-child(odd) .item-image-and-bg {
    background-image: url("assets/img/front-page/slider-item-bg-up.png");
  }

  &:nth-child(even) .item-image-and-bg {
    background-image: url("assets/img/front-page/slide-item-bg-down.png") !important;
  }



/***  --- fadein fadeIn fadeOut with block display ---  ***/
/* https://stackoverflow.com/questions/3331353/transitions-on-the-css-display-property */
/* https://www.youtube.com/watch?v=rXNfDfqtM3M&list=WL&index=19&t=2802s */

#selector {
  overflow: hidden;  /* Hide the element content, while height = 0 */
  height: 0;
  opacity: 0;
  transition: height 0ms 400ms, opacity 400ms 0ms;
}
#selector.visible {
  height: auto; opacity: 1;
  transition: height 0ms 0ms, opacity 600ms 0ms;
}



/* Slick slider helper */
/* Слайдер */
.slick-slider{}
/* Слайдер запущен */
.slick-slider.slick-initialized{}
/* Слайдер с точками */
.slick-slider.slick-dotted{}

/* Ограничивающая оболочка */
.slick-list {}
/* Лента слайдов */
.slick-track{}

/* Слайд */
.slick-slide{}
/* Слайд активный (показывается) */
.slick-slide.slick-active{}
/* Слайд основной */
.slick-slide.slick-current{}
/* Слайд по центру */
.slick-slide.slick-center{}
/* Клонированный слайд */
.slick-slide.slick-cloned{}

/* Стрелка */
.slick-arrow{}
/* Стрелка влево */
.slick-arrow.slick-prev{}
/* Стрелка вправо */
.slick-arrow.slick-next{}
/* Стрелка не активная */
.slick-arrow.slick-disabled{}

/* Точки (булиты) */
.slick-dots{}
.slick-dots li{}
/* Активная точка */
.slick-dots li.slick-active{}
/* Элемент точки */
.slick-dots li button{}




/* Adding additional spacing and margins helper classes */
https://stackoverflow.com/questions/32233489/does-bootstrap-have-builtin-padding-and-margin-classes
.m-0 { margin:0!important; }
.m-1 { margin:.25rem!important; }
.m-2 { margin:.5rem!important; }
.m-3 { margin:1rem!important; }
.m-4 { margin:1.5rem!important; }
.m-5 { margin:3rem!important; }

.mt-0 { margin-top:0!important; }
.mr-0 { margin-right:0!important; }
.mb-0 { margin-bottom:0!important; }
.ml-0 { margin-left:0!important; }
.mx-0 { margin-left:0 !important;margin-right:0 !important; }
.my-0 { margin-top:0!important;margin-bottom:0!important; }

.mt-1 { margin-top:.25rem!important; }
.mr-1 { margin-right:.25rem!important; }
.mb-1 { margin-bottom:.25rem!important; }
.ml-1 { margin-left:.25rem!important; }
.mx-1 { margin-left:.25rem!important;margin-right:.25rem!important; }
.my-1 { margin-top:.25rem!important;margin-bottom:.25rem!important; }

.mt-2 { margin-top:.5rem!important; }
.mr-2 { margin-right:.5rem!important; }
.mb-2 { margin-bottom:.5rem!important; }
.ml-2 { margin-left:.5rem!important; }
.mx-2 { margin-right:.5rem!important;margin-left:.5rem!important; }
.my-2 { margin-top:.5rem!important;margin-bottom:.5rem!important; }

.mt-3 { margin-top:1rem!important; }
.mr-3 { margin-right:1rem!important; }
.mb-3 { margin-bottom:1rem!important; }
.ml-3 { margin-left:1rem!important; }
.mx-3 { margin-right:1rem!important;margin-left:1rem!important; }
.my-3 { margin-bottom:1rem!important;margin-top:1rem!important; }

.mt-4 { margin-top:1.5rem!important; }
.mr-4 { margin-right:1.5rem!important; }
.mb-4 { margin-bottom:1.5rem!important; }
.ml-4 { margin-left:1.5rem!important; }
.mx-4 { margin-right:1.5rem!important;margin-left:1.5rem!important; }
.my-4 { margin-top:1.5rem!important;margin-bottom:1.5rem!important; }

.mt-5 { margin-top:3rem!important; }
.mr-5 { margin-right:3rem!important; }
.mb-5 { margin-bottom:3rem!important; }
.ml-5 { margin-left:3rem!important; }
.mx-5 { margin-right:3rem!important;margin-left:3rem!important; }
.my-5 { margin-top:3rem!important;margin-bottom:3rem!important; }

.mt-auto { margin-top:auto!important; }
.mr-auto { margin-right:auto!important; }
.mb-auto { margin-bottom:auto!important; }
.ml-auto { margin-left:auto!important; }
.mx-auto { margin-right:auto!important;margin-left:auto!important; }
.my-auto { margin-bottom:auto!important;margin-top:auto!important; }

.p-0 { padding:0!important; }
.p-1 { padding:.25rem!important; }
.p-2 { padding:.5rem!important; }
.p-3 { padding:1rem!important; }
.p-4 { padding:1.5rem!important; }
.p-5 { padding:3rem!important; }

.pt-0 { padding-top:0!important; }
.pr-0 { padding-right:0!important; }
.pb-0 { padding-bottom:0!important; }
.pl-0 { padding-left:0!important; }                             
.px-0 { padding-left:0!important;padding-right:0!important; }
.py-0 { padding-top:0!important;padding-bottom:0!important; }

.pt-1 { padding-top:.25rem!important; }         
.pr-1 { padding-right:.25rem!important; }                       
.pb-1 { padding-bottom:.25rem!important; }      
.pl-1 { padding-left:.25rem!important; }                            
.px-1 { padding-left:.25rem!important;padding-right:.25rem!important; }
.py-1 { padding-top:.25rem!important;padding-bottom:.25rem!important; }

.pt-2 { padding-top:.5rem!important; }                                              
.pr-2 { padding-right:.5rem!important; }                                
.pb-2 { padding-bottom:.5rem!important; }               
.pl-2 { padding-left:.5rem!important; }                                             
.px-2 { padding-right:.5rem!important;padding-left:.5rem!important; }
.py-2 { padding-top:.5rem!important;padding-bottom:.5rem!important; }

.pt-3 { padding-top:1rem!important; }                               
.pr-3 { padding-right:1rem!important; }             
.pb-3 { padding-bottom:1rem!important; }                
.pl-3 { padding-left:1rem!important; }                              
.py-3 { padding-bottom:1rem!important;padding-top:1rem!important; }
.px-3 { padding-right:1rem!important;padding-left:1rem!important; }

.pt-4 { padding-top:1.5rem!important; }                             
.pr-4 { padding-right:1.5rem!important; }               
.pb-4 { padding-bottom:1.5rem!important; }              
.pl-4 { padding-left:1.5rem!important; }                                
.px-4 { padding-right:1.5rem!important;padding-left:1.5rem!important; }
.py-4 { padding-top:1.5rem!important;padding-bottom:1.5rem!important; }

.pt-5 { padding-top:3rem!important; }   
.pr-5 { padding-right:3rem!important; } 
.pb-5 { padding-bottom:3rem!important; }
.pl-5 { padding-left:3rem!important; }
.px-5 { padding-right:3rem!important;padding-left:3rem!important; }
.py-5 { padding-top:3rem!important;padding-bottom:3rem!important; }


/* nice toggling, bs5 toggler */
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#main-menu" aria-controls="main-menu" aria-expanded="false" aria-label="Toggle navigation">
<!--                    <span class="navbar-toggler-icon"></span>-->
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                                        <!--    <span class="navbar-toggler-text">Menu</span> -->
                </button>

.navbar-toggler {
  float: none;
  border: 0;
  margin-right: 0;
  border-color: #ddd;
  color: #ff0844;

  &:focus {
    box-shadow: none;
  }

  .icon-bar {
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 1px;
    border: 1px solid;
    transition: .3s ease;
    position: relative;
    background-color: #888;
    margin-top: 4px;

    &+.icon-bar {
      margin-top: 4px;
    }
  }
}

.navbar-toggler {
	&[aria-expanded=false] {
		.icon-bar {
			&:nth-child(1),
			&:nth-child(2),
			&:nth-child(3) {
				top: 0;
				-webkit-transform-origin: left center;
				-moz-transform-origin: left center;
				-o-transform-origin: left center;
				transform-origin: left center
			}
		}
	}

	&[aria-expanded=true] {
		.icon-bar {
			&:nth-child(1) {
				-webkit-transform: rotate(45deg);
				-moz-transform: rotate(45deg);
				-o-transform: rotate(45deg);
				transform: rotate(45deg);
				top: 6px
			}

			&:nth-child(2) {
				width: 0;
				opacity: 0
			}

			&:nth-child(3) {
				-webkit-transform: rotate(-45deg);
				-moz-transform: rotate(-45deg);
				-o-transform: rotate(-45deg);
				transform: rotate(-45deg);
				top: -6px
			}
		}
	}
}

/* vertical centering */
.vertical-center {
  margin: 0;
  position: absolute;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

/* align center */
.center {
  height: 200px;
  position: relative;
  border: 3px solid green;
}

.center p {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}


/* commentaries, commentaries design, design comentarii, comments design */
/*--------------------------------------------------------------
# All necessary variables here
--------------------------------------------------------------*/

/* Typography
--------------------------------------------- */