-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.08963856.css.map
1 lines (1 loc) · 29.7 KB
/
index.08963856.css.map
1
{"mappings":"AAmBA;;;;;AAKA;;;;;AAKA;;;;;AAOA;;;;AAIA;;;;;;;;;;AAsBA;;;;;;;;;;AAWA;;;;;;;AAaA;;;;;;;AAQA;;;;;AAOA;;;;;AAMA;;;;;AAMA;;;;;AAMA;;;;;AAOA;;;;;AAMA;;;;;AAMA;;;;;AAMA;;;;;;;;;;;;AAaA;;;;;;;;;;;;AAcA;;;;;;;;;;;;;;;AAoBI;;;;;;AAMA;;;;;;;;;AAUJ;;;;;;;AAOI;;;;AAGI;;;;AAGA;;;;AAUI;;;;AAOZ;;;;;;;;;;;;;;AAcI;;;;;;;;;AAUI;;;;;;;;;;AAUA;;;;;;;;;;;;;;;AAeA;;;;;AAMJ;;;;;;;;;;;;;;AAcA;;;;;AAGI;;;;AAKJ;;;;;;AAMA;;;;AAEI;;;;;AAMJ;;;;;;;AAOA;;;;;;;;;;;;;;;;;;;;;;;;AA0BA;;;;;;;;;;;AAWA;;;;;;;;;;;;;;AAeI;;;;;;;;;;;AAQI;;;;;;;;AAOA;;;;;AAOR;;;;;;;;;;;;;;;;AAkBI;;;;AAIA;;;;AAGI;;;;;AAMJ;;;;;;;AAWA;;;;AAIA;;;;AAGI;;;;;AAMJ;;;;;;;;AAUA;;;;AAIA;;;;AAGI;;;;;AAMJ;;;;;;;;AAUA;;;;AAIA;;;;AAGI;;;;;AAMJ;;;;;;;;AAUA;;;;;;;;;;;;;AAcA;;;;;;;AAMI;;;;;;AASJ;;;;;AAOI;;;;;AAWJ;;;;;;AAQJ;;;;;;AAMA;;;;;;;AAQI;;;;;;;AAQI;;;;AAeJ;;;;;;;;AAOI;;;;AAWJ;;;;;;;;AAOI;;;;AAeJ;;;;;;;;AAOI;;;;AAcR;;;;AAEI;;;;;AAMJ;;;;AAIA;;;;;AAQI;;;;;;AAQJ;;;;;;AAMA;;;;;AAMI;;;;;;;AAQI;;;;AAeJ;;;;;;;;AAOI;;;;AAWJ;;;;;;;;AAOI;;;;AAeJ;;;;;;;;AAOI;;;;AAcR;;;;AAEI;;;;;AAMJ;;;;AAIA;;;;;AASI;;;;AAIA;;;;AAGI;;;;;AAMJ;;;;AAMA;;;;AAIA;;;;AAGI;;;;;AAMJ;;;;AAMA;;;;AAIA;;;;AAGI;;;;;AAMJ;;;;AAMA;;;;AAIA;;;;AAGI;;;;;AAMJ;;;;AAMR;;;;AAMA;;;;;;;;;;;AAWI;;;;;;;;;;;AAWA;;;;;;;;;;AAWJ;;;;;;;;;;AAWA;;;;;;;;;;;;;;AAiBA;;;;AAIA;;;;;;;;AASA;;;;;;AAMI;;;;AAKJ;;;;;;;;;;;AA+BA;;;;;AAOA;;;;AAKA;;;;AAKA;;;;AAKA;;;;AAKA;;;;;;;;;;;;;;AAaA;;;;;;;;;;AAUA","sources":["src/style/style.scss"],"sourcesContent":["$positive: white;\r\n$negative: black;\r\n$theme-1-primary: rgb(93, 202, 202);\r\n$theme-2-primary: rgb(207, 72, 207);\r\n$theme-3-primary: rgb(192, 192, 59);\r\n$theme-4-primary: gainsboro;\r\n$line-color: rgb(197, 77, 77);\r\n\r\n// light mode\r\n$ipositive: black;\r\n$inegative: white;\r\n$itheme-1-primary: rgb(162, 53, 53);\r\n$itheme-2-primary: rgb(48, 183, 48);\r\n$itheme-3-primary: rgb(63, 63, 196);\r\n$itheme-4-primary: rgb(169, 169, 169);\r\n$iline-color: rgb(58, 178, 178);\r\n\r\n$box-size: 84px;\r\n\r\n@font-face {\r\n font-family: \"VCR\";\r\n src: url(\"../fonts/VCR_OSD_MONO.ttf\");\r\n}\r\n\r\n@font-face {\r\n font-family: \"MajorMono\";\r\n src: url(\"../fonts/MajorMonoDisplay-Regular.ttf\");\r\n}\r\n\r\n@font-face {\r\n font-family: \"cappx\";\r\n src: url(\"../fonts/cappx.ttf\");\r\n}\r\n\r\n$fonty: 'Courier New', Courier, monospace;\r\n\r\nhtml {\r\n scroll-behavior: smooth;\r\n}\r\n\r\n:root\r\n{\r\n --positive: #{$positive};\r\n --negative: #{$negative};\r\n --theme-1-primary: #{$theme-1-primary};\r\n --theme-2-primary: #{$theme-2-primary};\r\n --theme-3-primary: #{$theme-3-primary};\r\n --theme-4-primary: #{$theme-4-primary};\r\n --line-color: #{$line-color};\r\n}\r\n\r\n.dark\r\n{\r\n --positive: #{$positive};\r\n --negative: #{$negative};\r\n --theme-1-primary: #{$theme-1-primary};\r\n --theme-2-primary: #{$theme-2-primary};\r\n --theme-3-primary: #{$theme-3-primary};\r\n --theme-4-primary: #{$theme-4-primary};\r\n --line-color: #{$line-color};\r\n}\r\n\r\n.light\r\n{\r\n --positive: #{$ipositive};\r\n --negative: #{$inegative};\r\n --theme-1-primary: #{$itheme-1-primary};\r\n --theme-2-primary: #{$itheme-2-primary};\r\n --theme-3-primary: #{$itheme-3-primary};\r\n --theme-4-primary: #{$itheme-4-primary};\r\n --line-color: #{$iline-color};\r\n}\r\n\r\n*\r\n{\r\n margin: 0px;\r\n padding: 0px;\r\n \r\n -webkit-user-select: none; /* Safari */ \r\n -moz-user-select: none; /* Firefox */\r\n -ms-user-select: none; /* IE10+/Edge */\r\n user-select: none; /* Standard */\r\n\r\n //cursor: cell;\r\n}\r\n\r\nbody\r\n{\r\n background-color: var(--negative);\r\n transition: background-color 1.5s ease-in;\r\n pointer-events: none;\r\n font-family: $fonty;\r\n}\r\n\r\nbody.games\r\n{\r\n transition: background-color 0.8s ease-in;\r\n background-color: darken($theme-1-primary, 30%);\r\n \r\n}\r\n\r\nbody.music\r\n{\r\n transition: background-color 0.8s ease-in;\r\n background-color: darken($theme-2-primary, 30%);\r\n}\r\n\r\nbody.art\r\n{\r\n transition: background-color 0.8s ease-in;\r\n background-color: darken($theme-3-primary, 30%);\r\n}\r\n\r\nbody.me\r\n{\r\n transition: background-color 0.8s ease-in;\r\n background-color: darken($theme-4-primary, 30%);\r\n}\r\n\r\nbody.games.light\r\n{\r\n transition: background-color 0.8s ease-in;\r\n background-color: darken($itheme-1-primary, 0%);\r\n \r\n}\r\n\r\nbody.music.light\r\n{\r\n transition: background-color 0.8s ease-in;\r\n background-color: darken($itheme-2-primary, 10%);\r\n}\r\n\r\nbody.art.light\r\n{\r\n transition: background-color 0.8s ease-in;\r\n background-color: darken($itheme-3-primary, 0%);\r\n}\r\n\r\nbody.me.light\r\n{\r\n transition: background-color 0.8s ease-in;\r\n background-color: darken($itheme-4-primary, 0%);\r\n}\r\n\r\n#background\r\n{\r\n pointer-events: none;\r\n background-image: url(\"../static.gif\");\r\n background-size: cover;\r\n background-position: center;\r\n position: fixed;\r\n opacity: 30%;\r\n width: 100%;\r\n height: 100%;\r\n z-index: -10;\r\n}\r\n\r\n.layer\r\n{\r\n background-color: var(--negative);\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n /*transition: 10s ease-in;*/\r\n animation: bg_layer_fade 4s ease-in forwards;\r\n pointer-events: none;\r\n z-index: 100;\r\n}\r\n\r\n#title\r\n{\r\n pointer-events: all;\r\n font-weight: normal;\r\n font-family: $fonty;\r\n position: fixed;\r\n \r\n text-decoration: none;\r\n align-items: center;\r\n justify-content:center;\r\n display: flex;\r\n\r\n padding: 10px;\r\n z-index: 3;\r\n \r\n -webkit-user-select: none; /* Safari */ \r\n -moz-user-select: none; /* Firefox */\r\n -ms-user-select: none; /* IE10+/Edge */\r\n user-select: none; /* Standard */\r\n\r\n &:hover div {\r\n transition: text-shadow 1s ease-out;\r\n text-shadow: var(--theme-1-primary) 5px 10px, var(--theme-2-primary) 10px 20px, var(--theme-3-primary) 15px 30px;\r\n font-weight: bold;\r\n }\r\n\r\n div {\r\n font-size: 32px;\r\n font-style: italic;\r\n color: var(--positive);\r\n position: relative;\r\n display: flex;\r\n transition: text-shadow 0.2s ease-in;\r\n }\r\n}\r\n\r\n#color-mode\r\n{\r\n position: fixed;\r\n bottom: 30px;\r\n left: 20px;\r\n overflow: hidden;\r\n\r\n svg {\r\n color: var(--positive);\r\n\r\n &.current-mode {\r\n display: block;\r\n }\r\n &.other-mode {\r\n display: none;\r\n }\r\n }\r\n\r\n &:hover {\r\n svg {\r\n &.current-mode {\r\n display: none;\r\n }\r\n &.other-mode {\r\n display: block;\r\n }\r\n }\r\n }\r\n}\r\n\r\n#main-nav\r\n{\r\n position: fixed;\r\n pointer-events: none;\r\n height: 100vh;\r\n width: 100vw;\r\n list-style: none;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n transition: height 0.8s ease-in-out, width 0.8s ease-in-out;\r\n overflow: hidden;\r\n z-index: 5;\r\n\r\n li {\r\n transform: translateZ(0);\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n padding: 4vw;\r\n }\r\n\r\n div{\r\n &.float {\r\n z-index: 1;\r\n display: flex;\r\n flex-direction: row;\r\n margin: 20px;\r\n transition: 0.2s ease-in;\r\n animation: floaty 3s ease-in-out infinite;\r\n text-align: center;\r\n }\r\n\r\n a p {\r\n position: absolute;\r\n color: var(--positive);\r\n font-size: 32px;\r\n transition: 0.2s ease-in;\r\n width: 60%;\r\n margin: 0px auto;\r\n writing-mode: vertical-rl;\r\n -webkit-writing-mode: vertical-rl;\r\n -ms-writing-mode: vertical-rl;\r\n text-align: center;\r\n vertical-align: center;\r\n opacity: 100%;\r\n }\r\n\r\n &:hover a p {\r\n transition: 0.2s ease-in;\r\n opacity: 100%;\r\n }\r\n }\r\n\r\n a {\r\n color: var(--positive);\r\n text-decoration: none;\r\n position: relative;\r\n font-family: $fonty;\r\n font-size: 24px;\r\n white-space: nowrap;\r\n z-index: 1;\r\n text-align: center;\r\n font-style: normal;\r\n margin: 0px;\r\n padding: 0px;\r\n }\r\n\r\n &.compact {\r\n height: 10vh;\r\n transition: height width 0.3s ease-in-out;\r\n li {\r\n padding: 1vw;\r\n }\r\n }\r\n\r\n &.compact div.float {\r\n margin: 0px;\r\n transition: 0.3s ease-in-out;\r\n text-align: center;\r\n }\r\n \r\n li {\r\n transition: 1s ease-in-out;\r\n &:hover {\r\n transform: translate(-23px, 0px);\r\n transition: 1s ease-in-out;\r\n }\r\n }\r\n\r\n .Icon {\r\n font-size: 60px;\r\n padding: 0px;\r\n margin: 0px;\r\n transition: text-shadow 0.2s ease-in, font-size 0.4s ease-in;\r\n }\r\n\r\n .box-label {\r\n color: var(--negative);\r\n letter-spacing: 10px;\r\n text-decoration: none;\r\n position: relative;\r\n font-family: $fonty;\r\n font-size: 64px;\r\n margin: 0;\r\n white-space: nowrap;\r\n z-index: 1;\r\n text-align: center;\r\n font-style: normal;\r\n width: 100%;\r\n height: 0px;\r\n opacity: 0%;\r\n writing-mode: vertical-rl;\r\n -webkit-writing-mode: vertical-rl;\r\n -ms-writing-mode: vertical-rl;\r\n -webkit-user-select: none; /* Safari */ \r\n -moz-user-select: none; /* Firefox */\r\n -ms-user-select: none; /* IE10+/Edge */\r\n user-select: none; /* Standard */\r\n pointer-events: none;\r\n transition: letter-spacing 0.8s ease-in, height 0.8s ease-in, opacity 0.8s ease-in, margin 0.8s ease-in;\r\n }\r\n\r\n .hover-content {\r\n margin: 0;\r\n padding: 0;\r\n display: flex;\r\n flex-direction: column;\r\n align-content: center;\r\n align-items: center;\r\n pointer-events: all;\r\n transition: 1.8s ease-in;\r\n }\r\n\r\n .shadow-bar\r\n {\r\n width: 100%;\r\n height: $box-size;\r\n padding: 0px;\r\n margin: 0px;\r\n gap: 50vh;\r\n display: flex;\r\n flex-direction: row;\r\n align-content: center;\r\n justify-content: center;\r\n transform: rotate(90deg);\r\n transition: 1s ease-in;\r\n opacity: 100%;\r\n\r\n li {\r\n white-space: nowrap;\r\n display: inline-block;\r\n width: fit-content;\r\n height: 100%;\r\n padding: 0px;\r\n margin: 0px;\r\n transition: 0.4s ease-in-out;\r\n a {\r\n color: var(--negative);\r\n font-family: $fonty;\r\n font-size: 48px;\r\n padding: 0px 20px;\r\n margin: 0px;\r\n }\r\n &:hover {\r\n transition: 0.2s ease-in-out;\r\n transform: translate(-10px,10px);\r\n }\r\n }\r\n }\r\n\r\n .shadow {\r\n margin-left: -$box-size;\r\n padding: 0;\r\n \r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n opacity: 0%;\r\n width: $box-size;//52px;\r\n height: 200vh;\r\n pointer-events: none;\r\n transition: 1s ease-in;\r\n transform: rotateY(-90deg) translateZ(-$box-size + calc($box-size / 2));\r\n z-index: 1;\r\n }\r\n\r\n #games{\r\n .shadow {\r\n background-color: desaturate(darken($theme-1-primary, 10%), 20%);\r\n }\r\n\r\n .shadow-bar li {\r\n background-color: darken($theme-1-primary, 20%);\r\n\r\n &:hover {\r\n background-color: darken($theme-1-primary, 4%);\r\n box-shadow: darken($theme-1-primary, 20%) 10px -10px;\r\n }\r\n }\r\n\r\n &:hover .hover-bg\r\n {\r\n padding: 2px;\r\n background-color: rgba($theme-1-primary, 0.5);/*var(--theme-1-primary);*/\r\n //height: 200vw;\r\n transition: background-color 0.2s ease-in-out, height 0.5s ease-in-out;\r\n pointer-events: all;\r\n }\r\n }\r\n\r\n #music{\r\n .shadow {\r\n background-color: desaturate(darken($theme-2-primary, 10%), 20%);\r\n }\r\n\r\n .shadow-bar li {\r\n background-color: darken($theme-2-primary, 20%);\r\n\r\n &:hover {\r\n background-color: darken($theme-2-primary, 4%);\r\n box-shadow: darken($theme-2-primary, 20%) 10px -10px;\r\n }\r\n }\r\n\r\n &:hover .hover-bg {\r\n padding: 2px;\r\n background-color: rgba($theme-2-primary, 0.5);\r\n height: 200vw;\r\n transition: background-color 0.2s ease-in-out, height 0.5s ease-in-out;\r\n pointer-events: all;\r\n }\r\n }\r\n\r\n #art {\r\n .shadow {\r\n background-color: desaturate(darken($theme-3-primary, 10%), 20%);\r\n }\r\n\r\n .shadow-bar li {\r\n background-color: darken($theme-3-primary, 20%);\r\n\r\n &:hover {\r\n background-color: darken($theme-3-primary, 4%);\r\n box-shadow: darken($theme-3-primary, 20%) 10px -10px;\r\n }\r\n }\r\n\r\n &:hover .hover-bg {\r\n padding: 2px;\r\n background-color: rgba($theme-3-primary, 0.5);\r\n height: 200vw;\r\n transition: background-color 0.2s ease-in-out, height 0.5s ease-in-out;\r\n pointer-events: all;\r\n }\r\n }\r\n\r\n #me {\r\n .shadow {\r\n background-color: desaturate(darken($theme-4-primary, 10%), 20%);\r\n }\r\n\r\n .shadow-bar li {\r\n background-color: darken($theme-4-primary, 20%);\r\n\r\n &:hover {\r\n background-color: darken($theme-4-primary, 4%);\r\n box-shadow: darken($theme-4-primary, 20%) 10px -10px;\r\n }\r\n }\r\n\r\n &:hover .hover-bg {\r\n padding: 2px;\r\n background-color: rgba($theme-4-primary, 0.5);\r\n height: 200vw;\r\n transition: background-color 0.2s ease-in-out, height 0.5s ease-in-out;\r\n pointer-events: all;\r\n }\r\n }\r\n\r\n :hover {\r\n .box-label\r\n {\r\n letter-spacing: 20px;\r\n white-space: nowrap;\r\n z-index: 1;\r\n text-align: center;\r\n font-style: normal;\r\n transition: 0.5s ease-in-out;\r\n margin-top: 20px;\r\n height: 300px;\r\n opacity: 100%;\r\n pointer-events: all;\r\n }\r\n\r\n .shadow\r\n {\r\n pointer-events: all;\r\n opacity: 60%;\r\n height: 200vh;\r\n transition: 0.5s ease-in-out;\r\n .shadow-bar\r\n {\r\n //transform: rotate(90deg) skewX(40deg) scaleY(0.8);\r\n transition: 0.5s ease-in-out;\r\n opacity: 100%;\r\n gap: 0px;\r\n }\r\n }\r\n\r\n .rotate\r\n {\r\n //-ms-transform: rotate(-20deg) skewy(15deg) scaleX(0.9);\r\n //transform: rotate(-20deg) skewy(15deg) scaleX(0.9);\r\n transform: rotateY(30deg) rotateX(20deg);\r\n transition: 0.5s ease-in-out;\r\n\r\n &.showmenu\r\n {\r\n transform: rotateY(70deg) rotateX(20deg);\r\n transition: 0.3s ease-in-out;\r\n }\r\n }\r\n }\r\n}\r\n\r\n#main-nav.compact {\r\n :hover {\r\n .box-label\r\n {\r\n height: 0px;\r\n opacity: 0%;\r\n pointer-events: all;\r\n }\r\n }\r\n\r\n .shadow {\r\n pointer-events: none;\r\n opacity: 0;\r\n transition: 0.2s ease-in-out;\r\n }\r\n\r\n .Icon{\r\n font-size: 32px;\r\n padding: 15px;\r\n margin: -15px;\r\n transition: text-shadow 0.2s ease-in, font-size 0.4s ease-in;\r\n }\r\n\r\n #games{\r\n &:hover .hover-bg\r\n {\r\n padding: 2px;\r\n background-color: rgba($theme-1-primary, 0);/*var(--theme-1-primary);*/\r\n //height: 200vw;\r\n transition: background-color 0.2s ease-in-out, height 0.5s ease-in-out;\r\n pointer-events: all;\r\n\r\n .Icon{\r\n text-shadow:\r\n var(--theme-1-primary) 2.8px 0px,\r\n var(--theme-1-primary) -2.8px 0px,\r\n var(--theme-1-primary) 0px 2.8px,\r\n var(--theme-1-primary) 0px -2.8px,\r\n var(--theme-1-primary) 2px 2px,\r\n var(--theme-1-primary) 2px -2px,\r\n var(--theme-1-primary) -2px 2px,\r\n var(--theme-1-primary) -2px -2px;\r\n }\r\n }\r\n }\r\n\r\n #music{\r\n &:hover .hover-bg {\r\n padding: 2px;\r\n background-color: rgba($theme-2-primary, 0);\r\n height: 200vw;\r\n transition: background-color 0.2s ease-in-out, height 0.5s ease-in-out;\r\n pointer-events: all;\r\n\r\n .Icon{\r\n text-shadow:\r\n var(--theme-2-primary) 2px 2px,\r\n var(--theme-2-primary) 2px -2px,\r\n var(--theme-2-primary) -2px 2px,\r\n var(--theme-2-primary) -2px -2px;\r\n }\r\n }\r\n }\r\n\r\n #art {\r\n &:hover .hover-bg {\r\n padding: 2px;\r\n background-color: rgba($theme-3-primary, 0);\r\n height: 200vw;\r\n transition: background-color 0.2s ease-in-out, height 0.5s ease-in-out;\r\n pointer-events: all;\r\n\r\n .Icon{\r\n text-shadow:\r\n var(--theme-3-primary) 2.8px 0px,\r\n var(--theme-3-primary) -2.8px 0px,\r\n var(--theme-3-primary) 0px 2.8px,\r\n var(--theme-3-primary) 0px -2.8px,\r\n var(--theme-3-primary) 2px 2px,\r\n var(--theme-3-primary) 2px -2px,\r\n var(--theme-3-primary) -2px 2px,\r\n var(--theme-3-primary) -2px -2px;\r\n }\r\n }\r\n }\r\n\r\n #me {\r\n &:hover .hover-bg {\r\n padding: 2px;\r\n background-color: rgba($theme-4-primary, 0);\r\n height: 200vw;\r\n transition: background-color 0.2s ease-in-out, height 0.5s ease-in-out;\r\n pointer-events: all;\r\n\r\n .Icon{\r\n text-shadow:\r\n var(--theme-4-primary) 2.8px 0px,\r\n var(--theme-4-primary) -2.8px 0px,\r\n var(--theme-4-primary) 0px 2.8px,\r\n var(--theme-4-primary) 0px -2.8px,\r\n var(--theme-4-primary) 2px 2px,\r\n var(--theme-4-primary) 2px -2px,\r\n var(--theme-4-primary) -2px 2px,\r\n var(--theme-4-primary) -2px -2px;\r\n }\r\n }\r\n }\r\n \r\n li {\r\n transition: 1s ease-in-out;\r\n &:hover {\r\n transform: translate(0px, 0px);\r\n transition: 1s ease-in-out;\r\n }\r\n }\r\n\r\n .rotate {\r\n transition: 0.4s ease-in-out;\r\n }\r\n\r\n :hover .rotate {\r\n transform: rotateY(30deg) rotateX(20deg) translateY(10px) translateX(-15px);\r\n transition: 0.3s ease-in-out;\r\n }\r\n}\r\n\r\n.light #main-nav.compact {\r\n :hover {\r\n .box-label\r\n {\r\n height: 0px;\r\n opacity: 0%;\r\n pointer-events: all;\r\n }\r\n }\r\n\r\n .shadow {\r\n pointer-events: none;\r\n opacity: 0;\r\n transition: 0.2s ease-in-out;\r\n }\r\n\r\n .Icon{\r\n font-size: 32px;\r\n transition: text-shadow 0.2s ease-in, font-size 0.4s ease-in;\r\n }\r\n\r\n #games{\r\n &:hover .hover-bg\r\n {\r\n padding: 2px;\r\n background-color: rgba($theme-1-primary, 0);/*var(--theme-1-primary);*/\r\n //height: 200vw;\r\n transition: background-color 0.2s ease-in-out, height 0.5s ease-in-out;\r\n pointer-events: all;\r\n\r\n .Icon{\r\n text-shadow:\r\n var(--theme-1-primary) 2.8px 0px,\r\n var(--theme-1-primary) -2.8px 0px,\r\n var(--theme-1-primary) 0px 2.8px,\r\n var(--theme-1-primary) 0px -2.8px,\r\n var(--theme-1-primary) 2px 2px,\r\n var(--theme-1-primary) 2px -2px,\r\n var(--theme-1-primary) -2px 2px,\r\n var(--theme-1-primary) -2px -2px;\r\n }\r\n }\r\n }\r\n\r\n #music{\r\n &:hover .hover-bg {\r\n padding: 2px;\r\n background-color: rgba($theme-2-primary, 0);\r\n height: 200vw;\r\n transition: background-color 0.2s ease-in-out, height 0.5s ease-in-out;\r\n pointer-events: all;\r\n\r\n .Icon{\r\n text-shadow:\r\n var(--theme-2-primary) 2px 2px,\r\n var(--theme-2-primary) 2px -2px,\r\n var(--theme-2-primary) -2px 2px,\r\n var(--theme-2-primary) -2px -2px;\r\n }\r\n }\r\n }\r\n\r\n #art {\r\n &:hover .hover-bg {\r\n padding: 2px;\r\n background-color: rgba($theme-3-primary, 0);\r\n height: 200vw;\r\n transition: background-color 0.2s ease-in-out, height 0.5s ease-in-out;\r\n pointer-events: all;\r\n\r\n .Icon{\r\n text-shadow:\r\n var(--theme-3-primary) 2.8px 0px,\r\n var(--theme-3-primary) -2.8px 0px,\r\n var(--theme-3-primary) 0px 2.8px,\r\n var(--theme-3-primary) 0px -2.8px,\r\n var(--theme-3-primary) 2px 2px,\r\n var(--theme-3-primary) 2px -2px,\r\n var(--theme-3-primary) -2px 2px,\r\n var(--theme-3-primary) -2px -2px;\r\n }\r\n }\r\n }\r\n\r\n #me {\r\n &:hover .hover-bg {\r\n padding: 2px;\r\n background-color: rgba($theme-4-primary, 0);\r\n height: 200vw;\r\n transition: background-color 0.2s ease-in-out, height 0.5s ease-in-out;\r\n pointer-events: all;\r\n\r\n .Icon{\r\n text-shadow:\r\n var(--theme-4-primary) 2.8px 0px,\r\n var(--theme-4-primary) -2.8px 0px,\r\n var(--theme-4-primary) 0px 2.8px,\r\n var(--theme-4-primary) 0px -2.8px,\r\n var(--theme-4-primary) 2px 2px,\r\n var(--theme-4-primary) 2px -2px,\r\n var(--theme-4-primary) -2px 2px,\r\n var(--theme-4-primary) -2px -2px;\r\n }\r\n }\r\n }\r\n \r\n li {\r\n transition: 1s ease-in-out;\r\n &:hover {\r\n transform: translate(0px, 0px);\r\n transition: 1s ease-in-out;\r\n }\r\n }\r\n\r\n .rotate {\r\n transition: 0.4s ease-in-out;\r\n }\r\n\r\n :hover .rotate {\r\n transform: rotateY(30deg) rotateX(20deg) translateY(10px) translateX(-15px);\r\n transition: 0.3s ease-in-out;\r\n }\r\n}\r\n\r\n.light #main-nav {\r\n \r\n #games {\r\n .shadow {\r\n background-color: desaturate(darken($itheme-1-primary, 10%), 20%);\r\n }\r\n\r\n .shadow-bar li {\r\n background-color: darken($itheme-1-primary, 20%);\r\n\r\n &:hover {\r\n background-color: darken($itheme-1-primary, 4%);\r\n box-shadow: darken($itheme-1-primary, 20%) 10px -10px;\r\n }\r\n }\r\n\r\n &:hover .hover-bg {\r\n background-color: rgba($itheme-1-primary, 0.5);\r\n }\r\n }\r\n\r\n #music {\r\n .shadow {\r\n background-color: desaturate(darken($itheme-2-primary, 10%), 20%);\r\n }\r\n\r\n .shadow-bar li {\r\n background-color: darken($itheme-2-primary, 20%);\r\n\r\n &:hover {\r\n background-color: darken($itheme-2-primary, 4%);\r\n box-shadow: darken($itheme-2-primary, 20%) 10px -10px;\r\n }\r\n }\r\n \r\n :hover .hover-bg {\r\n background-color: rgba($itheme-2-primary, 0.5);\r\n }\r\n }\r\n\r\n #art {\r\n .shadow {\r\n background-color: desaturate(darken($itheme-3-primary, 10%), 20%);\r\n }\r\n\r\n .shadow-bar li {\r\n background-color: darken($itheme-3-primary, 20%);\r\n\r\n &:hover {\r\n background-color: darken($itheme-3-primary, 4%);\r\n box-shadow: darken($itheme-3-primary, 20%) 10px -10px;\r\n }\r\n }\r\n\r\n :hover .hover-bg {\r\n background-color: rgba($itheme-3-primary, 0.5);\r\n }\r\n }\r\n\r\n #me {\r\n .shadow {\r\n background-color: desaturate(darken($itheme-4-primary, 10%), 20%);\r\n }\r\n\r\n .shadow-bar li {\r\n background-color: darken($itheme-4-primary, 20%);\r\n\r\n &:hover {\r\n background-color: darken($itheme-4-primary, 4%);\r\n box-shadow: darken($itheme-4-primary, 20%) 10px -10px;\r\n }\r\n }\r\n\r\n :hover .hover-bg {\r\n background-color: rgba($itheme-4-primary, 0.5);\r\n }\r\n }\r\n}\r\n\r\n.interact\r\n{\r\n pointer-events: all;\r\n //cursor: crosshair;\r\n}\r\n\r\n#scrollthing\r\n{\r\n position: fixed;\r\n width: 100%;\r\n bottom: 10px;\r\n padding: 0px;\r\n margin: 0px; \r\n overflow: hidden;\r\n display: flex;\r\n flex-direction: row;\r\n\r\n p {\r\n display: inline-block;\r\n color: var(--positive);\r\n font-family: $fonty;\r\n font-size: 10px;\r\n opacity: 60%;\r\n text-shadow: 0px 1px var(--theme-1-primary), 0px -1px var(--theme-2-primary), 1px 0px var(--theme-3-primary), -1px 0px var(--line-color);\r\n overflow: hidden;\r\n transition: color 1s ease-in-out;\r\n }\r\n\r\n div {\r\n position: absolute;\r\n left: 10px;\r\n opacity: 40%;\r\n color: var(--positive);\r\n text-shadow: 0px 1px var(--theme-1-primary), 0px -1px var(--theme-2-primary), 1px 0px var(--theme-3-primary), -1px 0px var(--line-color);\r\n font-family: $fonty;\r\n font-size: 10px;\r\n }\r\n}\r\n\r\n.rotate\r\n{\r\n pointer-events: none;\r\n transform-style: preserve-3d;\r\n display: flex;\r\n flex-direction: row;\r\n align-content: center;\r\n align-items: center;\r\n transition: 1s ease-in;\r\n}\r\n\r\n.hover-bg\r\n{\r\n margin: 0;\r\n padding: 0;\r\n height: 200vh; // change to 0 for expand?\r\n width: $box-size;\r\n \r\n display: flex;\r\n flex-direction: row;\r\n align-content: center;\r\n align-items: center;\r\n pointer-events: none;\r\n //pointer-events: all; ----------------------------------------------\r\n transform: translateZ(calc($box-size / 2));\r\n transition: 1s ease-in;\r\n}\r\n\r\n#main h1 {\r\n color: var(--positive);\r\n}\r\n\r\n.logo img\r\n{\r\n width: 150px;\r\n height: auto;\r\n float: left;\r\n margin-left: 30px;\r\n margin-top: 10px;\r\n}\r\n\r\n.message\r\n{\r\n display: none;\r\n margin: auto;\r\n text-align: center;\r\n\r\n a {\r\n color: var(--positive);\r\n }\r\n}\r\n\r\n#particles-dark\r\n{\r\n pointer-events: all;\r\n position: fixed;\r\n width: 100%;\r\n height: 100%;\r\n opacity: 50%;\r\n z-index:-4;\r\n clip-path: inset(0 0 0 0);\r\n transition: opacity ease-in 1.5s;\r\n}\r\n\r\n.light #particles-dark\r\n{\r\n //display: none;\r\n //opacity: 0%;\r\n //pointer-events: none;\r\n}\r\n\r\n#particles-light\r\n{\r\n pointer-events: all;\r\n position: fixed;\r\n width: 100%;\r\n height: 100%;\r\n opacity: 50%;\r\n z-index:-4;\r\n clip-path: inset(0 0 0 0);\r\n transition: opacity ease-in 1.5s;\r\n}\r\n\r\n.dark #particles-light\r\n{\r\n //display: none;\r\n opacity: 0%;\r\n pointer-events: none;\r\n}\r\n\r\n#games\r\n{\r\n animation: floaty 3s ease-in-out 0.5s infinite;\r\n}\r\n\r\n#music\r\n{\r\n animation: floaty 3.2s ease-in-out 0.0s infinite;\r\n}\r\n\r\n#art\r\n{\r\n animation: floaty 2.8s ease-in-out 0.2s infinite;\r\n}\r\n\r\n#me\r\n{\r\n animation: floaty 2.4s ease-in-out 0.8s infinite;\r\n}\r\n\r\n@keyframes floaty\r\n{\r\n from{\r\n transform:translate(0,0px);\r\n }\r\n 55%{\r\n transform:translate(0,15px);\r\n }\r\n to{\r\n transform:translate(0,0px);\r\n }\r\n}\r\n\r\n@keyframes bg_layer_fade\r\n{\r\n from {\r\n opacity: 100%;\r\n }\r\n to {\r\n opacity: 0%;\r\n }\r\n}\r\n\r\n#constr {\r\n font-size: 200px;\r\n //opacity: 60%;\r\n width: 100%;\r\n text-align: center;\r\n position: absolute;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n pointer-events: none;\r\n}"],"names":[],"version":3,"file":"index.08963856.css.map","sourceRoot":"/__parcel_source_root/"}