/* this is the bullshit that's got terrible math that i can't show the outside world */

body { height:initial; }

/*------------ FRAME ------------*/
.haachoo {
    position:fixed;
    margin:0 auto;
    bottom:0;margin-bottom:var(--Outer-Frame-Size);
    left:0;right:0;
    width:var(--Container-Width);
    max-width:calc(100%  - (var(--Outer-Frame-Size) * 2));
    z-index:69;
}

.haachoo._TOP {
    top:0;margin-top:var(--Outer-Frame-Size);
    width:var(--TopLinks-Bump-Length);
    height:calc(((var(--TopLinks-Bump-Height) * 1.414) / 2) + var(--Inner-Frame-Border-Size) + var(--Outer-Frame-Size));
    z-index:70;
}

.parasite {
    position:relative;
    height:calc(((var(--Inner-Frame-Bottom-Bump-Height) * 1.414) / 2) + var(--Inner-Frame-Border-Size));
}

._TOP .parasite {
    height:calc(((var(--TopLinks-Bump-Height) * 1.414) / 2) + var(--Inner-Frame-Border-Size));
}

[class^="shortboi"] {
    position:absolute;
    bottom:0;
    width:calc((100% - var(--Inner-Frame-Bottom-Bump-Length)) / 2);
    height:var(--Inner-Frame-Border-Size);
}

._TOP [class^="shortboi"] {
    width:calc((100% - var(--TopLinks-Bump-Length)) / 2);
}

.shortboi-a {
    background-image:linear-gradient(to right, var(--Outer-Frame-Background) var(--Inner-Frame-Bottom-Fade-Amount), var(--Inner-Frame-Color));
}

.shortboi-b {
    right:0;
    background-image:linear-gradient(to right, var(--Inner-Frame-Color) var(--Inner-Frame-Bottom-Fade-Amount), var(--Outer-Frame-Background));
}

.eeve {
    position:absolute;
    bottom:0;
    margin-left:calc((100% - var(--Inner-Frame-Bottom-Bump-Length)) / 2);
    width:var(--Inner-Frame-Bottom-Bump-Length);
    height:var(--Inner-Frame-Border-Size);
}

._TOP .eeve {
    top:0;
    bottom:auto;
    margin:0 auto;
    width:100%;
}

._TOP .eeve:after {
    content:"";
    position:absolute;
    margin-left:calc(var(--Inner-Frame-Border-Size) * 2);
    bottom:0;margin-bottom:calc(var(--Inner-Frame-Border-Size) * -1);
    width:calc(100% - (var(--Inner-Frame-Border-Size) * 4));
    height:var(--Inner-Frame-Border-Size);
    background:var(--Outer-Frame-Background);
}

[class^="tilt"] {
    position:absolute;
    bottom:0;
    background:var(--Inner-Frame-Color);
    width:100%;
    height:var(--Outer-Frame-Size);
}

.tilt-a {
    left:0;
    width:var(--Inner-Frame-Bottom-Bump-Height);
    height:var(--Inner-Frame-Border-Size);
    transform:rotate(-45deg);
    transform-origin:bottom left;
}

._TOP .tilt-a {
    width:var(--TopLinks-Bump-Height);
    transform:rotate(45deg);
    transform-origin:top left;
}

.tilt-a:after {
    content:"";
    position:absolute;
    right:0;
    top:0;margin-top:var(--Inner-Frame-Border-Size);
    width:100%;
    height:var(--Outer-Frame-Size);
    background:var(--Outer-Frame-Background);
}

._TOP .tilt-a:after {
    top:auto;margin-top:auto;
    bottom:0;margin-bottom:var(--Inner-Frame-Border-Size);
}

.tilt-b {
    right:0;
    width:var(--Inner-Frame-Bottom-Bump-Height);
    height:var(--Inner-Frame-Border-Size);
    transform:rotate(45deg);
    transform-origin:bottom right;
}

._TOP .tilt-b {
    width:var(--TopLinks-Bump-Height);
    transform:rotate(-45deg);
    transform-origin:top right;
}

.tilt-b:after {
    content:"";
    position:absolute;
    right:0;
    top:0;margin-top:var(--Inner-Frame-Border-Size);
    width:100%;
    height:var(--Outer-Frame-Size);
    background:var(--Outer-Frame-Background);
}

._TOP .tilt-b:after {
    top:auto;margin-top:auto;
    bottom:0;margin-bottom:var(--Inner-Frame-Border-Size);
}

.lever {
    position:absolute;
    bottom:0;
    margin-bottom:calc((var(--Inner-Frame-Bottom-Bump-Height) * 1.414) / 2);
    margin-left:calc(((var(--Inner-Frame-Bottom-Bump-Height) * 1.414) / 2) - (var(--Inner-Frame-Border-Size) * 0.75));
    width:calc((100% - (((var(--Inner-Frame-Bottom-Bump-Height) * 1.414) / 2) * 2)) + (var(--Inner-Frame-Border-Size) * 1.5));
    height:var(--Inner-Frame-Border-Size);
    background:var(--Inner-Frame-Color);
    border-radius:var(--Inner-Frame-Border-Size);
}

._TOP .lever {
    bottom:auto;margin-bottom:auto;
    top:0;margin-top:calc((var(--TopLinks-Bump-Height) * 1.414) / 2);
    margin-bottom:calc((var(--TopLinks-Bump-Height) * 1.414) / 2);
    margin-left:calc(((var(--TopLinks-Bump-Height) * 1.414) / 2) - (var(--Inner-Frame-Border-Size) * 0.75));
    width:calc((100% - (((var(--TopLinks-Bump-Height) * 1.414) / 2) * 2)) + (var(--Inner-Frame-Border-Size) * 1.5));
}

.lever:after {
    content:"";
    position:absolute;
    top:0;margin-top:var(--Inner-Frame-Border-Size);
    margin-left:calc(var(--Inner-Frame-Border-Size) / 2);
    width:100%;
    height:calc(((var(--Inner-Frame-Bottom-Bump-Height) * 1.414) / 2) + var(--Outer-Frame-Size));
    background:var(--Outer-Frame-Background);
}

._TOP .lever:after {
    top:auto;margin-top:auto;
    bottom:0;margin-bottom:var(--Inner-Frame-Border-Size);
    margin-left:var(--Inner-Frame-Border-Size);
    height:calc(((var(--TopLinks-Bump-Height) * 1.414) / 2) + var(--Outer-Frame-Size));
}

[class^="botsides"] {
    position:fixed;
    bottom:0;margin-bottom:var(--Outer-Frame-Size);
    width:calc(((100% - var(--Container-Width)) / 2) - var(--Outer-Frame-Size));
    height:var(--Inner-Frame-Border-Size);
}

.botsides-left {
    left:0;margin-left:var(--Outer-Frame-Size);
    background-image:linear-gradient(to right, var(--Inner-Frame-Color) var(--Inner-Frame-Bottom-Fade-Amount), var(--Outer-Frame-Background));
}

.botsides-right {
    right:0;margin-right:var(--Outer-Frame-Size);
    background-image:linear-gradient(to right, var(--Outer-Frame-Background) var(--Inner-Frame-Bottom-Fade-Amount), var(--Inner-Frame-Color));
}

.solid {
    background:var(--Inner-Frame-Color);
}

[class^="side_edges"] {
    position:fixed;
    top:0;margin-top:var(--Outer-Frame-Size);
    width:var(--Inner-Frame-Border-Size);
    height:calc(100% - (var(--Outer-Frame-Size) * 2));
    background:var(--Inner-Frame-Color);
    z-index:70;
}

.side_edges-left {
    left:0;margin-left:var(--Outer-Frame-Size);
}

.side_edges-left:after {
    content:"";
    position:absolute;
    top:0;margin-top:calc(var(--Outer-Frame-Size) * -1);
    right:0;margin-right:var(--Inner-Frame-Border-Size);
    width:var(--Outer-Frame-Size);
    height:100vh;
    background:var(--Outer-Frame-Background);
}

.side_edges-right {
    right:0;margin-right:var(--Outer-Frame-Size);
}

.side_edges-right:after {
    content:"";
    position:absolute;
    top:0;margin-top:calc(var(--Outer-Frame-Size) * -1);
    left:0;margin-left:var(--Inner-Frame-Border-Size);
    width:var(--Outer-Frame-Size);
    height:100vh;
    background:var(--Outer-Frame-Background);
}

.topcov {
    position:fixed;
    top:0;margin-top:var(--Outer-Frame-Size);
    left:0;margin-left:var(--Outer-Frame-Size);
    width:calc(100% - (var(--Outer-Frame-Size) * 2));
    height:var(--Inner-Frame-Border-Size);
    background:var(--Inner-Frame-Color);
    z-index:69;
}

.topcov:after {
    content:"";
    position:absolute;
    bottom:0;margin-bottom:var(--Inner-Frame-Border-Size);
    left:0;margin-left:calc(var(--Outer-Frame-Size) * -1);
    width:100vw;
    height:var(--Outer-Frame-Size);
    background:var(--Outer-Frame-Background);
}

.cov1 {
    position:fixed;
    bottom:0;left:0;
    width:100%;
    height:var(--Outer-Frame-Size);
    background:var(--Outer-Frame-Background);
    z-index:69;
}

/*------------ TOPLINKS ------------*/
.toplinks {
    position:fixed;
    top:0;left:0;right:0;
    margin:0 auto;
    height:0; /* might need to change later? idk */
    text-align:center;
    z-index:71;
    -webkit-user-select:none;
    -ms-user-select:none;
    user-select:none;
}

.donut {
    display:inline-block;
}

.strawberry {
    margin-top:calc((var(--Outer-Frame-Size) + (var(--TopLinks-Bump-Height) * 1.414) / 2) - var(--TopLinks-Padding) - (var(--TopLinks-Border-Size) * 2) - (var(--TopLinks-Font-Size) / 2));
    flex-wrap:nowrap;
}

.one-link:first-of-type {margin-left:0;}

.one-link {
    position:relative;
    line-height:1em;
    margin-left:calc(var(--TopLinks-Spacing) + (var(--TopLinks-Border-Size) * 4));
}

.bg {
    
}

.bg, .bg svg {
    display:block;
    width:calc(var(--TopLinks-Width) + (var(--TopLinks-Padding) * 2) + (var(--TopLinks-Border-Size) * 4));
    height:calc(var(--TopLinks-Font-Size) + (var(--TopLinks-Padding) * 2) + (var(--TopLinks-Border-Size) * 4));
    overflow:visible;
}

.bg svg, .link-text {
    transition: all 0.25s;
    transition-delay:0s;
}

.bg svg {
    transition-timing-function:linear;
}

.one-link .fr svg {
    fill:var(--TopLinks-Background);
    stroke-width:calc(var(--TopLinks-Border-Size) * 2);
    stroke:var(--TopLinks-Background);
}

.one-link:hover .fr svg {
    fill:var(--TopLinks-Border-Color)!important;
    stroke:var(--Outer-Frame-Background)!important;
}

.link-text {
    position:absolute;
    top:0;left:0;
    width:100%;
    height:calc(100% - var(--TopLinks-Border-Size));
    display:flex;
    align-items:center;
    justify-content:center;
    font-family:neuborn;
    font-size:var(--TopLinks-Font-Size);
    text-transform:uppercase;
    letter-spacing:1px;
    color:var(--TopLinks-Text-Color);
    transform:scaleX(1.269);
    transform-origin:center;
    text-shadow:0 0 0 var(--TopLinks-Background), 0 0 0 var(--TopLinks-Background);
    transition-timing-function:ease-in;
}

.one-link:hover .link-text {
    color:var(--TopLinks-Text-Color-On-Hover);
    text-shadow:-5px -2px 0 var(--TopLinks-Text-Glitch-Color-1), 5px 2px 0 var(--TopLinks-Text-Glitch-Color-2);
}

.bk {
    position:absolute;
    top:0;
    left:0;margin-left:calc(var(--TopLinks-Border-Size) * -2);
    z-index:-1;
}

.bg:not(.fr), .bg:not(.fr) svg {
    width:100%;
    height:100%;
}

.bg:not(.fr) svg {
    fill:var(--TopLinks-Border-Color);
    stroke-width:calc(var(--TopLinks-Border-Size) * 2);
    stroke:var(--TopLinks-Border-Color);
}

.tt {
    position:absolute;
    top:0;margin-top:calc(var(--TopLinks-Border-Size) * -2);
    left:0;margin-left:calc(var(--TopLinks-Border-Size) * -2);
    z-index:-1;
}

.rr {
    position:absolute;
    top:0;margin-top:calc(var(--TopLinks-Border-Size) * -2);
    right:0;
    z-index:-1;
}

.bm {
    position:absolute;
    bottom:0;margin-bottom:calc(var(--TopLinks-Border-Size) * -2);
    right:0;
    z-index:-1;
}

.vz {
    position:absolute;
    top:0;
    right:0;margin-right:calc(var(--TopLinks-Border-Size) * -2);
    z-index:-1;
}

/*------------ CORNER DECORATIONS ------------*/
.shrimp {
    position:fixed;
    bottom:0;margin-bottom:calc(var(--Outer-Frame-Size) + var(--Inner-Frame-Border-Size) + var(--Corner-Decorations-Margin));
    flex-wrap:nowrap;
    white-space:nowrap;
    z-index:68;
}

.shrimp.left {
    left:0;margin-left:calc(var(--Outer-Frame-Size) + var(--Inner-Frame-Border-Size) + var(--Corner-Decorations-Margin) - (var(--Corner-Boxes-Spacing) / 2));
}

.shrimp.right {
    right:0;margin-right:calc(var(--Outer-Frame-Size) + var(--Inner-Frame-Border-Size) + var(--Corner-Decorations-Margin) - (var(--Corner-Boxes-Spacing) / 2));
}

.box i {
    position:relative;
    padding:var(--Corner-Boxes-Padding);
    border:var(--Corner-Boxes-Border-Thickness) solid var(--Corner-Decorations-Color);
    font-size:var(--Corner-Boxes-Icon-Size);
    color:var(--Corner-Decorations-Color);
    line-height:1em;
}

.box .special i {
    margin:0!important;
}

.box i, .box .special {
    margin:0 calc(var(--Corner-Boxes-Spacing) / 2);
}

.box .special {
    display:flex;
}

.box .empty {
    color:transparent;
}

.eggholder {
    margin-left:calc(var(--Corner-Boxes-Spacing) / 2);
    margin-right:calc(var(--Corner-Boxes-Spacing) / -2);
    width:0;
}

.oeuf {
    width:100%;
    height:50%;
}

.bit {
    margin-top:var(--Corner-Boxes-Dots-Spacing);
    height:calc((100%  - (var(--Corner-Boxes-Dots-Spacing) * 2)) / 3);
    background:var(--Corner-Decorations-Color);
}

.bit:first-of-type {margin-top:0;}

/*----- MINI SQUARES -----*/
.squares {
    margin-bottom:var(--Corner-Boxes-Border-Thickness);
    font-family:squarethings;
    font-size:var(--Mini-Squares-Size);
    letter-spacing:var(--Mini-Squares-Spacing);
    color:var(--Corner-Decorations-Color);
    line-height:1em;
    text-align:left;
    user-select:none;
    cursor:default;
}

.squares br {
    display:block;
    content:"";
    margin-bottom:var(--Mini-Squares-Spacing);
}

.squares .null {
    color:transparent;
}

.squares .fade {
    opacity:0.6;
}

.sus {
    margin-right:var(--Round-X-Last-Gap);
}

.tinytext {
    margin-bottom:var(--Corner-Mini-Text-Bottom-Gap);
    font-family:squarewave;
    font-size:var(--Corner-Mini-Text-Font-Size);
    text-transform:uppercase;
    letter-spacing:1px;
    word-spacing:-2px;
    color:var(--Corner-Decorations-Color);
    line-height:1em;
    filter:brightness(105%);
}

.shrimp.left .squares {
    margin-left:calc(var(--Corner-Boxes-Spacing) / 2);
    margin-right:var(--Round-X-Last-Gap);
}

.shrimp.left .tinytext {
    text-align:left;
}

.shrimp.right .tinytext {
    text-align:right;
}

.round {
    
}

.round i {
    margin-right:var(--Round-X-Spacing);
    padding:var(--Round-X-Padding);
    border-radius:100%;
    border:var(--Round-X-Border-Thickness) solid var(--Corner-Decorations-Color);
    font-size:var(--Round-X-Size);
    color:var(--Corner-Decorations-Color);
    line-height:1em;
}

.round i:first-of-type {margin-left:0;}
.round i:last-of-type {margin-right:0;}