:root {
    --background: #fafdff; /*#3DE380*/
    --text: #222222; /*#287566 #0f5b38*/
    --link: #0000FF;
/*    --tags: #ccddff;*/
    --tags: #777777;
    --tagFont: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
}

html {
    scroll-behavior:smooth;
}

h2, h3 {
    margin-bottom:0;
}

body {
    background:var(--background);
    width:100%;
    color:var(--text);
}

#site-container {
    width:100%;
    max-width:1050px;
    padding:0!important;
}

.main-block {
    max-width:700px;
    margin-left:auto;
    margin-right:auto;
} 

.row {
    width: 100%;
    padding: 0;
    margin: 0;
}

.left-tag, .right-tag {
/*    color:#d3dbe3;*/
    color:var(--tags);
    font-family:var(--tagFont);
    font-size:70%;
}


.left-tag p {
    text-align:right!important;
    margin-right:1rem;
/*    color:#d3dbe3;*/
/*    color:var(--tags);*/
}

.right-tag p {
    margin-left:1rem;
    margin-right:auto;
/*    color:#d3dbe3;*/
/*    color:var(--tags);*/
}

.paragraph .left-tag p {
    padding-top:0.25rem;
}

.top-header .left-tag, .top-header .right-tag {
    padding-top:0.8rem;
}



.col-6.col-sm-8, .left-tag, .right-tag, .col-8.col-sm-8 {
    padding-left:0;
    padding-right:0;
}

.paragraph .right-tag {
    -ms-flex-item-align:end!important;
    align-self:flex-end!important;
    margin-bottom:0.2rem;
}


.top-header {
    margin-top:12.6vh;
}

.header {
    margin-top:7rem;
}

.sub-header {
    margin-top:3rem;
}

.paragraph {
    margin-top:1rem;
}

.end {
    margin-bottom:50vh;
}


h1 {
    margin-bottom:0;
}


span.headerone {
    position:relative;
    display:inline-block;
}

span.headerone:before {
    content:'';
    position:absolute;
    bottom:-3px;
    left:0;
    width:100%;
    height:5px;
/*    background:#003B33;*/
    background:var(--link);
}


h3 {
    font-size:1.6rem;
}

.text-block {
    font-size:1.1rem;
    line-height:1.6;
    margin-bottom:0;
}

.text-block a, .text-block a:visited {
    color:var(--link);
    text-decoration:underline;
}


.sticky-top { 
    top: 13.6vh; 
}


ul {
    padding-left:0;
    font-size:1.1rem;
    font-weight:600;
}


ul a, ul a:visited, ul a:hover {
    color:inherit;
}


#onhover {
    display:none;
}

.img-container:hover img#initial {
  display: none;
}
.img-container:hover img#onhover {
  display: block;
}



.sub-item a {
    font-weight:400;
}

.link-left-tag, .link-right-tag {
    font-weight:400;
    font-family:var(--tagFont);
    font-size: 70%;
/*    color:#d3dbe3;*/
    color:var(--tags);
    
}

.link-left-tag {
    margin-right:1rem;
}

.link-right-tag {
    margin-left:1rem;
}



@media screen and (min-width: 1300px) {
    
    #site-container {
        transform: translate(-4vw);
    }
    
}

@media screen and (max-width: 500px) {

    .left-tag p {
        margin-right:0.2rem;
    }
    
    .right-tag p {
        text-align:start;
        margin-right:0.4rem;
    }

    
    .col-8.col-sm-8 {
        padding-left:0.2rem;
    }
    
    .end {
        margin-bottom:20vh;
    }
    
    h1, span.headerone {
        font-size:8.4vw;
    }
    
    h2 {
        font-size:1.6rem;
    }
    
    
    h3 {
        font-size:1.4rem;
    }
    
    img {
        max-width:35vw;
        max-height:35vw;
    }
    
    p.text-block {
        font-size:1rem;
    }
    
    .img-end {
        margin-left:8px!important;
    }
    
    .main-block {
        transform: translate(-3vw);
    }
}

code {
    color: var(--text);
    font-family:var(--tagFont)!important;
    border: 1px solid var(--tags);
    border-radius:4px;
    padding-top:2px;
    padding-bottom:2px;
    padding-left:4px;
    padding-right:4px;
    white-space: nowrap;
}


@media (prefers-color-scheme: dark) {

    
:root {
    --background: #1c1f22;
    --text: #dddddd; 
    --link: #00ed93; 
    --tags: #6f7078; 
/*    --tags: rgba(77, 86, 246,.25);*/
}

img {
    border: 1px solid var(--text);
}
    
}