.article-display {
  
  padding: 10px 10px;
  
  width: 100%;
  margin: 0 auto;
  }

 .article-section {
  background: #ffffff;
  padding: 10px 10px;
  border: 1px solid #dddddd;
  border-radius: 3px;
  width: 60%;
  margin: 0 auto;
  }

.article-user{
  width: 60%;
  margin: 0 auto;
}

.article-card{
  width: 60%;
  margin: 0 auto;
}

  /* for profile page*/
.content-profile {
  background: #ffffff;
  
  border: 1px solid #dddddd;
  border-radius: 3px;
  width: 60%;
  margin: 0 auto;
  margin-top: 3rem !important;
  
  }

  /* for signup page*/
.content-section {
  background: #ffffff;
  padding: 10px 10px;
  border: 1px solid #dddddd;
  border-radius: 3px;
  width: 60%;
  margin: 0 auto;
  margin-top: 3rem !important;
  }




/* Small devices (landscape phones, 576px and up) */
@media (min-width: 200px) {
  .article-section, .article-card, .article-user, .content-profile, .content-section{
     width: 90%;
  }
}

@media (min-width: 300px) {
 .article-section, .article-card, .article-user, .content-profile, .content-section {
     width: 90%;
  }
}

@media (min-width: 480px) {
.article-section, .article-card, .article-user, .content-profile, .content-section {
     width: 80%;
  }
}


/* Small devices (landscape phones, less than 768px) */
@media (min-width: 767px) {
.article-section, .article-card, .article-user, .content-profile, .content-section {
     width: 60%;
  }
}

/* Medium devices (tablets, less than 992px) */
@media (min-width: 991px) {
.article-section, .article-card, .article-user, .content-profile, .content-section {
     width: 55%;
  }
}

/* Medium devices (tablets, less than 992px) */
@media (min-width: 1199px) {
.article-section, .article-card, .article-user, .content-profile, .content-section {
     width: 55%;
  }
}

/* -------- */
a.article-tags {
  
  color: #4a4b4d;
  
  text-decoration: none;
  
}


a.article-tags:hover, a.article-tags:focus {
  color: #800080;
}

a.article-tags:active {
  background-color: black;
}

a.article-tags:visited {
  background-color: #d5fdd5;
  padding: 0.3em;
}


.article-list-users-top{
  background-color: #21D4FD;
  background-image: linear-gradient(19deg, #21D4FD 0%, #B721FF 100%);

  color: #fff;
  font-family: 'Proza Libre', sans-serif;
}

.article-list-tags-top{
  color: #fff;
  font-family: 'Proza Libre', sans-serif;
}

.contributor-list-users-top{
  background-color: #21D4FD;
  background-image: linear-gradient(19deg, #21D4FD 0%, #B721FF 100%);
  color: #282828;
 font-family: 'Proza Libre', sans-serif;
}


.contributor-name{
  color: #282828;
}

a.contributor-name:hover, a.contributor-name:focus{
  /*color: #686868;*/
  color: white;
  font-weight: lighter;
  transition-timing-function: ease-in;
}

.media-list {
  margin-left: 0;
  padding-left: 0;
}

/* Comment User Profile */
.comment-img {
  height: 40px;
  width: 40px;
  margin-right: 16px;
  object-position: cover;
}

/* -------- */
.blackiconcolor {
  color:#4a4b4d;
  font-size: 1.3rem;
  }

.blacktextcolor {
  color:#4a4b4d;
  }

.hearttextcolor{
  color: #ff8080;
  font-size: 1.3rem;
}

.claptextcolor{
  color: #eac086;
  font-size: 1.6rem;
}

.whiteiconcolor {
  color:#fff;
  font-size: 1.5rem;
  }
.whitetextcolor {
  color:#fff;
  }

a:hover, a:focus {
  text-decoration: none;
}

a:active {
  text-decoration: none;
}


/*---Custom Fonts----*/
/*https://www.fontsquirrel.com/tools/webfont-generator*/
@font-face {
  font-family: 'Reso';
  src: url('/static/fonts/Reso/reso_regular.eot');
  src: local('Reso'), local('Reso'),
    url("/static/fonts/Reso/reso_regular.woff") format("woff"),
    url("/static/fonts/Reso/reso_regular.otf") format("opentype"),
    url("/static/fonts/Reso/reso_regular.svg#Reso") format("svg");
}

/* Home Page */
#Home-First-Layer {

border:none;
}

#Home-First-Layer-1 {
  font-family: 'Cairo', sans-serif;
  font-size: 4rem;
  font-weight: none;
  color: #4a4b4d;
}

#Home-First-Layer-2 {
  font-family: 'Reso', sans-serif;
  font-size: 4rem;
  font-weight: lighter;
  
  background-image: radial-gradient( circle farthest-corner at 10% 20%,  rgba(254,113,210,1) 0%, rgba(184,96,255,1) 90% );;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
}

#Home-First-Layer-3 {
  font-family: 'Proza Libre', sans-serif;
  font-size: 1.2rem;
  color: grey;
}



.carousel-item img {
  background: transparent;
}

.carousel .carousel-inner .carousel-item  {
  background: transparent;
}

.carousel-inner {

/*background-color: #A9C9FF;
background-image: linear-gradient(180deg, #A9C9FF 0%, #FFBBEC 100%);*/
/* background-color: #f8ceec; */
background-image: linear-gradient(315deg, #f8ceec 0%, #a88beb 74%);
}

.Cairo-Bold-Lg {
  font-family: 'Cairo', sans-serif;
  font-size: 3rem;
  font-weight: bold;
  color: #4a4b4d;
}

.Cairo-Bold-Md {
  font-family: 'Cairo', sans-serif;
  font-size: 2rem;
  font-weight: bold;
  color: #4a4b4d;
}

/*---Django CKeditor Fix---*/
.django-ckeditor-widget {
  width: 100%;
  margin:0;
}
/*----------------------*/

/*----Text Styles----*/
.article-author{
  color: #444444;
}

.article-title-small {
  color: #444444;
  font-size: 28px;
  font-family: 'Cormorant Garamond', serif;
}

.article-title {
  color: #444444;
  font-family: 'Cormorant Garamond', serif;
  font-size: 40px;
}

.article-description-small {
  color:rgba(0, 0, 0, 0.54);
  font-family: 'Proza Libre', sans-serif;
   font-size: 20px;
}
.article-description {
  color:rgba(0, 0, 0, 0.54);
  font-family: 'Proza Libre', sans-serif;
   font-size: 25px;
}

.about-description {
  font-family: 'Proza Libre', sans-serif;
  font-size: 20px;
}

.about-top {
  font-family: 'Proza Libre', sans-serif;
}

.comments-text{
  font-family: 'Neuton', serif !important;
}


/*Article Title*/
/* Small devices (landscape phones, 576px and up) */
@media (min-width: 200px) {
  .article-title  {
    font-size: 25px;
  }
  .article-title-small  {
    font-size: 20px;
  }
  .article-description  {
    font-size: 15px;
  }
  .article-description-small  {
    font-size: 15px;
  }
}

@media (min-width: 300px) {
.article-title  {
    font-size: 25px;
  }
.article-title-small  {
    font-size: 20px;
  }
.article-description  {
    font-size: 15px;
  }
.article-description-small  {
    font-size: 15px;
  }
}

@media (min-width: 480px) {
.article-title  {
    font-size: 30px;
  }
.article-title-small  {
    font-size: 25px;
  }
.article-description {
    font-size: 20px;
  }
.article-description-small  {
    font-size: 15px;
  }
}


/* Small devices (landscape phones, less than 768px) */
@media (min-width: 767px) {
.article-title  {
    font-size: 40px;
  }
.article-title-small  {
    font-size: 30px;
  }
.article-description  {
    font-size: 25px;
  }
.article-description-small  {
    font-size: 20px;
  }
}

/* Medium devices (tablets, less than 992px) */
@media (min-width: 991px) {
.article-title  {
    font-size: 40px;
  }
.article-title-small  {
    font-size: 30px;
  }
.article-description  {
    font-size: 25px;
  }
.article-description-small  {
    font-size: 20px;
  }
}

/* Medium devices (tablets, less than 992px) */
@media (min-width: 1199px) {
.article-title  {
    font-size: 40px;
  }
.article-title-small  {
    font-size: 30px;
  }
.article-description  {
    font-size: 25px;
  }
.article-description-small  {
    font-size: 20px;
  }
}


/*---------------------------------------------------*/
.home-bordertop {
  border-top: 1px solid #e3e3e3;
  text-align: left;
}

.home-tag {
  color:rgba(0, 0, 0, 0.54);
  font-style: italic;
}

.home-title-small {
  color: #444444;
  font-size: 20px;
  font-family: 'Nanum Gothic', sans-serif;
}

.home-title-smaller {
  color: #444444;
  font-size: 15px;
  font-weight:bold;
  font-family: 'Nanum Gothic', sans-serif;
}

.home-headline {
  color: #444444;
  font-size: 20px;
  font-family: 'Nanum Gothic', sans-serif;
  font-variant-caps: all-petite-caps;
}

.home-counter {
  color: #606060;
  font-size: 40px;
  font-family: 'Cairo', sans-serif;
}


a.article-title:hover, a.article-title:focus {
  color:rgba(0, 0, 0, 0.54);
  text-decoration: none;
}

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

#logotext {
  font-family: 'Cairo', sans-serif;
}

/* SiteWise Font Sizing Doesn't appear to work */

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 200px) {
  html {
    font-size: 60%;
  }
}

@media (min-width: 300px) {
  html {
    font-size: 75%;
  }
}

@media (min-width: 480px) {
  html {
    font-size: 80%;
  }
}


/* Small devices (landscape phones, less than 768px) */
@media (min-width: 767px) {
  html {
    font-size: 85%;
  }
}

/* Medium devices (tablets, less than 992px) */
@media (min-width: 991px) {
  html {
    font-size: 100%;
  }
}

/* Medium devices (tablets, less than 992px) */
@media (min-width: 1199px) {
  html {
    font-size: 100%;
  }
}

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

.article-content img {
  max-width: 90vw;
  height: auto !important;
}

.article-content{
  overflow-x: scroll;-webkit-overflow-scrolling: touch;
}

/*---------BlockQuotesFormatting---------*/

blockquote {
  border-radius: 3px;
  position: relative;  /*  <--- */
  font-style: italic;
  text-align: center;
  padding: 1rem 1.2rem;
  width: 80%;  /* create space for the quotes */
  color: #4a4a4a;
  margin: 1rem auto 2rem;
  color: #4a4a4a;
  background: #E8E8E8;
}
blockquote:before,
blockquote:after{
    font-family: FontAwesome;
    position: absolute;
    /* -- inside the relative position of blockquote -- */
    top: 13px;
    color: #E8E8E8;
    font-size: 34px;
}
blockquote:before{
  content: "\201C";
  margin-right: 13px;
  right: 100%;
  color: #4a4a4a;
}
blockquote:after{
  content: "\201D";
  margin-left: 13px;
  left: 100%;
  color: #4a4a4a;  
  top: auto;
  bottom: 13px;
}

/*---------Dark Mode Check Box Slider---------*/
/*Simple css to style it like a toggle switch*/
#dark-mode-text {
  position: relative;
  top:12.5%;
  font-size: 1rem;
  font-style: oblique;
}
.theme-switch {
  display: inline-block;
  height: 32px;
  position: relative;
  width: 60px;
}

.theme-switch input {
  display:none;
}

.slider {
  background-color: #ccc;
  bottom: 0;
  cursor: pointer;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  transition: .4s;
}

.slider:before {
  background-color: #fff;
  bottom: 3px;
  content: "";
  height: 26px;
  left: 4px;
  position: absolute;
  transition: .4s;
  width: 26px;
}

input:checked + .slider {
  background-image: linear-gradient(to left, red, purple);
}

input:checked + .slider:before {
  transform: translateX(26px);
}

.slider.round {
  border-radius: 30px;
}

.slider.round:before {
  border-radius: 50%;
}

/*---------Dark Mode Theme---------*/
:root {
  --tag-link-color: #4a4b4d;
  --tag-link-hover-color: #800080;
  --tag-link-visited-color: #d5fdd5;

  --title-color: #4a4b4d;
  --description-color: #787878;

  --author-color:#444444 ;
  --author-hover-color:#db4656 ;

  --code-block-color: #F0F0F0 ;

  --bg-color: #ffffff	;

  --comment-bg-color: #ffffff;
  /**--article-bg-color: #F9F5FA ;**/
  --article-bg-color: #ffffff;

  --form-text-color: #6c757d;

  --invert: 0%;
  --invert-neg: 0%;
  --invert-90: 0%;

  --top-nav--bg: #F8F8F8;
  --top-nav-button-left: black;
  --top-nav-text: black;
  --top-nav-hover: black;
;
}

[data-theme="dark"] {
  --tag-link-color: #82314f;
  --tag-link-hover-color: #E688FF;
  --tag-link-visited-color: #212121;

  --title-color: #CBBBCF;
  --description-color: #787878;

  --author-color:#db4656 ;
  --author-hover-color:#ff8c96;

  --views-color: #66bb6a;

  --code-block-color: #4a4848 ;

  --bg-color: #212121;

  --comment-bg-color: #1c1c1c;
  /***--article-bg-color: #1c1c1c;***/
  --article-bg-color:#808080;

  --form-text-color: #6c757d;

  --invert: 100%;
  --invert-neg:100%;
  --invert-90: 90%;

  --top-nav--bg: #262626;
  --top-nav-button-left: #8c8b8b;
  --top-nav-text: white;
  --top-nav-hover: #b721ff;

  --font-color: #e1e1ff;
  --font-weight: bolder;
  
  --heading-color: #818cab;

  
;
}

/*---------Dark Mode Elements---------*/
.content-form_update{
    padding: 0px;
    width: 95%;
}

a.article-tags{
  color: var(--tag-link-color); 
}

a.article-tags:hover, a.article-tags:focus {
  color: var(--tag-link-hover-color);
}

a.article-tags:visited {
  background-color: var(--tag-link-visited-color);
  padding: 0.3em;
}

.article-title{ color: var(--title-color); }
.article-title-small{ color: var(--title-color); }
.home-title-smaller{ color: var(--title-color); }
.home-headline{ color: var(--title-color); }
.article-description{ color: var(--description-color); }
.article-description-small{ color: var(--description-color); }
.article-author{ color: var(--author-color); }
a.article-author:hover, a.article-author:focus {
  color: var(--author-hover-color);
}

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

.pre {background-color: var(--code-block-color);!important}

.card-block, .card-body {background-color: var(--comment-bg-color);}
.card-block, .card-body {color: var(--font-color);}
.comments-text{color: var(--font-color);}
.smalltext{color: var(--font-color);}

body {
  background-color: var(--bg-color);
  /*color: var(--font-color);*/

  /*other styles*/
  .....
}

.content-form_update {
  background-color: var(--bg-color);
  /***color: var(--font-color);***/
}

#Home-First-Layer{
  /* background-color: var(--bg-color); */
  color: #fff;
}


.article-content {
  /*** background-color: var(--article-bg-color);***/
  /***color: var(--font-color);***/
}

.article-content{
  filter: invert(var(--invert));
}
.navbar-toggler{ filter: invert(100%);}

.article-content img {filter: invert(var(--invert-neg));}
.article-content iframe {filter: invert(var(--invert-neg));}

.content-section{
  filter: invert(var(--invert-90));
}

.topnavcontainer, #sidebardropbutton { 
  background-color: #262626;
  }

/* .navbar .navbar-nav .nav-item {color: var(--top-nav-text);} */
.navbar .navbar-nav .nav-item {color: #ffffff;}  
.nav-brand {padding-top:0;}
.nav-brand > img {height: 1.5em; margin-top: 0.375em;margin-bottom: 0.125em;}

.topnavcontainer a:hover, .topnavcontainer a:focus{
  color: white !important;
}

/* #logotext, .fa-sliders-h {color: var(--top-nav-button-left);} */
#logotext, .fa-sliders-h {color: #8c8b8b;}

.article-section {
  background-color: var(--comment-bg-color);
  color: var(--font-color);
}

.about-top, .about-description {color: var(--font-color);}

.scrollable-element {
  scrollbar-color: var(--bg-color);
}

.content-section {
  color: var(--form-text-color);
}

.content-profile {
  color: var(--form-text-color);
}

legend {
  color: var(--form-text-color);
}
.col-form-label {
  color: var(--form-text-color);
}
.form-group {
  color: var(--form-text-color);
}