<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Merriweather">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">

html {
  color-scheme: light dark;
}

main {
  max-width: min(70ch,100%-4rem);
  margin-inline: auto;
}
.nav {
    background-color: blue;
    color: blue;
}

.sidebar-nav {
  font-family: Raleway,Arial, Helvetica, sans-serif;
  margin: 10px;
  font-size: 24px;
  background-color: blue;
  padding: 05px;
  list-style-type: none;
}

.sidebar-nav-item {
  padding: 0px;
  text-align: center;
  font-size: 16px;
  border-bottom: 1px solid black;
  transition: background-color 0.5s;
  transition: color 0.5s;
  color: white;
  background-color:blue;
}

.sidebar-nav-item:hover {
  background-color: white;
  color: black;
  transition: background-color 0.5s;
  transition: color 0.5s;
}

body {
  font-size: 16px;
  font-family: 'Merriweather','Times New Roman', Times, serif;
  color: black;
  font-weight: light;
  padding: 0px;
  margin: 50px;
  line-height: 1.5;
}

note {
  font-size: 12px;
  font-family: 'Merriweather','Times New Roman', Times, serif;
  color: black;
  font-weight: light;
  padding: 0px;
  margin: 50px;
}

h1 {
  font-size: 24px;
  font-family: Raleway,Arial, Helvetica, sans-serif;
  font-weight: bold;
  color: black;
  padding: 0px;
  margin: 0px;
}
h2 {
  font-size: 20px;
  font-family: Raleway,Arial, Helvetica, sans-serif;
  font-style: bold;
  color: black;
  padding: 0px;
  margin: 0px;
}
h3 {
  font-size: 16px;
  font-family: Raleway,Arial, Helvetica, sans-serif;
  color: black;
  padding: 0px;
  margin: 0px;
}
h6 {
  font-size: 15px;
  font-family: 'Merriweather','Times New Roman', Times, serif;
  color: black
  padding: 0px;
  margin: 0px;
}

figcaption {
  font-style: italic; color: green;
}
.picright {
  style=float:right; padding: 0 0 0 10px;
}

blockquote {
  font-family: 'Merriweather','Times New Roman', Times, serif;
  font-style: italic; color: green;
  padding: 0 50px;
  margin-left: 0;
  text-align: center;
}
code {
  font-family: 'Courier New', Courier, monospace;
  color: white;
  word-wrap: break-word;
  width: 100%;
  display:block;
  background-color:  black;
  padding: 10px;
}

.table table{
  border-collapse: collapse;
  width: 100%;
  background-color: lightgray;
}
.table td {
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  padding: 0.6rem;
}


img[src$='#center']
{
    display: block;
    max-width: 90%;
    padding: 20px 20px;
    box-shadow: green;
    margin: 0.7rem auto; /* you can replace the vertical '0.7rem' by
                            whatever floats your boat, but keep the
                            horizontal 'auto' for this to work */
    /* whatever else styles you fancy here */
}

img[src$='#floatleft']
{
    float:left;
    margin: 0.7rem;      /* this margin is totally up to you */
    /* whatever else styles you fancy here */
    box-shadow: green;
    max-width: 50%;
    padding: 20px 20px;
    }
img[src$='#floatsmallleft']
{
    float:left;
    margin: 0.7rem;      /* this margin is totally up to you */
    /* whatever else styles you fancy here */
    box-shadow: green;
    max-width: 25%;
    padding: 20px 20px;
    }

img[src$='#floatright']
{
    float:right;
    margin: 0.7rem;      /* this margin is totally up to you */
    /* whatever else styles you fancy here */
    box-shadow: green;
    max-width: 50%;
    padding: 20px 20px;
}

img[src$='#floatsmallright']
{
    float:right;
    margin: 0.7rem;      /* this margin is totally up to you */
    /* whatever else styles you fancy here */
    box-shadow: blue;
    max-width: 25%;
    padding: 20px 20px;
}
#parent {width: 95%;display: grid; grid-template-columns: 33% 33% 33%; width: max-content;box-sizing: 100%; grid-template-rows: auto; bottom-border:20px;}

.child {width: 95%;border-bottom: 50px; }

.tags {color:green; font-size:18px}

@media screen and (min-width: 600px) {
  #parent {display: grid; grid-template-columns: 33% 33% 33%; width: max-content; 100%;grid-template-rows: auto; bottom-border:20px;}
  body { font-size: 1.25 rem}
  note { font-size: 1 rem;}
  .tags { font-size: 1.25 rem;}
  .sidebar-nav-item { font-size: 1.25 rem;}
  h1 { font-size: 1.6 rem;}
  h2 { font-size: 1.5 rem;}
  h3 {font-size: 1 rem;}
  h6 {font-size: 1 rem;}
}
@media screen and (min-width: 1200px) {
  #parent {display: grid; grid-template-columns: 25% 25% 25% 25%; width: max-content;box-sizing: 100%;grid-template-rows: auto; bottom-border:20px;}
  body { font-size: 25px;}
  note {font-size: 17px;}
  h1 { font-size: 35px;}
  h2 { font-size: 30px;}
  h3 {font-size: 25px;}
  h6 {font-size: 23px;}
  .tags {font-size: 25px;}
  .sidebar-nav-item { font-size: 25px;}
}
@media screen and (min-width: 2400px) {
  #parent {display: grid; grid-template-columns: 20% 20% 20% 20% 20%; width: max-content;box-sizing: 100%;grid-template-rows: auto; bottom-border:20px;}
  body { font-size: 32px;}
  note {font-size: 24px;}
  h1 { font-size: 48px;}
  h2 { font-size: 40px;}
  h3 {font-size: 32px;}
  h6 {font-size: 30px;}
  .tags {font-size: 32px;}
  .sidebar-nav-item { font-size: 32px;}
}
code.has-jax {
  -webkit-font-smoothing: antialiased;
  background: inherit !important;
  border: none !important;
  font-size: 100%;
}

.admonition {
  padding: 30px;
  margin-bottom: 21px;
  border-left: 10px solid transparent
}

.admonition .title {
  margin: 0;
  text-transform: uppercase;
  padding-left: 3px;
  border: 1px solid;
  border-style: hidden hidden solid;
}


.note {
  border-color: olive;
  background-color: #f6fffe;
}

.note .title {
  color: olive;
  border-color: olive;
}

.danger {
  border-color: red;
  background-color: #f6fffe;
}

.danger .title {
  color: red;
  border-color: red;
}