notherbase-fs 4.0.22 → 4.1.0

package/test2/public/styles/main.css

@@ -1,793 +1,793 @@
-:root {
-    /* colors */
-    --clickable: linear-gradient(90deg, rgba(255,255,255,0.015) 0%, rgba(255,255,255,0.03) 50%, rgba(255,255,255,0.015) 100%);
-    --tint: rgba(0, 0, 0, 0.123);
-    --bgColor: rgb(37, 37, 37);
-    --bgColorGradient: linear-gradient(170deg, rgba(37,37,37,1) 0%, rgb(121, 14, 14) 100%);
-    --bgCanvas: rgb(233, 229, 224);
-    --bgCanvasGradient: linear-gradient(170deg, rgb(233, 229, 224) 0%, rgb(51, 47, 41) 100%);
-    --bgColorTransparent: rgba(37, 37, 37, 0.76);
-    --mediumBgColorGradient: linear-gradient(170deg, rgba(37, 37, 37,1) 0%, rgba(27,27,27,1) 100%);
-    --darkBgColor: rgb(27, 27, 27);
-    --darkBgColorGradient: linear-gradient(170deg, rgba(27,27,27,1) 0%, rgba(5,5,5,1) 100%);
-    --veryDarkBgColorTransparent: rgba(15, 15, 15, 0.404);
-    --veryDarkBgColor: rgb(15, 15, 15);
-    --lightBgColor: rgb(57, 57, 57);
-    --selectionColor: rgb(58, 58, 58);
-    --selectedTextColor: rgb(248, 192, 100);
-    --hoverColor: rgb(49, 49, 49);
-    --hoverTextColor: rgb(216, 171, 112);
-    --shadowColor: rgba(7, 7, 7, 0.616);
-    --textColor: rgb(228, 183, 125);
-    --textColorBright: rgb(221, 181, 130);
-    --woodColor: rgb(133, 96, 62);
-    --darkWoodColor: rgb(70, 50, 32);
-    --ceilingBG: rgba(202, 202, 202, 0.034);
-    --sideWallBG: rgba(151, 145, 138, 0.041);
-    --backWallBG: rgba(151, 145, 138, 0.128);
-    --foundationBG: rgba(29, 17, 5, 0.10);
-    /* borders */
-    --standardBorder: 1px solid var(--textColor);
-    --thickBorder: 5px solid var(--textColor);
-    --brightBorder: 1px solid var(--textColorBright);
-    --darkBorder: 2px solid var(--veryDarkBgColorTransparent);
-    --borderRadius: 3px;
-    /* font */
-    --h1Size: 32px;
-    --h2Size: 26px;
-    --h3Size: 22px;
-    --h4Size: 20px;
-    --h5Size: 18px;
-    --pSize: 16px;
-    --tinyText: 14px;
-    --inputHeight: 42px;
-    /* boxes */
-    --padding: 5px;
-    --mediumPadding: 10px;
-    --thickPadding: 20px;
-    --margin: 5px;
-    --thickMargin: 20px;
-    --tabMargin: 50px;
-    --mainWidth: 95vw;
-    --maxMainWidth: 500px;
-    --fillFromMargin: calc(100% - (2 * var(--margin)));
-    --fillFromThickMargin: calc(100% - (2 * var(--thickMargin)));
-    --fillHalfFromMargin: calc(50% - (2 * var(--margin)));
-    --fillHalfFromThickMargin: calc(50% - (2 * var(--thickMargin)));
-    --fillThirdFromMargin: calc((1 / 3) * 100% - (2 * var(--margin)));
-    --fillThirdFromThickMargin: calc((1 / 3) * 50% - (2 * var(--thickMargin)));
-    --fillQuarterFromMargin: calc(25% - (2 * var(--margin)));
-    --fillQuarterFromThickMargin: calc(25% - (2 * var(--thickMargin)));
-    --boxShadow: 5px 0px 5px 1px var(--shadowColor);
-    --goHeight: 100px;
-    --returnHeight: 10vh;
-}
-
-::-webkit-scrollbar {
-    width: 10px;
-    height: 10px;
-}
-
-::-webkit-scrollbar-track {
-    background: var(--lightBgColor);
-}
-
-::-webkit-scrollbar-thumb {
-    background: var(--textColor);
-}
-
-::-webkit-scrollbar-thumb:hover {
-    background: var(--textColorBright);
-}
-
-* {
-    box-sizing: border-box;
-    color: var(--textColor);
-    font-size: var(--pSize);
-    margin: 0;
-    font-family: 'Roboto', sans-serif;
-    font-weight: lighter;
-}
-
-.alt * {
-    color: var(--bgColor);
-}
-
-.alt {
-    color: var(--bgColor);
-}
-
-.invisible {
-    display: none !important;
-}
-
-.unselectable {
-    user-select: none !important;
-}
-
-.camo {
-    transition: all .15s;
-    opacity: 0;
-}
-
-body {
-    background: var(--bgCanvas);
-    background: var(--bgCanvasGradient);
-    height: 100vh;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    align-content: center;
-    flex-direction: column;
-    position: relative;
-}
-
-main {
-    position: absolute;
-    width: var(--mainWidth);
-    max-width: var(--maxMainWidth);
-    min-height: 500px;
-    max-height: calc(100vh - (2 * var(--thickMargin)) - 40px);
-    box-shadow: var(--boxShadow);
-    padding: 0;
-    border-radius: 5px;
-    top: 50px;
-    left: 2.5vw;
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-evenly;
-    align-content: flex-start;
-    align-items: flex-end;
-    background-color: var(--bgColor);
-    overflow: auto;
-    overflow-x: hidden;
-    z-index: 1;
-}
-
-main.full-view {
-    flex-direction: column;
-    overflow: auto;
-    overflow-y: hidden;
-    max-width: initial;
-    width: 95vw;
-    gap: 20px;
-    align-items: center;
-}
-
-main.full-view>* {
-    max-width: var(--maxMainWidth);
-}
-
-footer {
-    position: absolute;
-    display: flex;
-    justify-content: center;
-    align-content: center;
-    align-items: center;
-    height: 40px;
-    width: var(--mainWidth);
-    max-width: var(--maxMainWidth);
-    background-color: var(--veryDarkBgColor);
-    border-radius: 0px 0px 5px 5px;
-    box-shadow: var(--boxShadow);
-    padding: 0;
-    border: none;
-    top: 0;
-    left: 2.5vw;
-}
-
-footer .view-toggle {
-    position: fixed;
-    top: 0;
-    right: 0;
-    width: 40px;
-    height: 40px;
-    background: var(--bgColor);
-}
-
-footer button {
-    margin: 0;
-    height: 100%;
-    border-radius: 5px 0 5px 5px;
-    border: none;
-    border-left: var(--standardBorder);
-}
-
-footer button:hover {
-    border: none;
-    border-left: 1px solid var(--hoverTextColor);
-}
-
-footer a {
-    text-decoration: none;
-    height: 100%;
-    margin: 0;
-    padding: 0;
-    background: none;
-}
-
-section {
-    width: var(--fillFromMargin);
-    margin: var(--margin);
-    background: var(--darkBgColor);
-    border: var(--darkBorder);
-    display: flex;
-    justify-content: center;
-    flex-wrap: wrap;
-    align-items: flex-end;
-    justify-content: space-around;
-    align-content: flex-end;
-    min-height: 30px;
-    position: relative;
-}
-
-article {
-    width: 100%;
-    position: relative;
-    border: var(--standardBorder);
-    display: flex;
-    flex-wrap: wrap;
-}
-
-.code {
-    width: var(--fillFromMargin);
-    padding: 20px;
-    background: rgb(18, 18, 18);
-    border-radius: 2px;
-    border: 1px solid rgb(58, 58, 58);
-    color: rgb(191, 170, 145);
-    font-family: 'Courier New', Courier, monospace;
-    font-size: 15px;
-    overflow: auto;
-}
-
-h1, h2, h3, h4, h5, h6 {
-    width: 100%;
-    text-align: center;
-}
-
-h1 {
-    font-size: var(--h1Size);
-    border-bottom: var(--standardBorder);
-}
-
-h2 {
-    font-size: var(--h2Size);
-}
-
-h3 {
-    font-size: var(--h3Size);
-}
-
-h4 {
-    font-size: var(--h4Size);
-    border-bottom: var(--standardBorder);
-}
-
-h5 {
-    font-size: var(--h5Size);
-}
-
-h6 {
-    font-size: var(--pSize);
-}
-
-hr {
-    border: none;
-    border: 20px solid var(--textColor);
-    margin-top: var(--thickMargin);
-    margin-bottom: var(--thickMargin);
-    width: 100%;
-    border-radius: 2px;
-}
-
-p {
-    color: var(--textColor);
-    width: 100%;
-    padding: var(--padding);
-    font-size: var(--pSize);
-    min-height: calc(var(--pSize) + 2 * var(--padding));
-}
-
-ul {
-    border: var(--standardBorder);
-    width: var(--fillFromMargin);
-    list-style: none;
-    margin: var(--margin);
-    padding: var(--padding);
-}
-
-li {
-    border: var(--standardBorder);
-    padding: var(--thickPadding);
-}
-
-textarea {
-    padding: var(--padding);
-    width: var(--fillFromMargin);
-    background-color: var(--tint);
-    border-radius: 0;
-    border: var(--standardBorder);
-    margin: var(--margin);
-}
-
-select {
-    background: var(--tint);
-    border: var(--standardBorder);
-}
-
-label {
-    padding: var(--padding);
-    width: var(--fillFromMargin);
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    margin: var(--margin);
-}
-
-input {
-    padding: var(--thickPadding);
-    width: var(--fillFromMargin);
-    background-color: var(--tint);
-    border-radius: 0;
-    border: var(--standardBorder);
-    height: var(--inputHeight);
-    margin: var(--margin);
-    font-size: clamp(var(--littleP), var(--pSize), var(--littleP) * 2);
-}
-
-input[type=checkbox] {
-    width: 20%;
-    height: 30px;
-    margin: var(--margin);
-    background-color: var(--tint);
-}
-
-input[type=submit] {
-    background-color: var(--bgColor);
-    padding: var(--thickPadding);
-    border-radius: var(--borderRadius);
-    border: var(--standardBorder);
-    color: var(--textColor);
-    text-decoration: none;
-    text-align: center;
-    margin: var(--margin);
-    font-size: clamp(var(--littleP), var(--pSize), var(--littleP) * 2);
-}
-
-button {
-    background: var(--clickable);
-    padding: var(--padding);
-    border-radius: var(--borderRadius);
-    border: var(--standardBorder);
-    color: var(--textColor);
-    text-decoration: none;
-    text-align: center;
-    margin: var(--margin);
-    font-size: clamp(var(--littleP), var(--pSize), var(--littleP) * 2);
-}
-
-input[type=submit]:hover, button:hover {
-    border: var(--brightBorder);
-    color: var(--textColorBright);
-    cursor: pointer;
-    background: var(--hoverColor);
-}
-
-/* links */
-a {
-    background-color: var(--bgColor);
-    padding: var(--thickPadding);
-    border-radius: var(--borderRadius);
-    border: var(--standardBorder);
-    color: var(--textColor);
-    text-decoration: none;
-    text-align: center;
-    margin: var(--margin);
-    font-size: clamp(var(--littleP), var(--pSize), var(--littleP) * 2);
-}
-
-a i.space {
-    margin-right: 5px;
-}
-
-a:hover {
-    border: var(--brightBorder);
-    color: var(--textColorBright);
-    cursor: pointer;
-}
-
-a:hover * {
-    color: var(--textColorBright);
-}
-
-a.alt {
-    border-bottom: 1px solid var(--bgColor) !important;
-}
-
-a.alt:hover {
-    border-bottom: 1px solid var(--textColorBright) !important;
-}
-
-a.subtle {
-    padding: 1px;
-    background: none;
-    border: none;
-    border-bottom: var(--standardBorder);
-    border-radius: 0;
-}
-
-a.subtle:hover {
-    border: none;
-    border-bottom: 1px solid var(--textColorBright);
-    border-radius: 0;
-}
-/*  */
-
-.sign {
-    width: var(--fillFromMargin);
-    min-height: 10vw;
-    padding: var(--padding);
-    border-radius: var(--borderRadius);
-    border: var(--thickBorder);
-    margin: var(--margin);
-    background: url("/img/signs/wooden-board.jpg");
-    background-size: cover;
-    background-position: center;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-wrap: wrap;
-    align-content: center;
-}
-
-.sign * {
-    color: var(--darkWoodColor);
-    background: none;
-}
-
-.form {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-    border: var(--standardBorder);
-    margin: var(--margin);
-}
-
-.info {
-    color: var(--selectedTextColor);
-    text-align: center;
-}
-
-.locked {
-    background-color: var(--bgColor);
-    border: 1px solid var(--textColor);
-    color: var(--textColor);
-    filter: brightness(.5);
-    user-select: none;
-}
-
-.locked:hover {
-    background-color: var(--bgColor);
-    border: 1px solid var(--textColor);
-    color: var(--textColor);
-    cursor: default;
-    filter: brightness(.5);
-    user-select: none;
-}
-
-.go {
-    width: var(--fillHalfFromMargin);
-    height: var(--goHeight);
-    display: flex;
-    justify-content: flex-end;
-    align-items: flex-end;
-    padding: var(--thickPadding);
-    margin: var(--margin);
-}
-
-.to {
-    width: var(--fillFromMargin);
-    height: var(--goHeight);
-    display: flex;
-    justify-content: flex-end;
-    align-items: flex-end;
-    padding: var(--thickPadding);
-    margin: var(--margin);
-}
-
-.return {
-    width: var(--fillFromMargin);
-    height: var(--returnHeight);
-    display: flex;
-    justify-content: flex-end;
-    align-items: flex-end;
-    padding: var(--padding);
-    margin: var(--margin);
-    overflow: hidden;
-}
-
-.do {
-    width: var(--fillThirdFromMargin);
-    height: var(--goHeight);
-    display: flex;
-    justify-content: flex-end;
-    align-items: flex-end;
-    padding: var(--thickPadding);
-    margin: var(--margin);
-}
-
-ul.selector>li {
-    width: var(--fillFromMargin);
-    overflow: hidden;
-    font-size: clamp(var(--littleP), var(--pSize), var(--littleP) * 2);
-    border: none;
-    border-bottom: var(--standardBorder);
-    min-height: 40px;
-    background: var(--clickable);
-    border-radius: 5px;
-    margin: var(--margin);
-    display: flex;
-    align-items: center;
-}
-
-ul.selector>li:hover {
-    cursor: pointer;
-    background: var(--hoverColor);
-    color: var(--hoverTextColor);
-}
-
-ul.selector>li.selected {
-    background: var(--selectionColor);
-    color: var(--selectedTextColor);
-}
-
-ul.selector>p {
-    color: rgb(78, 78, 78);
-}
-
-ul.selector>li.disabled {
-    background: var(--bgColor);
-    color: var(--textColor);
-    border: var(--standardBorder);
-    cursor: default;
-}
-
-.click-me {
-    background: var(--selectionColor);
-    color: var(--selectedTextColor);
-    cursor: pointer;
-}
-
-.click-me:hover {
-    background: var(--hoverColor);
-}
-
-.painting {
-    border: 3px solid var(--darkWoodColor);
-    background: var(--hoverColor);
-    width: 5vh;
-    height: 5vh;
-    object-fit: cover;
-    align-self: flex-start;
-}
-
-.door {
-    border: var(--standardBorder);
-    width: 150px;
-    height: 250px;
-    position: relative;
-    display: flex;
-    align-items: flex-start;
-    justify-content: center;
-    padding: var(--padding);
-    padding-top: 30px;
-}
-
-.door>.knob {
-    position: absolute;
-    width: 2vh;
-    height: 2vh;
-    border-radius: 50%;
-    right: 15%;
-    top: 50%;
-    background-color: var(--darkWoodColor);
-}
-
-iframe {
-    border: none;
-}
-
-.login-cover {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-    width: 700px;
-}
-
-.login-cover a {
-    padding: var(--padding);
-    margin: 40px;
-    border: none;
-}
-
-.login-cover h3 {
-    margin: 40px 0;
-}
-
-.login-cover button {
-    width: 250px;
-}
-
-.login-cover a img {
-    width: 50%;
-}
-
-.dialogue {
-    width: var(--fillFromMargin);
-    border-radius: var(--borderRadius);
-    display: flex;
-    justify-content: center;
-    align-items: flex-end;
-    flex-wrap: wrap;
-    margin: var(--margin);
-    border: var(--standardBorder);
-    height: 300px;
-}
-
-.dialogue>h4 {
-    height: 25%;
-    width: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: flex-start;
-}
-
-.dialogue .portrait {
-    width: 25%;
-    height: 100%;
-    border-radius: 2px;
-    object-fit: cover;
-}
-
-.dialogue .heart {
-    width: 5px;
-    height: 100%;
-    background-color: var(--textColor);
-    border-radius: var(--borderRadius);
-    margin: 0 5px;
-}
-
-.dialogue>h4 p {
-    width: auto;
-}
-
-.dialogue .content {
-    width: 100%;
-    height: 75%;
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-around;
-    align-items: center;
-    border-radius: var(--borderRadius);
-    background-color: var(--bgColor);
-}
-
-.dialogue .content p {
-    text-align: center;
-}
-
-.dialogue .selected {
-    border: none;
-}
-
-.merchant {
-    width: var(--fillFromMargin);
-    border: var(--standardBorder);
-    min-height: 100px;
-    background-color: rgb(49, 49, 49);
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-    margin: var(--margin);
-}
-
-.merchant div {
-    border: var(--standardBorder);
-    width: 165px;
-    padding: var(--padding);
-    margin: var(--margin);
-}
-
-.merchant div button {
-    margin: 0;
-    width: 100%;
-}
-
-.memo {
-    width: var(--fillFromMargin);
-    margin: var(--margin);
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-}
-
-.limb {
-    transform-origin: bottom center;
-    position: absolute;
-    left: 50%;
-    bottom: 50%;
-    z-index: 1;
-}
-
-.conchu {
-    border: 3px dotted var(--textColor) !important;
-    background: url("/img/misc/conchu.jpg") !important;
-}
-
-.basic {
-    border: var(--standardBorder);
-    background: var(--darkBgColor);
-    width: var(--fillFromMargin);
-    min-height: 10vh;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: var(--padding);
-    flex-wrap: wrap;
-    align-content: center;
-}
-
-.folder {
-    position: absolute;
-    right: 0;
-    top: 0;
-    padding: 5px 10px;
-    margin: 0;
-}
-
-.ground {
-    width: 100%;
-    min-height: 10px;
-    position: relative;
-    background: rgb(56, 31, 17);
-    margin-top: 50px;
-}
-
-.tabs {
-    position: absolute;
-    bottom: calc(-1 * var(--tabMargin));
-    width: 100%;
-    height: var(--tabMargin);
-    left: 0;
-}
-
-@media screen and (max-width: 1000px) {
-    .float-elements {
-        display: none;
-    }
-
-    .lock-elements {
-        display: none;
-    }
-
-    .float-board {
-        display: none;
-    }
-}
-
-@media screen and (max-width: 570px) {
-    footer .view-toggle {
-        display: none;
-    }
-
-    main.full-view {
-        flex-direction: row;
-        overflow: auto;
-        overflow-x: hidden;
-        max-width: var(--maxMainWidth);
-        width: var(--mainWidth);
-        gap: initial;
-        align-items: flex-end;
-    }
+:root {
+    /* colors */
+    --clickable: linear-gradient(90deg, rgba(255,255,255,0.015) 0%, rgba(255,255,255,0.03) 50%, rgba(255,255,255,0.015) 100%);
+    --tint: rgba(0, 0, 0, 0.123);
+    --bgColor: rgb(37, 37, 37);
+    --bgColorGradient: linear-gradient(170deg, rgba(37,37,37,1) 0%, rgb(121, 14, 14) 100%);
+    --bgCanvas: rgb(233, 229, 224);
+    --bgCanvasGradient: linear-gradient(170deg, rgb(233, 229, 224) 0%, rgb(51, 47, 41) 100%);
+    --bgColorTransparent: rgba(37, 37, 37, 0.76);
+    --mediumBgColorGradient: linear-gradient(170deg, rgba(37, 37, 37,1) 0%, rgba(27,27,27,1) 100%);
+    --darkBgColor: rgb(27, 27, 27);
+    --darkBgColorGradient: linear-gradient(170deg, rgba(27,27,27,1) 0%, rgba(5,5,5,1) 100%);
+    --veryDarkBgColorTransparent: rgba(15, 15, 15, 0.404);
+    --veryDarkBgColor: rgb(15, 15, 15);
+    --lightBgColor: rgb(57, 57, 57);
+    --selectionColor: rgb(58, 58, 58);
+    --selectedTextColor: rgb(248, 192, 100);
+    --hoverColor: rgb(49, 49, 49);
+    --hoverTextColor: rgb(216, 171, 112);
+    --shadowColor: rgba(7, 7, 7, 0.616);
+    --textColor: rgb(228, 183, 125);
+    --textColorBright: rgb(221, 181, 130);
+    --woodColor: rgb(133, 96, 62);
+    --darkWoodColor: rgb(70, 50, 32);
+    --ceilingBG: rgba(202, 202, 202, 0.034);
+    --sideWallBG: rgba(151, 145, 138, 0.041);
+    --backWallBG: rgba(151, 145, 138, 0.128);
+    --foundationBG: rgba(29, 17, 5, 0.10);
+    /* borders */
+    --standardBorder: 1px solid var(--textColor);
+    --thickBorder: 5px solid var(--textColor);
+    --brightBorder: 1px solid var(--textColorBright);
+    --darkBorder: 2px solid var(--veryDarkBgColorTransparent);
+    --borderRadius: 3px;
+    /* font */
+    --h1Size: 32px;
+    --h2Size: 26px;
+    --h3Size: 22px;
+    --h4Size: 20px;
+    --h5Size: 18px;
+    --pSize: 16px;
+    --tinyText: 14px;
+    --inputHeight: 42px;
+    /* boxes */
+    --padding: 5px;
+    --mediumPadding: 10px;
+    --thickPadding: 20px;
+    --margin: 5px;
+    --thickMargin: 20px;
+    --tabMargin: 50px;
+    --mainWidth: 95vw;
+    --maxMainWidth: 500px;
+    --fillFromMargin: calc(100% - (2 * var(--margin)));
+    --fillFromThickMargin: calc(100% - (2 * var(--thickMargin)));
+    --fillHalfFromMargin: calc(50% - (2 * var(--margin)));
+    --fillHalfFromThickMargin: calc(50% - (2 * var(--thickMargin)));
+    --fillThirdFromMargin: calc((1 / 3) * 100% - (2 * var(--margin)));
+    --fillThirdFromThickMargin: calc((1 / 3) * 50% - (2 * var(--thickMargin)));
+    --fillQuarterFromMargin: calc(25% - (2 * var(--margin)));
+    --fillQuarterFromThickMargin: calc(25% - (2 * var(--thickMargin)));
+    --boxShadow: 5px 0px 5px 1px var(--shadowColor);
+    --goHeight: 100px;
+    --returnHeight: 10vh;
+}
+
+::-webkit-scrollbar {
+    width: 10px;
+    height: 10px;
+}
+
+::-webkit-scrollbar-track {
+    background: var(--lightBgColor);
+}
+
+::-webkit-scrollbar-thumb {
+    background: var(--textColor);
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: var(--textColorBright);
+}
+
+* {
+    box-sizing: border-box;
+    color: var(--textColor);
+    font-size: var(--pSize);
+    margin: 0;
+    font-family: 'Roboto', sans-serif;
+    font-weight: lighter;
+}
+
+.alt * {
+    color: var(--bgColor);
+}
+
+.alt {
+    color: var(--bgColor);
+}
+
+.invisible {
+    display: none !important;
+}
+
+.unselectable {
+    user-select: none !important;
+}
+
+.camo {
+    transition: all .15s;
+    opacity: 0;
+}
+
+body {
+    background: var(--bgCanvas);
+    background: var(--bgCanvasGradient);
+    height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    align-content: center;
+    flex-direction: column;
+    position: relative;
+}
+
+main {
+    position: absolute;
+    width: var(--mainWidth);
+    max-width: var(--maxMainWidth);
+    min-height: 500px;
+    max-height: calc(100vh - (2 * var(--thickMargin)) - 40px);
+    box-shadow: var(--boxShadow);
+    padding: 0;
+    border-radius: 5px;
+    top: 50px;
+    left: 2.5vw;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-evenly;
+    align-content: flex-start;
+    align-items: flex-end;
+    background-color: var(--bgColor);
+    overflow: auto;
+    overflow-x: hidden;
+    z-index: 1;
+}
+
+main.full-view {
+    flex-direction: column;
+    overflow: auto;
+    overflow-y: hidden;
+    max-width: initial;
+    width: 95vw;
+    gap: 20px;
+    align-items: center;
+}
+
+main.full-view>* {
+    max-width: var(--maxMainWidth);
+}
+
+footer {
+    position: absolute;
+    display: flex;
+    justify-content: center;
+    align-content: center;
+    align-items: center;
+    height: 40px;
+    width: var(--mainWidth);
+    max-width: var(--maxMainWidth);
+    background-color: var(--veryDarkBgColor);
+    border-radius: 0px 0px 5px 5px;
+    box-shadow: var(--boxShadow);
+    padding: 0;
+    border: none;
+    top: 0;
+    left: 2.5vw;
+}
+
+footer .view-toggle {
+    position: fixed;
+    top: 0;
+    right: 0;
+    width: 40px;
+    height: 40px;
+    background: var(--bgColor);
+}
+
+footer button {
+    margin: 0;
+    height: 100%;
+    border-radius: 5px 0 5px 5px;
+    border: none;
+    border-left: var(--standardBorder);
+}
+
+footer button:hover {
+    border: none;
+    border-left: 1px solid var(--hoverTextColor);
+}
+
+footer a {
+    text-decoration: none;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+    background: none;
+}
+
+section {
+    width: var(--fillFromMargin);
+    margin: var(--margin);
+    background: var(--darkBgColor);
+    border: var(--darkBorder);
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap;
+    align-items: flex-end;
+    justify-content: space-around;
+    align-content: flex-end;
+    min-height: 30px;
+    position: relative;
+}
+
+article {
+    width: 100%;
+    position: relative;
+    border: var(--standardBorder);
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.code {
+    width: var(--fillFromMargin);
+    padding: 20px;
+    background: rgb(18, 18, 18);
+    border-radius: 2px;
+    border: 1px solid rgb(58, 58, 58);
+    color: rgb(191, 170, 145);
+    font-family: 'Courier New', Courier, monospace;
+    font-size: 15px;
+    overflow: auto;
+}
+
+h1, h2, h3, h4, h5, h6 {
+    width: 100%;
+    text-align: center;
+}
+
+h1 {
+    font-size: var(--h1Size);
+    border-bottom: var(--standardBorder);
+}
+
+h2 {
+    font-size: var(--h2Size);
+}
+
+h3 {
+    font-size: var(--h3Size);
+}
+
+h4 {
+    font-size: var(--h4Size);
+    border-bottom: var(--standardBorder);
+}
+
+h5 {
+    font-size: var(--h5Size);
+}
+
+h6 {
+    font-size: var(--pSize);
+}
+
+hr {
+    border: none;
+    border: 20px solid var(--textColor);
+    margin-top: var(--thickMargin);
+    margin-bottom: var(--thickMargin);
+    width: 100%;
+    border-radius: 2px;
+}
+
+p {
+    color: var(--textColor);
+    width: 100%;
+    padding: var(--padding);
+    font-size: var(--pSize);
+    min-height: calc(var(--pSize) + 2 * var(--padding));
+}
+
+ul {
+    border: var(--standardBorder);
+    width: var(--fillFromMargin);
+    list-style: none;
+    margin: var(--margin);
+    padding: var(--padding);
+}
+
+li {
+    border: var(--standardBorder);
+    padding: var(--thickPadding);
+}
+
+textarea {
+    padding: var(--padding);
+    width: var(--fillFromMargin);
+    background-color: var(--tint);
+    border-radius: 0;
+    border: var(--standardBorder);
+    margin: var(--margin);
+}
+
+select {
+    background: var(--tint);
+    border: var(--standardBorder);
+}
+
+label {
+    padding: var(--padding);
+    width: var(--fillFromMargin);
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    margin: var(--margin);
+}
+
+input {
+    padding: var(--thickPadding);
+    width: var(--fillFromMargin);
+    background-color: var(--tint);
+    border-radius: 0;
+    border: var(--standardBorder);
+    height: var(--inputHeight);
+    margin: var(--margin);
+    font-size: clamp(var(--littleP), var(--pSize), var(--littleP) * 2);
+}
+
+input[type=checkbox] {
+    width: 20%;
+    height: 30px;
+    margin: var(--margin);
+    background-color: var(--tint);
+}
+
+input[type=submit] {
+    background-color: var(--bgColor);
+    padding: var(--thickPadding);
+    border-radius: var(--borderRadius);
+    border: var(--standardBorder);
+    color: var(--textColor);
+    text-decoration: none;
+    text-align: center;
+    margin: var(--margin);
+    font-size: clamp(var(--littleP), var(--pSize), var(--littleP) * 2);
+}
+
+button {
+    background: var(--clickable);
+    padding: var(--padding);
+    border-radius: var(--borderRadius);
+    border: var(--standardBorder);
+    color: var(--textColor);
+    text-decoration: none;
+    text-align: center;
+    margin: var(--margin);
+    font-size: clamp(var(--littleP), var(--pSize), var(--littleP) * 2);
+}
+
+input[type=submit]:hover, button:hover {
+    border: var(--brightBorder);
+    color: var(--textColorBright);
+    cursor: pointer;
+    background: var(--hoverColor);
+}
+
+/* links */
+a {
+    background-color: var(--bgColor);
+    padding: var(--thickPadding);
+    border-radius: var(--borderRadius);
+    border: var(--standardBorder);
+    color: var(--textColor);
+    text-decoration: none;
+    text-align: center;
+    margin: var(--margin);
+    font-size: clamp(var(--littleP), var(--pSize), var(--littleP) * 2);
+}
+
+a i.space {
+    margin-right: 5px;
+}
+
+a:hover {
+    border: var(--brightBorder);
+    color: var(--textColorBright);
+    cursor: pointer;
+}
+
+a:hover * {
+    color: var(--textColorBright);
+}
+
+a.alt {
+    border-bottom: 1px solid var(--bgColor) !important;
+}
+
+a.alt:hover {
+    border-bottom: 1px solid var(--textColorBright) !important;
+}
+
+a.subtle {
+    padding: 1px;
+    background: none;
+    border: none;
+    border-bottom: var(--standardBorder);
+    border-radius: 0;
+}
+
+a.subtle:hover {
+    border: none;
+    border-bottom: 1px solid var(--textColorBright);
+    border-radius: 0;
+}
+/*  */
+
+.sign {
+    width: var(--fillFromMargin);
+    min-height: 10vw;
+    padding: var(--padding);
+    border-radius: var(--borderRadius);
+    border: var(--thickBorder);
+    margin: var(--margin);
+    background: url("/img/signs/wooden-board.jpg");
+    background-size: cover;
+    background-position: center;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-wrap: wrap;
+    align-content: center;
+}
+
+.sign * {
+    color: var(--darkWoodColor);
+    background: none;
+}
+
+.form {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    border: var(--standardBorder);
+    margin: var(--margin);
+}
+
+.info {
+    color: var(--selectedTextColor);
+    text-align: center;
+}
+
+.locked {
+    background-color: var(--bgColor);
+    border: 1px solid var(--textColor);
+    color: var(--textColor);
+    filter: brightness(.5);
+    user-select: none;
+}
+
+.locked:hover {
+    background-color: var(--bgColor);
+    border: 1px solid var(--textColor);
+    color: var(--textColor);
+    cursor: default;
+    filter: brightness(.5);
+    user-select: none;
+}
+
+.go {
+    width: var(--fillHalfFromMargin);
+    height: var(--goHeight);
+    display: flex;
+    justify-content: flex-end;
+    align-items: flex-end;
+    padding: var(--thickPadding);
+    margin: var(--margin);
+}
+
+.to {
+    width: var(--fillFromMargin);
+    height: var(--goHeight);
+    display: flex;
+    justify-content: flex-end;
+    align-items: flex-end;
+    padding: var(--thickPadding);
+    margin: var(--margin);
+}
+
+.return {
+    width: var(--fillFromMargin);
+    height: var(--returnHeight);
+    display: flex;
+    justify-content: flex-end;
+    align-items: flex-end;
+    padding: var(--padding);
+    margin: var(--margin);
+    overflow: hidden;
+}
+
+.do {
+    width: var(--fillThirdFromMargin);
+    height: var(--goHeight);
+    display: flex;
+    justify-content: flex-end;
+    align-items: flex-end;
+    padding: var(--thickPadding);
+    margin: var(--margin);
+}
+
+ul.selector>li {
+    width: var(--fillFromMargin);
+    overflow: hidden;
+    font-size: clamp(var(--littleP), var(--pSize), var(--littleP) * 2);
+    border: none;
+    border-bottom: var(--standardBorder);
+    min-height: 40px;
+    background: var(--clickable);
+    border-radius: 5px;
+    margin: var(--margin);
+    display: flex;
+    align-items: center;
+}
+
+ul.selector>li:hover {
+    cursor: pointer;
+    background: var(--hoverColor);
+    color: var(--hoverTextColor);
+}
+
+ul.selector>li.selected {
+    background: var(--selectionColor);
+    color: var(--selectedTextColor);
+}
+
+ul.selector>p {
+    color: rgb(78, 78, 78);
+}
+
+ul.selector>li.disabled {
+    background: var(--bgColor);
+    color: var(--textColor);
+    border: var(--standardBorder);
+    cursor: default;
+}
+
+.click-me {
+    background: var(--selectionColor);
+    color: var(--selectedTextColor);
+    cursor: pointer;
+}
+
+.click-me:hover {
+    background: var(--hoverColor);
+}
+
+.painting {
+    border: 3px solid var(--darkWoodColor);
+    background: var(--hoverColor);
+    width: 5vh;
+    height: 5vh;
+    object-fit: cover;
+    align-self: flex-start;
+}
+
+.door {
+    border: var(--standardBorder);
+    width: 150px;
+    height: 250px;
+    position: relative;
+    display: flex;
+    align-items: flex-start;
+    justify-content: center;
+    padding: var(--padding);
+    padding-top: 30px;
+}
+
+.door>.knob {
+    position: absolute;
+    width: 2vh;
+    height: 2vh;
+    border-radius: 50%;
+    right: 15%;
+    top: 50%;
+    background-color: var(--darkWoodColor);
+}
+
+iframe {
+    border: none;
+}
+
+.login-cover {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    width: 700px;
+}
+
+.login-cover a {
+    padding: var(--padding);
+    margin: 40px;
+    border: none;
+}
+
+.login-cover h3 {
+    margin: 40px 0;
+}
+
+.login-cover button {
+    width: 250px;
+}
+
+.login-cover a img {
+    width: 50%;
+}
+
+.dialogue {
+    width: var(--fillFromMargin);
+    border-radius: var(--borderRadius);
+    display: flex;
+    justify-content: center;
+    align-items: flex-end;
+    flex-wrap: wrap;
+    margin: var(--margin);
+    border: var(--standardBorder);
+    height: 300px;
+}
+
+.dialogue>h4 {
+    height: 25%;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+}
+
+.dialogue .portrait {
+    width: 25%;
+    height: 100%;
+    border-radius: 2px;
+    object-fit: cover;
+}
+
+.dialogue .heart {
+    width: 5px;
+    height: 100%;
+    background-color: var(--textColor);
+    border-radius: var(--borderRadius);
+    margin: 0 5px;
+}
+
+.dialogue>h4 p {
+    width: auto;
+}
+
+.dialogue .content {
+    width: 100%;
+    height: 75%;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-around;
+    align-items: center;
+    border-radius: var(--borderRadius);
+    background-color: var(--bgColor);
+}
+
+.dialogue .content p {
+    text-align: center;
+}
+
+.dialogue .selected {
+    border: none;
+}
+
+.merchant {
+    width: var(--fillFromMargin);
+    border: var(--standardBorder);
+    min-height: 100px;
+    background-color: rgb(49, 49, 49);
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    margin: var(--margin);
+}
+
+.merchant div {
+    border: var(--standardBorder);
+    width: 165px;
+    padding: var(--padding);
+    margin: var(--margin);
+}
+
+.merchant div button {
+    margin: 0;
+    width: 100%;
+}
+
+.memo {
+    width: var(--fillFromMargin);
+    margin: var(--margin);
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+}
+
+.limb {
+    transform-origin: bottom center;
+    position: absolute;
+    left: 50%;
+    bottom: 50%;
+    z-index: 1;
+}
+
+.conchu {
+    border: 3px dotted var(--textColor) !important;
+    background: url("/img/misc/conchu.jpg") !important;
+}
+
+.basic {
+    border: var(--standardBorder);
+    background: var(--darkBgColor);
+    width: var(--fillFromMargin);
+    min-height: 10vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: var(--padding);
+    flex-wrap: wrap;
+    align-content: center;
+}
+
+.folder {
+    position: absolute;
+    right: 0;
+    top: 0;
+    padding: 5px 10px;
+    margin: 0;
+}
+
+.ground {
+    width: 100%;
+    min-height: 10px;
+    position: relative;
+    background: rgb(56, 31, 17);
+    margin-top: 50px;
+}
+
+.tabs {
+    position: absolute;
+    bottom: calc(-1 * var(--tabMargin));
+    width: 100%;
+    height: var(--tabMargin);
+    left: 0;
+}
+
+@media screen and (max-width: 1000px) {
+    .float-elements {
+        display: none;
+    }
+
+    .lock-elements {
+        display: none;
+    }
+
+    .float-board {
+        display: none;
+    }
+}
+
+@media screen and (max-width: 570px) {
+    footer .view-toggle {
+        display: none;
+    }
+
+    main.full-view {
+        flex-direction: row;
+        overflow: auto;
+        overflow-x: hidden;
+        max-width: var(--maxMainWidth);
+        width: var(--mainWidth);
+        gap: initial;
+        align-items: flex-end;
+    }
 }