@import "../libs/highlight/sawyer-light.css" screen;
@import "../libs/highlight/sawyer-dark.css" screen;
/* @import "../libs/highlight/styles/androidstudio.css" screen; */
/* @import "../libs/highlight/styles/atom-one-dark.css" screen; */


body {
	font-size: 15px;
	font-family: Roboto-Light, Segoe UI, sans-serif;
	line-height: 1.7;
}

/***************************************************
FONT
/***************************************************/
@font-face { font-family: Roboto-Light;   src: url(../fonts/Roboto/Roboto-Light.ttf); }
@font-face { font-family: Roboto-Regular; src: url(../fonts/Roboto/Roboto-Regular.ttf); }
@font-face { font-family: Roboto-Medium;  src: url(../fonts/Roboto/Roboto-Medium.ttf); }
@font-face { font-family: Consolas;       src: url(../fonts/Consolas.ttf); }

/***************************************************
LINK
/***************************************************/
a {
	text-decoration: none;
	color: rgb(var(--color-violet-medium));
}
a:hover {
	text-decoration: underline;
	text-underline-offset: 5px;
	text-decoration-thickness: 1px;
}
a.link {
	position: relative;
}
a.link::after {
	content: '';
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	border-bottom: 1px solid rgb(var(--color-violet-medium));
}

/***************************************************
CODE
/***************************************************/
pre {
    tab-size: 2;
    margin: 10px 0px;
}
code {
	padding: 10px 25px 25px 25px !important;
    font-size: 14px;
    position: relative;
	border-radius: 3px;
}
code {
	--color: var(--color-brown-light);
	border: 1px solid rgba(var(--color), .4);
	background: rgba(var(--color), .1) !important;
}
code.border {
	--color: var(--color-sea-green-dark);
	border: 1px solid rgba(var(--color), .2);
	border-left: 4px solid rgba(var(--color), .2);
	background: rgba(var(--color), .1) !important;
}
code.step {
	--color: var(--color-green-light);
	border: 1px solid rgba(var(--color), .4);
	border-left: 4px solid rgba(var(--color), .2);
	background: rgba(var(--color), .15) !important;
}
code.none {
	border: 1px solid rgba(var(--color-black), .1);
	background: none !important;
}
code.dark {
	background: rgba(var(--color-blue-gray-dark, .7)) !important;
}
code.red {
	--color: var(--color-pink);
	border: 1px solid rgba(var(--color), .4);
	border-left: 4px solid rgba(var(--color), .2);
	background: rgba(var(--color), .2) !important;
}

code.none u-code-title {
	display: none;
}

/***************************************************
IMAGE
/***************************************************/
img {
	border-radius: .25rem;
	box-shadow: var(--box-shadow);
}
img.center {
	margin: auto;
}
img.inline {
	display: inline-block;
}
img.img200 {
	width: 200px;
	height: 200px;
	object-fit: contain;
}
img.img-width300 {
	width: 300px;
}
img.img-width500 {
	width: 500px;
}
img.img-margin {
	margin-top: 25px;
	margin-bottom: 25px;
}

/***************************************************
TAGS
/***************************************************/
h1, h2, h3, h4, h5, h6 {
	font-family: Roboto-Medium;
	margin: 7px 0;
}
h1 {
	font-size: 23px;
	text-align: center;
}
h2 {
	margin-top: 0;
	margin-bottom: 20px;
	line-height: 1;
	font-size: 21px;
	color: rgba(var(--color-blue-gray-medium));
	border-bottom: 1px solid rgba(var(--color-gray-light));
}
h3 {
	font-size: 19px;
	color: rgba(var(--color-blue-gray-medium));
}
h4 {
	font-size: 17px;
	color: rgb(var(--color-blue-gray));
}
h5 {
	font-size: 15px;
	color: var(--color-black-lighter);
}
h6 {
	font-size: 15px;
	color: rgba(var(--color-blue-dark), .7);
	margin: 0;
	padding: 0;
}
em {
	color: rgb(var(--color-pink));
	font-style: normal;
	position: relative;
	font-family: Roboto-Regular;
}
em:after {
	content: '';
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	border-bottom: 1px dashed rgba(var(--color-pink), .7);
}
code em {
	font-family: inherit;
}
code.border em {
	color: #6232a8;
}
i {
	color: rgb(var(--color-gray-50));
}
s {
	text-decoration: none;
	color: rgb(var(--color-gray-50));
	font-weight: normal;
}
b {
	margin-top: 10px;
	font-weight: 600;
	color: rgba(var(--color-violet), .9);
}
u {
	text-decoration: none;
	position: relative;
}
u::after {
	content: '';
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	border-bottom: 1px solid rgb(var(--color-gray-30));
}

p {
	padding: 0 26px;
}
p.consolas {
	padding: 0;
	margin: 0 0;
	color: #f542e0;
	font-weight: bold;
	font-family: Consolas;
}
hr {
	height: 3px;
	margin: 15px 20px;
	border: none;
	border-radius: 10px;
	background-color: rgba(var(--color-gray-30), .3);
}
hr.small {
	width: 100px;
}
ul {
	list-style-type: circle;
}
summary {
	cursor: pointer;
	outline: none;
}
mark {
	background: none;
	color: blue;
}

strong {}
var {}
small {}
mark {}
dfn {}
cite {}
kbd {}

/***************************************************
TABLE
/***************************************************/
table {
	font-size: 14px;
	line-height: 1.3;
}
table td,
table th {
	vertical-align: top;
}
td, th {
	padding: 10px;
	border: 1px solid rgba(var(--color-gray-40), .4);
}
th {
	font-weight: 500;
	color: rgba(var(--color-black), .7);
	background-color: rgba(var(--color-brown-light), .3);
	font-family: Roboto-Medium;
}
table.even tr:nth-child(odd) {
	background-color: rgba(var(--color-gray-10));
}
table td.accent {
	background-color: rgba(var(--color-violet), .1);
	color: rgba(var(--color-black), .7);
	font-family: Roboto-Medium;
}
table.half-width td,
table.half-width th {
	width: 50%;
}
table tr.warn {
	background-color: rgba(var(--color-pink), .4);
}
table.max-width-700 {
	max-width: 700px;
}

/***************************************************
LISTS
/***************************************************/
.list-point, .list-num, .list-none, .list-comment, .list-accent, .list-flat {
	line-height: 1.7;
	font-size: 15px;
	margin: 0;
	margin: 10px 10px 10px 0;
	padding: 0;
}
.list-point li, .list-num li, .list-none li, .list-comment li, .list-accent li, .list-flat li {
	padding-bottom: 2px;
}
.list-point li:last-child, .list-num li:last-child, .list-none li:last-child, .list-comment li:last-child, .list-accent li:last-child, .list-flat li:last-child {
	padding-bottom: 0;
}

.list-point {
	list-style-type: none;
}
.list-point li::before {
    content: "\2022";
    color: rgb(var(--color-blue-dark));
    font-weight: bold;
    display: inline-block;
    width: 15px;
	font-size: 15px;
}
.list-none {
	list-style-type: none;
}
.list-comment {
	list-style-type: "💡 ";
	font-size: 15px;
	color: rgb(var(--color-gray-50));
	font-style: italic;
	padding-left: 22px;
}
.list-accent {
	list-style-type: disc;
	border-left: 2px solid rgb(var(--color-sea-green-light));
	box-shadow: var(--box-shadow-light);
	padding-left: 25px;
}
.list-flat {
	list-style-type: disc;
	margin: 0;
	padding: 0;
	padding-left: 15px;
}
.list-num {
	padding-left: 15px;
}


/***************************************************
COMMON
/***************************************************/
.span-accent {
	background-color: rgba(245, 212, 66, .5);
	border-radius: 5px;
	padding: 4px;
}
.text-center {
	text-align: center;
}

.badge-blue,
.badge-green,
.badge-lime,
.badge-orange,
.badge-red,
.badge-gray
 {
	font-size: 14px;
	font-weight: 700;
	min-width: 80px;
	padding: 6px 15px;
	text-align: center;
	border-radius: 3px;
	text-shadow: 0 1px 0 rgba(0,0,0,.1);
	font-family: sans-serif;
	color: #fff;
}
.badge-blue   { background-color: #61affe; }
.badge-green  { background-color: #49cc90; }
.badge-orange { background-color: #fca130; }
.badge-red    { background-color: #f93e3e; }
.badge-lime   { background-color: #50e3c2; }
.badge-gray   { background-color: #ababab; }

.code {
	font-family: Consolas;

	color: rgb(var(--color-blue-gray-medium));
	background-color: rgba(var(--color-brown-light), .4);

    /* background-color: #f0f1e1; */
    /* color: rgb(var(--color-orange)); */
}