Windows XP

Tags: windows xp, xp, y2k, winxp, windows, windowsxp
Description:

Welcome to Windows XP from Microsoft, the new version of Windows that brings your PC to life.
Preview:

click on the image for a larger preview
Code:

<!-- (c) Layout created by IPTVman (https://layouts.spacehey.com/layout?id=36431) -->

<!-- (c) Layout created by Tilin (https://layouts.spacehey.com/layout?id=34300) -->

<style>
/*
Main SpaceHey Stylesheet
(c) 2020-2023 SpaceHey.com - tibush GmbH
*/
:root{
  --light-gray: #f2f0f0;
  --gray: #e3e3e3;
  --dark-gray: #919191;
  --darker-gray: #545454;
  --logo-blue: #1D4ED8;
  --darker-blue: #1E40AF;
  --lighter-blue: #60A5FA;
  --even-lighter-blue: #BFDBFE;
  --lightest-blue: #DBEAFE;
  --red: #FF0000;
  --dark-orange: #ED0707;
  --light-orange: #f9c56c;
  --even-lighter-orange: #fcdbb8;
  --strange-yellow: #dbae2e;
  --green: #34D399;
  --light-green: #E6F8DD;
  --medium-green: #A0C99C;
  --dark-green: #059669;

  accent-color: #1D4ED8;
  accent-color: var(--logo-blue);
}

*{
  box-sizing: border-box;
}
html{
  line-height: 1.225;
}
html, body{
  margin: 0;
  padding: 0;
}
body{
  background-color: #e3e3e3;
  background-color: #004e98;
  font-family: Arial, sans-serif, helvetica;
  background-image: url('https://static.miraheze.org/windowswallpaperwiki/c/cf/Bliss.jpg');
  background-size: cover;
  background-attachment: fixed;
  background-position: center;
}
.container{
  width: 810px;
  max-width: 100%;
  margin: 0 auto 10px;
  box-shadow: inset -1px -1px #00138c,inset 1px 1px #0831d9,inset -2px -2px #001ea0,inset 2px 2px #166aee,inset -3px -3px #003bda,inset 3px 3px #0855dd;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  padding: 0 0 3px;
  -webkit-font-smoothing: antialiased;
  background: #ece9d8;
}
time.ago{
  opacity: 0;
}
.soon{
  opacity: 0.7;
}
details summary{
  cursor: pointer;
  user-select: none;
}
a{
  color: #1E40AF;
  color: blue;
  text-decoration: none;
}
a:hover,
a:active,
.blog-entry .kudos-btn:hover,
.blog-entry .kudos-btn:active{
  color: blue;
  text-decoration: none;
}
p, ol li, ul:not(nav .links):not(footer .links) li{
  font-size: 0.875em;
  font-size: max(0.875em, 12px);
}
ol li ol li{
  font-size: 100%;
}
ul{
  padding-left: 20px;
}
nav{
  color: white;
  font-size: 72%;
  font-size: max(72%, 12px);
}
.nav-info{
  background: #f9c56c;
  background: var(--light-orange);
  color: black;
  padding: 12px 10px;
  font-weight: bold;
}
.nav-info p{
  margin: 0;
}
.nav-info.light{
  background: #fcdbb8;
  background: var(--even-lighter-orange);
}
nav .top{
  background: #1D4ED8;
  background: var(--logo-blue);
  padding: 15px 10px 14px 10px;
  display: flex;
  position: relative;
  font-family: Trebuchet MS;
  background: linear-gradient(180deg,#0997ff,#0053ee 8%,#0050ee 40%,#06f 88%,#06f 93%,#005bff 95%,#003dd7 96%,#003dd7);
  border-top: 1px solid #0831d9;
  border-left: 1px solid #0831d9;
  border-right: 1px solid #001ea0;
  border-top-left-radius: 8px;
  border-top-right-radius: 7px;
  font-size: 13px;
  text-shadow: 1px 1px #0f1089;
}
nav .top a{
  text-decoration: none;
  color: inherit;
}
nav .top a:hover{
  text-decoration: underline;
}
nav .top div{
  display: inline-block;
  vertical-align: top;
}
nav .top .left a{
  text-decoration: none;
  color: inherit;
}
nav .top .left img{
  margin: 0 0 0 6px;
}
nav .top .left .logo{
  width: 165px;
  height: 42px;
}
nav .top .left .logo.april-fools:hover{
  animation: rotate 6s infinite linear;
}
@keyframes rotate{
  from{
    transform: rotate(0deg);
  }
  to{
    transform: rotate(-359deg);
  }
}
nav .top .left .christmas,
nav .top .left .special-icon{
  height: 42px;
  width: auto;
}
nav .top .center{
  text-align: center;
  flex: 1;
}
nav .top .center form{
  margin-top: -2px;
  width: 100%;
}
nav .top .right{
  text-align: right;
}
nav .top .right .support-right{
  margin-top: 5px;
}
nav .links{
  background-color: #60A5FA;
  background-color: transparent;
  padding: 3.5px 16px;
  border-bottom: 1px solid #60A5FA;
}
nav .links .icon{
  vertical-align: -0.41em;
}
nav .links,
footer .links{
  margin: 0;
  list-style: none;
}
footer .links{
  font-size: 0.875em;
  margin: 16px 0 5px 0;
  padding: 0;
  text-align: center;
}
nav .links li,
footer .links li{
  display: inline-block;
}
nav .links li.active a{
  font-weight: bold;
}
nav .links li:not(:last-child)::after,
footer .links li:not(:last-child)::after{
  content: " | ";
  color: black;
}
nav .links li{
  min-height: 1.4em;
}
nav .links a{
  text-decoration: none;
  color: black;
  text-shadow: 0px 0px 7e ece9d8; /*to improve the color contrast*/
  font-size: 0.98em;
  font-size: max(0.98em, 12px);
}
nav .links a:hover{
  text-decoration: underline;
  color: #040c5c;
}
nav .links .special a{
  color: black;
}
main{
  background: transparent;
  color: black;
  padding: 6px 0px;
  font-size: 80%;
}
main .left,
main .right{
  padding: 10px;
}
footer{
  text-align: center;
  font-size: 70%;
  margin: 10px 0 10px;
  padding: 10px 5px;
  background-color: #e3e3e3;
  background-color: transparent;
}
footer img{
  display: inline-block;
  vertical-align: middle;
}
footer p{
  vertical-align: middle;
  margin: 10px 0 5px 0;
  font-size: 90%;
}
footer .copyright{
  font-size: 80%;
  text-decoration: underline;
  text-decoration-thickness: 0.5px;
}
.welcome{
  background: #34D399;
  background: var(--green);
  background-position: center center;
  background-size: cover;
  padding: 5px;
  margin: 0 0 10px 0;
}
.welcome img{
  margin: 5px auto;
  height: 35px;
  max-width: 100%;
  display: block;
}
.welcome.standalone{
  margin: 0 auto 15px auto;
  width: 300px;
}
.indie-box{
  outline: 1px solid #039;
  border: 8px solid var(--even-lighter-blue);
  margin: 20px 0 10px 0;
  padding: 5px 5px 15px 5px;
  text-align: center;
  font-weight: bold;
}
.indie-box p{
  margin: 8px 0 0 0;
}
.indie-box .more-details{
  font-size: 90%;
  font-weight: normal;
}
.indie-box .donate-link{
  display: block;
}
.indie-box .donate-btn{
  width: 135px;
  max-width: 100%;
  margin-top: 10px;
  aspect-ratio: 147/47;
}
.box{
  text-align: center;
  border: 1px solid #039;
  margin: 0 0 10px 0;
  padding: 5px 5px 15px 5px;
  color: #039;
}
.box.standalone{
  width: 300px;
  max-width: 100%;
  margin: 0 auto;
}
.box h4,
.box p{
  margin: 0;
  padding: 0;
}
.box td.label{
  min-width: 61px;
}
.box label{
  color: black;
}
.box form table{
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
}
.box .remember td,
.box .buttons td{
  padding-bottom: 8px;
}
.box .email td,
.box .password td{
  text-align: right;
}
.box .email input,
.box .password input{
  width: 100%;
  max-width: 100%;
}
.box .email td{
  padding-top: 8px;
}
.box .password td{
  padding-bottom: 8px;
}
.box .remember,
.box .forgot{
  font-size: 80%;
  font-size: max(80%, 12px);
}
.box .remember label{
  vertical-align: top;
}
.box .forgot{
  float: right;
  text-align: right;
  font-weight: bold;
  display: block;
}
.box button{
  text-transform: uppercase;
  padding: 2px 5px;
  cursor: pointer;
  border-width: 1px;
  border-style: solid;
}
.login_btn{
  background: white;
  border-color: #B1B1B1 #1F1F1F #1F1F1F #B1B1B1;
  color: #4368B4;
}
.signup_btn,
.login_btn.standalone{
  font-weight: bold;
  background: #ED0707;
  background: var(--dark-orange);
  border-color: #ff8282 #960303 #960303 #ff8282;
  color: white;
}
.login_btn.standalone,
.signup_btn.standalone{
  width: 100%;
}
.home .new-people,
.user-home .new-people,
.home .spa{
  margin-right: 8px;
}
.invite-tip{
  font-size: 0.8em;
  display: inline-block;
  margin: 0;
}

.value-info .icon{
  height: 1.2em;
  width: 1.2em;
  vertical-align: -0.25em;
  margin-left: .3em;
}
.value-info p{
  text-align: right;
}
.value-info p:not(:first-child){
  margin-top: 5px;
}
.value-info p:not(:last-child){
  margin-bottom: 5px;
}

.new-people{
  border: 1px solid #f9c56c;
  border: 1px solid var(--light-orange);
}
.new-people .top{
  background-color: #f9c56c;
  background-color: var(--light-orange);
  overflow-wrap: break-word;
  word-break: break-word;
}
.new-people .top,
.new-people .inner{
  padding: 4px 8px;
}
.new-people h4,
.new-people p{
  margin: 0;
  padding: 0;
}
.new-people p{
  font-weight: bold;
  width: 100%;
  text-align: center;
  overflow-wrap: break-word;
  word-break: break-word;
}
.new-people.cool .inner{
  display: flex;
  overflow-x: auto;
}
.new-people .person{
  margin: 5px 10px;
  width: 80px;
  min-height: 100px;
  display: inline-block;
  align-self: flex-end;
}
.new-people .person img:not(.icon){
  max-width: 80px;
  max-height: 80px;
  margin: 5px auto 0 auto;
  display: block;
}
.new-people .view-more{
  margin: 5px 10px;
  min-width: 80px;
  min-height: 100px;
  display: inline-block;
  display: flex;
  justify-content: center;
  align-items: center;
}
.spa{
  border: 2px solid #BFDBFE;
  border: 2px solid var(--even-lighter-blue);
  margin: 14px 0 3px 0;
}
.spa .heading{
  background: #BFDBFE;
  background: var(--even-lighter-blue);
  padding: 2px 7px;
}
.spa.orange{
  border: 2px solid #f9c56c;
  border: 2px solid var(--light-orange);
}
.spa.orange .heading{
  background: #f9c56c;
  background: var(--light-orange);
}
.spa .heading h4{
  margin: 0;
  display: inline-block;
}
.spa:not(.specials) .inner{
  padding: 6px 5px 3px 5px;
}
.spa:not(.specials) .inner img{
  width: 100%;
  cursor: pointer;
}
.spa.specials .inner .details{
  min-height: 106px;
  margin-right: 0;
}
.user-home .spa.specials .inner .details{
  font-size: 97%;
}
.music .heading,
.specials .heading,
.bulletin-preview .heading,
.blog-sub-preview .heading{
  background: #BFDBFE;
  background: var(--even-lighter-blue);
  padding: 5px 7px;
  margin: 10px 8px 10px 0;
}
.spa.specials .heading{
  margin: 0 0 5px 0;
}
.spa.specials .inner{
  padding: 6px 13px 10px 13px;
}
.user-home .specials:not(.spa) .heading,
.user-home .bulletin-preview .heading,
.user-home .blog-sub-preview .heading{
  margin: 25px 0 10px 0;
}
.user-home .specials.spa{
  margin-top: 25px;
}
.user-home .blog-sub-preview{
  margin-bottom: 18px;
}
.user-home .blog-sub-preview .blog-entries{
  padding: 0 7px;
}
.music .heading a.more,
.specials .heading a.more,
.friends .heading a.more,
.new-people .top a.more,
.bulletin-preview .heading a.more,
.blog-sub-preview .heading a.more,
.spa .heading .spa-info{
  float: right;
  margin-top: 1px;
  font-size: 80%;
}
.music .heading h4,
.specials .heading h4,
.new-people .top h4,
.bulletin-preview .heading h4,
.blog-sub-preview .heading h4{
  margin: 0;
  font-size: 0.9em;
  display: inline-block;
}
.bulletin-preview table{
  margin-bottom: 15px;
}
.music .inner,
.specials .inner{
  padding: 6px 15px 10px 15px;
  min-height: 120px;
}
.music .inner .cover,
.specials .inner .image{
  float: left;
  margin: 0 20px 5px 0;
  display: block;
}
.music .inner .cover img,
.specials .inner .image img{
  width: 110px;
  max-width: 100%;
  display: block;
  aspect-ratio: 1/1;
}
.specials .inner .image.tall img{
  width: auto;
  height: 110px;
  aspect-ratio: unset;
}
.music .inner .details,
.specials .inner .details{
  margin: 0 7px 0 0;
  display: block;
}
.music .inner .details h4,
.specials .inner .details h4{
  margin: 2px 0 0 0;
}
.specials .inner h4.inner-heading{
  margin: 0 0 10px 0;
}
.music .inner .details h5,
.specials .inner .details h5{
  margin: 3px 0 0 0;
}
.music .inner .details p,
.specials .inner .details p{
  margin: 7px 0 0 0;
}
.info-area{
  padding: 10px;
  width: 100%;
}
.info-box{
  border: 1px solid #1E40AF;
  border: 1px solid var(--darker-blue);
  background: #BFDBFE;
  background: var(--even-lighter-blue);
  padding: 5px 5px 30px 5px;
  position: relative;
}
.info-box:not(:last-child){
  border-right-width: 0px;
}
.info-box p{
  font-size: 90%;
  font-size: max(90%, 12px);
  margin: 0;
}
.info-box h3{
  color: #1E40AF;
  color: var(--darker-blue);
  margin: 0;
  margin-bottom: 5px;
}
.info-box .link{
  text-align: right;
  margin-top: 10px;
  position: absolute;
  bottom: 10px;
  right: 10px;
}
.info-box .link:not(a){
  color: #c00;
}
.updates{
  padding: 0;
  margin: 0;
  list-style: none;
}
.updates li{
  margin: 0 0 10px 0;
  display: list-item;
  list-style-type: "»";
  padding-inline-start: 1ch;
}

.profile h1{
  font-size: 1.5em;
  margin: 0 0 10px 0;
}
.general-about .profile-pic{
  display: block;
  float: left;
  margin: 0 15px 8px 0;
  height: 160px;
}
.general-about .profile-pic img{
  max-width: 160px;
  max-height: 160px;
}
.general-about .details{
  display: block;
}
.general-about .details.below{
  width:100%;
  display: inline-block;
}
.profile .mood{
  width: 100%;
  display: inline-block;
}
.profile .mood p{
  margin: 0 0 8px 0;
}
.profile .contact,
.profile .url-info,
.profile .table-section,
.setting-section,
.home-actions{
  width: 100%;
  border: 2px solid #60A5FA;
  border: 0px solid transparent;
  margin: 10px 0;
  box-shadow: inset -1px -1px #00138c,inset 1px 1px #0831d9,inset -2px -2px #001ea0,inset 2px 2px #166aee,inset -3px -3px #003bda,inset 3px 3px #0855dd;
  padding: 0 0 3px;
  -webkit-font-smoothing: antialiased;
}
.setting-section{
  margin: 15px 0;
}
.profile .contact .heading,
.profile .table-section .heading,
.setting-section .heading,
.home-actions .heading{
  background: #60A5FA;
  background: var(--lighter-blue);
  color: white;
  padding: 2px 7px;
  font-family: Trebuchet MS;
  background: linear-gradient(180deg,#0997ff,#0053ee 8%,#0050ee 40%,#06f 88%,#06f 93%,#005bff 95%,#003dd7 96%,#003dd7);
  padding: 3px 5px 3px 3px;
  border-top: 1px solid #0831d9;
  border-left: 1px solid #0831d9;
  border-right: 1px solid #001ea0;
  font-size: 13px;
  text-shadow: 1px 1px #0f1089;
}
.profile .contact .heading h4,
.profile .table-section .heading h4,
.profile .blurbs .heading h4,
.profile .friends .heading h4,
.blog-entry .comments .heading h4,
.bulletin .comments .heading h4,
.home-actions .heading h1,
.setting-section .heading h4,
.statistics .heading h4{
  margin: 0;
  display: inline-block;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0;
  margin-right: 24px;
}
.profile .contact .f-row{
  margin: 7px;
  font-weight: bold;
  font-size: 0.875em;
}
.profile .url-info{
  padding: 4px 7px;
}
.profile .url-info p{
  font-size: 100%;
  margin: 0;
  word-break: break-all;
}
.profile .url-info.view-full-profile{
  text-align: center;
}
table.details-table{
  width: 100%;
}
.details-table td:first-child{
  background: #BFDBFE;
  background: var(--even-lighter-blue);
  color: #1D4ED8;
  color: var(--logo-blue);
  font-weight: bold;
  width: 33%;
}
.details-table td{
  background: #DBEAFE;
  background: var(--lightest-blue);
  vertical-align: top;
}
.details-table.left-big td:first-child{
  width: unset;
}
.details-table.left-big td{
  width: 33%;
}
.details-table td p{
  margin: 0;
  overflow-wrap: break-word;
  word-break: break-word;
}

.details-table td *{
  max-width: 100%;
}
.profile .blurbs{
  margin: 20px 0;
}
.profile .blurbs .heading,
.profile .friends .heading{
  background: #f9c56c;
  background: var(--light-orange);
  color: #ED0707;
  color: white;
  padding: 2px 7px;
  \.title-bar\ \{\ font-family: Trebuchet MS;
  background: linear-gradient(180deg,#0997ff,#0053ee 8%,#0050ee 40%,#06f 88%,#06f 93%,#005bff 95%,#003dd7 96%,#003dd7);
  padding: 3px 5px 3px 3px;
  border-top: 1px solid #0831d9;
  border-left: 1px solid #0831d9;
  border-right: 1px solid #001ea0;
  font-size: 13px;
  text-shadow: 1px 1px #0f1089;
}
.blog-entry .comments .heading,
.bulletin .comments .heading{
  padding: 10px 7px;
  border-top: 2px solid rgba(0, 0, 0, 0.4);
  margin-top: 10px;
}
.blog-category .right h2{
  overflow-wrap: break-word;
  word-break: break-word;
}
.edit-link{
  font-size: 90%;
}
.edit-link.right-side{
  text-align: right;
  margin: 3px 5px 4px 5px;
}

.settings-sessions-table{
  margin: 10px 0 0 0;
  width: 100%;
  text-align: left;
  overflow-x: auto;
  white-space: nowrap;
}

.logout-btn,
.blog-entry .kudos-btn{
  background: none !important;
  border: none;
  padding: 0 !important;
  cursor: pointer;
  user-select: text;
  text-decoration: none;
  color: #1E40AF;
  color: var(--darker-blue);
}
.logout-btn,
.logout-form{
  color: white;
  display: inline-block;
  font-size: 100%;
}
.logout-btn{
}
.logout-btn:hover,
.logout-btn:active{
  color: inherit;
  text-decoration: underline;
}
.profile .blurbs .inner,
.profile .friends .inner,
.blog-entry .comments .inner,
.bulletin .comments .inner,
.setting-section .inner{
  padding: 7px;
}
.setting-section .inner p:last-child{
  margin-bottom: 0;
}
.profile .blurbs .section{
  margin-bottom: 14px;
}
.profile .blurbs .section h4{
  margin: 0;
  color: #ED0707;
  color: blue;
}
.profile .blurbs .section p,
.profile .friends p,
.blog-entry .comments p,
.bulletin .comments p{
  margin: 0 0 8px 0;
}
.profile .friends .person{
  width: 105px;
  display: inline-block;
  padding: 0 10px 15px 0;
}
.profile .friends .person p{
  color: #666666;
  font-weight: bold;
  width: 100%;
  overflow-wrap: break-word;
  word-break: break-word;
  font-size: 100%;
  text-align: center;
}
.profile .friends .person img:not(.icon){
  max-width: 95px;
  max-height: 95px;
  display: block;
  margin: 0 auto;
}
.count{
  color: blue;
}
.comment-replies{
  padding: 0 5px;
  border: 5px solid white;
  margin-top: 10px;
}
.comment-reply{
  padding: 10px 5px;
}
.comment-reply:not(:first-child){
  border-top: 1px solid black;
}
.comment-reply p{
  margin: 0;
}
table.comments-table,
table.music-table,
table.bulletin-table,
table.forum-table,
table.groups-table{
  width: 100%;
  overflow-wrap: break-word;
  word-break: break-word;
}
table.forum-table,
table.groups-table,
table.bulletin-table{
  border-collapse: collapse;
  border-spacing: 0;
}
.forum-table th,
.forum-table td,
.groups-table th,
.groups-table td,
.bulletin-table th,
.bulletin-table td{
  border: 1px solid black;
  padding: 7px;
}
.forum-table th.subject,
.forum-table td.subject,
.groups-table th.name,
.groups-table td.name{
  width: 100%;
}
.groups-table td.name{
  text-align: left;
  vertical-align: top;
}
.groups-table td.name p{
  margin: 3px 10px;
}
.forum-table th:not(.subject),
.forum-table td:not(.subject),
.groups-table th:not(.name),
.groups-table td:not(.name){
  width: auto;
  white-space: nowrap;
}
.comments-table p,
.music-table p,
.bulletin-table p,
.forum-table p,
.groups-table p{
  font-size: 100%;
}
.bulletin-table .user-info{
  width: 34%;
}
.forum-table .user-info{
  width: 70px;
  max-height: 70px;
  padding: 0;
}
.forum-table .user-info .profile-pic{
  max-width: 70px;
  max-height: 70px;
  vertical-align: bottom; /* to hide gap from link */
}
.forum-table tr.topic-closed{
  opacity: 0.8;
  font-style: italic !important;
}
.forum-table th.subject,
.forum-table td.subject{
  position: relative;
}
.forum-table .pinned{
  font-size: 0.8em;
  color: #332c25;
  margin-top: 2.4px;
  display: inline-block;
  font-weight: bold;
  font-style: italic;
  position: absolute;
  top: 2px;
  left: 4px;
}
.forum-table .pinned .icon{
  height: 1.3em;
  width: 1.3em;
  vertical-align: top;
}
.topic-closed-message{
  overflow: hidden;
  text-align: center;
  color: #545454;
  color: var(--darker-gray);
}
.topic-closed-message h5{
  margin: 18px 0 0 0;
  font-weight: normal;
}
.topic-closed-message h3{
  margin: 4px 0 27px 0;
}
.topic-closed-message a{
  color: black;
}
.groups-table .group-info{
  width: 90px;
  max-height: 90px;
  padding: 0;
}
.groups-table .group-info .group-pic{
  max-width: 90px;
  max-height: 90px;
  vertical-align: bottom; /* to hide gap from link */
}
.bulletin-table p{
  margin: 5px 0;
}
.bulletin-table:not(.preview) .user-info p{
  margin: 0 0 5px 0;
}
.bulletin-table td.subject{
  width: 100%;
}
.bulletin-table td:not(.subject):not(.user-info){
  white-space: nowrap;
}
.bulletin-table td{
  text-align: center;
  vertical-align: top;
  overflow-wrap: break-word;
  word-break: break-word;
}
.forum-table td,
.groups-table td{
  text-align: center;
  overflow-wrap: break-word;
  word-break: break-word;
}
.forum-table td.reply-count,
.groups-table td.member-count{
  font-size: 110%;
}
.comments-table td:first-child,
.music-table td:first-child{
  background: #f9c56c;
  background: var(--light-orange);
  text-align: center;
  font-weight: bold;
  width: 38%;
}
.comments-table td,
.music-table td{
  background: #fcdbb8;
  background: var(--even-lighter-orange);
  vertical-align: top;
}
.comments-table td:first-child img:not(.icon){
  width: 90px;
  max-width: 100%;
  max-height: 200px;
}
.bulletin-table td:first-child img:not(.icon){
  width: 80px;
  max-width: 100%;
  max-height: 150px;
}
.comments-table td pre,
.music-table td pre{
  white-space: pre-wrap;
}
.comments-table td *,
.bulletin-table td *{
  max-width: 100%;
}
.comments-table .report{
  font-size: 0.7em;
  float: right;
  margin: 8px 5px !important;
}
.comments-table .pinned{
  font-size: 0.8em;
  float: right;
  color: #332c25;
  margin-top: 2.4px;
  font-weight: bold;
  font-style: italic;
}
.comments-table .pinned .icon{
  height: 1.3em;
  width: 1.3em;
  vertical-align: top;
}
.music-table .cover{
  width: 140px;
  max-width: 100%;
}
.music-table .copyright{
  font-size: 58%;
  opacity: 0.8;
}
.music-table .music-button,
.featured-playlist .music-button{
  text-decoration: none;
}
.music-table .music-button img,
.featured-playlist .music-button img{
  width: 115px;
  max-width: 100%;
  display: inline-block;
}
.featured-playlist{
  width: 100%;
  background: #ffdcba;
  padding: 6px 10px;
  overflow: auto;
  margin-bottom: 10px;
}
.featured-playlist a{
  text-decoration: none;
  color: inherit;
}
.featured-playlist .sponsored{
  margin: -10px 0 5px 0;
  opacity: 0.5;
  font-size: 55%;
}
.featured-playlist h2,
.featured-playlist h4{
  margin: 5px 0;
}
.featured-playlist .text{
  float: left;
  margin: 10px 20px 10px 0;
}
.featured-playlist .music-button img{
  float: right;
  margin: 15px 0 0 0;
  width: 130px;
}
.notification-overview p{
  margin: 7px;
  font-weight: bold;
}
.notification-overview{
  border-bottom: 2px solid #60A5FA;
  border-bottom: 2px solid var(--lighter-blue);
}
.notifications-list form{
  display: inline-block;
}
.text-red,
.text-red a{
  color: #ED0707;
  color: var(--dark-orange);
}
.text-green,
.text-green a{
  color: #059669;
  color: var(--dark-green);
}
.text-yellow,
.text-yellow a{
  color: #dbae2e;
  color: var(--strange-yellow);
}

.center-container{
  text-align: center;
  padding: 20px 10px 40px 10px;
  margin: 0 auto;
}
.center-container img{
  max-width: 100%;
}

.home-actions{
  background: #DBEAFE;
  background: var(--lightest-blue);
  font-weight: bold;
}
.home-actions .more-options{
  width: 100%;
  display: inline-block;
  padding: 0 5px;
}
.statistics{
  border: 1.4px solid black;
  text-align: center;
  font-weight: bold;
  width: 150px;
  max-width: 100%;
  margin: 15px 0;
}
.statistics .heading{
  background: #1E40AF;
  background: var(--darker-blue);
  color: white;
  padding: 2px 7px;
}
.user-home .top-row{
  margin-top: 10px;
}
.user-home .blog-preview h4{
  margin: 0 0 10px 0;
}
.user-home .blog-preview p{
  overflow-wrap: break-word;
  word-break: break-word;
}
.user-home .new-people{
  margin: 14px 0;
}

.legal .changed h5{
  margin: 20px 0 5px 0;
}
.legal .changed details{
  margin: 5px 0 20px 0;
  font-size: 0.8em;
}

.simple-container{
  margin: 0 auto 30px auto;
  width: 600px;
  padding: 0 8px;
  max-width: 100%;
}
.edit-info{
  background: #DBEAFE;
  background: var(--lightest-blue);
  border: 1px solid #60A5FA;
  border: 1px solid var(--lighter-blue);
  width: 100%;
  padding: 5px;
  overflow-wrap: break-word;
  word-break: break-word;
}
.error,
.success,
.info{
  background: #FF0000;
  background: var(--red);
  color: white;
  padding: 8px 5px;
  margin: 10px 0;
}
.success{
  color: black;
  background: #E6F8DD;
  background: var(--light-green);
  border: 1.5px solid #A0C99C;
  border: 1.5px solid var(--medium-green);
}
.info{
  color: black;
  background: #DBEAFE;
  background: var(--lightest-blue);
  border: 1.5px solid #60A5FA;
  border: 1.5px solid var(--lighter-blue);
}
.twofa-info{
  max-width: 400px;
  margin: 40px auto 10px auto;
}
.big_textarea{
  width: 100%;
  height: 170px;
}
.profile-info{
  border: 2px solid rgba(0,0,0,0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px 5px;
  margin-bottom: 10px;
}
.profile-info .inner{
  font-weight: bold;
  text-align: center;
}
.credits p,
.about p{
  line-height: 145%;
  margin: 0 0 15px 0;
}
.credits h2,
.credits h4,
.about h2,
.about h3{
  margin: 15px 0 4px 0;
}
.ex{
  font-size: 0.7em;
  background: #545454;
  background: var(--darker-gray);
  opacity: 0.7;
  padding: 1px 5px;
  border-radius: 2px;
  color: #E8ECE9;
  font-weight: bold;
  margin: 0 2px 0 0;
  vertical-align: 2px;
}
.pagination{
  width: 100%;
  margin: 15px 0 5px 0;
  min-height: 20px;
}
.pagination .next{
  float: right;
}
.blog-entries .entry{
  background: #BFDBFE;
  background: var(--even-lighter-blue);
  padding: 8px 10px;
  margin: 0 0 15px 0;
  overflow-wrap: break-word;
  word-break: break-word;
}
.blog-entries .entry .publish-date{
  margin: 0;
  font-weight: bold;
  font-size: 0.7em;
}
.blog-entries .entry .pinned{
  float: right;
}
.blog-entries .entry .inner{
  padding: 5px 10px;
}
.blog-entries .entry .inner .title{
  margin: 4px 0 4px 0;
}
.blog-entries .entry .inner .title a{
  color: inherit;
  text-decoration: none;
}
.blog-entries .entry .inner .category{
  margin: 2px 0 8px 0;
  font-size: 0.75em;
}
.blog-entries .entry .inner p{
  margin: 6px 0;
}
.blog-entry .profile-pic img,
.bulletin .profile-pic img{
  max-width: 110px;
  max-height: 110px;
}
.blog-preview p .pinned .icon{
  margin: 0 5px 0 0;
  height: 0.85rem;
  width: 0.85rem;
  vertical-align: -0.2em;
}
.blog-entry .content,
.bulletin .content,
.topic-box .content,
.reply-box .content{
  padding: 0 10px 0 0;
  overflow: hidden;
  overflow-wrap: break-word;
  word-break: break-word;
}
.blog-entry .content p,
.bulletin .content p,
.topic-box .content p,
.reply-box .content p{
  font-size: 1em;
}
.blog-entry .content pre,
.bulletin .content pre,
.topic-box .content pre,
.reply-box .content pre{
  white-space: pre-wrap;
}
.blog-entry .content *,
.bulletin .content *,
.topic-box .content *,
.reply-box .content *{
  max-width: 100%;
}
.blog-entry .title,
.bulletin .title{
  margin: 3px 0 5px 0;
  overflow-wrap: break-word;
  word-break: break-word;
}
.groups-container h4,
.edit-blog-entry h4,
.bulletin .right h4{
  margin: 3px 0 5px 0;
  overflow-wrap: break-word;
  word-break: break-word;
}
.edit-blog-entry input[type=text],
.edit-blog-entry textarea,
.edit-blog-entry .wysiwyg{
  width: 100%;
  margin: 10px 0;
}
.edit-group textarea,
.edit-group .wysiwyg{
  width: 100%;
}
.edit-group input[type=text],
.edit-group textarea,
.edit-group .wysiwyg{
  margin: 10px 0;
}
.wysiwyg_mode button{
  font-size: 0.95em;
}
div.wysiwyg{
  width: 100% !important;
}
.layout-description .wysiwyg{
  height: 200px;
}
.layout-description .wysiwyg iframe{
  min-height: 170px !important;
}
.edit-blog-entry textarea,
.edit-group textarea{
  min-height: 300px;
}
.edit-blog-entry label,
.edit-group label{
  font-weight: bold;
}
.group-category-label{
  font-size: 0.7em !important;
}
.username-box{ /* https://stackoverflow.com/a/23086377 */
  background-color: #ffffff;
  color: #545454;
  color: var(--darker-gray);
  padding: 4px 1px 3px 4px;
  border: 1px #888888 solid;
  font-size: 9pt;
}
.username-box input{
  margin: 0;
}
.edit-blog-entry .comments label{
  font-weight: normal;
}
.edit-blog-entry .publish,
.edit-group .publish{
  min-height: 30px;
  margin: 15px 0 10px 0;
}
.category-list:not(.discover-groups){
  padding: 20px 4px 4px 4px;
}
.category-list ul{
  list-style: none;
  padding: 0;
  margin: 10px 0;
}
.category-list li{
  margin-bottom: 5px;
  font-size: 0.9em;
  overflow-wrap: break-word;
  word-break: break-word;
}
.category-list.discover-groups ul{
  margin: 0 0 25px 0;
}
.category-list.discover-groups li{
  display: inline-block;
  margin-right: 17px;
}
.category-list.discover-groups li{
  display: inline-block;
  margin-right: 17px;
}
.group-right h1,
.group-right .description{
  overflow-wrap: break-word;
  word-break: break-word;
}

.text-link{
  text-decoration: none;
  color: inherit;
}

@keyframes bgscroll{
	0%{ background-position: 0 center; }
	50%{ background-position: -999px center; }
	100%{ background-position: -0 center; }
}
.art_banner{
  background: url('https://static.spacehey.net/img/art_icons_banner.png');
  background-repeat: repeat-x;
  color: #ecf2f9;
  text-align: center;
  animation: bgscroll 40s infinite linear;
  height: 50px;
  width: 100%;
  overflow: hidden;
}
.advent-info-link{
  text-decoration: none;
  color: inherit;
}
.advent-info{
  background: #EF4444;
  padding: 30px 5px;
  margin: 15px 0 10px 0;
  font-size: 1.4em;
  color: white;
  font-weight: bold;
  text-align: center;
}
.advent-grid a{
  text-decoration: none;
  color: inherit;
}
.advent-day-box{
  color: white;
  background: #EF4444;
  display: inline-block;
  width: 160px;
  height: 160px;
  max-width: 100%;
  padding: 5px;
  margin: 10px;
  font-weight: bold;
  font-size: 8em;
}
.advent-day-box.closed{
  background: #FCA5A5;
  cursor: not-allowed;
}
.email-verify-info,
.account-info{
  margin: 10px 10px 3px 10px;
}
.account-info a{
  color: white;
  text-decoration: underline;
}
.invite-text{
  width: 100%;
  min-height: 90px;
  resize: vertical;
  font-size: 1.3em;
}
.invite-share-links a:hover{
  text-decoration: none;
  color: inherit;
}
.invite-share-links a:hover img{
  transform: scale(1.3);
}
.rss-list > li{
  font-size: 1.1em !important;
  margin-bottom: 8px;
}
.rss-list li ul li{
  margin-top: 4px;
}
.about-banner,
.help-banner,
.press-banner{
  background: #1D4ED8;
  width: 100%;
  padding: 15px;
  margin: 10px 0;
  text-align: right;
  min-height: 25px;
  color: white;
}
.about-banner a,
.help-banner a,
.press-banner a{
  color: inherit;
  text-decoration: none;
}
.about-banner .logo,
.help-banner .logo,
.press-banner .logo{
  margin: 0 0 0 auto;
  display: inline-block;
  width: auto;
}
.about-banner .logo img,
.help-banner .logo img,
.press-banner .logo img{
  width: 300px;
  max-width: 100%;
  display: inline-block;
}
.help-banner .logo img,
.press-banner .logo img{
  width: 240px;
}
.help .content,
.help .content p,
.help .content ul,
.help .content li,
.press .content,
.press .content p,
.press .content ul,
.press .content li{
  font-size: 1em;
}
.help .content,
.press .content{
  margin-bottom: 35px;
}
.help h3{
  margin: 20px 0 0 0;
}
.help .home.content ul{
  padding-left: 14px;
}
.help .home.content li{
  margin-bottom: 8px;
}
.shop-promo{
  border: 1px solid black;
  margin-bottom: 10px;
  width: 100%;
}
.shop-promo a{
  color: inherit;
  text-decoration: none;
}
.shop-promo img{
  max-width: 100%;
}
.shop-promo .middle{
  vertical-align: middle;
  text-align: center;
}
.shop-promo .sticker{
  margin: 10px 0 5px 10px;
  padding-right: 20px;
}
.sticker-banner{
  background: #1D4ED8;
  background: var(--logo-blue);
  padding: 2px 0 0 5px;
  cursor: pointer;
  margin: 0 0 10px 0;
}
.sticker-banner img{
  max-width: 100%;
  max-height: 55px;
}
.sticker-info,
.admindash-info{
  text-decoration: none;
}
.sticker-info p,
.admindash-info p{
  text-align: center;
  padding: 5px;
  font-size: 92%;
}
.shop .visit{
  font-weight: bold;
  font-size: 1.4em;
}
.shop .product{
  max-width: 100%;
}
.shop .product-img,
.shop .supporter-info{
  width: 260px;
  max-width: 100%;
}
.shop .product-img-desc{
  margin: 0 0 20px 0;
}
.shop .product-img .saturate{
  animation: saturate 7s infinite;
}
@keyframes saturate{
  0%, 100%{ filter: saturate(0); }
  50%{ filter: saturate(5); }
}
.shop .shipping{
  background: #f9c56c;
  background: var(--light-orange);
  font-weight: bold;
  text-align: center;
  text-transform: uppercase;
  padding: 5px;
  font-size: 105%;
}
.shop .shipping img{
  display: inline-block;
  height: 1.4em;
  margin: 0 .05em 0 0;
  vertical-align: -0.3em;
}
.shop .how-much{
  margin: 14px 0 5px 0;
}
.shop .price-form input[type=radio]{
  margin-top: 8px;
}
.shop .price_input{
  font-size: 1.5em;
  padding: 3px 4px;
  width: 200px;
}
.shop .euro{
  font-size: 1.5em;
}
.shop .buy_button{
  font-size: 1.4em;
}
.shop .pay-buttons,
.shop .buy-success{
  display: none;
}
.shop .chosen_price{
  text-align: center;
  margin: 8px 0 10px 0;
}
.supporter{
  color: #ED0707;
  color: var(--dark-orange);
  font-size: 90%;
  font-weight: bold;
}
.artproject_participant{
  color: #0096c2;
  font-size: 87%;
  font-weight: bold;
}
.supporter a,
.artproject_participant a{
  text-decoration: none;
  color: inherit;
}
.rss-right{
  float: right;
  margin-top: -33px;
}
.news h1,
.news ul{
  margin-bottom: 25px;
}
.news .rss-right{
  margin-top: -47px;
}
.brand h2{
  margin: 25px 0 10px 0;
}
.brand h4{
  margin-bottom: 5px;
}
.brand .logo{
  margin: 20px;
  max-width: 100%;
  width: 250px;
}
.brand .spacehey-icon{
  width: 90px;
  max-width: 100%;
}
.brand .color{
  min-height: 70px;
  width: 300px;
  max-width: 100%;
  background: #1D4ED8;
  background: var(--logo-blue);
  color: white;
  font-weight: bold;
  font-size: 2em;
  padding: 30px 0;
  text-align: center;
}

.manage-group-member{
  font-weight: normal !important;
  font-size: 0.7em;
  text-align: center;
}
.group-left .group-pic{
  max-width: 100%;
  max-height: 200px;
  width: 200px;
}
ul.group-actions{
  width: 100%;
  list-style: none;
  border: 2px solid #BFDBFE;
  border: 2px solid var(--even-lighter-blue);
  padding: 0;
  margin: 10px 0 6px 0;
}
ul.group-actions li{
  color: #1E40AF;
  color: var(--darker-blue);
  background: #BFDBFE;
  background: var(--even-lighter-blue);
  margin: 5px;
  padding: 6px 5px;
  text-align: center;
  font-weight: bold;
}
ul.group-actions li:hover{
  background: #DBEAFE;
  background: var(--lightest-blue);
}
ul.group-actions a{
  text-decoration: none;
  color: inherit;
}
.report-group{
  font-size: 0.7em;
  text-align: center;
  margin: 5px 0 5px 0;
}
.forum-container,
.groups-container{
  margin: 0 auto 30px auto;
  width: 750px;
  padding: 0 8px;
  max-width: 100%;
}
.topic-container{
  margin: 8px 14px;
}
.topic-container .replies-headline{
  margin-bottom: 5px;
}
.topic-container .publish-date{
  font-size: 92%;
}
.topic-container .title{
  overflow-wrap: break-word;
  word-break: break-word;
}
.article .edit-info .author-details .publish-date{
  font-size: 80%;
}
.article .edit-info .author-details h4{
  margin: 10px 0 5px 0;
}
.article .edit-info .author-details p{
  margin: 7px 0;
}
.topic-box{
  background: #DBEAFE;
  background: var(--lightest-blue);
  border: 1px solid #60A5FA;
  border: 1px solid var(--lighter-blue);
  margin-top: 15px;
  position: relative;
}
.topic-box .col,
.reply-box .col{
  padding: 10px 10px 5px 10px;
}
.topic-box .m-col p:last-child,
.reply-box .m-col p:last-child{
  margin-bottom: 5px;
}
.topic-info,
.reply-info{
  padding: 5px;
  border-right: 3px solid white;
  font-size: 0.81em;
  overflow-wrap: break-word;
  word-break: break-word;
}
.topic-info h4,
.reply-info h4{
  margin: 8px 0;
}
.topic-info .profile-pic,
.reply-info .profile-pic{
  width: 100px;
  max-width: 100%;
}
.reply-box{
  background: #fcdbb8;
  background: var(--even-lighter-orange);
  border: 2px solid #f9c56c;
  border: 2px solid var(--light-orange);
  margin-bottom: 10px;
  position: relative;
}
.topic-box .report,
.reply-box .report{
  font-size: 0.7em;
  position: absolute;
  bottom: 4px;
  right: 10px;
}

.layout-screenshot-container{
  min-height: 150px;
}
.layout-screenshot{
  max-width: 100%;
  max-height: 380px;
  margin: 5px 0 0 0;
}
.profile-summary{
  width: 100%;
  border: 2px solid #60A5FA;
  border: 2px solid var(--lighter-blue);
  background: #DBEAFE;
  background: var(--lightest-blue);
  margin: 14px 0;
  font-weight: bold;
  min-height: 140px;
}
.profile-summary .profile-pic{
  height: 120px;
  float: left;
  padding: 0 14px 0 0;
}
.profile-summary .profile-pic img{
  max-width: 120px;
  max-height: 120px;
}

a.filter-active{
  font-weight: bold;
}

.private-profile h3 .icon{
  height: 1.2em;
  width: 1.2em;
  vertical-align: top;
}
.private-profile .profile-pic img{
  max-width: 100px;
  max-height: 100px;
}


.icon,
.award img{
  display: inline-block;
  height: 1.4em;
  width: 1.4em;
  aspect-ratio: 1/1;
  margin: 0 .05em 0 .1em;
  vertical-align: -0.3em;
  color: rgba(0,0,0,0);
}
.icon.verified{
  height: 0.9em;
  width: 0.9em;
  margin: 0 .02em 0 0;
  vertical-align: -0.06em;
  filter: drop-shadow(0px 0px 2px rgba(67,131,184,0.2));
}
.icon.emoji{
  user-select: text;
  height: 1.7em;
  width: 1.7em;
  vertical-align: -0.4em;
  margin: 0 0.03em 0 0.03em;
  filter: drop-shadow(0px 0px 0.7px rgba(0,0,0,0.52));
}
.verified-info[data-reason]{
  cursor: pointer;
}
.award{
  display: inline-block;
  margin: 0 5px 0 0;
}
.award img{
  height: 1.6em;
  width: 1.6em;
}

.nsfw img:not(.icon),
img.nsfw{
  filter: blur(3px);
}

.no-margin{
  margin: 0 !important;
}


.f-row{ width: 100%; display: table; table-layout: fixed; }
.f-col{ display: table-cell; vertical-align: top; }

@keyframes animated-bg-gradient{
  0%{background-position:0% 11%}
  50%{background-position:100% 90%}
  100%{background-position:0% 11%}
}
@keyframes blink{
  0%{ opacity: 1.0; }
  50%{ opacity: 0.0; }
  100%{ opacity: 1.0; }
}
blink{
  animation-name: blink;
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(1.0,0,0,1.0);
  animation-duration: 2s;
}
.online{
  color: #0C8C00;
  font-weight: bold;
  font-size: 95%;
}
.online img{
  height: 1.5em;
  margin-right: 5px;
  animation-name: blink;
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(1.0,0,0,1.0);
  animation-duration: 2s;
}

#captcha{
  width: 300px;
  max-width: 100%;
  margin: 10px 0;
  border: 1px solid black;
  text-align: center;
  background: #f2f0f0;
  background: var(--light-gray);
  display: flex;
  flex-direction: column;
}
#captcha.center{
  margin-left: auto;
  margin-right: auto;
}
#captcha .heading{
  background: #1D4ED8;
  background: var(--logo-blue);
  padding: 2px 7px;
  color: white;
  width: 100%;
  position: relative;
}
#captcha .heading h4{
  margin: 2px 0;
  display: inline-block;
}
#captcha .heading .help{
  color: #f2f0f0;
  color: var(--light-gray);
  position: absolute;
  top: 2px;
  right: 2px;
}
#captcha .inner{
  padding: 5px 15px;
  width: 100%;
  min-height: 120px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
}
#captcha p.msg{
  width: 100%;
  margin: 0;
}
#captcha p.msg.error-msg{
  color: #FF0000;
  color: var(--red);
}
#captcha p.msg.loading-msg{
  cursor: progress;
}
#captcha .inner h4{
  margin-top: 8px;
}
#captcha .question{
  width: 100%;
}
#captcha .choices{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin: 5px 0 10px 0;
}
#captcha .choice_btn{
  width: 40px;
  height: 40px;
  border: 2px solid #545454;
  border: 2px solid var(--darker-gray);
  cursor: pointer;
  border-radius: 50%;
  aspect-ratio: 1/1;
  background-color: white;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  transition: all 0.4s ease;
}
#captcha .question_btn{
  border-radius: 0;
  border: 2px solid #059669;
  border: 2px solid var(--dark-green);
  cursor: default;
  pointer-events: none;
  padding: 3px;
  background-origin: content-box;
}
#captcha .choice_btn:hover,
#captcha .choice_btn:active{
  border: 2px solid #FF0000;
  border: 2px solid var(--red);
  transform: scale(1.1);
}
#captcha .choice_btn.darken{
  filter: brightness(85%);
}
#captcha .question_seperator{
  display: inline-block;
  border-right: 1px solid black;
  height: 40px;
  margin: 0 5px;
}


@media(min-width: 30em){ /* DESKTOP */
  .row{ width: 100%; display: table; table-layout: fixed; }
  .col{ display: table-cell; vertical-align: top; }
  .col.w-10{ width: 10%; }
  .col.w-15{ width: 15%; }
  .col.w-20{ width: 20%; }
  .col.w-25{ width: 25%; }
  .col.w-30{ width: 30%; }
  .col.w-40{ width: 40%; }
  .col.w-50{ width: 50%; }
  .col.w-60{ width: 60%; }
  .col.w-70{ width: 70%; }
  .col.w-75{ width: 75%; }
  .col.w-80{ width: 80%; }
  .col.w-90{ width: 90%; }
  .d-hide{
    display: none !important;
  }
  .home .col.left{
    background-image: url('https://static.spacehey.net/img/divider_o.png');
    background-position: right -15px;
    background-repeat: repeat-y;
  }
  .row.middle-space .col:first-child{
    padding-right: 10px;
  }
  .row.middle-space .col:last-child{
    padding-left: 10px;
  }
  .groups-container .group-left{
    padding-right: 15px;
  }
  .groups-container .group-right{
    padding-left: 15px;
  }
  .topic-closed-message h3:before,
  .topic-closed-message h3:after{ /* https://stackoverflow.com/a/14731123 */
    background-color: #545454;
    background-color: var(--darker-gray);
    content: "";
    display: inline-block;
    height: 1px;
    position: relative;
    vertical-align: middle;
    width: 50%;
  }
  .topic-closed-message h3:before{
    right: 0.5em;
    margin-left: -50%;
  }
  .topic-closed-message h3:after{
    left: 0.5em;
    margin-right: -50%;
  }
  .article .edit-info .author-details .links a,
  .topic-box .links a{
    display: block;
    margin-bottom: 5px;
  }
}

@media(max-width: 30em){ /* MOBILE */
  .m-row{ width: 100%; display: table; table-layout: fixed; }
  .m-col{ display: table-cell; vertical-align: top; }
  .m-hide{
    display: none !important;
  }
  nav .top{
    display: block;
  }
  nav .top .left{
    width: 100%;
    margin-bottom: 10px;
  }
  nav .top .right{
    position: absolute;
    top: 8px;
    right: 8px;
  }
  nav .top .center{
    width: 100%;
  }
  nav .top .center form{
    display: flex;
  }
  nav .top .center .search-wrapper{
    flex: 1;
  }
  nav .top .center .search-wrapper input{
    width: calc(100% - 10px);
    max-width: 100%;
  }
  nav .links{
    text-align: center;
    padding: 3.5px 3.5px 5.5px 3.5px;
  }
  .info-box{
    border-right-width: 1px !important;
  }
  .info-box:not(:last-child){
    border-bottom-width: 0px;
  }
  .home .new-people,
  .home .music .heading,
  .home .spa{
    margin-right: 0;
  }
  .user-home .spa.specials .inner .details{
    font-size: 100%;
  }
  .music .heading,
  .specials .heading,
  .bulletin-preview .heading,
  .blog-sub-preview .heading{
    margin-right: 0;
  }
  .statistics{
    width: 100%;
  }
  .statistics p{
    line-height: 1.4em;
  }
  .category-list:not(.discover-groups){
    padding-top: 10px;
  }
  .category-list ul{
    margin: 10px 0 0 0;
  }
  .category-list li{
    display: inline-block;
    margin-right: 11px;
  }
  .blog-category .right h1,
  .blog-category .right h2{
    margin-top: 0;
  }
  .shop .product-img,
  .shop .supporter-info{
    width: 100%;
  }
  .shop .product-img-desc{
    text-align: right;
  }
  .topic-info,
  .reply-info{
    border-right: none;
    border-bottom: 3px solid white;
    padding: 0;
  }
  .topic-info .m-col,
  .reply-info .m-col{
    padding: 5px;
  }
  .topic-info h4,
  .reply-info h4{
    margin-top: 4px;
  }
  .article .edit-info .profile-pic,
  .article .edit-info .author-details{
    display: inline-block;
    vertical-align: top;
  }
  .article .edit-info .author-details{
    padding-left: 10px;
    width: calc(100% - 115px); /* full width minus the profile pic */
    min-width: 145px;
    max-width: 100%;
  }
  .article .edit-info .author-details .links a:not(:last-child),
  .topic-box .links a{
    margin-right: 5px;
  }
  .article .edit-info .author-details .links a:last-child{
    display: block;
    margin-top: 5px;
  }
  .username-box{
    display: block;
  }
  .settings-sessions-table{
    display: block;
  }
  .forum-table th:last-child,
  .forum-table td:last-child{
    display: none;
  }
  .topic-closed-message h3{
    font-style: italic;
  }
  .bulletin-table .comment-col{
    display: none;
  }
  .bulletin-table .time-col time{
    font-size: 80%;
  }
  ul.group-actions{
    margin: 0 4px 6px 4px;
  }
  .advent-day-box{
    width: calc(100% - 20px);
  }
  #captcha .inner{
    padding: 5px 10px;
  }
  #captcha .choice_btn{
    width: 38px;
    height: 38px;
  }
  #captcha .question_seperator{
    height: 38px;
  }
}

@media(max-width: 17em){ /* SUPER-SMALL MOBILES (LIKE FEATURE-PHONES) */
  nav .top{
    padding-top: 8px;
  }
  nav .top .left .logo{
    width: 99px;
    height: 25.2px;
    margin-left: 0;
  }
  nav .links{
    display: flex;
    overflow-x: auto;
    gap: 5px;
    padding-left: 8px;
  }
  nav .links li:not(:last-child)::after{
    display: ruby;
  }
  .music .inner,
  .specials .inner{
    padding: 4px 0 10px 0;
    min-height: 120px;
  }
  .music .inner .cover img,
  .specials .inner .image img{
    width: 40px;
  }
}

@supports(-webkit-touch-callout: none){ /* Safari on iOS */
  input{ /* set min font-size for inputs to 16px to avoid auto-zooming */
    font-size: 100%;
    font-size: max(100%, 16px);
  }
 button,
[type="button"],
[type="reset"],
[type="submit"] {
 -webkit-appearance:button;
 font-family: "MS Sans Serif","Arial";
 -webkit-font-smoothing: antialiased;
 box-sizing: border-box;
 border: 1px solid #003c74;
 background: linear-gradient(180deg,#fff,#ecebe5 86%,#d8d0c4);
 box-shadow: none;
 border-radius: 3px;
 height: 21px;
}
  button,
input,
optgroup,
select,
textarea {
 font-family:inherit;
 font-size:100%;
 line-height:1.15;
 margin:0;
 border: 1px solid #7f9db9;
 background-color: #fff;
 box-sizing: border-box;
 -webkit-appearance: none;
 -moz-appearance: none;
 appearance: none;
 border-radius: 0;
 height: 21px;
}
}
</style>
Copy and paste this code into the "About me" section of your Profile to use it.
Caution: This Layout was not inspected by SpaceHey — use it at your own risk.
Comments

Displaying 20 of 64 comments ( View all | Add Comment )
IDOTHINGS	1787410206 USING!!! Report Comment
filmgirl	1786400421 usinggg Report Comment
Val	1785979668 Def usingg, ts so coolll Report Comment
Val	1785979668 Def usingg, ts so coolll Report Comment
✩✧ ℕ𝔼𝕏𝕆 ✧✩	1785277932 definitely using, brings so many memories Report Comment
showaah	1783291882 using Report Comment
nicoo⦻	1781440692 using Report Comment
ThePinksSigma	1774411317 using Report Comment
rijIiik	1774191380 using! Report Comment
NULL	1773764896 Using! Report Comment
Fiviee	1773584433 using Report Comment
Nichtoless	1769280284 usiiingggggggg Report Comment
XEROX	1768910409 Using!! Report Comment
evil_xnijl	1768812057 like the only great XP layout on this website. USING! Report Comment
JAWS!!	1765397711 using :P Report Comment
Aster	1764220601 Using!! Report Comment
bucketofdoritos	1762199143 using !! Report Comment
nicolas(╬▔皿▔)╯	1761009930 using Report Comment
Amia (˶ˆᗜˆ˵)	1759592441 using Report Comment
lolazxn	1758166871 usando! :3 Report Comment