body {
    background-color: #666;
    font-family: Monospace, monospace, Sans-Serif;
    word-break: break-word;
    color: #000;
}
.hello_this_is_me {
    max-width: 650px;
    padding: 8px;
    margin: auto;
    color: #fff;

    background: #888;

}
.hello_this_is_me h1 {
    font-size: 48px;
    text-align: center;
}

#tabs {
    text-align: center;
    align-content: center;
    text-decoration: none;
    line-height: 150%;
}
#tabs a {
    background-color: inherit;
    text-decoration: none;
    float: center;
    border: none;
    outline: none;
    cursor: pointer;
    margin: 7px 8px;
    padding: 4px 4px;
    transition: 0.3s;
    font-size: 12px;
    white-space: nowrap;
}
#tabs a:hover {
    background-color: #ddd;
    text-decoration: none;
}
#splash {
    text-align: center;
    word-wrap: break-word;
}
.content {
    max-width: 650px;
    padding-left: 16px;
    padding-right: 16px;
    padding-top: 4px;
    padding-bottom: 16px;
    margin: auto;

    border: solid #fad2a8;
    border-width: thick;
    color: #fff;

    background: #666;

    display: block;

    width: 100%;
    box-sizing: border-box;
}
.music {
    margin: auto;
    margin-bottom: 8px;
    margin-top: 8px;
    padding-bottom: 16px;
    width: 75%;
    text-align: center;
    border: 2px solid #fff;
}
.setups {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    padding: 8px;
    margin: 4px;
}
#macmini {
    background-image: linear-gradient(rgba(102,102,102,0.8), rgba(102,102,102,0.8)), url(/assets/img/setups/hot.jpg);
}
#craptop {
    background-image: linear-gradient(rgba(102,102,102,0.8), rgba(102,102,102,0.8)), url(/assets/img/setups/hpenis.jpg);
}
#lenowo {
    background-image: linear-gradient(rgba(102,102,102,0.8), rgba(102,102,102,0.8)), url(/assets/img/setups/lenowo.jpg);
}
#awh {
    background-image: linear-gradient(rgba(102,102,102,0.8), rgba(102,102,102,0.8)), url(/assets/img/setups/shit.jpg);
}
#pi {
    background-image: linear-gradient(rgba(102,102,102,0.8), rgba(102,102,102,0.8)), url(/assets/img/setups/pi.jpg);
}
#plexopti {
    background-image: linear-gradient(rgba(102,102,102,0.8), rgba(102,102,102,0.8)), url(/assets/img/setups/plexopti.jpg);
}
table {
        width: 100%;
}
th, td {
    padding: 4px;
    padding-left: 2px;
    padding-right: 2px;
    text-align: center;
}
td {
    border: #caa278 2px solid;
}
th {
    border: #fad2a8 2px solid;
}
@font-face {
    font-family: 'specil order';
    font-style: normal;
    src:
        url(/assets/fonts/monospace-1/font.woff2) format('woff2'),
        url(/assets/fonts/monospace-1/font.woff) format('woff'),
        url(/assets/fonts/monospace-1/font.ttf) format('ttf');
}
hr.solid {
    border-top: 3px solid #bbb;
}
:link { color: #8effff; }
:visited { color: #90cbff; }
:link:active, :visited:active { color: #ff2e2e; }
code {
    font-size: 14px;
    font-family: "specil order", Monospace, monospace, Sans-Serif;
}
#buttons, #rings {
    text-align: center;
    justify-content: center;
    flex-wrap: wrap;
    max-width: 650px;
    margin: auto;
    align-items: center;
    align-self: center;
}

#buttons {
    display: flex;
    gap: 4px;
}

#buttons > * {
	margin: 0px;
    padding: 4px;
    width: 81px;
    height: 31px;
}

#rings > * {
    margin: 8px;
}

.gallery {
    display: flex;
    text-align: center;
    justify-content: center;
    flex-wrap: wrap;
    max-width: 650px;
    margin: auto;
    align-items: center;
    align-self: center;
    gap: 4px;
    div {
        border: 1px solid #fff;
        padding: 4px;
        margin: 8px;
        max-width: 297px;
        img {
                width: 100%;
        }
    }
}

#controls, #music {
	float: left;
	display: block;
	position: fixed;
	overflow: hidden;
	height: 100%;
	top: 8px;
	font-size: 14px;
	.control {
		height: 100%;
	}
}
#controls {
	left: 8px;
}
#music {
	right: 8px;
	width: 300px;
}

#music > * {
	right: 8px;
}