html{box-sizing:border-box;height:100%;min-width:768px}html,body{margin:0;padding:0;width:100%;overflow:scroll}body{min-height:100%;min-width:768px}.container{display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:.5fr repeat(4,1fr);gap:0px 0px;grid-template-areas:"header header header header header" "content content content content content" "content content content content content" "content content content content content" "content content content content content";min-width:100%;height:100%}.container-bg{padding:0;margin:0;min-height:100%;grid-area:1 / 1 / 8 / 6}.header{display:grid;grid-template-columns:.1fr 1fr .1fr;grid-template-rows:1fr;gap:0px 0px;grid-template-areas:". header-logo .";grid-area:header}.header-logo{grid-area:header-logo;justify-self:center;align-self:center;font-size:3em}.content{display:grid;grid-template-columns:.1fr repeat(4,1fr) .1fr;grid-template-rows:.01fr repeat(2,1fr) .1fr;gap:.5em .5em;grid-template-areas:". . . . . ." ". sidebar-container window-frame window-frame window-frame ." ". sidebar-container window-frame window-frame window-frame ." ". . . . . .";align-content:center;justify-items:center;align-items:center;justify-self:center;align-self:center;grid-area:content;width:100%;height:100%}.sidebar-container{display:grid;grid-template-columns:.05fr 1fr .05fr;grid-template-rows:1fr 1.15fr .01fr;gap:0em 0px;grid-template-areas:". profile-card ." ". sidebar-card ." ". . .";justify-self:center;align-self:stretch;grid-area:sidebar-container;width:100%;height:100%}.profile-card{grid-area:profile-card;text-align:center;font-family:"uni 05_53";--pixel-bg: linear-gradient(to bottom, #aef1ff 0%, #ffb8f7 100%) --pixel-border: black;--pixel-border-2: white;--pixel-border-3: black;--pixel: .125rem;display:flex;flex-direction:column;height:-moz-fit-content;height:fit-content;max-height:1fr;max-width:250px}.profile-pic{justify-self:center;align-self:center;grid-area:profile-pic;padding-bottom:1.5em}.profile-data{justify-self:center;align-self:center;grid-area:profile-data}.window-frame{grid-area:window-frame;overflow:scroll;border:1px solid white;background:#ffffff73;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);scrollbar-color:#aef1ff;padding:1em;justify-self:stretch;align-self:stretch;min-width:500px;width:100%;height:100%}.window-frame a:hover{text-decoration:underline}.window-frame .react-pdf__Document{align-items:center;place-items:center;justify-items:center;justify-content:center;justify-self:center;align-self:center}.window-frame .react-pdf__Page{align-items:center;place-items:center;place-self:center}.window-frame .react-pdf__Page__canvas{align-items:center;place-items:center;justify-self:center;align-self:center;justify-content:center}.sidebar-card{grid-area:sidebar-card;display:flex;flex-direction:row;max-height:1fr;min-width:12em;max-width:1fr;justify-content:stretch;align-content:stretch;padding-top:.5em}.inner-sidebar-card{display:grid;grid-template-columns:1fr;grid-template-rows:1fr .17fr;gap:.5em 0px;grid-template-areas:"sidebar-view" "sidebar-nav";height:100%}.sidebar-content{display:grid;grid-template-columns:1fr;grid-template-rows:repeat(2,1fr);gap:.5em 0px;grid-auto-flow:row;grid-template-areas:"sidebar-view" "sidebar-nav-container";grid-area:content;max-width:18em;max-height:20em}.socials-container{font-family:"uni 05_53";display:flex;max-width:1fr;justify-content:space-around}.socials-container ul{padding-top:.75em;min-width:-moz-min-content;min-width:min-content}.socials-container a:hover{text-decoration:underline;color:#ddc1ff}.socials-container a:hover img{background-color:#ddc1ff;border:none;border-radius:2px}.affiliates-container{margin:.5em auto}.sidebar-view{grid-area:sidebar-view;border:1px solid rgba(255,163,227,.5);border-radius:15px 15px 5px 5px;background:linear-gradient(to bottom,#e4fefdcc,#fafafa80);z-index:1;margin-top:.35em;margin-left:.35em;margin-right:.35em;height:100%;max-height:1fr;min-width:-moz-max-content;min-width:max-content;max-width:1fr}.sidebar-nav img{display:flex}.sidebar-nav button{justify-content:space-between;--pixel-bg: #ebe3f5;--pixel-border: #ffb8f7;--pixel-border-2: #e2f8fe;--pixel-border-3: #ddc1ff;--pixel: .1em}.sidebar-nav{display:flex;flex-direction:row;row-gap:1em;margin-left:.35em;margin-right:.35em;align-self:center;justify-content:space-between;grid-area:sidebar-nav}.sidebar-nav .socialsButton{padding:.25em 1.5em;border:.05em solid rgba(221,193,255,.75);border-radius:.25em .25em .5em .5em;background-color:#ffffff4d}.sidebar-nav .socialsButton:active{background-color:#ffffffbf}.sidebar-nav .socialsButton:focus{background-color:#ffffffbf}.sidebar-nav .affButton{padding:.25em 1.5em;border:.05em solid rgba(221,193,255,.75);border-radius:.25em .25em .5em .5em;background-color:#ffffff4d}.sidebar-nav .affButton:active{background-color:#ffffff80}.sidebar-nav .affButton:focus{background-color:#ffffffbf}.css-selector{background:linear-gradient(325deg,#ebe3f5,#fce8f3,#e4fefd,#e2f8fe);height:100%;width:100%;z-index:2}#wallpaper{background-image:linear-gradient(to right,rgb(211,255,255) 2px,transparent 2px),linear-gradient(to bottom,rgb(211,255,255) 2px,transparent 2px);background-size:2.5em 2.5em;background-position:center center;height:100%;width:100%;z-index:2;background-attachment:fixed}h1{font-family:superscript;font-size:90px;background:-webkit-linear-gradient(165deg,#aef1ff,#ddc1ff,#ffb8f7);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;display:inline-flex}.profile-card-bg{position:relative;width:100%;height:100%}.profile-card-bg:before{content:"";background-image:linear-gradient(to bottom,#aef1ff,#ffb8f7);position:absolute;top:0;right:0;bottom:0;left:0;opacity:.25;border-radius:15px}.profile-card-border{color:#313149;padding:25px;position:relative;z-index:0;height:100%}.profile-card-border:before{content:"";position:absolute;z-index:-1;top:0;right:0;bottom:0;left:0;padding:5px;border-radius:15px;background:linear-gradient(to bottom,#aef1ff,#ffb8f7);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude}.sidebar-card-bg{position:relative;width:100%;height:100%;background-color:#fff;border-radius:1em;filter:drop-shadow(0em 0em #ddc1ff)}.sidebar-card-bg:before{content:"";background-image:linear-gradient(to top right,#aef1ff,#f6d1f2);position:absolute;top:0;right:0;bottom:0;left:0;opacity:.5;border-radius:15px;z-index:0}.sidebar-card-border{color:#313149;padding:1px;position:relative;z-index:0;height:100%}.sidebar-card-border:before{content:"";position:absolute;z-index:-1;top:0;right:0;bottom:0;left:0;padding:1px;border-radius:15px;background:linear-gradient(to bottom,#aef1ff,#ffb8f7);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude}.pixel-border{background:var(--pixel-bg);box-shadow:0 calc(var(--pixel) * -3) 0 calc(var(--pixel) * -1) var(--pixel-bg),0 calc(var(--pixel) * 3) 0 calc(var(--pixel) * -1) var(--pixel-bg),0 calc(var(--pixel) * -6) 0 calc(var(--pixel) * -2) var(--pixel-bg),0 calc(var(--pixel) * 6) 0 calc(var(--pixel) * -2) var(--pixel-bg),0 calc(var(--pixel) * -9) 0 calc(var(--pixel) * -4) var(--pixel-bg),0 calc(var(--pixel) * 9) 0 calc(var(--pixel) * -4) var(--pixel-bg),0 calc(var(--pixel) * -12) 0 calc(var(--pixel) * -6) var(--pixel-bg),0 calc(var(--pixel) * 12) 0 calc(var(--pixel) * -6) var(--pixel-bg),calc(var(--pixel) * -1) 0 0 0 var(--pixel-border),var(--pixel) 0 0 0 var(--pixel-border),0 calc(var(--pixel) * -2) 0 0 var(--pixel-border),0 calc(var(--pixel) * 2) 0 0 var(--pixel-border),0 calc(var(--pixel) * -5) 0 calc(var(--pixel) * -1) var(--pixel-border),0 calc(var(--pixel) * 5) 0 calc(var(--pixel) * -1) var(--pixel-border),0 calc(var(--pixel) * -7) 0 calc(var(--pixel) * -2) var(--pixel-border),0 calc(var(--pixel) * 7) 0 calc(var(--pixel) * -2) var(--pixel-border),0 calc(var(--pixel) * -10) 0 calc(var(--pixel) * -4) var(--pixel-border),0 calc(var(--pixel) * 10) 0 calc(var(--pixel) * -4) var(--pixel-border),0 calc(var(--pixel) * -13) 0 calc(var(--pixel) * -6) var(--pixel-border),0 calc(var(--pixel) * 13) 0 calc(var(--pixel) * -6) var(--pixel-border),calc(var(--pixel) * -2) 0 0 0 var(--pixel-border-2),calc(var(--pixel) * 2) 0 0 0 var(--pixel-border-2),0 calc(var(--pixel) * -1) 0 var(--pixel) var(--pixel-border-2),0 var(--pixel) 0 var(--pixel) var(--pixel-border-2),0 calc(var(--pixel) * -4) 0 0 var(--pixel-border-2),0 calc(var(--pixel) * 4) 0 0 var(--pixel-border-2),0 calc(var(--pixel) * -6) 0 calc(var(--pixel) * -1) var(--pixel-border-2),0 calc(var(--pixel) * 6) 0 calc(var(--pixel) * -1) var(--pixel-border-2),0 calc(var(--pixel) * -8) 0 calc(var(--pixel) * -2) var(--pixel-border-2),0 calc(var(--pixel) * 8) 0 calc(var(--pixel) * -2) var(--pixel-border-2),0 calc(var(--pixel) * -11) 0 calc(var(--pixel) * -4) var(--pixel-border-2),0 calc(var(--pixel) * 11) 0 calc(var(--pixel) * -4) var(--pixel-border-2),0 calc(var(--pixel) * -14) 0 calc(var(--pixel) * -6) var(--pixel-border-2),0 calc(var(--pixel) * 14) 0 calc(var(--pixel) * -6) var(--pixel-border-2),calc(var(--pixel) * -3) 0 0 0 var(--pixel-border-3),calc(var(--pixel) * 3) 0 0 0 var(--pixel-border-3),0 0 0 calc(var(--pixel) * 2) var(--pixel-border-3),0 calc(var(--pixel) * -3) 0 var(--pixel) var(--pixel-border-3),0 calc(var(--pixel) * 3) 0 var(--pixel) var(--pixel-border-3),0 calc(var(--pixel) * -5) 0 0 var(--pixel-border-3),0 calc(var(--pixel) * 5) 0 0 var(--pixel-border-3),0 calc(var(--pixel) * -7) 0 calc(var(--pixel) * -1) var(--pixel-border-3),0 calc(var(--pixel) * 7) 0 calc(var(--pixel) * -1) var(--pixel-border-3),0 calc(var(--pixel) * -9) 0 calc(var(--pixel) * -2) var(--pixel-border-3),0 calc(var(--pixel) * 9) 0 calc(var(--pixel) * -2) var(--pixel-border-3),0 calc(var(--pixel) * -12) 0 calc(var(--pixel) * -4) var(--pixel-border-3),0 calc(var(--pixel) * 12) 0 calc(var(--pixel) * -4) var(--pixel-border-3),0 calc(var(--pixel) * -15) 0 calc(var(--pixel) * -6) var(--pixel-border-3),0 calc(var(--pixel) * 15) 0 calc(var(--pixel) * -6) var(--pixel-border-3)}.pixel-corners{clip-path:polygon(0px calc(100% - 20px),4px calc(100% - 20px),4px calc(100% - 12px),8px calc(100% - 12px),8px calc(100% - 8px),12px calc(100% - 8px),12px calc(100% - 4px),20px calc(100% - 4px),20px 100%,calc(100% - 20px) 100%,calc(100% - 20px) calc(100% - 4px),calc(100% - 12px) calc(100% - 4px),calc(100% - 12px) calc(100% - 8px),calc(100% - 8px) calc(100% - 8px),calc(100% - 8px) calc(100% - 12px),calc(100% - 4px) calc(100% - 12px),calc(100% - 4px) calc(100% - 20px),100% calc(100% - 20px),100% 20px,calc(100% - 4px) 20px,calc(100% - 4px) 12px,calc(100% - 8px) 12px,calc(100% - 8px) 8px,calc(100% - 12px) 8px,calc(100% - 12px) 4px,calc(100% - 20px) 4px,calc(100% - 20px) 0px,20px 0px,20px 4px,12px 4px,12px 8px,8px 8px,8px 12px,4px 12px,4px 20px,0px 20px)}@mixin step1($width,$color){box-shadow: $width 0 $color,-$width 0 $color,0 (-$width) $color,0 $width $color; margin: $width auto;}@mixin step2($width,$color,$bgcolor){box-shadow: $width 0 $bgcolor,-$width 0 $bgcolor,0 (-$width) $bgcolor,0 $width $bgcolor,2 * $width 0 $color,-2 * $width 0 $color,0 (-2 * $width) $color,0 2 * $width $color,0 0 0 $width $color; margin: 2 * $width auto;}@mixin step3($width,$color,$bgcolor){box-shadow: $width 0 $bgcolor,-$width 0 $bgcolor,0 (-$width) $bgcolor,0 $width $bgcolor,2 * $width 0 $bgcolor,-2 * $width 0 $bgcolor,0 (-2 * $width) $bgcolor,0 2 * $width $bgcolor,0 0 0 $width $bgcolor,3 * $width 0 $color,-3 * $width 0 $color,0 3 * $width $color,0 (-3 * $width) $color,0 (-$width) 0 $width $color,0 $width 0 $width $color,$width 0 0 $width $color,-$width 0 0 $width $color; margin: 3 * $width auto;}@mixin step4($width,$color,$bgcolor){box-shadow: $width 0 $bgcolor,-$width 0 $bgcolor,0 (-$width) $bgcolor,0 $width $bgcolor,2 * $width 0 $bgcolor,-2 * $width 0 $bgcolor,0 (-2 * $width) $bgcolor,0 2 * $width $bgcolor,0 0 0 $width $bgcolor,3 * $width 0 $bgcolor,-3 * $width 0 $bgcolor,0 3 * $width $bgcolor,0 (-3 * $width) $bgcolor,0 (-$width) 0 $width $bgcolor,0 $width 0 $width $bgcolor,$width 0 0 $width $bgcolor,-$width 0 0 $width $bgcolor,4 * $width 0 $color,-4 * $width 0 $color,0 (-4 * $width) $color,0 4 * $width $color,2 * $width 0 0 $width $color,-2 * $width 0 0 $width $color,0 2 * $width 0 $width $color,0 (-2 * $width) 0 $width $color,0 0 0 2 * $width $color; margin: 4 * $width auto;}@mixin other($width,$color,$bgcolor){position: relative; &::before {content: ""; position: absolute; top: -15px; right: -15px; bottom: -15px; left: -15px; background: $bgcolor; opacity: .25;} &::after {content: ""; position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; background: $color; transform: translate(-50%,-50%);} box-shadow: 4 * $width 0 rgba(0,0,0,.25),-4 * $width 0 rgba(0,0,0,.25),0 (-4 * $width) rgba(0,0,0,.25),0 4 * $width rgba(0,0,0,.25),$width 0 0 2 * $width rgba(0,0,0,.25),-$width 0 0 2 * $width rgba(0,0,0,.25),0 (-$width) 0 2 * $width rgba(0,0,0,.25),0 $width 0 2 * $width rgba(0,0,0,.25),5 * $width 0 rgba(0,0,0,.5),-5 * $width 0 rgba(0,0,0,.5),0 (-5 * $width) rgba(0,0,0,.5),0 5 * $width rgba(0,0,0,.5),0 0 0 3 * $width rgba(0,0,0,.5),0 2 * $width 0 2 * $width rgba(0,0,0,.5),0 (-2 * $width) 0 2 * $width rgba(0,0,0,.5),2 * $width 0 0 2 * $width rgba(0,0,0,.5),(-2 * $width) 0 0 2 * $width rgba(0,0,0,.5); margin: 5 * $width auto;}.dialogStyle{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:300px;padding:20px;background:#fff;box-shadow:0 4px 8px #0000001a;border-radius:8px;z-index:1000;cursor:grab}.headerStyle{display:flex;justify-content:space-between;align-items:center;cursor:grab;margin-bottom:10px}.contentStyle{font-family:"Arial, sans-serif";font-size:1rem;color:#333}