/* wip */

body{
background-image: repeating-linear-gradient(to bottom, transparent, black 3px), linear-gradient(to bottom, black 30%, #4f555c);
background-attachment: fixed}

#container{
color: white;
background-color: #222;
max-width: 754px;
border: 1px solid #666b71;
border-radius: 10px}

#header, #hSub{
position: relative;
display: block;
margin: 0}

#header{
font-size: 2em;
height: 40px;
padding-top: 10px;
border-radius: 8px 8px 0 0;
background-image: url(data:image/png;charset=binary;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAA3CAYAAADNNiA5AAAACXBIWXMAAC4jAAAuIwAPog/gAAAAS0lEQVR4nGNQ0dA5xKCmpXeIQUPX8BCDlr7xIQZdQ9NDDPrGZocYDE0tDjGYmFsdYjCztD3EYGljf4ghLbvwPwMQBDAoKCisGH4sAG4CLTzw7kXWAAAAAElFTkSuQmCC), url(https://wallpapercave.com/dwp1x/7BNdjsW.jpg);
background-position: center;
background-size: auto, cover}

#header .logo{text-shadow: 0 5px 5px black}

#hUp{
margin-top: 5px !important;
border: 1px solid #555;
border-radius: 5px;
padding: 8px;
background: #0008}

#hSub{
padding: 0;
width: 100%;
height: 27px;
top: 0;
font-size: 0;
background: linear-gradient(to bottom, #26292a, #252729, #232527, #222425, #202224, #1f2022, #1d1f20, #1b1d1e, #020202, #010202, #020303, #030404, #040505, #050607, #070808, #08090a, #0a0b0b, #0b0d0d, #0d0e0f, #0f1011, #111213, #131415, #151617, #171819, #191a1b, #1a1c1d, #1c1e1f);
border-bottom: 1px solid black}

#hSub a{
color: #ccc;
font-size: 12px;
line-height: 27px;
font-weight: bold;
padding: 7px 10px 6px 10px;
border-width: 0 1px 0 1px;
border-style: solid;
border-left-color: #3e464c;
border-right-color: #020202}

#hSub a:hover{
color: #ff9;
background: linear-gradient(to bottom, #2e3337, #2d3236, #2d3235, #2b2f33, #292e32, #282c30, #262b2e, #25292c, #23272a, #212528, #1f2325, #1d2023, #1b1e21, #181c1e, #16191c, #141719, #111315, #0e1012, #0b0d0f, #090a0c, #060809, #040506, #030304, #010202, #000101, #020202)}

#avatar{max-width: 80px}

#age{
rotate: 90deg;
display: inline-block;
font-family: mono}

#online[style*="block"]{content: url(https://pierrepapierciseaux.net/.skynet/img/stickers/1.png)}

.topRight{
padding: 0 10px 10px;
background: #696e74}


.boxHead{
background: linear-gradient(to bottom, #1763b7, #026bd8, #0567d4, #0167d6, #0064d4, #0063d8, #0364d9, #0061d6, #005ed4, #0363d4, #0b69db, #156bd8, #0a65d8, #025bd9, #0058d6, #104cce);
border: solid #6bb5fc;
border-width: 1px 1px 0 1px;
border-radius: 4px 4px 0px 0px;
box-shadow: 1px 1px #22377a, -1px -1px #22377a, -1px 1px #22377a, 1px -1px #22377a;
width: calc(100% - 12px);
margin: 2px auto 0 auto;
font-size: 10px;
line-height: 16px;
text-indent: 7px;
padding: 0}

#userWall tbody{
margin-left: auto;
margin-right: auto;
display: block;
width: 95%;
padding-top: 5px}

#userWall tr{
position: relative;
display: flex;
flex-direction: column;
background: linear-gradient(to bottom, #444, #222, #222);
margin-bottom: 6px;
border: 2px outset #555;
border-radius: 8px;
box-shadow: 1px 1px #222, 1px -1px #222, -1px -1px #222, -1px 1px #222}

#userWall a{
color: #32dbbb;
font-weight: 800}

.tableLeft, .tableRight{background: transparent}

.tableLeft{
width: auto !important;
padding: 5px 0 2px 10px}

.tableLeft div{margin-left: 5px}

/*.tableLeft b:before, .tableLeft b:after{content: "."}*/

.tableLeft div, .date{line-height: 24px}

.tableLeft a{
display: flex;
flex-direction: row-reverse;
justify-content: left}

.tableLeft a, .tableLeft > a > div{width: fit-content}

.tableLeft b{font-weight: 100}

.tableLeft a[href$="=67"]:after{
content: "👑";
position: absolute;
top: -6px;
left: 5px;
transform: rotate(-26deg)}

.tableLeft img{
border: 1px solid gray;
background: #555;
height: 24px;
max-width: 200px;
image-rendering: auto}

.tableRight{
width: auto;
padding: 0 10px 10px}

.tableRight > div:last-of-type{
color: #1c181b;
background: #e7e9db;
padding: 5px;
margin-top: 5px;
border: 2px inset #555}

.tableRight .date{
position: absolute;
top: 5px;
right: 10px}

.undertale{
border-color: #333;
background: #000a}

.comments > div:last-of-type{text-align: center !important}

#footer{
border-radius: 0 0 8px 8px;
background: #14181b;
color: #999}

#footer p:first-of-type{border-bottom: 1px solid #696e74}

#footer a{
color: #fc0;
font-weight: bold}

#footer p:first-of-type, #footer88x31s{padding: 5px}

@media only screen and (max-width: 768px){
#hUp{
position: relative;
top: 0}
#header{font-size: 1.5em}
#hSub a{
font-size: 10px;
line-height: 15px;
padding: 1px 5px 2px 6px}
#hSub{height: 16px}}

/*
#hSub{
font-size: 0;
background-color: #979EA4;
top: 0;
width: 100%;
padding: 10px 0 10px 0}

#hSub a{
font-size: 12px;
border: 1px solid #333;
padding: 4px;
margin-left: 5px;
border-radius: 8px;
background: #696e74;
font-weight: bold;
text-shadow: 1px 1px #344}

#hSub a:hover{background-color: #b1bbc3}
*/