/* -------------------------------- 
Memeke Design System
-------------------------------- */
:root {
  --font-primary: Verdana;
  --font-secondary: serif;
  /* setting base values */
  --text-base-size: 1em;
  --text-scale-ratio: 1.2;
  /* type scale */
  --text-xs: calc(1em / (var(--text-scale-ratio) * var(--text-scale-ratio)));
  --text-sm: calc(1em / var(--text-scale-ratio));
  --text-md: calc(1em * var(--text-scale-ratio));
  --text-lg: calc(1em * var(--text-scale-ratio) * var(--text-scale-ratio));
  --text-xl: calc(
    1em * var(--text-scale-ratio) * var(--text-scale-ratio) *
      var(--text-scale-ratio)
  );
  --text-xxl: calc(
    1em * var(--text-scale-ratio) * var(--text-scale-ratio) *
      var(--text-scale-ratio) * var(--text-scale-ratio)
  );
  --text-xxxl: calc(
    1em * var(--text-scale-ratio) * var(--text-scale-ratio) *
      var(--text-scale-ratio) * var(--text-scale-ratio) *
      var(--text-scale-ratio)
  );
  /* line-height */
  --heading-line-height: 1.2;
  --body-line-height: 1.4;
  /* spacing values */
  --space-unit: 1em;
  --space-xxs: calc(0.25 * var(--space-unit));
  --space-xs: calc(0.5 * var(--space-unit));
  --space-sm: calc(0.75 * var(--space-unit));
  --space-md: calc(1.25 * var(--space-unit));
  --space-lg: calc(2 * var(--space-unit));
  --space-xl: calc(3.25 * var(--space-unit));
  --space-xxl: calc(5.25 * var(--space-unit));
  /* Color Values */
  /* main colors */
  --color-primary: #4d84f4;
  --color-primary-light: #6896f6;
  --color-primary-dark: #4170cf;
  --color-primary-bg: rgba(77, 132, 244, 0.8);
  --color-secondary: #4f8365;
  --color-accent: #f5414f;
  --color-accent-light: #f75e69;
  --color-accent-dark: #dd3b47;
  --color-accent-bg: rgba(245, 65, 79, 0.8);
  --black: #1d1d21;
  --gray-10: #2e2e31;
  --gray-6: #7b7a7d;
  --gray-4: #a5a5a6;
  --gray-3: #bbbbbc;
  --gray-2: #d1d0d2;
  --gray-1: #e8e7e8;
  --white: white;
  --white-stripe: #f6f8fa;
  /* feedback */
  --color-success: #88c459;
  --color-error: #f5414f;
  --color-warning: #ffd137;
  /* typography */
  --color-text: var(--gray-10);
  --color-text-heading: var(--black);
  --color-text-subtle: var(--gray-6);
  --color-link: var(--color-primary);
  --color-link-visited: var(--color-primary-dark);
  --color-mark: var(--color-accent-bg);
  --color-blockquote-border: var(--gray-2);
  /* border */
  --color-border: var(--gray-2);
  /* body */
  --color-body: var(--white);
  --backcolor-body: var(--white-stripe);
  /* forms */
  --form-element-border: var(--color-border);
  --form-element-border-focus: var(--color-primary);
  --form-element-border-error: var(--color-error);
  --form-element-bg: var(--white);
  --form-text-placeholder: var(--gray-4);
  /* buttons */
  --btn-primary-bg: var(--color-primary);
  --btn-primary-hover: var(--color-primary-light);
  --btn-primary-active: var(--color-primary-dark);
  --btn-primary-label: var(--white);
  --btn-secondary-bg: var(--gray-1);
  --btn-secondary-active: var(--gray-2);
  --btn-secondary-label: var(--gray-10);
  --btn-accent-bg: var(--color-accent);
  --btn-accent-hover: var(--color-accent-light);
  --btn-accent-active: var(--color-accent-dark);
  --btn-accent-label: var(--white);
  --btn-disabled-bg: var(--gray-2);
  --btn-disabled-label: var(--gray-10);
  /* buttons--font-sizes */
  --btn-font-size: 1em;
  --radius: 5px;
  --btn-sm: calc(var(--btn-font-size) - 0.2em);
  --btn-md: calc(var(--btn-font-size) + 0.2em);
  --btn-lg: calc(var(--btn-font-size) + 0.4em);
  --btn-radius: var(--radius);
  /* icons */
  /* icons--colors */
  --color-icon-primary: var(--gray-4);
  --color-icon-secondary: inherit;
  /* icons--sizes */
  --icon-xs: 16px;
  --icon-sm: 24px;
  --icon-md: 32px;
  --icon-lg: 48px;
  --icon-xl: 64px; }

/* -------------------------------- 
Memeke Dark Theme
-------------------------------- */
.theme--dark {
  color: var(--gray-1); }
  .theme--dark h1,
  .theme--dark h2,
  .theme--dark h3,
  .theme--dark h4 {
    color: var(--white); }
  .theme--dark .text--subtle {
    color: var(--gray-4); }
  .theme--dark a {
    color: var(--color-accent); }

body {
  font-size: var(--text-base-size);
  font-family: var(--font-primary);
  color: var(--color-text);
  background: var(--backcolor-body);
  line-height: 140%; }

h1,
h2,
h3,
h4,
form legend {
  color: var(--color-text-heading);
  line-height: var(--heading-line-height); }

/* spacing */
h1 {
  margin-bottom: var(--space-lg); }

h2 {
  margin-bottom: var(--space-md); }

p {
  margin: 0; }

/* text size */
.text--xxxl {
  font-size: var(--text-xxxl); }

h1,
.text--xxl {
  font-size: var(--text-xxl); }

h2,
.text--xl {
  font-size: var(--text-xl); }

h3,
.text--lg {
  font-size: var(--text-lg); }

h4,
.text--md {
  font-size: var(--text-md); }

.text--sm,
small {
  font-size: var(--text-sm); }

.text--xs {
  font-size: var(--text-xs); }

p {
  line-height: var(--body-line-height); }

a {
  color: var(--color-link);
  text-decoration: none; }
  a:hover {
    color: var(--color-text);
    text-decoration: underline; }
    a:hover:visited {
      color: var(--color-text);
      text-decoration: underline; }
  a:visited {
    color: var(--color-secondary);
    text-decoration: underline; }

b,
strong {
  font-weight: bold; }

/* -------------------------------- 
Memeke Utility Classes
-------------------------------- */
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; }

.center {
  text-align: center; }

.right {
  float: right; }

.margin-top,
.margin-top--md {
  margin-top: var(--space-md); }

.margin-top--sm {
  margin-top: var(--space-sm); }

.margin-top--lg {
  margin-top: var(--space-lg); }

.margin-top--xl {
  margin-top: var(--space-xl); }

.margin-top--xxl {
  margin-top: var(--space-xxl); }

.margin-bottom,
.margin-bottom--md {
  margin-bottom: var(--space-md); }

.margin-bottom--sm {
  margin-bottom: var(--space-sm); }

.margin-bottom--lg {
  margin-bottom: var(--space-lg); }

.margin-bottom--xl {
  margin-bottom: var(--space-xl); }

.margin-bottom--xxl {
  margin-bottom: var(--space-xxl); }

.margin-left,
.margin-left--md {
  margin-left: var(--space-md); }

.margin-left--sm {
  margin-left: var(--space-sm); }

.margin-left--lg {
  margin-left: var(--space-lg); }

.margin-left--xl {
  margin-left: var(--space-xl); }

.margin-left--xxl {
  margin-left: var(--space-xxl); }

.margin-right,
.margin-right--md {
  margin-right: var(--space-md); }

.margin-right--sm {
  margin-right: var(--space-sm); }

.margin-right--lg {
  margin-right: var(--space-lg); }

.margin-right--xl {
  margin-right: var(--space-xl); }

.margin-right--xxl {
  margin-right: var(--space-xxl); }

.color-accent {
  color: var(--color-accent); }

.color-primary {
  color: var(--color-primary); }

.color-secondary {
  color: var(--color-secondary); }

.gray-4 {
  color: var(--gray-4); }

/* -------------------------------- 
Memeke Grid System
-------------------------------- */
/* variables definition */
/*! PocketGrid 1.1.0
* Copyright 2013 Arnaud Leray
* MIT License
*/
.block-group,
.block,
.block-group:after,
.block:after,
.block-group:before,
.block:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

.block-group {
  *zoom: 1; }

.block-group:before,
.block-group:after {
  display: table;
  content: "";
  line-height: 0; }

.block-group:after {
  clear: both; }

.block-group {
  list-style-type: none;
  padding: 0;
  margin: 0; }

.block-group > .block-group {
  clear: none;
  float: left;
  margin: 0 !important; }

.block {
  float: left;
  width: 100%; }

.panel {
  padding-top: 25px;
  margin-top: 25px;
  max-width: 100vw; }

.content {
  margin-left: 150px;
  margin-right: 150px;
  padding: 8px; }

.content--sm {
  margin-left: 350px;
  margin-right: 350px;
  padding: 8px; }

/* Element width ranges */
.b10 {
  width: 10%; }

.b20 {
  width: 20%; }

.b25 {
  width: 25%; }

.b30 {
  width: 30%; }

.b33 {
  width: 33%; }

.b40 {
  width: 40%; }

.b50 {
  width: 50%; }

.b60 {
  width: 60%; }

.b70 {
  width: 70%; }

.b80 {
  width: 80%; }

.b90 {
  width: 90%; }

/**
 This is used to generate a media query according to the type of device. It shall wrap the content
 with this media query.
 
 @param $breakpoint type of device
  When making use of this mixin, ensure the breakpoints are in descending order
 of the screen size, from biggest to smallest. This is because this mixin makes use of the max-width
 media query, so the first media query satisfied will have its properties take highest priority.
  Please note, its not required to make use of all breakpoints when making a component responsive
  Eg.
 @include respond(desk-small){
  }
  @include respond(phone){
   
 }
*/
/* -------------------------------- 
Memeke Themed Buttons
-------------------------------- */
.btn {
  display: inline-flex;
  position: relative;
  white-space: nowrap;
  text-decoration: none;
  line-height: 1;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--btn-radius);
  font-size: var(--btn-font-size);
  color: var(--color-text);
  outline: none;
  transition: 0.2s;
  border: none;
  margin: 5px; }
  .btn:active {
    transition: none; }

/* themes */
.btn--primary {
  background-color: var(--btn-primary-bg);
  color: var(--btn-primary-label);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }
  .btn--primary:visited {
    color: var(--btn-primary-label); }
  .btn--primary:hover {
    background-color: var(--btn-primary-hover); }
  .btn--primary:active {
    background-color: var(--btn-primary-active); }

.btn--secondary {
  background-color: var(--btn-secondary-bg);
  color: var(--btn-secondary-label); }
  .btn--secondary:visited {
    color: var(--btn-secondary-label); }
  .btn--secondary:active {
    background-color: var(--btn-secondary-active); }

.btn--accent {
  background-color: var(--btn-accent-bg);
  color: var(--btn-accent-label);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }
  .btn--accent:visited {
    color: var(--btn-accent-label); }
  .btn--accent:hover {
    background-color: var(--btn-accent-hover); }
  .btn--accent:active {
    background-color: var(--btn-accent-active); }

/* feedback */
.btn[disabled] {
  cursor: not-allowed;
  background-color: var(--btn-disabled-bg);
  color: var(--btn-disabled-label);
  box-shadow: none;
  opacity: 0.6; }
  .btn[disabled]:visited {
    color: var(--btn-disabled-label); }

/* Button sizes */
.btn--xs {
  font-size: var(--text-xs); }

.btn--sm {
  font-size: var(--btn-sm); }

.btn--md {
  font-size: var(--btn-md); }

.btn--lg {
  font-size: var(--btn-lg); }

.btn--full-width {
  display: flex;
  width: 100%;
  justify-content: center; }

/* -------------------------------- 

Title: Card
Description: Memeke cards design

-------------------------------- */
.card {
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  border-radius: var(--radius);
  border: solid 1px var(--gray-2);
  padding: 3px 0px 0px 0px;
  background: #fff;
  overflow: hidden;
  display: block; }

.card__title {
  padding: 8px 8px 8px 12px;
  border-bottom: 1px solid #dedede;
  display: inherit;
  cursor: pointer; }
  .card__title .avatar-mini {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    float: left; }
  .card__title .card__title__link {
    font-weight: 500; }

.card__img {
  max-height: 500px;
  overflow: hidden; }
  .card__img img {
    display: block;
    width: 100%;
    z-index: 4; }

.card__content {
  padding: var(--space-md); }

.card__footer {
  border-bottom: 1px solid #dedede;
  padding: 0px 5px 5px 5px; }

/* -------------------------------- 
Memeke alerts
-------------------------------- */
.alert {
  padding: var(--space-unit); }

.alert__danger {
  background: var(--color-accent-light);
  color: var(--white);
  border: solid 1px var(--color-accent-dark);
  border-radius: calc(var(--space-unit) * 0.75); }

/* -------------------------------- 
Memeke comments
-------------------------------- */
.comment__block {
  background: #f1f1f1;
  padding: 12px;
  margin-top: 6px;
  margin-bottom: 6px; }

.comment__avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  float: left; }

.comment__icon {
  width: 16px;
  height: 16px;
  margin: 0px 3px 0px 3px; }

.commentform__textarea {
  outline: none;
  width: 100%;
  transition: all 0.2s;
  box-sizing: border-box;
  height: 46px;
  border: 1px solid var(--form-element-border);
  border-radius: 4px;
  background-color: #ffffff;
  color: #808fa3;
  padding: 10px;
  font-size: 12pt; }
  .commentform__textarea::placeholder {
    color: var(--form-text-placeholder); }
  .commentform__textarea:focus {
    border: 1px solid var(--form-element-border-focus); }

.addcomment__avatar {
  width: 48px;
  margin-top: var(--space-md);
  border-radius: 50%; }

/* -------------------------------- 
Memeke forms
-------------------------------- */
form {
  margin-right: 15px;
  margin-left: 5px; }

.form-group .label {
  font-size: 14px;
  line-height: 1; }

.form-group input {
  border: solid 1px #ddd;
  width: 100%;
  padding: 8px;
  outline: none;
  margin-bottom: 15px;
  border-radius: 3px;
  font-size: 18px;
  font-weight: 150; }

/* -------------------------------- 
Memeke Sample Code during development
-------------------------------- */
.nav {
  width: 100%;
  background-color: #fff;
  position: relative;
  z-index: 1;
  position: fixed;
  top: 0; }

.nav > .nav-header {
  display: inline; }

.nav > .nav-header > .nav-title {
  display: inline-block;
  font-size: 22px;
  color: var(--color-primary);
  padding: 10px; }

.nav > .nav-btn {
  display: none; }

.nav > .nav-links {
  float: right;
  font-size: 18px;
  padding-right: 20px; }

.nav .nav-links .navlink {
  display: inline-block;
  padding: 13px 10px 13px 10px;
  text-decoration: none; }

.nav .nav-links .navlink:hover {
  background-color: rgba(0, 0, 0, 0.3); }

.nav > #nav-check {
  display: none; }

.icon {
  width: 26px;
  margin-right: 12px; }

.icon--sm {
  width: 22px;
  margin-right: 12px; }

@supports (grid-area: auto) {
  .profile__userposts {
    display: grid;
    grid-column-gap: 20px;
    grid-row-gap: 20px; } }

@supports (grid-area: auto) {
  .profile__userposts {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); } }

.card__img--profile {
  height: 300px;
  overflow: hidden; }
  .card__img--profile img {
    display: block;
    width: 100%;
    z-index: 4; }

.card__bookmark--footer {
  padding: 8px; }

.avatar--profile {
  width: 80px;
  margin-top: 20%;
  border-radius: 50%; }

@media (max-width: 600px) {
  .side-panel {
    display: none; }
  .main-panel {
    width: 100%; }
  .comment__avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    float: left; }
  .nav > .nav-btn {
    display: inline-block;
    position: absolute;
    right: 0px;
    top: 0px;
    background: #404040;
    color: black;
    height: inherit; }
  .nav > .nav-btn > label {
    display: inline-block;
    padding-top: 10px;
    padding-left: 12px;
    padding-right: 12px; }
  .nav > .nav-btn > label:hover {
    background-color: rgba(0, 0, 0, 0.3); }
  .nav > .nav-btn > label > span {
    display: block;
    width: 25px;
    height: 10px;
    border-top: 2px solid #eee; }
  .nav > .nav-links {
    position: absolute;
    display: block;
    width: 100%;
    background-color: white;
    height: 0px;
    color: white;
    transition: all 0.3s ease-in;
    overflow-y: hidden;
    top: 50px;
    left: 0px; }
  .nav .nav-links .navlink {
    display: block;
    width: 100%; }
  .nav > #nav-check:not(:checked) + .nav-links {
    height: 0px; }
  .nav > #nav-check:checked + .nav-links {
    height: calc(30vh);
    overflow-y: auto; }
  .addcomment__avatar {
    width: 36px;
    margin-top: var(--space-md);
    border-radius: 50%; }
  .content {
    margin: 0px; }
  .content--sm {
    margin: 0px; } }