:root {
    --primary-color: #111;
    --secondary-color: white;
    --tertiary-color: #767676;
    --quartary-color: linen;
}

.bx--world {
  display: inline-block;
  width: 50px;
  height: 50px;
  color: green;
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10s10-4.486 10-10S17.514 2 12 2M4 12c0-.899.156-1.762.431-2.569L6 11l2 2v2l2 2l1 1v1.931C7.061 19.436 4 16.072 4 12m14.33 4.873C17.677 16.347 16.687 16 16 16v-1a2 2 0 0 0-2-2h-4v-3a2 2 0 0 0 2-2V7h1a2 2 0 0 0 2-2v-.411C17.928 5.778 20 8.65 20 12a7.95 7.95 0 0 1-1.67 4.873'/%3E%3C/svg%3E");
  background-color: currentColor;
  -webkit-mask-image: var(--svg);
  mask-image: var(--svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}
.bx--rss {
  display: inline-block;
  width: 24px;
  height: 24px;
  color: orangered;
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M19 20.001C19 11.729 12.271 5 4 5v2c7.168 0 13 5.832 13 13.001z'/%3E%3Cpath fill='%23000' d='M12 20.001h2C14 14.486 9.514 10 4 10v2c4.411 0 8 3.589 8 8.001'/%3E%3Ccircle cx='6' cy='18' r='2' fill='%23000'/%3E%3C/svg%3E");
  background-color: orangered;
  -webkit-mask-image: var(--svg);
  mask-image: var(--svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}
.logos--mastodon-icon {
  display: inline-block;
  width: 256px;
  height: 274px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 274'%3E%3Cpath fill='%233088d4' d='M249.874 164.085c-3.753 19.307-33.613 40.438-67.908 44.533c-17.883 2.134-35.49 4.095-54.266 3.234c-30.705-1.407-54.933-7.33-54.933-7.33c0 2.99.184 5.836.553 8.498c3.992 30.302 30.047 32.118 54.728 32.964c24.912.852 47.094-6.142 47.094-6.142l1.023 22.521s-17.425 9.357-48.465 11.078c-17.116.94-38.369-.43-63.122-6.983c-53.686-14.21-62.92-71.436-64.332-129.502c-.43-17.24-.165-33.497-.165-47.094c0-59.375 38.903-76.779 38.903-76.779C58.6 4.074 92.259.286 127.25 0h.86c34.991.286 68.673 4.074 88.287 13.083c0 0 38.901 17.404 38.901 76.78c0 0 .488 43.807-5.425 74.222'/%3E%3Cpath fill='%23fff' d='M209.413 94.469v71.894H180.93V96.582c0-14.71-6.19-22.176-18.57-22.176c-13.687 0-20.547 8.857-20.547 26.37v38.195h-28.315v-38.195c0-17.513-6.862-26.37-20.55-26.37c-12.379 0-18.568 7.466-18.568 22.176v69.78H45.897V94.47c0-14.694 3.741-26.37 11.256-35.009c7.75-8.638 17.898-13.066 30.496-13.066c14.575 0 25.613 5.602 32.911 16.808l7.095 11.893l7.096-11.893c7.296-11.206 18.334-16.808 32.911-16.808c12.597 0 22.745 4.428 30.496 13.066c7.513 8.639 11.255 20.315 11.255 35.009'/%3E%3C/svg%3E");
}

/* Reset some default browser styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'PT Serif','DejaVu Serif','Cantarell', serif;
}

html {
    height: 100%; /* Making sure it stretches to viewport height */
}
body {
	
    height: 100%; /* Making sure it stretches to viewport height */
    display: flex;
    flex-direction: column; /* Stack children vertically */
    background-color: var(--secondary-color);
    color: var(--primary-color);
    max-width: 700px;
    min-width: 40%;
    margin: auto;
    
}
main {
    flex: 1; /* Take up all remaining content so footer is always at the bottom of the screen */
    text-align: left;
    padding-top: 2em;
    
}
h1 {
    padding: 2rem;
    text-align: center;
}
h2 {
    text-align: center;
    padding: 1rem 2rem;
}
h3,h4 {
    padding-left:1rem;
}

a:hover{
    text-decoration: underline dotted var(--tertiary-color);
}
a.post-date-link{
    float:right;
    font-size: 0.7rem;
}
a.card {
    display: block;
}
p,ul {
    padding: 1rem;
}
li ul {
    margin-top: -2rem;
    margin-left: 1rem;
}

div.post {
    margin-bottom: 1rem;
    /*border-radius: 2rem;
    box-shadow: 0rem 0.2rem  var(--tertiary-color);*/
}

nav {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    background-color: var(--secondary-color);
}
nav a{
    display: inline-block;
    padding: 2rem;
    text-decoration: none;
    /*transition: all 0.5s ease;*/
    /*border-radius: 12px; */
}
nav a.logo {
    padding: 0.5rem;
    align-self: center;
    margin-right: auto;
}
a, a:visited {
    color: var(--primary-color);
}
nav a:hover {
    background-color: var(--tertiary-color);
}
footer {
    color: var(--tertiary-color);
    padding: 1rem;
}
.site-links {
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin: auto;
    padding: 6px;
}
.site-links ul {
    margin: 2rem;
    list-style-type: none;    
}
.disclaimer {
    text-align: center;
}
hr {
    margin: 0% 35%;
    border: 0.1rem var(--tertiary-color) inset
}

@media all and (max-width: 768px) {
    nav {
	flex-flow: column wrap;
	height: 5rem;
	margin-top: 1rem;
	
    }
    
    nav a {
	margin: auto 0 auto auto;
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
	justify-content: right;
    }
    
}