Windows 11 Light v1

Tags: windows, microsoft, 2023, fluent, mica, windows 11, 11, light theme, light, theme
Description:

Modified version of Windows 7 Basic layout by Tilin. Made to look like Windows 11.
Preview:

click on the image for a larger preview
Code:

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

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

<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: #fff;
  --light-orange: #fff;
  --even-lighter-orange: #fff;
  --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: var(--gray);
  font-family: Segoe UI, arial, sans-serif, helvetica;
  background-image: url(https://psyclonecities.neocities.org/assets/img0.jpg);
  background-size: cover;
  background-attachment: fixed;
  background-position: center;
}
.container{
  width: 810px;
  max-width: 100%;
  margin: 0 auto 10px;
  align-items: center;
  background: #ffffffe3;
  border-radius: 6px 6px 6px 6px;
  box-shadow: inset 0 0 .5px .5px #fff;
  /*! display: flex; */
  font: Segoe UI,sans-serif;
  justify-content: space-between;
  padding: 6px;
   box-shadow: 0px 1px 3px 3px rgba(70,70,70,0.4); 
   backdrop-filter: blur(17px); 
}
time.ago{
  opacity: 0;
}
.soon{
  opacity: 0.7;
}
details summary{
  cursor: pointer;
  user-select: none;
}
a{
  color: #1E40AF;
  color: #000;
  text-decoration: none;
}
a:hover,
a:active,
.blog-entry .kudos-btn:hover,
.blog-entry .kudos-btn:active{
  text-decoration: underline;
}
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: black;
  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: transparent;
  padding: 15px 10px 14px 10px;
  display: flex;
  position: relative;
}
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: transparent;
  padding: 3.5px 16px 5.5px 16px;

}
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;

  font-size: 0.98em;
  font-size: max(0.98em, 12px);
}
nav .links a:hover{
  text-decoration: underline;
  color: #0017ff;
}
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: 100;
  margin: 10px 0 10px;
  padding: 10px 5px;
  background: 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;
radius: 100px;
}
.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;
  \.container\ \{\ width: 810px;
  max-width: 100%;
  margin: 0 auto 10px;
  align-items: center;
  border-radius: 100px 100px 100px 100px;
  /*! display: flex; */
  font: Segoe UI,sans-serif;
  justify-content: space-between;
  /*! padding: 6px; */
  /*! box-shadow: 0px 1px 3px 3px rgba(70,70,70,0.4); */
  /*! backdrop-filter: blur(14px); */
}
.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: transparent;
  margin: 10px 0;
}
.setting-section{
  margin: 15px 0;
}
.profile .contact .heading,
.profile .table-section .heading,
.setting-section .heading,
.home-actions .heading{
  background: #A5FA;
  background: transparent;
  color: black;
  padding: 2px 7px;
}
.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;
}
.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: white;
  color: #1D4ED8;
  color: black;
  font-weight: bold;
  width: 33%;
border: #fff;
}
.details-table td{
  background: #DBEAFE;
  background: white;
  vertical-align: top;
  input\[type\=\"email\"\]\,\ input\[type\=\"number\"\]\,\ input\[type\=\"password\"\]\,\ input\[type\=\"text\"\]\,\ textarea\ \{\ background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 2px;
  border-top-color: #8e8f8f;
  box-sizing: border-box;
  font: 9pt Segoe UI,sans-serif;
  padding: 3px 4px 5px;
border: #fff;
}
.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: transparent;
  color: #ED0707;
  color: #000;
  padding: 2px 7px;
}
.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{
  font-family: revert;
}
.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: black;
}
.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: black;
  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: #000;
}
.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%;
border: #fff;
}
.comments-table td,
.music-table td{
  background: #fcdbb8;
  background: var(--even-lighter-orange);
  vertical-align: top;
border: #fff;
}
.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{
height: 30px;
border-radius: 16px;
}
.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-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;
  }
}

@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);
  }
}
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ html {
 line-height:1.15;
 -webkit-text-size-adjust:100%
}
body {
 margin:0
}
main {
 display:block
}
h1 {
 font-size:2em;
 margin:.67em 0
}
hr {
 box-sizing:content-box;
 height:0;
 overflow:visible
}
pre {
 font-family:monospace,monospace;
 font-size:1em
}
a {
 background-color:transparent
}
abbr[title] {
 border-bottom:none;
 text-decoration:underline;
 text-decoration:underline dotted
}
b,
strong {
 font-weight:bolder
}
code,
kbd,
samp {
 font-family:monospace,monospace;
 font-size:1em
}
small {
 font-size:80%
}
sub,
sup {
 font-size:75%;
 line-height:0;
 position:relative;
 vertical-align:baseline
}
sub {
 bottom:-.25em
}
sup {
 top:-.5em
}
img {
 border-style:none
}
button,
input,
optgroup,
select,
textarea {
 font-family:inherit;
 font-size:100%;
 line-height:1.15;
 margin:0
}
button,
input {
 overflow:visible
}
button,
select {
 text-transform:none
}
button,
[type="button"],
[type="reset"],
[type="submit"] {
 /*! -webkit-appearance:button; */background: linear-gradient(180deg,#FDFDFD 45%,#FDFDFD 0,#FDFDFD);
 border: 1px solid #0078D4;
 border-radius: 4px;
 box-shadow: inset 0 -1px 1px hsla(0,0%,100%,.8),inset 0 1px 1px #fff;
 box-sizing: border-box;
 color: #222;
 font: 9pt Segoe UI,sans-serif;
 min-height: 23px;
 min-width: 75px;
 padding: 0 12px;
 text-align: center;
}
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
 border-style:none;
 padding:0
}
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
 outline:1px dotted ButtonText
}
fieldset {
 padding:.35em .75em .625em
}
legend {
 box-sizing:border-box;
 color:inherit;
 display:table;
 max-width:100%;
 padding:0;
 white-space:normal
}
progress {
 vertical-align:baseline
}
textarea {
 overflow:auto
}
[type="checkbox"],
[type="radio"] {
 box-sizing:border-box;
 padding:0
}
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
 height:auto
}
[type="search"] {
 -webkit-appearance:textfield;
 outline-offset:-2px
}
[type="search"]::-webkit-search-decoration {
 -webkit-appearance:none
}
::-webkit-file-upload-button {
 -webkit-appearance:button;
 font:inherit
}
details {
 display:block
}
summary {
 display:list-item
}
template {
 display:none
}
[hidden] {
 display:none
}


</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 4 of 4 comments ( View all | Add Comment )
λ486	1736077951 using but i might mod it to be dark or smthn Report Comment
KingOfSiberya	1712326673 using Report Comment
Pax!	1710098829 usin! Report Comment
Cosma	1704617548 using (but the spacehey logo broke to normal one) proof: https://i.imgur.com/FHz4RTQ.png Report Comment i changed the logo back to the normal one because the windows 7 one was accidentally left there, i might change it in the future but for now you need to use another logo from layouts by psyclone; 1705082994; Report understood! thank you for reply by Cosma; 1707073105; Report no problem! by psyclone; 1707086152; Report