body {

background-color: transparent;
color: black;
font-family: 'Noto Sans', sans-serif;

}

a {

  color: inherit;
}

.container {

width: 500px;

}

img {

width: 100%;

}

@media only screen and (min-device-width : 320px) and (max-device-width : 767px) {

/* body {
    background-color: red;
} */

.center {
    margin: auto;
    width: 90%;
  } 

  .nav {
    margin-right: 10px;
}

}

@media only screen and (min-device-width : 768px) {

/* body {
    background-color: blue;
} */

.center {
    margin: auto;
    width: 60%;
} 

.nav {
    margin-right: 100px;
}

}

.debug {

/* border: 1px solid red; */

}

.zoom:hover {

transform: scale(1.5); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */

}

/* Theme List */ .light{

color: black;
background-color: white;

}

.light blockquote {

margin: 0;  
padding-left: 1.4rem;  
border-left: 2px solid black;

}

.dark {

color: white;
background-color: black;

}

/* this must be done for certain themes to see table lines */ .dark th, td {

border:1px solid white;

}

.dark a {

color: white;

}

.dark blockquote {

margin: 0;  
padding-left: 1.4rem;  
border-left: 2px solid white;

}

.dragos {

color:#d2fafb;
background-color: #2c003e;

}

.ocean {

color: #1b262c;
background-color:#bbe1fa;

}

.sunset {

background-color: #0a1d37;
color: #ffeedb;

}

.new {

background-color: #293B5F;
color: #FFC074;

}

.sandcastle {

background-color: #F7F3E9;
color: black;

}

.greenturtle {

background-color: #314E52;
color: #F7F6E7;

}

.dunes {

background-color: #FCF8E8;
color: #DF7861;
accent: #D4E2D4;

}

.arctic {

background-color: #E8E8E8;
color: #495464;

}

.marsian {

background-color: #EBD4D4;
color: #463333;

}

.bumble {

background-color: #0A1931;
color: #FFC947;

}

.pinkapple {

background-color: #FFBBCC;
color: #99154E;

}

/* The Modal (background) */ .modal {

  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  right: 10px;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
}

/* Modal Content/Box */
.modal-content {
  background-color: inherit;
  color: inherit;
  margin: 15% auto; /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 80%; /* Could be more or less, depending on screen size */
}

/* The Close Button */
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  text-decoration: none;
  cursor: pointer;
}

code1 {
  padding: 20px;
  font-size: .9em;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  white-space: pre;
  line-height: 100%;
  background-color: #f9f9f9;
  border-radius: 5px;
  border: 1px solid #ececec;
  letter-spacing: -3px;
  overflow-x: auto;
  overflow-y: auto;

}

code{

display: block;
overflow-x: auto;

}

table{

border-collapse: collapse;
border-spacing: 0;
display: block;
overflow-x: auto;

}

  .stickyshare {
    text-align: center;
    position: fixed;
    top: 50%;
    left: 8%;
  }

  .rotate {
    display: flex;
    margin-top: 0;
    margin-bottom: 40px;
    margin-left: 0;
    margin-right: -20px;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
    -webkit-transform-origin: 50% 100%;
    -ms-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
  }

.d-none {
  display: none!important;
}

.footer {

bottom: 5px;
position: relative;

}

/* The progress bar (scroll indicator) */ .progress-bar {

  position: fixed;
  top: 0%;
  left: 0%;
  height: 6px;
  background: hotpink;
  width: 0%;
}

.theme-options {

border-radius: 5px;
margin-top: 5px;
margin-bottom: 5px;

}

blockquote {

margin: 0;  
padding-left: 1.4rem;  
border-left: 2px solid black;

}