@import url('https://fonts.googleapis.com/css?family=Roboto+Mono:100,100i,300,300i,400,400i,500,700|Roboto:100,100i,300,300i,400,400i,500,700&display=swap');


* {
    -webkit-box-sizing: border-box;
            box-sizing: border-box; 
    margin: 0;
    line-height: 150%;
}

body {
    margin: 0;
	font-family: 'Roboto', sans-serif;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Roboto Mono', monospace;
    font-style: normal;
    font-weight: normal;
    letter-spacing: normal;
    line-height: normal;
    color: #404040;
    font-weight: 400;
}
h2 {
    margin: 1rem 0 .5rem 0;
}
h3 {
    margin: .9rem 0 .45rem 0;
}
h4 {
    margin: .8rem 0 .4rem 0; 
}
h5 {
    margin: .7rem 0 .35rem 0;     
}
h6 {
    margin: .6rem 0 .3rem 0; 
}

.top-bar {
    display: flex;
    justify-content: flex-end;
    background-color: #284c6d;
    color: #a0c851;
    position: fixed;
    width: 100%;
    height: 50px;
    margin-top: -50px;
}
.top-bar__item {
    margin: auto 0;
}
.top-bar__item {
    padding-right: 1rem;
}
.top-bar__item--a{
    color: white;
    text-decoration: none;
    font-size:1rem;
}
.top-bar__item--a:hover {
   color: #c7d9ea;
}
.wrap {
    margin-top: 50px;
    z-index: 100;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
}

.nav {
    padding: 1rem;
    background: #D7E8D5;
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    min-height: calc(100vh - 50px);
}
.nav > ul > li > a {
    font-weight: 300;
}
.content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-flex: 5;
        -ms-flex: 5;
            flex: 5;
}
.main {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    background: #E6E6E6;
}
.main__article {
    -webkit-box-flex: 4;
        -ms-flex: 4;
            flex: 4;
}
.main__article--header {
    font-family: 'Roboto Mono', monospace;
    font-size: .82rem;
    color: #305b82;
    padding-bottom: 1rem;
    margin: 2rem 0;
    border-bottom: 1px solid #a0c851;
}

.main__article--h1 {
    display: inline-block;
    line-height: 2.5rem;
    font-size: 2.4rem;
    text-transform: capitalize;
}
.main__article--a {
    color: #4581ba;
    text-decoration: none;
}
.header {
    padding: 1rem;
    background: #a0c851; /*zelena*/
}
.header__item:not(:last-child) {
    margin-right: 1rem;
}
.header__item {
    
}
.header__item--a,
.footer__item--a {
    color: #ffffff;
    text-decoration: none;
}
.header__item--a:hover,
.footer__item--a:hover {
   color: #376895;
}
.footer {
    padding: 1rem;
    background: #a0c851; /*zelena*/  
}
.footer__item:not(:last-child) {
    margin-right: 1rem;
}
.footer__item {
    
}
#wikitext {
    margin: 1rem;
}
#wikitext ul {
    margin-bottom: 1rem;
}
#wikitext > ul > li > a,
#wikitext > div > p  {
    font-weight: 300;
}
#text {
    width: 100%;
    height: 50vh;
}
.odlomak,
.paragraph {
	background: #d2e7b1;
    border: 1px dotted #737373;
	padding: .3rem;
	margin-bottom: .3rem;
}

.napomena,
.remark {
    background: #FFFFCE;
    border: 1px dotted #404040;
    padding: .3rem;
    margin-bottom: .3rem;
}
.upozorenje,
.warning {
	background: #f6d5d5;
    border: 1px dotted #737373;
    padding: .3rem;
    margin-bottom: .3rem;
}
.blok-koda,
.code-block {
	background: #595959;
	color: #ffffff;
	font-family: 'Roboto Mono', monospace;
	font-weight: 300;
	border: 1px dashed #404040;
	font-size: .9rem;
	padding: 1rem;
	margin: 0.4rem;
}
.code-block > h1,
.code-block > h2,
.code-block > h3,
.code-block > h4,
.code-block > h5,
.code-block > h6 {
  font-weight: 400;
}


.code pre {
   display: block;
   font-family: 'Roboto Mono', monospace;
   font-weight: 300;
   white-space: pre;
   background: #dae6f1;
   border: 1px dashed #404040;
   font-size: .9rem;
}
#wikitext {
    color: #404040;
}
.wikilink,
.selflink {
    color: #4b611f; /*tamno zelena*/
    text-decoration: none;
    font-size:1rem;    
}
.wikilink:hover,
.selflink:hover {
    color: #2d3a12;
}
.escaped  {
    font-family: 'Roboto Mono', monospace;
    font-size: 0.9rem;
    font-weight: 300;
	background: #595959;
	color: #ffffff;
    display: inline-block;
	width:auto;
    padding: 0.5rem;
    border: 1px solid #404040;
    margin: 0.4rem;
}
.urllink {
    text-decoration: none;
    color: #4581ba;
    font-weight: 400;
}
.urllink:hover {
    color: #376895;
}