*, :after, :before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

body {
    background-color:#15202b;
    color:rgb(247, 249, 249);
    margin:auto;
    width:100%;
    max-width:800px;
    font-family: Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica Neue, Arial, sans-serif;
    padding:45px;
    border-left: 3px solid rgb(139, 152, 165);
    overflow-x:hidden;
}

a {
	color:#00cc66;
	xtext-decoration:none;
} 
a:hover { color:#7affbd; } 
a:visited { xcolor:#00cc66; } 
a:focus { color:#d4d365; } 
a:active { color:#d4d365; } 

hr { border-color: rgb(102, 102, 102); }
p {
    xpadding:50px;
}

h1 {
    width:90%;
}

h2 {
    margin-top: 30px;
}

code {
    background-color:rgba(0, 0, 0, 0.5);
    padding:5px;
}

img {
    width:100%;
    max-width:800px;
	display:block;
    box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.8);
    margin:5px 0px 5px 0px;
}

img.skill-icon {
    xborder:1px solid grey;
    width:auto;
    height:20px;
    aspect-ratio:1/1;
    display:inline-block;
    margin:0px;
    xmargin-top:20px;
    box-shadow:none;
}

blockquote {
    xpadding:-50px!important;
    margin:0px;
}

.author-info {
    border-radius:5px;
    padding:10px;
    display:inline-flex;
    align-items: center;
    xfont-family:consolas, monospace;
    color:rgb(139, 152, 165);
    xcolor: rgb(0, 186, 124);
    xfont-size:1em;
    xtext-size-adjust: inherit;
}

.author-info > .left {
    display:flex;
    flex-direction: column;
}

.author-info > .left > .author {
   align-self: end;
}

.avatar {
   
    border-radius:100px;
    width:50px;
    height:50px;
    aspect-ratio:1/1;
    margin-left:10px;
    background-color:black;
    border-color:lime;
    background-image:url('https://i.imgur.com/F2wfEys.jpeg');
    background-position:center;
    background-size:cover;
    ximage-rendering: pixelated;
    xbox-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.5);
    
}

@media (max-width: 720px) {
    body {
        width:100vw;
        max-width:100vw;
        padding:5px;
        overflow-x:hidden;
        border-left: none;
    }

    img {
        width:90vw;
        max-width:90vw;
        box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.8);
        margin:auto;
    }

    h1 {
        width:100%;
    }

    p {
        padding:5px;
    }

    .author-info {
        font-size:1em;
    }

    .avatar {
        width:20vw;
        height:20vw;
        
    }

    blockquote {
        padding:-50px!important;
        margin:0px;
    }
}