goodbye old grid theme

<p>Yep i have gone back to bootstrap 5 with a dark mode theme.&nbsp;</p>
<p>I think its neater, and i liked my old theme, but it had some issues, and no doubt this bootstrap one will also have issues. But yeah i would prefer to be writing code than fixing css and js issues.&nbsp;</p>
<p>I actually found myself just duplicating items from bootstrap, and then id check its components and they would actually look nicer than mine, eh just go with the flow.&nbsp;</p>
<p>This bootstrap is still quite customised. I have not checked the light mode on it actually (i probably should do that)...</p>
<p>Page load time is about the same with this vs the old theme, you can still see the old code here...</p>
<p><img src="https://i.imgur.com/CVZA5VM.png" /></p>
<h2><strong>Old Grid CSS</strong></h2>
<p>Actually not that old...&nbsp;</p>
<h4>CSS</h4>
<pre><code class="css hljs">
/ Basic Reset /
:root {
--white: #FFF;
--lighter-dark-bg: #2e3c50;
--dark-bg: #1f2937;
--dark-mode-1: #1f2937;
--dark-mode-2: #111827;
--dark-mode-3: #EFEFEF;
--dark-mode-4: #8ca3af;
--dark-mode-5: #4a5568;
--dark-mode-link: #EFEFEF;
--light-mode-1: #e7e9ea;
--light-mode-2: #f3f3f3;
--light-mode-3: #ffffff;
--light-mode-text: #4c4c4c;
--light-mode-link: #5a5a5a;
--font-family-sans-serif: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
--font-family-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
--tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
--bg-gray: #4a5568;
--bg-gray-active: rgb(45,55,72);
--button-primary-bg: #2b6cb0;
}
,body,html
{
font-family: var(--font-family-sans-serif), sans-serif;
box-sizing: border-box;
/ transition: all 0.2s; /
/ scroll-behavior: smooth; /
margin:0;
padding:0;
}
pre,code
{
font-family: var(--font-family-monospace), monospace;
}
pre {
margin-bottom:10px;
}
html {
overflow-x:hidden;
}
ul,ol {
margin-left: 17px;
margin-bottom:10px;
}
p {
margin-bottom:10px;
line-height:1.5;
}
img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
display: block;
vertical-align: middle;
}
h1 {
font-size: 28px;
line-height: 1.3em;
}
h2 {
font-size: 26px;
}
h3 {
font-size: 22px;
}
h4 {
font-size: 18px;
}
h5 {
font-size: 1em;
}
section {
display:block;
}
img {
max-width:100%;
}
button:focus,
.btn:focus
{
outline: 1px dotted;
outline: 5px auto -webkit-focus-ring-color;
}
.focus\:shadow-outline:focus {
box-shadow: 0 0 0 3px rgba(66,153,225,.5);
}
a {
color: #007bff;
text-decoration: none;
background-color: transparent;
}

.shadow, .shadow-sm {
--tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
/ Basic Reset /

/ Wrap and Grid /
.wrap
{
max-width:1200px;
margin:0 auto;
width:100%;
}
.no-wrap {
width:100%;
max-width:100%;
}
.grid-x,
.row
{
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-column-gap: 10px;
grid-row-gap: 10px;
}

.grid-x-no-gap,
.row-no-gap
{
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
}
/ Wrap and Grid /

/ Borders /
.border-radius-5 { border-radius: 5px; }
.border-radius-10 { border-radius: 10px; }
.border-radius-15 { border-radius: 15px; }
.border-radius-20 { border-radius: 20px; }
/ Borders /

/ Buttons /
a.btn {
text-decoration: none;
}
.btn {
display: inline-block;
font-weight: 400;
color: #212529;
text-align: center;
vertical-align: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-color: transparent;
border: 1px solid transparent;
padding: 7px 14px;
font-size: 16px;
line-height: 1.5;
border-radius: .25rem;
transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.btn-primary:hover {
background-color: #2262a5;
border-color: #2262a5;
box-shadow: 0px 2px 5px rgb(9 49 90 / 80%);
}
.dark-mode .btn-primary:hover {
box-shadow: 0px 2px 5px rgb(9 49 90 / 80%);
}
.light-mode .btn-primary:hover {
box-shadow: 0px 2px 5px rgb(9 49 90 / 60%);
}
.btn-primary {
color: #fff;
background-color: #2b6cb0;
border-color: #2b6cb0;
text-shadow: 0px 1px 3px rgb(9 57 107 / 89%);
}
.btn-info {
color: #fff;
background-color: #38b2ac;
border-color: #38b2ac;
text-shadow: 0px 1px 2px rgb(10 82 79 / 72%);
}
.light-mode .btn-info {
color: #fff;
background-color: #38b2ac;
border-color: #38b2ac;
}
.btn-danger:hover,
.btn-warning:hover
{
color: #fff;
background-color: #ad3d3d;
border-color: #ad3d3d;
text-shadow: 0px 1px 2px rgb(10 82 79 / 72%);
}
.light-mode .btn-danger,
.light-mode .btn-warning
{
color: #fff;
}
.btn-danger,
.btn-warning
{
color: #fff;
background-color: #ce4d4d !important;
border-color: #ce4d4d;
text-shadow: 0px 1px 2px rgb(10 82 79 / 72%);
}
.btn-outline-info {
color: #2b6cb0;
border-color: #2b6cb0;
}
.btn-dark:hover,
.btn-dark:focus
{
background-color: var(--bg-gray-active);
border-color: var(--bg-gray-active);
}
.btn-dark {
color: #fff;
background-color: var(--bg-gray);
border-color: var(--bg-gray);
cursor:pointer;
}
.dark-mode .btn-dark {
color: #fff;
background-color: #111827;
border-color: #111827;
}
.light-mode .btn-dark {
color: #333;
background-color: #ffffff;
border-color: #ffffff;
}
.light-mode .btn-dark:hover,
.light-mode .btn-dark:active
{
color: #222;
background-color: #EEEEEE;
border-color: #EEEEEE;
}
.btn-block {
display: block;
width: 100%;
}
/ Buttons /

/ Margin Padding - 0px to 50px in 5px /
.m0{margin:0px}.mr0{margin-right:0px}.ml0{margin-left:0px}.mt0{margin-top:0px}.mb0{margin-bottom:0px}.p0{padding:0px}.pr0{padding-right:0px}.pl0{padding-left:0px}.pt0{padding-top:0px}.pb0{padding-bottom:0px}.m5{margin:5px}.mr5{margin-right:5px}.ml5{margin-left:5px}.mt5{margin-top:5px}.mb5{margin-bottom:5px}.p5{padding:5px}.pr5{padding-right:5px}.pl5{padding-left:5px}.pt5{padding-top:5px}.pb5{padding-bottom:5px}.m10{margin:10px}.mr10{margin-right:10px}.ml10{margin-left:10px}.mt10{margin-top:10px}.mb10{margin-bottom:10px}.p10{padding:10px}.pr10{padding-right:10px}.pl10{padding-left:10px}.pt10{padding-top:10px}.pb10{padding-bottom:10px}.m15{margin:15px}.mr15{margin-right:15px}.ml15{margin-left:15px}.mt15{margin-top:15px}.mb15{margin-bottom:15px}.p15{padding:15px}.pr15{padding-right:15px}.pl15{padding-left:15px}.pt15{padding-top:15px}.pb15{padding-bottom:15px}.m20{margin:20px}.mr20{margin-right:20px}.ml20{margin-left:20px}.mt20{margin-top:20px}.mb20{margin-bottom:20px}.p20{padding:20px}.pr20{padding-right:20px}.pl20{padding-left:20px}.pt20{padding-top:20px}.pb20{padding-bottom:20px}.m25{margin:25px}.mr25{margin-right:25px}.ml25{margin-left:25px}.mt25{margin-top:25px}.mb25{margin-bottom:25px}.p25{padding:25px}.pr25{padding-right:25px}.pl25{padding-left:25px}.pt25{padding-top:25px}.pb25{padding-bottom:25px}.m30{margin:30px}.mr30{margin-right:30px}.ml30{margin-left:30px}.mt30{margin-top:30px}.mb30{margin-bottom:30px}.p30{padding:30px}.pr30{padding-right:30px}.pl30{padding-left:30px}.pt30{padding-top:30px}.pb30{padding-bottom:30px}.m35{margin:35px}.mr35{margin-right:35px}.ml35{margin-left:35px}.mt35{margin-top:35px}.mb35{margin-bottom:35px}.p35{padding:35px}.pr35{padding-right:35px}.pl35{padding-left:35px}.pt35{padding-top:35px}.pb35{padding-bottom:35px}.m40{margin:40px}.mr40{margin-right:40px}.ml40{margin-left:40px}.mt40{margin-top:40px}.mb40{margin-bottom:40px}.p40{padding:40px}.pr40{padding-right:40px}.pl40{padding-left:40px}.pt40{padding-top:40px}.pb40{padding-bottom:40px}.m45{margin:45px}.mr45{margin-right:45px}.ml45{margin-left:45px}.mt45{margin-top:45px}.mb45{margin-bottom:45px}.p45{padding:45px}.pr45{padding-right:45px}.pl45{padding-left:45px}.pt45{padding-top:45px}.pb45{padding-bottom:45px}.m50{margin:50px}.mr50{margin-right:50px}.ml50{margin-left:50px}.mt50{margin-top:50px}.mb50{margin-bottom:50px}.p50{padding:50px}.pr50{padding-right:50px}.pl50{padding-left:50px}.pt50{padding-top:50px}.pb50{padding-bottom:50px}

/ 60 - 100 in 10px /
.m60{margin:60px}.mr60{margin-right:60px}.ml60{margin-left:60px}.mt60{margin-top:60px}.mb60{margin-bottom:60px}.p60{padding:60px}.pr60{padding-right:60px}.pl60{padding-left:60px}.pt60{padding-top:60px}.pb60{padding-bottom:60px}.m70{margin:70px}.mr70{margin-right:70px}.ml70{margin-left:70px}.mt70{margin-top:70px}.mb70{margin-bottom:70px}.p70{padding:70px}.pr70{padding-right:70px}.pl70{padding-left:70px}.pt70{padding-top:70px}.pb70{padding-bottom:70px}.m80{margin:80px}.mr80{margin-right:80px}.ml80{margin-left:80px}.mt80{margin-top:80px}.mb80{margin-bottom:80px}.p80{padding:80px}.pr80{padding-right:80px}.pl80{padding-left:80px}.pt80{padding-top:80px}.pb80{padding-bottom:80px}.m90{margin:90px}.mr90{margin-right:90px}.ml90{margin-left:90px}.mt90{margin-top:90px}.mb90{margin-bottom:90px}.p90{padding:90px}.pr90{padding-right:90px}.pl90{padding-left:90px}.pt90{padding-top:90px}.pb90{padding-bottom:90px}.m100{margin:100px}.mr100{margin-right:100px}.ml100{margin-left:100px}.mt100{margin-top:100px}.mb100{margin-bottom:100px}.p100{padding:100px}.pr100{padding-right:100px}.pl100{padding-left:100px}.pt100{padding-top:100px}.pb100{padding-bottom:100px}
/ 60 - 100 in 10px /

/ Margin Padding /

/ grid-padding-x ??? /

/ x-large /
@media screen and (max-width:1600px) {}

/ large
@media screen and (max-width:1200px) {
.cell {
grid-column: span 6;
}
}
/

/ dark-mode /
.dark-mode {
background:var(--lighter-dark-bg);
color:#FFF;
}
.dark-mode a {
color:#FFF;
}
.dark-mode .bg-dark {
color:var(--dark-mode-3);
background:var(--dark-bg);
}

.light-mode .bg-dark {
color:var(--light-mode-text);
background:var(--light-mode-2);
}
.light-mode a {
color:var(--light-mode-link);
}
.light-mode .btn.btn-primary {
color:var(--light-mode-2);
}
/ light-mode /

/ Elements /
.card,
.form-group {
overflow:hidden;
border-radius: 5px;
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.light-mode .card {
color:var(--light-mode-text);
background:var(--light-mode-3);
}
.dark-mode .card {
background:var(--dark-bg);
}

.card-body, .form-group {
padding: 15px;
line-height: 1.5;
overflow: hidden;
}
.card-body .list-image {
max-width:200px;
max-height:200px;
}
.form-group {
margin-bottom:10px;
}
.dark-mode .form-group {
background: var(--dark-bg);
}
.light-mode .form-group {
background: var(--light-mode-3);
}
.form-group label {
display:block;
margin-bottom:10px;
}
.dark-mode .form-group .text-muted {
color:#a9a9a9;
}
.light-mode .form-group .text-muted {
color:#737373;
}
.form-control {
display: block;
width: 100%;
height: calc(1.5em + .75rem + 2px);
padding: .375rem .75rem;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #495057;
background-color: #fff;
background-clip: padding-box;
border: 0px solid #ced4da;
border-radius: .25rem;
transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.form-text {
display: block;
margin-top: .25rem;
}
input {
box-sizing: border-box;
padding: 5px 5px;
font-size: 16px;
border:0px;
border-radius: 5px;
/ width:100%; /
}
.alert {
position: relative;
padding: .75rem 1.25rem;
margin-bottom: 1rem;
border: 1px solid transparent;
border-radius: .25rem;
}
.alert-primary {
color: #004085;
background-color: #cce5ff;
border-color: #b8daff;
}
.dark-mode .alert-primary a.btn.btn-primary {
color: #FFF;
}
.dark-mode .alert-primary a {
color: #004085;
}
.light-mode .alert-primary a {
color: #004085;
}
.light-mode .alert-primary a.btn.btn-primary {
color: #FFF;
}
.dark-mode .alert-primary {
color: #004085;
background-color: #cce5ff;
border-color: #b8daff;
}
.alert-info {
color: #07423f;
background-color: #38b2ac;
border-color: #259a94;
}
.alert-secondary {
color: #07423f;
background-color: #38b2ac;
border-color: #259a94;
}
.alert-success {
color: #FFF;
background-color: #2f855a;
border-color: #2f855a;
}

.dark-mode textarea {
background: var(--lighter-dark-bg);
color: #FFF;
min-height:100px;
}
.light-mode textarea {
color: var(--light-mode-text);
background: var(--light-mode-1);
min-height:100px;
}
/ Elements /

.fixed-top {
width:100%;
position:fixed;
top:0px;
left:0px;
}
/
@media screen and (max-width:1200px) {
.fixed-top {
position:initial;
}
body {
padding-top:initial;
}
}
/

/ Dropdown /
.dropdown, .dropleft, .dropright, .dropup {
position: relative;
}
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
display: none;
float: left;
min-width: 10rem;
padding: .5rem 0;
margin: .125rem 0 0;
font-size: 1rem;
color: #212529;
text-align: left;
list-style: none;
background-color: #fff;
background-clip: padding-box;
border: 1px solid rgba(0,0,0,.15);
border-radius: .25rem;
}
.dark-mode .dropdown-menu {
color: #FFF;
background-color: var(--dark-bg);
}
.dropdown-item {
display: block;
width: 100%;
padding: 5px 15px;
clear: both;
font-weight: 400;
color: #212529;
text-align: inherit;
white-space: nowrap;
background-color: transparent;
border: 0;
}
.nav-link {
display: block;
padding: 0.5rem 1rem;
}
.nav-scroller .nav-link {
display: block;
padding: 2px 5px 3px 5px;
border-radius: 20px;
margin-right: 3px;
margin-bottom: 2px;
margin-top: 2px;
font-size: 14px;
}
.nav-scroller {
padding:1px 0;
position:relative;
}
.light-mode .nav-scroller {
background: var(--light-mode-3);
}
.dark-mode .nav-scroller {
background: var(--dark-mode-2);
}
.dark-mode .nav-scroller .nav-link:hover {
background: var(--dark-mode-5);
}
.dark-mode .nav-scroller .nav-link {
background:var(--dark-bg);
}
.light-mode .nav-scroller .nav-link {
background: var(--light-mode-2);
}
.light-mode .nav-scroller .nav-link:hover {
background: var(--button-primary-bg);
color:#FFF;
}
.navbar-expand-md .navbar-nav .nav-link {
padding-right: .5rem;
padding-left: .5rem;
}

/ .navbar-nav .dropdown-menu {
position: static;
float: none;
} /
.navbar-collapse {
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
-ms-flex-positive: 1;
flex-grow: 1;
-ms-flex-align: center;
align-items: center;
}
.nav {
display: flex;
flex-wrap: wrap;
padding-left: 0;
margin-bottom: 0;
list-style: none;
}
.navbar-nav .nav-link:active,
.navbar-nav .nav-link:focus,
.navbar-nav .nav-link:hover
{
opacity: 1;
}
.navbar-nav .nav-link {
display: block;
padding: 10px 8px;
padding-right: 12px;
padding-left: 10px;
opacity: 0.9;
}
.dropdown-toggle::after {
display: inline-block;
margin-left: .255em;
vertical-align: .255em;
content: "";
border-top: .3em solid;
border-right: .3em solid transparent;
border-bottom: 0;
border-left: .3em solid transparent;
}
.nav-link.dropdown-toggle::after {
display: inline-block;
margin-left: .255em;
vertical-align: .255em;
content: "";
border-top: .3em solid;
border-right: .3em solid transparent;
border-bottom: 0;
border-left: .3em solid transparent;
position: absolute;
right: 0px;
top: 19px;
}
.dropdown-item:focus,
.dropdown-item:hover {
color: #16181b;
text-decoration: none;
background-color: #f8f9fa;
}
.dark-mode .dropdown-item:focus,
.dark-mode .dropdown-item:hover {
text-decoration: none;
color: var(--dark-mode-3);
background: var(--dark-mode-2);
}
.navbar-toggler {
box-sizing: border-box;
margin: 0;
font-family: inherit;
overflow: visible;
text-transform: none;
padding: .25rem .75rem;
font-size: 1.25rem;
line-height: 1;
background-color: transparent;
border: 1px solid transparent;
border-radius: .25rem;
cursor: pointer;
color: rgba(255,255,255,.5);
border-color: rgba(255,255,255,.1);
}
.navbar-toggler {
display:none;
position: absolute;
top: 5px;
right: 5px;
}
.dark-mode .navbar-toggler {
color: rgba(255,255,255,.5);
border-color: rgba(255,255,255,.1);
}
.light-mode .navbar-toggler {
color: rgba(0,0,0,.5);
border-color: rgba(0,0,0,.1);
}

@media(max-width:800px) {
.navbar-nav {
display: none;
position: absolute;
top: 50px;
width: 100%;
left: 0px;
margin-left: 0px;
}
.light-mode .navbar-nav {
color: var(--light-mode-text);
background: var(--light-mode-2);
}
.dark-mode .navbar-nav {
color: var(--dark-mode-3);
background: var(--dark-bg);
}
.navbar-toggler {
display:block;
}
}
/ Dropdown /

/ Navbar Brand /
.navbar-brand {
display: inline-block;
font-size: 26px;
margin-top: 3px;
margin-left: 5px;
font-weight: bold;
}
/ Navbar Brand /

/ List Group /
.list-group {
border-radius: 5px;
border: 1px solid rgba(255,255,255,0.1);
}
.dark-mode .list-group {
border: 1px solid rgba(255,255,255,0.1);
}
.light-mode .list-group {
border: 1px solid rgba(0,0,0,0.1);
}
.dark-mode .list-group a:hover {
background-color:#4a5568;
}
.dark-mode .core-link a:hover {
background-color:#4a5568;
}
.light-mode .list-group a:hover {
background-color:#f8f9fa;
}
.light-mode .core-link a:hover {
background-color:#f8f9fa;
}
.core-link a {
border-radius: 3px;
}
.list-group a,.core-link a {
display: block;
padding: 12px 25px 12px 10px;;
/ text-transform:capitalize; /
background-image: url("data:image/svg+xml,%3Csvg width='20px' height='16px' viewBox='0 0 16 16' class='bi bi-chevron-right' fill='currentColor' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position-x: right;
background-position-y: center;
position: relative;
}
.dark-mode .list-group a {
border-bottom: 1px solid rgba(255,255,255,0.1);
}
.light-mode .list-group a {
border-bottom: 1px solid rgba(0,0,0,0.1);
}
.list-group a:last-of-type {
border-bottom: 0px;
}
/ List Group /

.page-content .col-lg-8 .card-body {
/ padding:20px; /
}

.page-inner h2,
.page-inner h3,
.page-inner h4,
.page-inner h5,
.page-inner h6
{
/ margin-bottom:10px; /
}
.category {
position: relative;
top: 10px;
left: 10px;
}
.page-inner .category {
position: relative;
top: 0px;
left: 0px;
}
.list-item-meta .category .badge {
position:relative;
top: 0;
}
.list-item-meta .category {
position: relative;
top: 0px;
left: 0px;
text-align: right;
}

.secondnavtoggle:hover {
transform: rotate(180deg);
transition: all 0.3s;
}
.secondnavtoggle {
transition: all 0.3s;
padding: 3px 3px 0px 3px;
border: 1px solid;
border-radius: 3px;
height: 23px;
width: 24px;
text-align: center;
display: inline-block;
margin-top: 3px;
position: absolute;
right: 5px;
}
.light-mode .secondnavtoggle {
color: #656565;
border-color: #c9c9ca;
}
.light-mode .secondnavtoggle:hover {
background: var(--light-mode-2);
}
.dark-mode .secondnavtoggle:hover {
background:#2e3c50;
}
.dark-mode .secondnavtoggle {
border-color: #2e3c50;
}
/ Pagination /
ul.pagination li a {
padding:5px 12px;
border-radius:3px;
text-align:center;
margin-right:3px;
margin-bottom:3px;
float:left;
}
ul.pagination li {
margin:0px;
padding:0px;
}
ul.pagination {
margin:0px;
padding:0px;
list-style:none;
}
.dark-mode ul.pagination li a:hover,
.dark-mode ul.pagination li a.active
{
background:var(--dark-mode-2);
}
.dark-mode ul.pagination li a {
background:#1f2937;
}
.light-mode ul.pagination li a:hover,
.light-mode ul.pagination li a.active
{
background:#FFF;
}
.light-mode ul.pagination li a {
background:#f3f3f3;
}
/ Pagination */

.number-inline {
display: inline-block;
padding: 3px 10px;
font-size: 75%;
font-weight: 700;
line-height: 1;
border: 2px solid;
border-radius: 30px;
}

.dark-mode .number-inline {
color: #fff;
background-color: #2e3c50;
border: 2px solid;
border-color: rgb(17 24 39);
}
.light-mode .number-inline {
color: #fff;
background-color: #38b2ac;
box-shadow: 0px 1px 2px rgba(0,0,0,0.2);
text-shadow: 0px 1px 2px rgba(0,0,0,0.2);
}

.table td {
position:relative;
}
.page-inner table td {
padding:10px;
}

</code></pre>