html {
  scroll-behavior: smooth;
}

body {
	text-rendering: optimizeLegibility;
    background: var(--bg);
}

::selection {
    background-color: #fff !important;
    color: #000 !important;
}

* {
	box-sizing: border-box;
    scrollbar-width: thin;
    -ms-overflow-style: none;
    scrollbar-color: var(--fg4) var(--fg2);
}

* img {
    user-select:none;
}

*::-webkit-scrollbar {
    width: 8px;
}

*::-webkit-scrollbar-track {
    background: var(--fg4);
}

*::-webkit-scrollbar-thumb {
    background-color: var(--fg2);
}

a {
	cursor: pointer;
}

a * {
	cursor: pointer;
}

:root {
  --bg: #e9e9e9;
  --fg: #b2b39f;
  --b1: #c5c1c0;
  --b2: #373c36;
  --bs1: #999999;
  --bs2: #000;
  --fg2: #3d423c;
  --fg3: #9a9b85;
  --fg4: #cbccb5;
  --fg5: #c8c9b5;
  --font: #000;
  --font2: #fff;
  --title: #ffffffaf;
  --accent: #ad001d;
  --effect: grayscale(80%);
  --bgfilter: sepia(70%) grayscale(70%) blur(10px) brightness(50%);
}

:root:has(#ps1:checked) {
  --bg: #000000;
  --fg: #b2b39f;
  --b1: #c5c1c0;
  --b2: #373c36;
  --bs1: #999999;
  --bs2: #000;
  --fg2: #3d423c;
  --fg3: #9a9b85;
  --fg4: #cbccb5;
  --fg5: #c8c9b5;
  --font: #000;
  --font2: #fff;
  --title: #ffffffaf;
  --accent: #b8001f;
  --effect: grayscale(80%);
  --bgfilter: sepia(70%) grayscale(70%) blur(10px) brightness(50%);
}

:root:has(#steam:checked) {
  --bg: #303030;
  --fg: #3e4637;
  --b1: #272e22;
  --b2: #30352a;
  --bs1: #272e22;
  --bs2: #000;
  --fg2: #000;
  --fg3: #272e22;
  --fg4: #829476;
  --fg5: #5a6851;
  --font: #d7ded3;
  --font2: #fff;
  --title: #c3c9bf;
  --accent: #bfba4b;
  --effect: hue-rotate(30deg) grayscale(90%);
  --bgfilter: grayscale(70%) blur(10px) brightness(50%);
}

:root:has(#ps2:checked) {
  --bg: #000;
  --fg: #929fb6;
  --b1: #242424;
  --b2: #1f1f1f;
  --bs1: #11154e;
  --bs2: #000;
  --fg2: #181818;
  --fg3: #a0a2b9;
  --fg4: #a2c4d8;
  --fg5: #085cba;
  --font: #000958;
  --font2: #fff;
  --title: #5f5f5f;
  --accent: #00e1ff;
  --effect: hue-rotate(140deg) grayscale(40%);
  --bgfilter: saturate(150%) blur(10px) brightness(50%);
}

:root:has(#gamecube:checked) {
  --bg: #7c7c7c;
  --fg: #dcd6f0;
  --b1: #5b4fa0;
  --b2: #4a3961;
  --bs1: #2c263a;
  --bs2: #cccad4;
  --fg2: #ede8ff;
  --fg3: #aea4d3;
  --fg4: #9585f0;
  --fg5: #895df8;
  --font: #2c263a;
  --font2: #54505e;
  --title: #5b4fa0;
  --accent: #895df8;
  --effect: hue-rotate(200deg) grayscale(40%);
  --bgfilter: hue-rotate(240deg) grayscale(90%) blur(15px) brightness(80%);
}

:root:has(#xbox:checked) {
  --bg: #6b6b6b;
  --fg: #151d17;
  --b1: #f5ff9d;
  --b2: #c0c0c0;
  --bs1: #ffffff;
  --bs2: #000000;
  --fg2: #cfcfcf;
  --fg3: #ececec;
  --fg4: #464646;
  --fg5: #107c10;
  --font: #77bb44;
  --font2: #000000;
  --title: #2ca243;
  --accent: #bf0700;
  --effect: hue-rotate(12deg) grayscale(0%);
  --bgfilter: hue-rotate(0deg) grayscale(0%) blur(10px) brightness(80%);
}

:root:has(#ps1:checked) .logo .img-ps1,
:root:has(#ps1:checked) .banner .banner-ps1,
:root:has(#ps1:checked) .ban1 .homebanner1-ps1,
:root:has(#ps1:checked) .ban2 .homebanner2-ps1,
:root:has(#ps1:checked) .bg .ps1bg {
  display: block;
}

:root:has(#steam:checked) .logo .img-steam,
:root:has(#steam:checked) .banner .banner-steam,
:root:has(#steam:checked) .ban1 .homebanner1-steam,
:root:has(#steam:checked) .ban2 .homebanner2-steam,
:root:has(#steam:checked) .bg .steambg {
  display: block;
}

:root:has(#ps2:checked) .logo .img-ps2,
:root:has(#ps2:checked) .banner .banner-ps2,
:root:has(#ps2:checked) .ban1 .homebanner1-ps2,
:root:has(#ps2:checked) .ban2 .homebanner2-ps2,
:root:has(#ps2:checked) .bg .ps2bg {
  display: block;
}

:root:has(#gamecube:checked) .logo .img-gamecube,
:root:has(#gamecube:checked) .banner .banner-gamecube,
:root:has(#gamecube:checked) .ban1 .homebanner1-gamecube,
:root:has(#gamecube:checked) .ban2 .homebanner2-gamecube,
:root:has(#gamecube:checked) .bg .gamecubebg {
  display: block;
}

:root:has(#xbox:checked) .logo .img-xbox,
:root:has(#xbox:checked) .banner .banner-xbox,
:root:has(#xbox:checked) .ban1 .homebanner1-xbox,
:root:has(#xbox:checked) .ban2 .homebanner2-xbox,
:root:has(#xbox:checked) .bg .xboxbg {
  display: block;
}

.ban1 img,
.ban2 img {
  display: none;
}

.theme-switcher input { position: absolute; left: -9999px; }
.theme-switcher label { cursor: pointer; padding: .3rem .7rem; }

.bg video { display: none; }

:root:not(:has(:checked)) .bg .ps1bg { display: block; }

:root:has(#ps1:checked) .bg .ps1bg { display: block; }
:root:has(#steam:checked) .bg .steambg { display: block; }
:root:has(#ps2:checked) .bg .ps2bg { display: block; }
:root:has(#gamecube:checked) .bg .gamecubebg { display: block; }
:root:has(#xbox:checked) .bg .xboxbg { display: block; }

.bg {
  position: absolute;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  top:0;
  left:0;
  pointer-events: none;
  user-select: none ;
    &::before {
        animation: scanlines 8s steps(10) infinite;
        background-image: url(/img/scanlines.gif);
        content: "";
        height: 300%;
        left: -50%;
        opacity: .025;
        position: fixed;
        top: -110%;
        width: 300%;
        pointer-events: none;
        z-index: -1;
    }
}

@keyframes scanlines {
 0%, 100% { transform:translate(0, 0) }
 10% { transform:translate(-5%, -10%) }
 20% { transform:translate(-15%, 5%) }
 30% { transform:translate(7%, -25%) }
 40% { transform:translate(-5%, 25%) }
 50% { transform:translate(-15%, 10%) }
 60% { transform:translate(15%, 0%) }
 70% { transform:translate(0%, 15%) }
 80% { transform:translate(3%, 35%) }
 90% { transform:translate(-10%, 10%) }
}

.bg video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -2;
  transform: translate(-50%, -50%);
  object-fit: cover;
  filter: var(--bgfilter);
  display: none;
}

.content {
    display: grid;
    position: relative;
    grid-template-areas:
    'logo banner'
    'sidebar nav'
    'sidebar main'
    'sidebar footer';
	grid-template-columns: auto 1fr;
	grid-template-rows: 1fr;
    column-gap:4em;
    max-width: 725px;
    margin: 3% auto auto 3%;
    font-family: Verdana,Arial,Helvetica,sans-serif;
    font-size: 10px;
    color: var(--font);
    a {
        color: var(--accent);
    }
}

    .title {
        color: var(--title);
        text-shadow: 1px 1px #00000041;
    }

    h1 {
        color: var(--title);
        font-size: 0.875rem;
        text-shadow: 1px 1px #00000041;
    }

    h2 {
        text-align: center;
        color: var(--title);
        font-size: 0.875rem;
        text-shadow: 1px 1px #00000041;
    }

.logo {
    grid-area: logo;
    display: flex;
    align-items: center;
    justify-content: center;
    img {
        max-width: 150px;
        max-height: 100px;
        display: none;
        filter: drop-shadow(4px 2px 0 #000);
    }
}

.banner {
    border-top: 1px solid var(--b1);
    border-left: 1px solid var(--b1);
    border-right: 1px solid var(--b2);
    border-bottom: 1px solid var(--b2);
    box-shadow: inset -1px -1px 0 var(--bs1), -1px 0px 0 var(--bs1), 1px 1px 0 var(--bs2);
    border-radius: 15px;
    background-color: var(--fg2);
    grid-area: banner;
    text-align: center;
    margin-bottom: 2em;
    width: 100%;
    img {
        width: 90%;
        display: none;
        padding-top: 3%;
        padding-bottom: 2.5%;
        margin: auto;
    }
}

.sidebar {
    grid-area: sidebar;
    max-width: 160px;
    display: grid;
    grid-template-columns: auto;
}

.counter {
    border-top: 1px solid var(--b1);
    border-left: 1px solid var(--b1);
    border-right: 1px solid var(--b2);
    border-bottom: 1px solid var(--b2);
    box-shadow: inset -1px -1px 0 var(--bs1), -1px 0px 0 var(--bs1), 1px 1px 0 var(--bs2);
    border-radius: 15px;
    background-color: var(--fg2);
    padding: 1em;
    color:var(--font2);
    text-align: center;
    height:fit-content;
    margin-top:2em;
}

.theme {
    margin-top: 1em;
    height: fit-content;
    border-top: 1px solid var(--b1);
    border-left: 1px solid var(--b1);
    border-right: 1px solid var(--b2);
    border-bottom: 1px solid var(--b2);
    box-shadow: inset -1px -1px 0 var(--bs1), -1px 0px 0 var(--bs1), 1px 1px 0 var(--bs2);
    border-radius: 15px;
    background-color: var(--fg);
    padding: 1em;
    text-align: center;
    span {
        margin-bottom: 0.6em;
        display: block;
    }
}

label {
    text-shadow: 1px 1px 0 #ffffff49;
    display: block;
    img {
        vertical-align: -3px;
        filter: drop-shadow(1px 1px 0 #000);
        margin-right: 3px;
        cursor: pointer;
    }
    &:hover {
        filter: invert(100%);
    }
}

.other {
    margin-top: 1em;
    height:153px;
    border-top: 1px solid var(--b1);
    border-left: 1px solid var(--b1);
    border-right: 1px solid var(--b2);
    border-bottom: 1px solid var(--b2);
    box-shadow: inset -1px -1px 0 var(--bs1), -1px 0px 0 var(--bs1), 1px 1px 0 var(--bs2);
    border-radius: 10px;
    background-color: var(--fg2);
}

.me {
    margin-top: 1em;
    height: fit-content;
    text-align: center;
    a {
        color:var(--font2);
        text-decoration: none;
        &:hover {
            text-decoration: underline;
        }
    }
}

.panel {
  display: none;
}

:target {
  display: block;
}

body:not(:has(:target)) #home {
  display: block;
}

body:has(#home:target) nav a[href="#home"],
body:not(:has(:target)) nav a[href="#home"] {
  background: var(--fg4);
}

body:has(#rules:target) nav a[href="#rules"] {
  background: var(--fg4);
}

body:has(#join:target) nav a[href="#join"] {
  background: var(--fg4);
}

body:has(#widgets:target) nav a[href="#widgets"] {
  background: var(--fg4);
}

body:has(#members:target) nav a[href="#members"] {
  background: var(--fg4);
}

nav {
    grid-area: nav;
    display: flex;
    align-items: end;
    justify-content: right;
    a {
        background-color: var(--fg3);
        margin-right: 1em;
        font-size: 12pt;
        font-family: 'pix';
        font-weight: 100;
        text-decoration: none;
        color:var(--font) !important;
        padding-right: 14px;
        padding-left: 14px;
        width:80px;
        text-align: center;
        padding-top: 2px;
        border-radius: 6px;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        text-transform: uppercase;
        border-top: 1px solid var(--b1);
        border-left: 1px solid var(--b1);
        border-right: 1px solid var(--b2);
        text-shadow: 1px 1px 0 #ffffff49;
        cursor: pointer;
        transform: translateX(0);
        box-shadow: inset -1px -1px 0 var(--bs1), -1px 0px 0 var(--bs1), 1px 0px 0 var(--bs2);
        &:hover {
            filter: brightness(120%);
        }
    }
}

@font-face {
	font-family: 'pix';
	src: url('/fonts/pix.ttf');
}

main {
    grid-area: main;
    border-top: 1px solid var(--b1);
    border-left: 1px solid var(--b1);
    border-right: 1px solid var(--b2);
    border-bottom: 1px solid var(--b2);
    box-shadow: inset -1px -1px 0 var(--bs1), -1px 0px 0 var(--bs1), 1px 1px 0 var(--bs2);
    border-radius: 15px;
    background-color: var(--fg);
    height: 480px;
    overflow:auto;
    padding: 15px;
}

body:has(#members:target) main {
    overflow-y: scroll;
}

.homebanner {
    width: 100%;
    height: 130px;
    background-color: var(--b1);
    border: 1px solid var(--b2);
    border-radius: 10px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
    'ban1 ban2';
    max-width: 493px;
    gap: 0.3em;
    padding: 0.3em;
    position: relative;
}

.whatis {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
    'ban1 ban2';
    gap:1em;
    align-items: center;
}

.crt {
    float: right;
    margin-top:1em;
}

.crt2 {
    position: absolute;
    bottom:0px;
    right:-10px;
    z-index: 10;
}

.bubble {
    background-color: white;
    color:black;
    border: 1px solid var(--bs2);
    border-radius: 5px;
    padding: 2px;
    position: absolute;
    bottom:37px;
    right:-120px;
    z-index: 10;
    img {
        vertical-align: -4px;
        margin-right: 1px;
    }
}

.signup {
    position: absolute;
    z-index: 4;
    top:195px;
    left:165px;
    filter: var(--effect);
    cursor: pointer;
    display: none;
}

body:has(#home:target) .signup { 
  display: block;
}

body:not(:has(:target)) .signup { 
  display: block;
}

.ban1 {
    grid-area: ban1;
    overflow: hidden;
    border-radius: 12px;
}

.ban2 {
    grid-area: ban2;
    overflow: hidden;
    border-radius: 10px;
}

.ban1, .ban2 {
    img {
        width: 100%;
        filter: grayscale(100%);
        border: 1px solid var(--b2);
    }
}

.homecontent {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
    'homeone hometwo';
    gap: 1em;
}

.homeone {
    grid-area: homeone;
}

.changelog {
    width: 241px;
    margin-top:1em;
    filter: var(--effect);
    .inner {
        border-left:1px solid #000;
        border-right: 1px solid #000;
        background-color: #ffffcc;
        margin-top:-2px;
        padding: 0 10px;
        color: var(--bs2);
        span {
            color:red;
            font-weight: 1000;
        }
    }
}

.fanlisting {
    margin-top:1em;
    background-color: var(--fg5);
    border: 1px solid var(--b2);
    padding: 8px 12px;
    text-shadow: 1px 1px 0 #0000003b;
    border-radius: 10px;
    min-height: 80px;
    box-shadow: inset 0px 1px rgba(255, 255, 255, 0.342), inset 0px -1px rgba(0, 0, 0, 0.342);
    img {
        float: right;
        padding: 0 0.5em 0 2em;
    }
}

.random {
    margin-top:1.5em;
    box-shadow: inset 0px 1px rgba(255, 255, 255, 0.342), inset 0px -1px rgba(0, 0, 0, 0.342);
    background-color: var(--b1);
    border: 1px solid var(--b2);
    padding: 8px 12px;
    border-radius: 10px;
    min-height: 50px;
    text-shadow: 1px 1px 0 #ffffff7e;
    display: grid;
    grid-template-columns: 3fr 1fr;
    grid-template-areas:
    'random1 random2';
    gap: 2em;
    img {
        opacity: 0.7;
    }
}

.random2 {
    margin: auto auto 0 0;
}

.hometwo {
    grid-area: hometwo;
}

footer {
    grid-area: footer;
    text-align: center;
    margin-top: 1.5em;
    opacity: 0.5;
    color:var(--font2);
    a {
        color:var(--font2) !important;
    }
}



#index table {
  table-layout: fixed;
}

.statusiconbox {
  width: 26px;
}

#index table th.websitebox,
#index table td.websitebox {
  width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#index table th.platformbox,
#index table td.platformbox {
  width: 87px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#index table th.gamesbox,
#index table td.gamesbox {
  width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 768px) {
body:has(#members:target) main {
    overflow-y: auto;
}

  #index table {
    table-layout: auto;
  }

  .statusiconbox,
  #index table th.websitebox,
  #index table td.websitebox,
  #index table th.platformbox,
  #index table td.platformbox,
  #index table th.gamesbox,
  #index table td.gamesbox {
    width: auto !important;
    overflow: visible !important;
    white-space: normal !important;
    text-overflow: clip !important;
  }
}

hr {
    color: var(--fg5)
}

.c-inputWrapper {
    text-align: right;
    label {
        display: inline-block;
        margin-bottom: 1em;
    &:hover {
        filter: unset;
    }
    }
    span {
    color: red;
    text-shadow: 1px 1px 0 #000000;
}
&.checkboxes input {
    vertical-align: -2px;
}
input {
    border-radius: 0;
    border-width: 1px;
    &:hover {
        border: 1px solid var(--accent);
    }
}
}

#c_submitButton {
    float: right;
    border-radius: 0;
    border-width: 1px;
    font-family: Verdana,Arial,Helvetica,sans-serif;
    font-size: 10px;
}

.filters {
  margin: 0 auto 10px auto;
  width: 100%;
  display: flex;
  flex-wrap: wrap;

  label {
    margin: auto auto auto 0;
    display: flex;
    flex-direction: column;
  }

  select {
    vertical-align: -1px;
    width: 100px;
    border-radius: 0;
    border-width: 1px;

    &:hover {
      border: 1px solid var(--accent);
    }
  }
}

.statusicon {
    text-align: center;
    img {
        vertical-align: -3px;
    }
}

.texts {
    display: flex;
    justify-content: center;
    gap:2em;
    > div {
        text-align: center;
        text-shadow: 1px 1px 0 var(--bs1);
    }
}

.searchfilter {
  margin-top:5px;
  label {
  display: grid;
  grid-template-areas: 
    'searchtitle searchtitle'
    'input select';
    column-gap:0.3em;
  }
  .searchtitle {
    grid-area: searchtitle;
  }
  input {
    grid-area: input;
  }
  select {
    grid-area: select;
  }
}

.code {
    max-width: 200px;
    overflow: auto;
    text-align: left;
}
.code2 {
    max-width: 80%;
    margin: auto auto 30px;
    overflow: auto;
    text-align: left;
}
.code3 {
    max-height: 200px;
    overflow: auto;
    text-align: left;
    margin-bottom: 20px;
    background-color: var(--fg4);
    color:var(--bs2);
    pre {
        padding: 0 10px;
    }
}

.example {
    margin: auto auto 30px auto;
    width: fit-content;
    padding: 15px 15px 0;
table {
  margin: 0 auto;
}

table tr td {
  padding: 5px;
}

.webring-prev {
  text-align: right;
}

.webring-info {
   text-align: center;
   font-weight: 1000;
}

.webring-next {
  text-align: left;
}

.webring-links {
  font-weight: 100;
}
}

#whitetext {
.gamer-ring {
  margin: 0 auto;
  padding: 15px; /* creates some space around the widget */
  font-family: Verdana;
  font-size: 10px;
  a {
    text-decoration: none;
    color:#fff;
    text-shadow: 1px 1px 0 #000;
    &:hover {
      text-decoration: underline;
    }
  }
}

.gamer-ring table {
  margin: 0 auto;
}

.gamer-ring table tr td {
  padding: 5px;
}

.gamer-ring .webring-prev {
  text-align:right;
}

.gamer-ring .webring-info {
   text-align:center;
   font-weight: 1000;
}

.gamer-ring .webring-next {
  text-align:left;
}

.gamer-ring .webring-links {
  font-weight: 100;
}
}

#blacktext {
.gamer-ring {
  margin: 0 auto;
  padding: 15px; /* creates some space around the widget */
  font-family: Verdana;
  font-size: 10px;
  a {
    text-decoration: none;
    color:#000;
    text-shadow: 1px 1px 0 #fff;
    &:hover {
      text-decoration: underline;
    }
  }
}

.gamer-ring table {
  margin: 0 auto;
}

.gamer-ring table tr td {
  padding: 5px;
}

.gamer-ring .webring-prev {
  text-align:right;
}

.gamer-ring .webring-info {
   text-align:center;
   font-weight: 1000;
}

.gamer-ring .webring-next {
  text-align:left;
}

.gamer-ring .webring-links {
  font-weight: 100;
}
}

#minimal {
.gamer-ring {
  margin: 20px auto 30px;
  padding: 5px;
  color:#000;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  background-color: #e6e6e68a;
  width: 240px;
  border-radius: 15px;
  box-shadow: inset 1px 1px 0 #ffffff77, 1px 1px 0 #00000077;
  line-height: 1.1;
  letter-spacing: 0;
  a {
    text-decoration: none;
    color:#000;
    text-shadow: 1px 1px 0 #fff;
    &:hover {
      filter: invert(100%);
    }
  }
}

img {
    margin: 4px 0 0;
    cursor: pointer;
}

.gamerringtext {
  text-align: center;
  color:#000;
  text-shadow: 1px 1px 0 #fff;
  font-size: 14px;
  font-family: 'ps';
}

.gamer-ring table {
  margin: 0 auto;
  filter: drop-shadow(0 0 5px #ffffff8c);
  background-color: #ffffff48 !important;
  border-radius: 30px;
  border-collapse: collapse;
}

.gamer-ring table tr td {
  padding: 5px;
}

.gamer-ring .webring-prev {
  text-align:right;
}

.gamer-ring .webring-info {
   text-align:center;
   font-family: monospace;
   font-size: 11px;
   .r {
    font-size: 22px;
    vertical-align: -4px;
   }
   .sub {
    opacity: 0.8;
    text-shadow: 1px 1px 0 #fff;
    color: #000;
   }
}

.gamer-ring .webring-next {
  text-align:left;
}

.gamer-ring .webring-links {
  font-weight: 100;
  font-size: 10px;
}

.gamer-ring .webring-prev, .gamer-ring .webring-next {
    font-size: 26px;
}
}

@media (max-width: 768px) {
  .content {
    grid-template-areas:
    'logo'
    'banner'
    'nav'
    'main'
    'sidebar'
    'footer';
	grid-template-columns: auto;
	grid-template-rows: auto;
    column-gap:0;
    max-width: 100%;
    margin: 5% auto;
    font-size: 1rem;
  }
  h1 {
    font-size: 1.4rem;
  }
  h2 {
    font-size: 1.4rem;
  }
  #index {
    font-size: 10px;
  }
  .texts {
    flex-direction: column;
  }
  .bubble {
    position: relative;
    bottom: unset;
    right: unset;
    text-align: center;
  }
  .crt2 {
    bottom: unset;
    margin-top: -20px;
    margin-right: 10px;
  }
  .sidebar {
    margin-top:1em;
    grid-area: sidebar;
    width: 100%;
    max-width: unset;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
    'counter theme'
    'other other'
    'me me';
    gap: 1em;
  }
  .counter {
    grid-area: counter;
    margin: 0;
    display: flexbox;
    align-content: center;
    height: 100%;
  }
  .theme {
    grid-area: theme;
    display: flexbox;
    align-content: center;
    height: 100%;
  }
  .other {
    grid-area: other;
    margin: 0;
    width: 100%;
    iframe {
      width: 97%;
      max-height:140px;
    }
  }
  .me {
    grid-area: me;
    margin: 0;
  }
  .logo {
    grid-area: logo;
  }
  nav {
    grid-area: nav;
    justify-content: center;
    a {
      width: unset;
      padding: 0 5px;
    }
  }
  main {
    grid-area: main;
    width: 100%;
    height: 100%;
  }
  .theme {
    margin: 0;
    label {
      display: inline-block;
    }
  }
  .signup {
    display: none !important;
  }
  .banner {
    grid-area: banner;
    margin-top: 1em;
    margin-bottom: 1.5em;
  }
  .footer {
    grid-area: footer;
  }
  .homecontent {
    grid-template-columns: 1fr;
    grid-template-areas:
    'homeone'
    'hometwo';
    gap: 1em;
  }
  .changelog {
    margin: 2em auto;
  }
  .homebanner {
    max-width: unset;
    height: unset;
  }
  .ban1, .ban2 {
    img {
    width: 100%;
    }
  }
}