*{margin:0;padding:0;box-sizing:border-box;font-weight:300}html,body{font-family:Roboto,sans-serif}h1,section,p,span,svg{transition:background-color .5s,color .5s}:root{--color-text-light: #272727;--color-background-light: #99c9ff;--color-pink-light: #e5a1aa;--color-green-light: #7ad0ac;--color-blue-light: #8395cd;--color-text-dark: #e5effa;--color-background-dark: #272727}.light-theme{--color-text: var(--color-text-light);--color-background: var(--color-background-light);--color-pink: var(--color-pink-light);--color-green: var(--color-green-light);--color-blue: var(--color-blue-light)}.dark-theme{--color-text: var(--color-text-dark);--color-background: var(--color-background-dark);--color-pink: var(--color-text-dark);--color-green: var(--color-text-dark);--color-blue: var(--color-text-dark)}html,body{background-color:var(--color-background)}svg{color:var(--color-text)}.lds-ripple{display:inline-block;position:relative;width:80px;height:80px;margin-left:50%;margin-top:50vh;transform:translate(-50%)}.lds-ripple div{position:absolute;border:4px solid #fff;opacity:1;border-radius:50%;animation:lds-ripple 1s cubic-bezier(0,.2,.8,1) infinite}.lds-ripple div:nth-child(2){animation-delay:-.5s}@keyframes lds-ripple{0%{top:36px;left:36px;width:0;height:0;opacity:0}4.9%{top:36px;left:36px;width:0;height:0;opacity:0}5%{top:36px;left:36px;width:0;height:0;opacity:1}to{top:0px;left:0px;width:72px;height:72px;opacity:0}}.preloader{height:100%;width:100%;background-color:var(--color-background);position:fixed;top:0;left:0;right:0;bottom:0;z-index:999}.theme-toggle-button{border-radius:30px;width:45px;height:28px;margin:0 10px;border:none;cursor:pointer}.toggle-circle{position:relative;left:6px;border-radius:50%;width:20px;height:20px;background-color:var(--color-background);transition:all .2s ease-in-out;z-index:10}.theme-toggle-button:hover .toggle-circle{transform:scale(.9)}.logo-bar{justify-self:center}.slide{left:20px}.experience{position:fixed;width:100vw;height:100vh}.experience-canvas{margin-left:30%;width:100%;height:100%;background-color:var(--color-background);cursor:grab}.main-contents{position:relative;background-color:var(--color-background);color:var(--color-text);height:100vh;width:40%;padding:50px;z-index:1}.menu-container{display:grid;grid-template-columns:1fr 1fr 1fr;justify-content:space-between;align-items:center}.menu-toggle{cursor:pointer}.menu-toggle svg:hover{scale:.95;color:#ff4500}.close-btn{margin-top:15px;cursor:pointer}.theme-toggle-bar{display:flex;justify-self:right;align-items:center}.navigation-container{position:absolute;background-color:var(--color-background);z-index:2;width:40%;height:100vh;padding:50px;color:var(--color-text)}.hidden{display:none}.navigations{margin-top:50%;transform:translateY(-50%);font-size:30px;list-style-type:none;font-family:Roboto Condensed;font-weight:700}.navigations li{padding:10px;cursor:pointer}.navigations li:hover{border-bottom:2px solid;color:#ff4500}.intro h1{color:var(--color-text);font-size:40px;font-weight:400}.help{position:fixed;width:100%;max-width:300px;bottom:10%;right:20%;box-sizing:border-box;z-index:12;text-align:center;background-color:#ffffffab;border:5px solid #fff;border-radius:16px;padding:30px}.drag-animation{width:88px;height:48px;margin:auto auto 12px;background-image:url(./drag_animation.svg)}.siteContentContainer{margin-top:50%;overflow-y:auto;transform:translateY(-50%)}.siteContentContainer h1{margin-bottom:30px}@media only screen and (max-width: 1100px){.siteContentContainer{margin-top:100px;overflow-y:auto;text-align:center}.experience-canvas{margin-top:40vh;margin-left:0;width:100%;height:100%;background-color:var(--color-background);cursor:grab}.main-contents{position:relative;background-color:var(--color-background);color:var(--color-text);height:50vh;width:100%;padding:20px;z-index:1}.help{position:fixed;bottom:10px;right:50%;transform:translate(50%);box-sizing:border-box;z-index:12;text-align:center;background-color:#fff0;border:none;border-radius:16px;padding:0}.helptext{display:none}.navigation-container{position:absolute;background-color:var(--color-background);z-index:2;width:100%;height:100vh;padding:20px;color:var(--color-text)}.navigations{margin-top:50%;transform:translateY(0);font-size:20px;list-style-type:none;font-family:Roboto Condensed;font-weight:700}svg{scale:.6}}