$primary-background: #222; $link-colour: a0dfdf; $link-colour-hover: #669999;

body {

background-color: $primary-background;
color: #fff;

}

a {

color: $link-colour;

}

a:hover {

color: $link-colour-hover

}

.postBody img {

max-width: 100%;

}

.bg-dark {

background-color: $primary-background !important;

}

.jumbotron {

color: #000;
padding: 20px;

}

div.circle-avatar{

/* make it responsive */
max-width: 100%;
width:100%;
height:auto;
display:block;
/* div height to be the same as width*/
padding-top:100%;
/* make it a circle */
border-radius:50%;
/* Centering on image`s center*/
background-position-y: center;
background-position-x: center;
background-repeat: no-repeat;
/* it makes the clue thing, takes smaller dimension to fill div */
background-size: cover;
/* it is optional, for making this div centered in parent*/
margin: 0 auto;
top: 0;
left: 0;
right: 0;
bottom: 0;

}

.external-link-list h2.display-4, .post-list h2.display-4 {

font-size: 2rem;

}

.external-link-list i {

font-size: 2rem;

}

.external-link-list li {

list-style-type: none;
padding-bottom: 16px;

}

.external-link-list a {

position: relative;
top: -6px;
padding-left: 20px;

}