/*border around the whole page*/
html {
    border-style: solid;
    border-color: #43b1fa;
    border-width: 12px;
}


div.container {
    width: 70%;
    margin: auto;
/*        border: 1px solid gray;*/
}


/* yeah that's fine but you need to have a replacement menu if you're gonna hide the main one */
/*@media only screen and (max-width: 900px){*/
/*    make the content full width at less than Xpx */
/*    div.container{*/
/*        width: 100%;*/
/*    }*/
/*    hide the nav bar*/
/*    nav {*/
/*        display: none;*/
/*    }*/
/*}*/

body {
    font-family: Inter, Geneva, "Droid Sans", sans-serif;
    margin: auto;
}

/* alternating table rows */
th {
    text-align: center;
    font-weight: bold;
/*
    text-decoration: underline;
    border-style: solid;
    border-bottom: solid;
*/
    border-width: 1px;
    background: whiteSmoke;
}
tr:nth-child(odd) {background: #FFF;}
tr:nth-child(even) {background: whiteSmoke;}



nav {
    background-color: rgba(234, 248, 249, 0.6);
    border-radius: 10px;
    font-size: 14px;
    float: left;
    max-width: 150px;
    margin-right: 20px;
    margin-bottom: 20px;
    margin-top: -20px;
    padding: 0.5em;
/*  some jazz to write only the right side edge (turned off once the div had a background color to set it apart)
    border-style: solid;
    border-width: 1px;
    border-right-color: gray;
    border-left-style: none;
    border-top-style: none;
    border-bottom-style: none;
*/
}

nav ul {
    list-style-position: outside;
    list-style-type: none;
    padding-left: 5px;
    text-indent: -5px ;
}

nav li {
    padding-bottom: 0.8em;
    padding-left: 0.5em;
}

/*rules for all code*/
code {
    font-family: Menlo, Consolas, "Courier New", Courier, "Liberation Mono", monospace; /*stolen from Jekyll's documentation site */
    font-size: 0.9em;
    background-color: rgba(0,0,0,0.05); 
    border-radius: 3px;
    padding: 3px;
}

/*but do not background shade code that the highligher is styling */
.language-c * {
    background-color: white; 
    padding: 0px;
}

/*highlighted blocks of code are indented*/
pre.highlight {
    margin-left: 3em;
}

.mono {
    font-family: monospace;
}

img {
    width: 80%;
    display: block;
    margin: auto;
}

img.cc {
    width: auto;
}

img.thumb {
    width: 150px;
/*    float: left;*/
/*    above made the text wrap around the image reasonably, but then following images or paragraphs would also creep up in a bad way*/
    padding: 5px;
}


img.small{
    width: 20%;
}

img.medium{
    width: 40%;
}

img.full{
    width: 100%;
}

img.float{
    display: inline;
}

.post-title {
    text-align: center;
    font-size: 1.75em;
}

h1{font-size: 2em;}
h2{font-size: 1.5em;}
h3{font-size: 1.17em;}

#blink{
    animation:blinkingText 0.8s infinite;
}

@keyframes blinkingText{
    0%{     color: #000;    }
    49%{    color: transparent; }
    50%{    color: transparent; }
    99%{    color:transparent;  }
    100%{   color: #000;    }
}

#blink1 {
    display: inline;
    color: inherit;
    animation: blink1 1s steps(1) infinite;
    -webkit-animation: blink1 1s steps(1) infinite;
}

@keyframes blink1 { 50% { color: transparent; } }
@-webkit-keyframes blink1 { 50% { color: transparent; } }

#blink2 {
    display: inline;
    color: transparent;
    animation: blink2 1s steps(1) infinite;
    -webkit-animation: blink2 1s steps(1) infinite;
}

@keyframes blink2 { 50% { color: #000; } }
@-webkit-keyframes blink2 { 50% { color: #000; } }


/* opacity of un-blinked text or image */
:root {
    --blinking-opacity: 0.2;
}

#blink3 {
    display: inline;
    color: inherit;
    animation: blink3 1s steps(1) infinite;
    -webkit-animation: blink3 1s steps(1) infinite;
}

@keyframes blink3 { 
    0% { opacity: 1; } 
    50% { opacity: var(--blinking-opacity); }
}
@-webkit-keyframes blink3 {
    0% { opacity: 1; } 
    50% { opacity: var(--blinking-opacity); }
}

#blink4 {
    display: inline;
    color: inherit;
    animation: blink4 1s steps(1) infinite;
    -webkit-animation: blink4 1s steps(1) infinite;
}

@keyframes blink4 { 
    0% {opacity: var(--blinking-opacity); }
    50% { opacity: 1; }
}
@-webkit-keyframes blink 4{
    0% {opacity: var(--blinking-opacity); }
    50% { opacity: 1; }
}



@media screen and (max-width: 600px) {
    body {
        width:100%;
    }
    
    img {
        width: 100%;
    }
}