pre {
	overflow-x: scroll;
	padding:  1rem;
  background-color: #112 !important;
}

code {
	overflow-wrap: anywhere;
}

p > code {
  background-color:  #f5f5ff;
  padding: 0.125rem 0.25rem 0.125rem 0.25rem;
}

.break-all {
	word-break: break-all;
}

html {
  background-color: #fff;
  color: #112;
}

a {
	color: rgb(94,92,230);
	text-decoration: none;
}

table {
  text-align: left;
}

td {
  vertical-align: top;
}

h1, h2, h3, h4, h5 {
  font-family:  times, serif;
}

.fill-yellow {
  fill: rgb(255,204,0);
}

.fill-white {
  fill: white;
}

.cursive {
	font-family: cursive;
}

.blue {
	color: rgb(88,86,214);
}

.bg-blue {
  background-color: rgb(88,86,214);
}

.orange {
  color: #FF9500;
}

.bg-orange {
  background-color: #FF9500;
}
.pink {
  color: rgb(255,45,85);
}
.secondary {
	color: #555;
}

.b--secondary {
  border-color: #eee;
}

.device-border {
  box-shadow: 0px 0px 22.4px #ddd;
  border-style: solid; 
  border-radius: 33.6px; 
  border-width: 11.2px;
  border-bottom-style: none;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-width: 0;
  border-color: #fff;
  background-color: rgb(242,242,246);
}

.device {
  max-width: 203px;
  width: 203px;
  height: 253px;
  padding-bottom: 4rem;
}

.device-boundary {
  height: 264px;
}

@media screen and (min-width: 30em) {
	.device-border {
	  box-shadow: 0px 0px 32px #ddd;
	  border-style: solid; 
	  border-radius: 48px; 
	  border-width: 16px;
	  border-bottom-style: none;
	  border-bottom-left-radius: 0;
	  border-bottom-right-radius: 0;
	  border-bottom-width: 0;
	  border-color: #fff;
	  background-color: rgb(242,242,246);
	}

	.device {
	  max-width: 290px;
	  width: 290px;
	  height: 362px;
	}

  .device-boundary {
    height: 378px;
  }
}

@media (prefers-color-scheme: dark) {
  html {
    background-color: #000;
    color:  white;
  }
  .device-border {
    border-color: #111;
    background-color: #000;
    box-shadow: none; 
  }
  .bg-near-white {
    background-color: #151515;
  }
  .b--secondary {
    border-color: #222;
  }
  .secondary {
    color: #aaa;
  }
  .black {
    color: #fff;
  }
  .bg-black {
    background-color: #fff;
  }
  .bg-black-90 {
    background-color: rgba(255,255,255,0.1);
  }
  .bg-white {
    background-color: #000;
  }
  .blue {
  	color:  rgb(94,92,230);
  }
  .bg-blue {
    background-color: rgb(94,92,230);
  }
  .orange {
    color:  #FF9F0A;
  }
  .fill-yellow {
    fill: rgb(255,214,10);
  }
  .pink {
    color: rgb(255,55,95);
  }
  a {
	color: rgb(94,92,230);
  }
  p > code {
    background-color:  #223;
  }
}