/* ———————————————————————————————————————————————————————
   > website:       mrsginger.nl/
   > theme:         coding corner v1
   > page:          codingframe.css
   > designed by:   ladyginger
   > please do NOT remove this credit!

   > this design was handmade with lots of frustration, trial
     and errors, and it would be appreciated if you didn't
     steal the code!
   ——————————————————————————————————————————————————————— */

:root {
  --bg:                   #E1DBD6;
  --panel:                #F2EEE9;
  --panel-dark:           #C8C0BA;
  --berry:                #D8B6B8;
  --mauve:                #B48A93;
  --fern:                 #8E9A92;
  --fern-dark:            #66776F;
  --hazelnut:             #B9ADA3;
  --text:                 #625C5D;
  --text-light:           #E7E3E1;
  --dark:                 #555354;
  --vanilla:              #F2EEE9;
  --font-main:            "Open Sans", sans-serif;
  --font-title:           "Host Grotesk", sans-serif;
  --font-subtitle:        "Bebas Neue", sans-serif;
}

*, *::before, *::after {
  box-sizing:             border-box; }

html {
  scroll-behavior:        smooth; }

body {
  margin:                 0;
  padding:                0px;
  background:             transparent;
  color:                  var(--text);
  font-family:            var(--font-main);
  font-size:              10px;
  line-height:            1.7;
}

a {
  color:                  var(--mauve);
  text-decoration:        none;
  transition:             color .3s ease,
                          background .3s ease;
}

a:hover {
  color:                  var(--fern-dark);
}

/*-- SCROLLBAR --*/
::-webkit-scrollbar {
  width:                  12px;  }
::-webkit-scrollbar-track {
  background:             var(--bg);  }
::-webkit-scrollbar-thumb {
  border:                 3px solid var(--bg);
  border-radius:          20px;
  background:             var(--mauve);
}

/*-- MAIN FRAME --*/
.frame {
  width:                  100%;
  max-width:              590px;
  margin:                 0 auto;
  padding:                10px;
  background:             transparent;
  border-radius:          14px;
  box-shadow:             none;
}

.frame-header {
  margin-bottom:          45px;
  padding-bottom:         25px;
  border-bottom:          1px solid rgba(98, 92, 93, .18);
}

.frame-kicker {
  display:                block;
  margin-bottom:          5px;
  color:                  var(--mauve);
  font-family:            var(--font-subtitle);
  font-size:              14px;
  letter-spacing:         2px;
  text-transform:         uppercase;
}

.frame-header h1 {
  margin:                 0;
  color:                  var(--dark);
  font-family:            var(--font-title);
  font-size:              38px;
  font-weight:            800;
  line-height:            1.05;
  letter-spacing:         1px;
}

.frame-intro {
  max-width:              450px;
  margin:                 15px 0 0;
  color:                  #81797A;
  font-size:              10px;
  line-height:            18px;
}

/*-- SECTIONS --*/
.demo-section {
  margin-bottom:          50px;
}

.section-label {
  margin-bottom:          18px;
  padding-bottom:         7px;
  border-bottom:          2px solid var(--berry);
  color:                  var(--mauve);
  font-family:            var(--font-subtitle);
  font-size:              13px;
  letter-spacing:         1.5px;
  text-transform:         uppercase;
}

/*-- HEADINGS --*/
h1, h2, h3, h4, h5, h6 {
  color:                  var(--dark);
  font-family:            var(--font-title);
  line-height:            1.2;
}

h1 {
  margin:                 0 0 20px;
  font-size:              32px;
  font-weight:            800;
}

h2 {
  margin:                 30px 0 15px;
  color:                  var(--mauve);
  font-size:              27px;
  font-weight:            700;
}

h3 {
  margin:                 25px 0 10px;
  font-size:              21px;
  font-weight:            700;
}

h4 {
  margin:                 20px 0 8px;
  color:                  var(--mauve);
  font-size:              18px;
}

h5 {
  margin:                 15px 0 6px;
  font-size:              15px;
  text-transform:         uppercase;
  letter-spacing:         1px;
}

h6 {
  margin:                 15px 0 5px;
  color:                  var(--fern-dark);
  font-size:              12px;
  text-transform:         uppercase;
  letter-spacing:         1px;
}

/*-- PARAGRAPHS --*/
p {
  margin:                 0 0 15px; }

p:last-child {
  margin-bottom:          0; }

.text-muted {
  color:                  #91898A;  }

.text-center {
  text-align:             center;  }

/*-- TEXT FORMATTING --*/

strong, b {
  color:                  var(--dark);
  font-weight:            700;
}

em, i {
  color:                  var(--mauve);
}

u {
  text-decoration-color:  var(--mauve);
  text-decoration-thickness: 1px;
}

small {
  font-size:              8px;
  color:                  #91898A;
}

mark {
  padding:                2px 5px;
  border-radius:          3px;
  background:             var(--berry);
  color:                  var(--dark);
}

del {
  color:                  #91898A;
}

/*-- LINKS --*/
.text-link {
  border-bottom:          1px solid var(--mauve);
  color:                  var(--mauve);
}

.text-link:hover {
  border-color:           var(--fern-dark);
  color:                  var(--fern-dark);
}

.button-link {
  display:                inline-flex;
  align-items:            center;
  gap:                    7px;
  padding:                6px 11px;
  border-radius:          5px;
  background:             var(--mauve);
  color:                  var(--vanilla);
  font-size:              9px;
  letter-spacing:         .5px;
  text-transform:         uppercase;
}

.button-link:hover {
  background:             var(--fern-dark);
  color:                  var(--vanilla);
}

/*-- LISTS --*/
ul, ol {
  margin:                 10px 0 20px;
  padding-left:           25px;
}

li {
  margin-bottom:          5px;
  padding-left:           3px;
}

ul li::marker {
  color:                  var(--mauve);
}

ol li::marker {
  color:                  var(--fern-dark);
  font-family:            var(--font-title);
}

li ul, li ol {
  margin-top:             5px;
  margin-bottom:          5px;
}

/*-- BLOCKQUOTE --*/
blockquote {
  margin:                 20px 0;
  padding:                18px 20px;
  border-left:            4px solid var(--mauve);
  border-radius:          0 8px 8px 0;
  background:             linear-gradient(
                          90deg,
                          rgba(216, 182, 184, .35),
                          rgba(216, 182, 184, .08)    );
  color:                  #716A6B;
  font-size:              11px;
  font-style:             italic;
}

blockquote p {
  margin:                 0 0 8px;
}

blockquote cite {
  display:                block;
  color:                  var(--mauve);
  font-size:              8px;
  font-style:             normal;
  letter-spacing:         1px;
  text-transform:         uppercase;
}

/*-- DIVIDERS --*/
hr {
  height:                 1px;
  margin:                 25px 0;
  border:                 0;
  background:             rgba(98, 92, 93, .2);
}

.divider-fancy {
  width:                  100%;
  height:                 5px;
  margin:                 25px 0;
  border-radius:          10px;
  background:             linear-gradient(
                          90deg,
                          var(--mauve),
                          var(--berry),
                          var(--fern)     );
}

/*-- INLINE CODE --*/
code {
  padding:                3px 6px;
  border-radius:          4px;
  background:             var(--dark);
  color:                  var(--vanilla);
  font-family:            "Courier New", monospace;
  font-size:              9px;
}

/*-- CODE BLOCK --*/
pre {
  margin:                 20px 0;
  padding:                18px;
  overflow-x:             auto;
  border-radius:          8px;
  background:             var(--dark);
  color:                  var(--vanilla);
  box-shadow:             inset 0 0 0 1px rgba(242, 238, 233, .08);
}

pre code {
  padding:                0;
  background:             transparent;
  color:                  inherit;
  font-size:              9px;
  line-height:            17px;
}

/*-- CODE TEXTAREA --*/
.code-box {
  display:               block;
  width:                  100%;
  min-height:             180px;
  margin:                 15px 0;
  padding:                15px;
  resize:                 vertical;
  border:                 1px solid rgba(98, 92, 93, .18);
  border-radius:          8px;
  outline:                none;
  background:             var(--dark);
  color:                  var(--vanilla);
  font-family:            "Courier New", monospace;
  font-size:              9px;
  line-height:            17px;
}

.code-box:focus {
  border-color:           var(--mauve);
  box-shadow:             0 0 0 2px rgba(180, 138, 147, .2);
}

/*-- CODE GRID --*/
.code-grid {
  display:                grid;
  grid-template-columns:  repeat(2, minmax(0, 1fr));
  gap:                    15px;
  width:                  100%;
  margin:                 20px 0;
}

.code-grid-item {
  min-width:              0;
}

.code-grid-item h4 {
  margin:                 0 0 8px;
  color:                  var(--mauve);
  font-family:            var(--font-title);
  font-size:              15px;
  font-weight:            700;
}

.code-grid .code-box {
  width:                  100%;
  min-height:             180px;
  margin:                 0;
}

/*-- BUTTONS --*/
.button-row {
  display:                flex;
  flex-wrap:              wrap;
  gap:                    8px;
}

.demo-button {
  padding:                7px 12px;
  border-radius:          5px;
  background:             var(--berry);
  color:                  var(--dark);
  font-family:            var(--font-main);
  font-size:              9px;
  cursor:                 pointer;
  transition:             background .3s ease,
                          color .3s ease,
                          transform .3s ease;
}

.demo-button:hover {
  transform:              translateY(-2px);
  background:             var(--fern-dark);
  color:                  var(--vanilla);
}

.demo-button-mauve {
  background:             var(--mauve);
  color:                  var(--vanilla);
}

.demo-button-fern {
  background:             var(--fern);
  color:                  var(--vanilla);
}

/*-- TABLE --*/
table {
  width:                  100%;
  border-collapse:        collapse;
  margin:                 20px 0;
  font-size:              9px;
}

th, td {
  padding:                9px 10px;
  border-bottom:          1px solid rgba(98, 92, 93, .15);
  text-align:             left;
}

th {
  background:             var(--mauve);
  color:                  var(--vanilla);
  font-family:            var(--font-subtitle);
  font-size:              12px;
  font-weight:            normal;
  letter-spacing:         1px;
  text-transform:         uppercase;
}

td {
  background:             rgba(242, 238, 233, .5);
}

tbody tr:hover td {
  background:             rgba(216, 182, 184, .2);
}

/*-- CALLOUTS --*/
.callout {
  display:                flex;
  gap:                    12px;
  margin:                 15px 0;
  padding:                14px;
  border-radius:          8px;
  background:             rgba(216, 182, 184, .2);
}

.callout-icon {
  width:                  28px;
  height:                 28px;
  flex:                   0 0 28px;
  display:                flex;
  align-items:            center;
  justify-content:        center;
  border-radius:          7px;
  background:             var(--mauve);
  color:                  var(--vanilla);
}

.callout strong {
  display:                block;
  margin-bottom:          2px;
  color:                  var(--dark);
  font-family:            var(--font-title);
  font-size:              12px;
}

.callout p {
  font-size:              9px;
  line-height:            16px;
}

.callout-info {
  border-left:            3px solid var(--mauve);
}

.callout-note {
  border-left:            3px solid var(--fern);
}

.callout-note .callout-icon {
  background:             var(--fern);
}

.callout-warning {
  border-left:            3px solid var(--hazelnut);
}

.callout-warning .callout-icon {
  background:             var(--hazelnut);
  color:                  var(--dark);
}

/*-- IMAGES --*/
figure {
  margin:                 20px 0;
}

.demo-image {
  width:                  100%;
  min-height:             180px;
  display:                flex;
  align-items:            center;
  justify-content:        center;
  border-radius:          8px;
  background:             radial-gradient(
                          circle at 25% 35%,
                          rgba(216, 182, 184, .75),
                          transparent 30%     ),
                          radial-gradient(
                          circle at 75% 65%,
                          rgba(142, 154, 146, .5),
                          transparent 30%     ),
                          linear-gradient(
                          135deg,
                          var(--mauve),
                          var(--fern)         );
  color:                  var(--vanilla);
  font-family:            var(--font-subtitle);
  font-size:              18px;
  letter-spacing:         2px;
  text-transform:         uppercase;
}

figcaption {
  margin-top:             7px;
  color:                  #91898A;
  font-size:              8px;
  font-style:             italic;
  text-align:             center;
}

/*-- COLUMNS --*/
.demo-columns {
  display:                grid;
  grid-template-columns:  1fr 1fr;
  gap:                    15px;
}

.demo-column {
  padding:                18px;
  border-radius:          8px;
  background:             rgba(200, 192, 186, .35);
}

.demo-column h3 {
  margin-top:             0;
  color:                  var(--mauve);
  font-size:              17px;
}

.demo-column p {
  font-size:              9px;
  line-height:            17px;
}

/*-- SIMPLE BOX --*/
.simple-box {
  padding:                20px;
  border:                 1px solid rgba(180, 138, 147, .35);
  border-radius:          8px;
  background:             rgba(242, 238, 233, .6);
}

.simple-box h3 {
  margin-top:             0;
  color:                  var(--mauve);
  font-size:              18px;
}

/*-- META --*/
.meta {
  color:                  #91898A;
  font-family:            var(--font-subtitle);
  font-size:              11px;
  letter-spacing:         1px;
  text-transform:         uppercase;
}

.meta span {
  margin:                 0 5px;
  color:                  var(--mauve);
}

/*-- INDEX PAGE --*/
.landing-section {
  display:                grid;
  grid-template-columns:  1fr 1fr;
  min-height:             210px;
  margin-bottom:          25px;
  overflow:               hidden;
  border-radius:          10px;
  background:             rgba(242, 238, 233, .45);
}

.landing-text {
  display:                flex;
  flex-direction:         column;
  justify-content:        center;
  padding:                28px;
}

.landing-label {
  margin-bottom:          5px;
  color:                  var(--mauve);
  font-family:            var(--font-subtitle);
  font-size:              11px;
  letter-spacing:         1.5px;
  text-transform:         uppercase;
}

.landing-text h2 {
  margin:                 0 0 12px;
  color:                  var(--dark);
  font-family:            var(--font-title);
  font-size:              24px;
  font-weight:            700;
}

.landing-text p {
  margin:                 0 0 18px;
  font-size:              9px;
  line-height:            17px;
}

.landing-text .button-link {
  align-self:             flex-start;
}

.landing-image {
  min-height:             210px;
  overflow:               hidden;
  background:             var(--panel-dark);
}

.landing-image img {
  width:                  100%;
  height:                 100%;
  object-fit:             cover;
}

.landing-reverse {
  background:             rgba(216, 182, 184, .18);
}

/*-- THEME FILTERS --*/
.theme-filters {
  display:                flex;
  flex-wrap:              wrap;
  align-items:            center;
  gap:                    6px;
  margin:                 0 0 25px;
  padding:                10px;
  border-radius:          8px;
  background:             rgba(200, 192, 186, .25);
}

.filter-label {
  margin-right:           4px;
  color:                  var(--dark);
  font-family:            var(--font-subtitle);
  font-size:              11px;
  letter-spacing:         1px;
  text-transform:         uppercase;
}

.theme-filter {
  padding:                5px 9px;
  border:                 0;
  border-radius:          5px;
  background:             var(--panel-dark);
  color:                  var(--dark);
  font-family:            var(--font-main);
  font-size:              8px;
  letter-spacing:         .4px;
  text-transform:         uppercase;
  cursor:                 pointer;
  transition:             background .3s ease,
                          color .3s ease,
    transform             .3s ease;
}

.theme-filter:hover {
  transform:              translateY(-2px);
  background:             var(--fern);
  color:                  var(--vanilla);
}

.theme-filter.active {
  background:             var(--mauve);
  color:                  var(--vanilla);
}

.theme-list {
  display:                flex;
  flex-direction:         column;
  gap:                    25px;
}

.theme-card {
  display:                grid;
  grid-template-columns:  1fr 1fr;
  min-height:             240px;
  overflow:               hidden;
  border-radius:          10px;
  background:             rgba(242, 238, 233, .45);
  transition:             opacity .3s ease,
                          transform .3s ease;
}

.theme-card.hidden {
  display:                none;
}

.theme-card-text {
  display:                flex;
  flex-direction:         column;
  justify-content:        center;
  padding:                25px;
}

.theme-card-text .landing-label {
  margin-bottom:          5px;
}

.theme-card-text h2 {
  margin:                 0 0 12px;
  color:                  var(--dark);
  font-family:            var(--font-title);
  font-size:              24px;
  font-weight:            700;
}

.theme-description {
  margin:                 0 0 15px;
  font-size:              9px;
  line-height:            17px;
}

.theme-info {
  margin-bottom:          17px;
}

.theme-info-row {
  display:                flex;
  align-items:            flex-start;
  gap:                    8px;
  margin-bottom:          7px;
  font-size:              8px;
  line-height:            15px;
}

.theme-info-row:last-child {
  margin-bottom:          0;
}

.theme-info-row > strong {
  flex:                   0 0 55px;
  color:                  var(--mauve);
  font-family:            var(--font-subtitle);
  font-size:              10px;
  font-weight:            normal;
  letter-spacing:         .8px;
  text-transform:         uppercase;
}

.theme-tags {
  display:                flex;
  flex-wrap:              wrap;
  gap:                    4px;
}

.theme-tags span {
  padding:                2px 5px;
  border-radius:          3px;
  background:             var(--berry);
  color:                  var(--dark);
  font-size:              7px;
  letter-spacing:         .3px;
  text-transform:         uppercase;
}

.theme-mobile {
  font-size:              8px;
}

.theme-mobile i {
  margin-right:           3px;
}

.theme-mobile.yes {
  color:                  var(--fern-dark);
}

.theme-mobile.no {
  color:                  #91898A;
}

.theme-buttons {
  display:                flex;
  flex-wrap:              wrap;
  gap:                    6px;
}

.theme-buttons .button-link {
  margin:                 0;
}

.button-secondary {
  background:             var(--fern);
}

.button-secondary:hover {
  background:             var(--fern-dark);
}

.theme-card-image {
  min-height:             240px;
  overflow:               hidden;
  background:             var(--panel-dark);
}

.theme-card-image img {
  width:                  100%;
  height:                 100%;
  object-fit:             cover;
}

.theme-reverse {
  background:             rgba(216, 182, 184, .18);
}

.theme-no-results {
  display:                none;
  margin-top:             25px;
  padding:                30px;
  border-radius:          8px;
  background:             rgba(242, 238, 233, .45);
  text-align:             center;
}

.theme-no-results.show {
  display:                block;
}

.theme-no-results span {
  display:                block;
  margin-bottom:          8px;
  color:                  var(--mauve);
  font-family:            var(--font-title);
  font-size:              18px;
  font-weight:            700;
}

.theme-no-results p {
  margin:                 0;
  color:                  #91898A;
  font-size:              9px;
}

/*-- THEME TOS --*/
.theme-tos {
  margin:                 0 0 25px;
  padding:                15px;
  border-radius:          8px;
  background:             rgba(242, 238, 233, .55);
}

.tos-intro {
  display:                flex;
  align-items:            center;
  gap:                    10px;
  margin-bottom:          15px;
  padding-bottom:         12px;
  border-bottom:          1px solid rgba(98, 92, 93, .15);
}

.tos-intro > i {
  flex:                   0 0 auto;
  color:                  var(--mauve);
  font-size:              14px;
}

.tos-intro p {
  margin:                 0;
  color:                  var(--text);
  font-size:              10px;
  line-height:            15px;
}

.tos-intro strong {
  color:                  var(--mauve);
}

.tos-grid {
  display:                grid;
  grid-template-columns:  1fr 1fr;
  gap:                    15px;
}

.tos-column {
  padding:                10px 12px;
  border-radius:          6px;
}

.tos-do {
  background:             rgba(142, 154, 146, .12);
  border-left:            3px solid var(--fern);
}

.tos-dont {
  background:             rgba(216, 182, 184, .14);
  border-left:            3px solid var(--mauve);
}

.tos-column h3 {
  display:                flex;
  align-items:            center;
  gap:                    6px;
  margin:                 0 0 8px;
  color:                  var(--dark);
  font-family:            var(--font-subtitle);
  font-size:              16px;
  font-weight:            normal;
  letter-spacing:         1px;
  text-transform:         uppercase;
}

.tos-do h3 i {
  color:                  var(--fern-dark);
}

.tos-dont h3 i {
  color:                  var(--mauve);
}

.tos-column ul {
  margin:                 0;
  padding:                0;
  list-style:             none;
}

.tos-column li {
  display:                flex;
  align-items:            flex-start;
  gap:                    7px;
  margin:                 0 0 5px;
  padding:                0;
  color:                  var(--text);
  font-size:              10px;
  line-height:            15px;
}

.tos-column li:last-child {
  margin-bottom:          0;
}

.tos-column li i {
  flex:                   0 0 11px;
  margin-top:             2px;
  font-size:              8px;
  text-align:             center;
}

.tos-do li i {
  color:                  var(--fern-dark);
}

.tos-dont li i {
  color:                  var(--mauve);
}

/*-- CODE PREVIEW --*/
.code-preview {
  width:                  50%;
  min-height:             360px;
  border:                 1px solid var(--border-color);
  background:             #fff;
  overflow:               hidden;
  display:                flex;
  flex-direction:         column;
}

.code-preview-header {
  height:                 32px;
  padding:                0 12px;
  display:                flex;
  align-items:            center;
  justify-content:        space-between;
  background:             var(--accent-color);
  color:                  #fff;
  font-family:            "Host Grotesk", sans-serif;
  font-size:              10px;
  font-weight:            600;
  text-transform:         uppercase;
  letter-spacing:         1px;
}

.code-preview-dots {
  display:                flex;
  gap:                    4px;
}

.code-preview-dots i {
  width:                  6px;
  height:                 6px;
  border-radius:          50%;
  background:             rgba(255,255,255,0.7);
}

.code-preview iframe {
  width:                  100%;
  height:                 100%;
  min-height:             328px;
  border:                 0;
  display:                block;
  background:             #fff;
}

/*-- FOOTER --*/
.frame-footer {
  margin-top:             50px;
  text-align:             center;
}

.frame-footer .divider-fancy {
  margin-bottom:          15px;
}

.frame-footer p {
  color:                  #91898A;
  font-family:            var(--font-subtitle);
  font-size:              10px;
  letter-spacing:         1px;
  text-transform:         uppercase;
}