mat2-web/static/style.css

@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 400;
  src: local('Raleway'), local('Raleway-Regular'), url(raleway-ext.woff2) format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 400;
  src: local('Raleway'), local('Raleway-Regular'), url(raleway.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}

.flashes {
	text-align: center;
	border: 1px solid #1EAEDB;
}

footer {
	width: 100%;
	height: 1%;
	text-align: center;
}

a {
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

li {
	margin-bottom: 0;
}

details > summary:before {
	content: "▶ ";
}
details[open] > summary:before {
	content: "▼ ";
}

.fakelink {
	color: #1EAEDB;
}
.fakelink:hover {
	text-decoration: underline;
}

.hover {
	background-color: #f1f1f1;
}

.main-header {
	background: #f4f7fb;
	width: 100%;
	height: 5rem;
	margin-bottom: 5rem;
}

.logo {
	margin-top: 2rem;
	height: 7rem;
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 7rem;
}

.uk-button-primary, .uk-alert {
	border-radius: 3px;
}

.shadowed-box {
	box-shadow: 0 0 7px 1px rgba(223,215,215,0.75);
    padding: 1rem;
    margin-bottom: 1rem;
    border-radius: 3px;
	width: 50vw;
	position:relative;
}

.info-link {
	position:absolute;
    right: 10px;
    bottom: 10px;
	border-radius: 50%;
	border: none;
	padding: 6px;
	display: flex;
	align-items: center;
  	justify-content: center;
	background-color: #A6C8F1;
	width: 10px;
	height: 10px;
	font-size: 10px;
	color: #FFFFFF;
}


.uk-badge {
	background-color: #99C1F1;
	padding: 15px;
	margin: 5px;
}


div pre[class*="language-"] {
  display: inline-block;
  padding-right: 10em;
  padding-top: 3rem;
  border-radius: 6px;
  background-image: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" width="54" height="14" viewBox="0 0 54 14"><g fill="none" fillRule="evenodd" transform="translate(1 1)"><circle cx="6" cy="6" r="6" fill="%23FF5F56" stroke="%23E0443E" strokeWidth=".5" /><circle cx="26" cy="6" r="6" fill="%23FFBD2E" stroke="%23DEA123" strokeWidth=".5" /><circle cx="46" cy="6" r="6" fill="%2327C93F" stroke="%231AAB29" strokeWidth=".5" /></g></svg>');
  background-repeat: no-repeat;
  background-position: 16px 16px;
  box-shadow: 5px 5px 15px 0px rgba(50, 50, 50, 0.75);
}

/**
 * okaidia theme for JavaScript, CSS and HTML
 * Loosely based on Monokai textmate theme by http://www.monokai.nl/
 * @author ocodia
 */

code[class*="language-"],
pre[class*="language-"] {
	border: black;
	color: #f8f8f2;
	background: none;
	text-shadow: 0 1px rgba(0, 0, 0, 0.3);
	font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
	text-align: left;
	white-space: pre;
	word-spacing: normal;
	word-break: normal;
	word-wrap: normal;
	line-height: 1.5;

	-moz-tab-size: 4;
	-o-tab-size: 4;
	tab-size: 4;

	-webkit-hyphens: none;
	-moz-hyphens: none;
	-ms-hyphens: none;
	hyphens: none;
}

/* Code blocks */
pre[class*="language-"] {
	padding: 1em;
	margin: .5em 0;
	overflow: auto;
	border-radius: 0.3em;
}

:not(pre) > code[class*="language-"],
pre[class*="language-"] {
	background: #272822;
}