.housing{
    margin: 0 auto;
    max-width:1024px;
    display:flex;
    flex-direction:row;
/*      border: #ff0 3px solid; */
}

.sideColumn{
/*      border: #0ff 1px solid; */
        min-width:min-content;
    width:20%;
    padding:5px;
    padding-top:0px;
    text-align:center;
    max-width:20%;
    min-width:20%;
}

.eyeBox{
    border:3px #ccc outset;
    height:149px;
    box-shadow: 5px 5px 5px #111;
    border-radius:3px;

}

.sideBox{
    background: #787878;
    background: linear-gradient(90deg, rgba(200, 200, 200, 1) 0%, rgba(255, 255, 255, 1) 50%, rgba(200, 200, 200    , 1) 100%);
    border: 3px #ccc outset;
    box-shadow: 5px 5px 5px #111;
    padding-top:5px;
    padding-bottom:5px;
    border-radius:3px;
}

.centerColumn{
   /* border: #ccc 3px outset; */
    min-width:min-content;
    width:60%;
    max-width:60%;
    min-width:60%;
}

.centerColumnSolo{
    min-width:min-content;
    width:60%;
    min-width:60%;
    max-width:60%;
/*     margin:auto; */
/*     border: #0ff 3px solid; */
}


.titleBox{
    text-align:center;
    border: #ccc 3px inset;
    background: linear-gradient(0deg, rgba(37,37,37,1) 0%, rgba(0,0,0,1) 100%);
    height:102px;
    max-height:102px;
    border-radius:3px;
    border-radius: 3px 3px 0 0;
}

.centerContent {

    background:#000000;
    border: #ccc 3px inset;
    padding:15px;
    color: #fff;
    box-shadow: 5px 5px 5px #111;
    border-radius:3px;
    overflow:hidden;
    flex-grow:0;
}

.centerContentSolo{
    background:#000000;
    border: #ccc 3px inset;
    padding:15px;
    color: #fff;
    box-shadow: 5px 5px 5px #111;
    border-radius:3px;
    overflow:hidden;
    flex-grow:0;
    margin:auto;
}

.welcomeBox{
    text-align:center;


}

.updateBox{
    text-align:left;
    border:outset #ccc;
    color:#000;
    background: #787878;
    background: linear-gradient(90deg, rgba(200, 200, 200, 1) 0%, rgba(255, 255, 255, 1) 50%, rgba(200, 200, 200    , 1) 100%);
    height:100px;
    overflow-y:scroll;
    padding:5px;
    box-shadow: 5px 5px 5px #111;
    border-radius:3px;
}


figure{
    color:#000;
    text-align:center;
    margin:5px;
    border:3px #ccc solid;
    background:#ccc;
    max-width:min-content;
}

h2, h4 {
    text-align:center;
    margin: 0;
}

html {
    font-family: 'Monospace';
    font-family: 'Courier New';
}

.comment{
    font-style:italic;
    font-style:oblique;
    color:#ccc;
}

.smiley{
    display:inline;
    height:1rem;
}

.imgButton{
    width:88px;
    height:31px;
    display:inline-block;
    vertical-align:bottom;
    background-origin:border-box;
    background-position:center;
    background-attachment:local;
    background-repeat: no-repeat;
}

.siteButton{
    width:88px;
    height:31px;
    display:inline-block;
    vertical-align:bottom;
}

.siteButton:hover{
    filter: contrast(150%)
}

.navButton {
    text-align:center;
    border:3px outset #ccc;
    background: #000;
    color:#fff;
    margin-top:3px;
    margin-bottom:3px;
    font-weight:bold;
    box-shadow: 5px 5px 5px #111;
    padding: 1rem;
    border-radius:3px;
    font-size:1em;
}

.navButton:hover {
    border:outset #fff;
    box-shadow: 5px 5px 5px #333;
}

.navButton:active{
    border:inset #fff;
    box-shadow:none;
}

.bottomStuff{
    text-align:center;
    color:#ccc;
}

.index{
    width:100%;
    max-width:fit-content;
    max-height:fit-content;
    min-width:fit-content;
    min-height:fit-content;
    padding:1px;
    margin-right:15px;
    background:#333;
}

.indexButton{
    padding:3px;
    border:1px outset #ccc;
    background:#999;
    color:#000;
    text-decoration:none;
    margin-top:3px;
    margin-bottom:3px;
    box-shadow: 5px 5px 5px #111;
}

.indexButton:hover{
    border:1px outset #fff;
    background: #ccc;
        box-shadow: 5px 5px 5px #333;

}

.indexButton:active{
    border:1px inset #fff;
    box-shadow: none;
}

.indexDead{
    background-color:#555;
    padding:3px;
    margin-top: 3px;
    margin-bottom: 3px;
    color:#000;
}

.viewPort{
    overflow-y:auto;
    max-width:500px;
    max-height:70vh;
    min-height:70vh;
    padding:15px;
    max-width:fit-content;
    width:100%;
    background: #121212;
    background: linear-gradient(270deg,rgba(18, 18, 18, 1) 0%, rgba(0, 0, 0, 1) 50%, rgba(18, 18, 18, 1) 100%);
    color:#fff;
    border:#ccc 1px inset;
    text-align:left;
}

.articleBox{
    border:1px solid #ccc;
    text-align:left;
    box-shadow: 0px 0px 5px #ccc;
    min-height:min-content;
    /*display:flex;
    flex-shrink:0;*/
    display:grid;
    grid-template-columns:1fr 4fr;
    padding-top:0;
    font-size:.8em;
}

.articleBox strong{
    color:#e035ad;
    font-size:1em;
}

.articleBox:hover{
    border:1px #e035ad solid;
    box-shadow: 0px 0px 5px #e035ad;
    filter:contrast(110%)
}

.articleBox:active{
    border:1px #93186F solid;
    box-shadow: 0px 0px 5px #93186F;
    filter:none;
}

.articleThumb{
    max-width:100%;
    max-height:100%;
    min-height:min-content;
    min-height:100%;
    min-width:100%;
    object-fit:cover;
    vertical-align:bottom;
    overflow:hidden;
}

.articleContent{
    background-color:#333;
    text-align:left;
    padding:1em;
}



#darkGrad{
    background: linear-gradient(0deg, rgba(37,37,37,1) 0%, rgba(0,0,0,1) 25%, rgba(0,0,0,1) 75%, rgba(37,37,37,1) 100%);
}

#innerGlow{
    box-shadow: inset 0 0 15px #5f5f5f;
}

#noUnderline, #noUnderline:hover ,#noUnderline:visited, #nounerline:active{
    text-decoration:none;
    color:inherit;
}

#homeButton{
    background: #3E0000;
    background: linear-gradient(270deg,rgba(62, 0, 0, 1) 0%, rgba(29, 0, 0, 1) 100%);
}

#aboutButton{
    background: #026370;
    background: linear-gradient(90deg, rgba(2, 99, 112, 1) 0%, rgba(0, 107, 78, 1) 100%);
}

#blogButton{
    background: #773002;
    background: linear-gradient(90deg,rgba(119, 48, 2, 1) 0%, rgba(181, 85, 16, 1) 100%);
}

#toyButton{
    background: #93186F;
    background: linear-gradient(270deg, rgba(147, 24, 111, 1) 0%, rgba(119, 2, 63, 1) 100%);
}

#guestButton{
    background: #181818;
    background: linear-gradient(270deg, rgba(24, 24, 24, 1) 0%, rgba(0, 0, 0, 1) 100%);
}

#hrLight{
    border-color:#ccc;
    margin-left:15px;
    margin-right:15px;
}

#hvrContrastDith:hover {
     filter: contrast(150%);
     filter: brightness(150%);
}

#hvrContrast:hover {
    filter: contrast(150%);
}

#buttonBtm0{background-image:url("media/buttons/collection/notMobileFriendly.gif")}
#buttonBtm1{background-image:url("media/buttons/collection/viewWithEyes.gif")}
#buttonBtm2{background-image:url("media/buttons/collection/linuxPowered.gif")}
#buttonBtm3{background-image:url("media/buttons/collection/iToddler.gif")}
#buttonBtm4{background-image:url("media/buttons/lisence.png")}
#buttonBtm5{background-image:url("media/buttons/collection/piracy.gif")}
#buttonBtm6{background-image:url("media/buttons/collection/banTimeTravel.gif")}
#buttonBtm7{background-image:url("media/buttons/collection/neocitiesWebIsUrs.gif")}
#buttonBtm8{background-image:url("media/buttons/collection/keepTheWebFree.gif")}
#buttonBtm9{background-image:url("media/buttons/collection/WOOHOO.gif")}