:root{--bg-color:#efffff;--bg-variant:white;--text-color:#343434;--primary-color:#ffd000;--on-primary-color:#343434;background-color:var(--bg-variant);font-family:Roboto,Tahoma,Geneva,Verdana,sans-serif}[data-theme=dark]{--bg-color:#343434;--bg-variant:#222;--text-color:#efffff;background-color:var(--bg-variant)}@media (prefers-color-scheme:dark){:root:not([data-theme]){--bg-color:#343434;--bg-vatiant:black;--text-color:#efffff;background-color:var(--bg-variant)}}*{transition:background-color .2s,color .2s}body{color:var(--text-color);margin:0}p{font-size:26px}h1{font-size:56pt}h2{font-size:42pt;font-weight:bolder}h3{margin:34pt 0 17pt;font-size:34pt}.wrapper{width:1000pt;margin:0 auto}.background-rectangle{background-color:rgb(from var(--primary-color) r g b / 34%);z-index:-1;border-radius:34pt;position:absolute}@media screen and (width<=1100pt){.wrapper{width:calc(100% - 224px);padding:0 112px}}#about{background-color:var(--bg-color);padding:1px 0 34pt}#contact-me span{color:var(--primary-color)}#contact-me a{color:var(--text-color);font-size:20pt;text-decoration:none}footer{text-align:center;background-color:var(--bg-variant);color:var(--text-color);background-color:var(--bg-color);flex-direction:column;justify-content:space-between;min-height:350pt;padding:20px;display:flex}#header{justify-content:space-between;align-items:center;width:100%;display:flex;position:fixed;top:0;left:0}#header p{margin:8pt 46pt;font-size:22pt}#header button{color:var(--text-color);background-color:#0000;border:none;font-size:22pt}#header button:hover{cursor:pointer}#header a{color:var(--text-color);text-decoration:none}#header #nick{text-shadow:0 0 1em var(--primary-color)}#hero{background-color:var(--bg-color);z-index:-2;justify-content:space-around;align-items:center;min-height:100vh;display:flex;position:relative}#hero span{font-size:clamp(56pt,7vw,72pt);font-style:italic}#hero h1{flex:1;margin:0 0 12pt}#hero p{font-size:clamp(26pt,3vw,30pt)}#hero img{width:auto;max-width:34vw;box-shadow:0 0 4pt var(--text-color);border-radius:34pt;flex:none;transform:rotate(3.4deg)}#hero .hero-content{justify-content:space-between;gap:34pt;display:flex}#hero .hero-text{flex:1}#hero .background-rectangle{width:172pt;height:172pt;top:0;right:0;transform:rotate(7.2deg)translate(20pt,-17pt)}#hero .background-rectangle.hovered{background-color:rgb(from var(--primary-color) r g b / 68%);transform:rotate(7.2deg)translate(30pt,-27pt)}#hero #separator{background-color:rgb(from var(--primary-color) r g b / 34%);width:224pt;height:16pt}#hero #location{z-index:1;background-color:var(--bg-variant);box-shadow:0 0 16pt var(--text-color);border-radius:34pt;padding:8pt 16pt;position:absolute;bottom:0;transform:rotate(-3.4deg)translate(-16pt,34pt)}#portfolio{flex-direction:column;display:flex}#portfolio .text-primary{color:var(--primary-color)}#portfolio h1{text-align:center;flex:1;width:100%}#portfolio .semi-transparent{color:rgb(from var(--text-color) r g b / 34%)}.portfolio-item{gap:17pt;margin:34pt 0;display:flex}.portfolio-item h3{margin:0}.portfolio-item a{background-color:var(--text-color);color:var(--bg-color);border-radius:17pt;padding:8pt 16pt;text-decoration:none}.portfolio-item img{border-radius:34pt;max-width:35vw;box-shadow:0 0 4pt}.portfolio-item .tags{flex-wrap:wrap;gap:8pt;margin:0 0 16pt;display:flex}.portfolio-item .tag{background-color:var(--bg-color);border:1px solid rgb(from var(--text-color) r g b / 34%);border-radius:34pt;padding:4pt 8pt}.portfolio-item .background-rectangle{background-color:var(--primary-color);z-index:-1;border-radius:17pt;width:100%;height:100%;position:absolute;top:0;left:0;transform:rotate(-3.4deg)}