body {
font-family: “Noto Serif SC”, "PingFangSC", "Microsoft YaHei",-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif;
  text-rendering: optimizelegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  max-width: 800px;
  margin-right: auto;
  margin-left: auto;
  line-height: 1.5;
  font-size: 120%;
  color: #434343;
}

img {
 border-radius: 10px;
   max-width:500px;
  max-height:500px;
  width: auto;
  height: auto;
  display: block;
  margin: 0 auto;
}

figure {
  margin-left: auto;
  margin-right: auto;
  vertical-align: middle;
}

<style>
   a:link{
    color:#000;
}
a:visited{
    color:#000;
}
a:hover {
    text-decoration:none;
    border-bottom:1.5px dashed black;
}
</style> 

<style>  
body {
      animation: fadeInAnimation ease 2s;
      animation-iteration-count: 1;
      animation-fill-mode: forwards;
     
}
  @keyframes fadeInAnimation {
      0% {
         \n opacity: 0;
         \n 
    }
     100% {
         \n opacity: 1;
         \n 
    }
     
}
</style>

/* IMAGE WIDTH STYLES */
/* ================== */

/* Style at will... */
/* figure.kg-width-full { } */
/* figure.kg-width-wide { } */
/*
PROTIP:
Try something like as a starting point for centering images that are wider than their parent container's width:

.full-bleed {
	  width: 100vw;
	  position: relative;
	  left: 50%;
	  right: 50%;
	  margin-left: -50vw;
	  margin-right: -50vw;
	}

For large images that aren't full width, but are larger than their parent, just replace 100vw with your max width (say, 1000px), and then replace the -50vw margins with -{NUM}px / 2 (in this case, -500px). You can see a version of this techinique in action in the stylesheet of my MNML Ghost theme:
https://github.com/curiositry/mnml-ghost-theme
*/

/* IMAGE GALLERY STYLES */
/* ==================== */

/* Style at will... */
/* .kg-gallery-card { } */
/* .kg-gallery-container { } */
/* .kg-gallery-row { } */
/* .kg-gallery-image { } */

/*
Docs can be found here: http://themes.ghost.org/docs/ghost-editor#section-gallery-card

The implementation that Ghost recommends is pretty robust, with one caveat: it needs a few lines of JavaScrpt. Example can be found here:
https://github.com/TryGhost/Casper/pull/475/files#diff-ce5e030f2e2e2a50f18199464f07ea70
*/


figcaption {
  text-align: center;
}

.inline-block {
  display: inline-block;
}

.pace {
  -webkit-pointer-events: none;
  pointer-events: none;

  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.pace-inactive {
  display: none;
}

.pace .pace-progress {
  background: #000000;
  position: fixed;
  z-index: 2000;
  top: 0;
  right: 100%;
  width: 100%;
  height: 2px;
}

<style>
/* width */
::-webkit-scrollbar {
  width: 15px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1; 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #888; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555; 
}
</style>