style.css

@import url('https://fonts.googleapis.com/css?family=Josefin+Sans:300,400,600');

* {
	box-sizing: border-box;
}

body {
	padding: 0;
	margin: 0;
	font-family: 'Josefin Sans', sans-serif;
	background-color: #2980b9;
}

h1 {
	color: #b0d6ef;
	font-size: 24px;
}

.nav {
	background-color: #338ac3;
	margin-top: 0;
	margin-bottom: 20px;
}

.nav ul {
	display: flex;
	padding: 0;
	margin: 0;
}

.nav li {
	list-style: none;
}

.nav li a {
	color: #b0d6ef;
    text-decoration: none;
    display: block;
    padding: 15px 15px;
}

.nav li a:hover,
.nav li.active a {
	background-color: #3d96d0;
}

li a.nav-item-icon {
    background-size: 16px;
    background-position: 16px 13px;
    padding-left: 40px;
    background-repeat: no-repeat;
}

.bugicon {
	background-image: url('data:image/svg+xml, %3Csvg aria-hidden="true" data-prefix="fas" data-icon="bug" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="svg-inline--fa fa-bug fa-w-16 fa-3x"%3E%3Cpath style="fill:%23b0d6ef" d="M511.988 288.9c-.478 17.43-15.217 31.1-32.653 31.1H424v16c0 21.864-4.882 42.584-13.6 61.145l60.228 60.228c12.496 12.497 12.496 32.758 0 45.255-12.498 12.497-32.759 12.496-45.256 0l-54.736-54.736C345.886 467.965 314.351 480 280 480V236c0-6.627-5.373-12-12-12h-24c-6.627 0-12 5.373-12 12v244c-34.351 0-65.886-12.035-90.636-32.108l-54.736 54.736c-12.498 12.497-32.759 12.496-45.256 0-12.496-12.497-12.496-32.758 0-45.255l60.228-60.228C92.882 378.584 88 357.864 88 336v-16H32.666C15.23 320 .491 306.33.013 288.9-.484 270.816 14.028 256 32 256h56v-58.745l-46.628-46.628c-12.496-12.497-12.496-32.758 0-45.255 12.498-12.497 32.758-12.497 45.256 0L141.255 160h229.489l54.627-54.627c12.498-12.497 32.758-12.497 45.256 0 12.496 12.497 12.496 32.758 0 45.255L424 197.255V256h56c17.972 0 32.484 14.816 31.988 32.9zM257 0c-61.856 0-112 50.144-112 112h224C369 50.144 318.856 0 257 0z" class=""%3E%3C/path%3E%3C/svg%3E');
}

.container {
	max-width: 1140px;
	margin: auto;
}

.row {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

.row > div {
	flex: 1;
	background-color: #338ac3;
	margin-right: 20px;
	padding: 20px;
	width: 33.33%;
}

.row > div:last-child {
	margin-right: 0;
}

p,
label span {
	display: block;
	color: #b0d6ef;
	margin: 0 0 15px 0;
	line-height: 1.4em;
}

a {
	color: #9fd3f5;
}

.display-block {
	display: block;
}

.cssreadysvg {
	width: 100%;
	height: 400px;
    border-left: 5px solid #3498db;
    background: #2980b9;
    padding: 10px;
    overflow: auto;
    color: #b0d6ef;
}

.svgdisplay div {
	width: 100%;
    height: 340px;
    margin: auto;
    display: block;
    background-repeat: no-repeat;
    background-position: center;
    background-color: #2980b9;
      background-size: 85% 100%;
}

textarea {
	width: 100%;
    resize: none;
    border: 0;
    border-left: 5px solid #3498db;
    background: #2980b9;
    padding: 10px;
    color: #b0d6ef;
}

textarea:focus {
	border-color: #5cb0e8;
	outline: none;
}

.rawsvgcode {
	height: 400px;
}

.footnote {
	width: 100%;
	margin-top: 20px;
	text-align: center;
}

.footnote p {
	margin: 0;
}

.max-width-one-third {
	max-width: 33.33%;
}

.btn {
	background: #4ba3dc;
    border: 0;
    padding: 16px 15px 13px;
    font-size: 15px;
    color: #b0d6ef;
    font-family: 'Josefin Sans', sans-serif;
    margin-top: 20px;
    width: 100%;
}

.btn:hover {
	background: #2980b9;
	cursor: pointer;
}

.cssreadysvgoninput {
	opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}


.thik-scrollbar::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.thik-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(1,1,1,.4);
    border-radius: 20px;
}

.thik-scrollbar::-webkit-scrollbar-track {
    background: rgba(256,256,256,.6);
    border-radius: 20px;
}