body{
    color: #444;
    font-family: sans-serif;
    background: whitesmoke;
    margin: 0px;
    overflow-y: scroll;
}
.content{
    margin: auto;

    margin-top :20px;
    margin-bottom: 20px;

    width: 1000px;
    /*max-width: 900px;     */
    text-align: center;
    /*margin: 20px;*/
}
.rightSideBar{
    /*max-width: 225px;*/
    width: 225px;
    background: white;
    box-shadow: 2px 2px 1px 1px lightgrey;
    border: 1px solid lightgrey;
}
.article, .title{
    /*max-width: 650px;*/
    /*width: 650px;*/
    padding: 5px;
    background: white;
    box-shadow: 2px 2px 1px 1px lightgrey;
    border: 1px solid lightgrey;
}
.left{
    padding-right: 5px;
}
.right{
    padding-left: 5px;
}
.title{
    margin-bottom: 15px;
    min-height: 75px;
}
.titleText{
    min-height: 75px;
    text-align: center;
    width: 100%;
    line-height: 75px;
}
.titleText td{
    vertical-align: middle; 
    
}
.titleText h1{
    display: inline;
}   
.titleText tr{
    vertical-align: middle; 
}
.logo{
width: 200px;
height: auto;
}
p{ text-align: left;}

.contact{
    font-size: 8pt;
}

.ramUsage{
    width: 100px;
    border: 1px solid grey;
    /*border-radius: 5px;*/
    position: relative;
}
.cpuUsage{
    width: 100px;
    border: 1px solid grey;
    /*border-radius: 5px;*/
    position: relative;
}
.progressbartd{
    padding: 5px;
    font-size: 10px;
    text-align: left;

}
.noshowcss{
    display: none;
    position: absolute;
}
ul{
    text-align: left;
    list-style-type: square;
}
.tablecontainer{
    width: 100%;
}
.contleft, .contright{
    width: 50%;
}
.contright h2{
    margin-top: 0px;
}
a{ color: #0099ff; text-decoration: none; }
a:hover{ color: darkblue }
.percent{
    margin: 0px;
}
.badges{
    text-align: center;
}


@media(prefers-color-scheme: dark){
    html{
        background: #282828;
    }
    body{
        color: #AA8 !important;
        background: #282828 !important;
    }
    .rightSideBar, .article, .title{
        background: #1e1f21 !important;
        box-shadow: 2px 2px 1px 1px #424242;
        border: 1px solid #424242;  
    }

    .logo {
        filter: invert(99%) sepia(4%) saturate(2282%) hue-rotate(3deg) brightness(70%) contrast(84%);
    }
    
    @media(max-width: 900px){
	body, html{
	background: #1e1f21 !important;
	}
    }
    
}

/*
@supports(max-width: 650px){
    .article, .title{
        width: auto;
        max-width: 650px;
    }
    .content{
        width: auto;
        max-width: 900px;
    }
    .rightSideBar{
        width: auto;
        max-width: 225px;
    }

}      
*/     

@media (max-width: 1000px){
    h1{
        padding: 25px;
        border-bottom: 2px solid grey;
    }
    body{
        margin: 0px;
        background: white;
    }
    h1{
        width: 100%;
        padding-left: 0px;
        padding-right: 0px;
    }

    .article, .title{
        width: auto;
        max-width: 650px;
    }
    .content{
        width: auto;
        max-width: 900px;
    }
    .rightSideBar{
        width: auto;
        max-width: 225px;
    }
    
    .rightSideBar{
    margin: 0px;
    background: white;
    border: 1px solid transparent;
    /*position: static;*/
    margin-top: 150px;
    max-width: 100%;
        text-align: center;
    /*border-bottom: 2px solid grey;*/
    box-shadow: 0px 0px 0px 0px transparent;
    }
    .article, .title{
        background: white;
        border: 1px solid transparent;
        box-shadow: 0px 0px 0px 0px transparent;
        max-width: 100%;
    }
    
    .left{
	    display:block;
    /*    position: absolute;*/
        width: 100%;
        /*top: 550px;*/
        left: 0px;
        padding: 0px;
    }
    .right{
        /*position: absolute;
        top: 0px;
        left: 0px;*/
	display:block;
        width: 100%;
        padding: 0px;
    }
    .article{
        display: block;
    }
    h1{
        /*position: fixed;*/
        font-size: 2em;
        top: 0px;
        left: 0px;
        margin: 0px;
        z-index: 999;
	width: 100%;
	position: absolute;
    }
    .titleText{
	line-height: normal;
    }
    .rightSideBar h6{
        display: none;  
    }   
    .rightSideBar h2, .rightSideBar code{
        display: block;
        text-align: center;
        width: 100%;
        left: 0px;
    }
    img{
	max-width: 100%;
    }
    .logo{
    max-height: 200px;
    width: auto;
    }
    .projects h2{
        margin-top: 5px;
    }   
}


dd {
    text-align: left;
}

dt {
    text-align: left;
}

.mod {
    font-size: 0.75em;
    font-family: monospace;
}