html,body,canvas{margin:0;padding:0;position:absolute;top:0;left:0;width:100%;height:100vh;overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}h1,h2,h3,h4,h5,h6,p{margin:0}body{transition:all .5s ease-in-out}body.dark{background-color:#343434;color:var(--text-color)}.canvas{background-color:var(--canvas-color);position:absolute;transition:all .5s ease-in-out}.dark .canvas{background-color:var(--canvas-color-dark)}.canvas-container{height:90vh;margin-left:2rem;margin-right:2rem;border-radius:1rem;overflow:hidden;transition:all .5s ease-in-out;box-shadow:0 0 10px #242626bf}.fullscreen{height:100vh;margin-left:0;margin-right:0;margin-top:-4rem;border-radius:0}.close-canvas-button{position:absolute;top:1rem;right:1rem;cursor:pointer;transition:all .3s ease-in-out;color:var(--text-color);font-size:3rem;opacity:1;z-index:100000}.fullscreen-canvas-button{position:absolute;top:5rem;right:3rem;cursor:pointer;transition:all .3s ease-in-out;color:var(--text-color);font-size:3rem;opacity:1}.hidden{opacity:0}.fullscreen-canvas-button:hover,.close-canvas-button:hover,.close-canvas:hover{filter:brightness(.9)}.highlight{color:var(--heighlight);text-decoration:none}:root{--primary: #476363;--secondary: #4d3939;--tertiary: #302626;--text-color: #eeeeee;--heighlight: #85c0c0;--accent: #7cb4b4;--canvas-color: #8dd5d5;--canvas-color-dark: #324545}@media only screen and (max-width: 700px){.canvas-container{height:calc(100vh - 4rem);margin-left:0rem;margin-right:0rem;border-radius:0rem;overflow:hidden;transition:all .5s ease-in-out}.fullscreen{height:100vh;margin-left:0;margin-right:0;margin-top:-4rem;border-radius:0}.close-canvas-button{font-size:2rem}}.closing-layout{z-index:1;position:absolute;top:0;left:0;width:100%;height:100%;cursor:pointer}.container{z-index:10000000;height:38rem;width:25rem;overflow:hidden;background-color:var(--text-color);color:var(--tertiary);border-radius:1rem;box-shadow:0 0 10px #4f6365bf;box-sizing:border-box;position:absolute;top:50%;right:10%;transform:translate(-50%,-50%);display:flex;flex-direction:column;opacity:0;transition:all .3s ease-in-out}.container.active{opacity:1}.container__header{display:flex;justify-content:space-between;padding:1rem;font-size:1.5rem;color:var(--accent)}.container__body{position:relative;flex:1;padding:1.5rem;overflow-y:auto;max-height:-webkit-fill-available;left:-100%;transition:all .4s ease-in-out}.active>.container__body{left:0}.change>.container__body{left:200%}.reset>.container__body{left:-100%}.container__body::-webkit-scrollbar{width:8px}.container__body::-webkit-scrollbar-thumb{background-color:var(--tertiary);border-radius:4px}.close{cursor:pointer;transition:font-size .2s ease-in-out;font-size:1.5rem;color:var(--primary)}.close:hover{filter:brightness(.9)}.container__navigation{display:flex;justify-content:space-between;padding:1rem;box-shadow:0 0 10px #4f636533}.nav-element{display:flex;justify-content:center;align-items:center;width:3rem;height:3rem;border-radius:50%;background-color:var(--accent);color:var(--text-color);cursor:pointer;font-size:1.5rem;transition:all .2s ease-in-out}.nav-element:hover{filter:brightness(.9)}.nav-element.active{background-color:var(--primary)}.form{margin-top:2rem;display:flex;flex-direction:column}.form__title{font-size:1.5rem;font-weight:700;margin-top:1rem;margin-bottom:2rem}.form__input{margin-bottom:1rem;width:-webkit-fill-available;border:none;border-radius:1rem;padding:1rem;color:var(--secondary);font-size:1rem;box-shadow:0 0 10px #4f6365bf}.form__input:focus{outline:3px solid var(--tertiary)}.form__textarea{resize:none;border:none;margin-bottom:1rem;width:-webkit-fill-available;border-radius:1rem;padding:1rem;box-shadow:0 0 10px #4f6365bf;color:var(--secondary);font-size:1rem;min-height:5rem}.form__textarea:focus{outline:3px solid var(--tertiary)}.form__submit{border:none;margin-top:1rem;width:-webkit-fill-available;border-radius:25px;padding:1rem;background-color:var(--accent);color:var(--secondary);font-size:1rem;cursor:pointer;box-shadow:0 0 10px #4f636566}.form__submit:focus{outline:none}.form__submit:hover{filter:brightness(.9)}.timeline__point{position:relative;width:auto;margin-top:2rem;display:flex}.timeline__contant{width:auto;padding:1rem;display:flex;border-radius:0 25px 25px 0;border:2px solid var(--primary);flex-direction:column;background-color:var(--text-color);color:var(--secondary)}.timestamp{background-color:var(--primary);border-radius:25px 0 0 25px;color:var(--text-color);padding:1rem;margin:0;display:flex;flex-direction:column;justify-content:center}.timeline__point:before{content:"";position:absolute;bottom:-2rem;left:50%;width:2px;height:2rem;background-color:var(--primary);transform:translate(-50%)}.timeline__point:last-child:before{height:0}.timeline__title{width:fit-content;color:var(--primary);font-size:1.5rem;margin:0}.timeline__text{margin:0}.timeline__accent{color:var(--primary);font-weight:700}.project{display:flex;margin-top:2rem;flex-direction:column;background-color:var(--text-color);color:#282626;text-decoration:none;border-radius:1rem;overflow:hidden;box-shadow:0 0 10px #4f636566}.project:hover{filter:brightness(.9)}.project__title{font-size:1.5rem;font-weight:700;margin:0;padding:1rem;color:var(--primary)}.project__description{padding:0 1rem 1rem;margin:0}.skill{display:flex;flex-direction:column;flex-wrap:wrap;margin-top:2rem}.skill__group{font-size:1.5rem;font-weight:700;margin-bottom:0;color:var(--accent)}.skill__name{margin:.5rem 0;padding:0 1rem;position:relative}.skill__name:after{content:"";position:absolute;top:50%;transform:translateY(-50%);right:1rem;width:65%;height:8px;background-color:var(--accent)}.skill__level{z-index:2;content:"";position:absolute;top:50%;transform:translateY(-50%);width:2px;height:10px;background-color:var(--primary)}.name{font-size:2rem;font-weight:700;margin:0;color:var(--accent)}.interact{position:absolute;bottom:4rem;right:50%;transform:translate(50%);z-index:2;color:var(--text-color);display:flex;flex-direction:column;justify-content:center;align-items:center;margin-top:2rem;cursor:default}.interact__icon{font-size:2rem;animation:move 3s infinite linear}@keyframes move{0%{transform:translate(0)}25%{transform:translate(1rem)}50%{transform:translate(0)}75%{transform:translate(-1rem)}to{transform:translate(0)}}@media only screen and (max-width: 700px){.container{right:50%;transform:translate(50%,-50%)}}@media only screen and (max-width: 500px){.container{width:100%;height:100%;border-radius:0}.skill__name:after{width:63%}}/*!
 * Toastify js 1.12.0
 * https://github.com/apvarun/toastify-js
 * @license MIT licensed
 *
 * Copyright (C) 2018 Varun A P
 */.toastify{padding:12px 20px;color:#fff;display:inline-block;box-shadow:0 3px 6px -1px #0000001f,0 10px 36px -4px #4d60e84d;background:-webkit-linear-gradient(315deg,#73a5ff,#5477f5);background:linear-gradient(135deg,#73a5ff,#5477f5);position:fixed;opacity:0;transition:all .4s cubic-bezier(.215,.61,.355,1);border-radius:2px;cursor:pointer;text-decoration:none;max-width:calc(50% - 20px);z-index:2147483647}.toastify.on{opacity:1}.toast-close{background:transparent;border:0;color:#fff;cursor:pointer;font-family:inherit;font-size:1em;opacity:.4;padding:0 5px}.toastify-right{right:15px}.toastify-left{left:15px}.toastify-top{top:-150px}.toastify-bottom{bottom:-150px}.toastify-rounded{border-radius:25px}.toastify-avatar{width:1.5em;height:1.5em;margin:-7px 5px;border-radius:2px}.toastify-center{margin-left:auto;margin-right:auto;left:0;right:0;max-width:fit-content;max-width:-moz-fit-content}@media only screen and (max-width: 360px){.toastify-right,.toastify-left{margin-left:auto;margin-right:auto;left:0;right:0;max-width:fit-content}}.hover{cursor:pointer}.tooltip{z-index:1;white-space:nowrap;background-color:var(--accent);color:var(--text-color);border:2px solid var(--text-color);padding:5px;border-radius:50%;height:2rem;width:2rem;cursor:pointer;display:flex;justify-content:center;align-items:center;transition:all .5s ease-in-out}.tooltip__icon{transition:all .2s ease-in-out}.tooltip:before{content:attr(data-tooltip);background-color:var(--text-color);color:var(--tertiary);padding:.5rem;border-radius:5rem;z-index:-1;position:absolute;bottom:-3.4rem;left:50%;transform:translate(-50%);opacity:0;transition:all .2s ease-in-out}.tooltip.hovered:before,.tooltip:hover:before{opacity:1;bottom:-1.7rem}.tooltip.hidden{opacity:0}.tooltip:after{content:"";width:0;height:3.5rem;z-index:-2;border:1px solid var(--text-color);position:absolute;bottom:-3.5rem;left:50%;transform:translate(-50%)}.loading{color:var(--text-color);display:flex;justify-content:center;align-items:center;white-space:nowrap}.header{height:4rem;display:flex;justify-content:space-between;align-items:center;padding:0 4rem;color:var(--primary);transition:all .5s ease-in-out;position:relative}.dark .header{color:var(--accent)}.header__name{font-size:1.5rem;font-weight:600;align-items:center;display:flex}.header__legal{display:flex;justify-content:space-between;align-items:center;gap:2rem}.imprint:hover,.privacy-statement:hover{cursor:pointer;filter:brightness(.9)}.modal{position:absolute;top:-100vh;left:0;width:100vw;height:100vh;display:flex;flex-direction:column;background-color:var(--text-color);color:var(--tertiary);z-index:10000000000;transition:all .5s ease-in-out;padding:1rem;box-sizing:border-box;overflow-y:auto}.modal__body{position:relative;flex:1;padding:1rem;margin-bottom:1rem;overflow-y:auto;max-height:-webkit-fill-available;transition:all .4s ease-in-out}.modal p,.modal a{margin:1rem 0;color:var(--primary);text-decoration:none}.modal a{color:var(--primary)}.modal a:hover{text-decoration:underline}.modal.active{top:0}.switch{position:absolute;overflow:hidden;width:8rem;height:5rem;scale:.5;top:0rem;right:3rem;z-index:1000}.placeholder{opacity:0;width:8rem}.switch input{position:absolute;top:0;left:0;z-index:2;opacity:0}.switch label{cursor:pointer}.background{z-index:1;position:absolute;width:7.5rem;height:4rem;border-radius:2.5rem;border:.25rem solid #202020;background:linear-gradient(to right,#484848,#202020);transition:all .3s}.stars1,.stars2{position:absolute;height:.4rem;width:.4rem;background:#fff;border-radius:50%;transition:.3s all ease}.stars1{top:6px;right:23px}.stars2{top:40px;right:48px}.stars1:after,.stars1:before,.stars2:after,.stars2:before{position:absolute;content:"";display:block;height:.25rem;width:.25rem;background:#fff;border-radius:50%;transition:.2s all ease}.stars1:after{top:8px;right:20px}.stars1:before{top:18px;right:-12px}.stars2:after{top:-8px;right:-16px}.stars2:before{top:6px;right:-26px}.sun-moon{z-index:2;position:absolute;left:0;display:inline-block;height:3rem;width:3rem;margin:.5rem;background:#fffdf2;border-radius:50%;transition:all .5s ease;border:.25rem solid #dee2c6}.sun-moon .dots{position:absolute;top:3px;left:23px;height:1rem;width:1rem;background:#efeedb;border:.25rem solid #dee2c6;border-radius:50%;transition:.4s all ease}.sun-moon .dots:after,.sun-moon .dots:before{position:absolute;content:"";display:block;height:.25rem;width:.25rem;background:#efeedb;border:.25rem solid #dee2c6;border-radius:50%;transition:.4s all ease}.sun-moon .dots:after{top:-4px;left:-26px}.sun-moon .dots:before{top:18px;left:-10px}.switch input:checked~.sun-moon{left:calc(100% - 4rem);background:#f5ec59;border-color:#e7c65c;transform:rotate(-25deg)}.switch input:checked~.sun-moon .dots,.switch input:checked~.sun-moon .dots:after,.switch input:checked~.sun-moon .dots:before{background:#fff;border-color:#fff}.switch input:checked~.sun-moon .dots{height:1.5rem;width:1.5rem;top:0;left:-20px;transform:rotate(25deg)}.switch input:checked~.sun-moon .dots:after{height:.65rem;width:.65rem;top:2px;left:-12px}.switch input:checked~.sun-moon .dots:before{height:.4rem;width:.4rem;top:6px;left:14px}.switch input:checked~.background .stars1,.switch input:checked~.background .stars2{opacity:0;transform:translateY(2rem)}.switch input:checked~.background{border:.25rem solid #78c1d5;background:linear-gradient(to right,#78c1d5,#bbe7f5)}@media only screen and (max-width: 700px){.header{padding:0 5rem 0 1rem}.header__name{font-size:1rem}.header__title{display:none}.header__legal{font-size:.75rem;gap:1rem}.switch{top:-.35rem;right:1.5rem;scale:.35}}@media only screen and (max-width: 500px){.header{padding:0 1rem}.header__name{font-size:1rem}.header__title{display:none}.header__legal{font-size:.75rem;gap:1rem}.switch{top:-.35rem;right:1rem;scale:.35}}