*{margin:0;text-decoration:none}:root{--main-h: calc(100vh - var(--header-h) - var(--footer-h) - (var(--footer-padding)*2));--main-ul-gap: 10vw ;--main-nav-top-margin: 10px;--footer-h: 30px;--footer-w: calc(100% - 80px) ;--footer-padding: 40px;--footer-ul-gap: 20vw ;--header-w: 100%;--header-h: 100px;--header-logo-margin: 0 0 0 30px;--header-ul-padding: 0 30px 0 0;--header-ul-gap: 5vw ;--canvas-w: 95%;--canvas-h: 50vh}header{width:var(--header-w);height:var(--header-h);display:flex;align-items:center;justify-content:space-evenly}header .logo{margin:var(--header-logo-margin)}header nav ul{padding:var(--header-ul-padding);list-style:none;display:flex;gap:var(--header-ul-gap)}main{display:grid;min-height:var(--main-h)}.gui-container{display:none}main nav{justify-self:center;align-self:center;margin-top:var(--main-nav-top-margin)}main nav ul{list-style:none;display:flex;padding:0;align-items:center;gap:var(--main-ul-gap)}#canvas{justify-self:center;width:var(--canvas-w);height:var(--canvas-h);-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}footer{width:var(--footer-w);height:var(--footer-h);padding:var(--footer-padding);display:flex;justify-content:center}footer nav{justify-self:center;align-self:center}footer nav ul{list-style:none;display:flex;padding:0;gap:var(--footer-ul-gap)}@media only screen and (min-width: 1000px){:root{--footer-h: 20px;--canvas-w: 65%;--canvas-h: 60vh;--header-logo-margin: 0 0 0 150px;--header-ul-padding: 0 100px 0 0;--header-logo-font-size: xx-large;--main-ul-gap: calc(var(--canvas-h)/10);--main-nav-padding: 20px;--main-nav-top-margin: 0px}#canvas{width:var(--canvas-w);height:var(--canvas-h)}header nav ul{padding:var(--header-ul-padding)}header .logo{margin:var(--header-logo-margin)}.gui-container{display:block}main{min-height:var(--main-h);display:flex;align-items:center;justify-content:space-evenly}main nav{height:var(--canvas-h);display:grid;margin-top:var(--main-nav-top-margin)}main nav ul{align-self:center;padding-right:calc(var(--main-nav-padding) - 10px);flex-direction:column;gap:var(--main-ul-gap)}footer{height:var(--footer-h);display:flex;justify-content:center}footer nav{align-self:center}}:root{--header-logo-font-color: black;--header-logo-font-size: x-large;--bg-color: rgba(196,190,187, 1);--gba-color: rgba(70, 68, 141,1);--main-nav-border-radius: 6px;--main-nav-padding: 10px;--footer-btn-size: 80px;--header-btn-size: 55px;--shape-btn-size: 60px }@font-face{font-family:Gill Sans;src:url(https://gabokatta.github.io/gkrend/assets/GillSans-BoldItalic-a_v0wBho.eot);src:local("Gill Sans Bold Italic"),local("GillSans-BoldItalic"),url(https://gabokatta.github.io/gkrend/assets/GillSans-BoldItalic-a_v0wBho.eot?#iefix) format("embedded-opentype"),url(https://gabokatta.github.io/gkrend/assets/GillSans-BoldItalic-A2Qne39d.woff2) format("woff2"),url(https://gabokatta.github.io/gkrend/assets/GillSans-BoldItalic-d9ce4mLW.woff) format("woff"),url(https://gabokatta.github.io/gkrend/assets/GillSans-BoldItalic-aK0qkicz.ttf) format("truetype"),url(https://gabokatta.github.io/gkrend/assets/GillSans-BoldItalic-5oHneg2p.svg#GillSans-BoldItalic) format("svg");font-weight:700;font-style:italic;font-display:swap}body{background:var(--bg-color)}header{background-color:var(--gba-color)}header .logo{display:flex;flex-direction:row;margin-left:-8px}.btn{cursor:pointer}header .logo{font-family:Gill Sans;font-weight:700;font-style:italic;font-size:var(--header-logo-font-size);cursor:pointer}#canvas{background-color:var(--bg-color)}main nav{border-radius:var(--main-nav-border-radius);padding-top:var(--main-nav-padding);padding-bottom:var(--main-nav-padding)}footer{background-color:var(--gba-color)}.header-btn{width:var(--header-btn-size);height:var(--header-btn-size)}.shape-btn{width:var(--shape-btn-size);height:var(--shape-btn-size)}.footer-btn{width:var(--footer-btn-size);height:var(--footer-btn-size)}.sound-on{content:url(https://gabokatta.github.io/gkrend/assets/sound-vZ40OrN-.svg)}.sound-off{content:url(https://gabokatta.github.io/gkrend/assets/nosound-iO4ALmHC.svg)}#repo{content:url(https://gabokatta.github.io/gkrend/assets/star-fZLAmyCt.svg)}#sphere{content:url(https://gabokatta.github.io/gkrend/assets/sphere-MUhKAvvg.svg)}#cylinder{content:url(https://gabokatta.github.io/gkrend/assets/cylinder-X6yx9jYb.svg)}#plane{content:url(https://gabokatta.github.io/gkrend/assets/plane-NTenoQGG.svg)}#torus{content:url(https://gabokatta.github.io/gkrend/assets/torus-OlCsJ32i.svg)}#texture{content:url(https://gabokatta.github.io/gkrend/assets/large-button-txtr-GKKbJWMm.svg)}#render{content:url(https://gabokatta.github.io/gkrend/assets/large-button-render-XQQVIV0-.svg)}.noisy{background-image:url(data:image/png;base64,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)}@media only screen and (min-width: 1000px){:root{--header-logo-font-size: xx-large;--main-nav-border-radius: 25px;--main-nav-margin: 35px;--footer-btn-size: 100px;--header-btn-size: 70px;--shape-btn-size: 75px}header .logo{font-size:var(--header-logo-font-size)}}@keyframes bounce{0%{transform:scale(1) translateY(0)}10%{transform:scale(1.1,.9) translateY(0)}30%{transform:scale(.9,1.1) translateY(-15px)}50%{transform:scale(1.05,.95) translateY(0)}58%{transform:scale(1) translateY(-1px)}65%{transform:scale(1) translateY(0)}to{transform:scale(1) translateY(0)}}.letter{color:var(--bg-color);text-shadow:0 3px var(--header-logo-font-color),0 5px var(--header-logo-font-color),0 5px var(--header-logo-font-color)}.letter-animated{animation:bounce 4s ease forwards calc(.1s * var(--i))}.gui-container .dg.main .close-button{background-color:var(--gba-color);color:var(--bg-color)}.gui-container .dg{color:#fff;font-family:Gill Sans;font-weight:700;font-style:italic;font-size:xx-small;text-transform:uppercase}.gui-container .dg .property-name{color:var(--bg-color);font-family:Gill Sans;font-size:xx-small;text-transform:uppercase}.gui-container .dg li.title{color:var(--bg-color);background:var(--gba-color) url(data:image/gif;base64,R0lGODlhBQAFAJEAAP////Pz8////////yH5BAEAAAIALAAAAAAFAAUAAAIIlI+hKgFxoCgAOw==) 6px 10px no-repeat}.gui-container .dg .slider .slider-fg,.gui-container .dg .c .slider:hover .slider-fg{background-color:var(--bg-color)}.gui-container .dg .cr.number input[type=text]{color:var(--bg-color)}