@import"https://fonts.googleapis.com/css2?family=Roboto&family=Stalinist+One&display=swap";#root{width:100%;min-height:100vh;display:grid;grid-template-rows:min-content 1fr min-content;position:relative}.background{position:fixed;top:0;left:0;width:100%;height:100vh;background-color:var(--light-accent-color);background-image:url(/assets/backgroundImage-R9CWFvci.jpg);z-index:-1;background-size:cover}header{display:flex;flex-direction:column;align-items:center;position:relative;padding:2rem 1rem 1rem;gap:2rem;z-index:2}.header-backing{position:absolute;top:0;left:0;width:100%;height:110px;background-color:var(--primary-color);background-image:linear-gradient(var(--primary-color),var(--dark-accent-color));transform:skewY(-1.4deg);box-shadow:0 5px 6px -1px var(--dark-accent-color)}.header-title{font-size:clamp(1.3rem,.5rem + 2vw,1.9rem);color:var(--secondary-color);font-family:Stalinist One,roboto,sans-serif;font-weight:400;z-index:1;text-shadow:0px 0px 5px var(--dark-accent-color)}.header-patch{position:absolute;top:0;left:0;background-color:var(--primary-color);width:100%;height:20%}.header-nav{z-index:1;align-self:end;display:flex;justify-content:center;flex-wrap:wrap;align-items:center;gap:2rem;margin-right:3rem}.header-nav a{text-decoration:none;font-weight:700;display:flex;color:var(--dark-accent-color);align-items:center;--filter: var(--dark-accent-img-filter);outline-color:var(--dark-accent-color)}.header-nav a img{width:25px;filter:var(--filter)}.header-nav a:hover,.header-nav a:focus{text-decoration:underline}@media only screen and (width <= 400px){.header-nav{margin-right:0;align-self:center}}@media only screen and (366px <= width <= 830px){.header-nav a{color:var(--secondary-color);--filter: var(--secondary-img-filter);outline-color:var(--secondary-color)}}.tool-tip-wrapper{position:relative}.tool-tip{position:absolute;width:max-content;bottom:101%;background-color:#fff;font-size:.8rem;padding:.2rem .3rem;box-shadow:0 0 1px var(--dark-accent-color);left:0;right:0;margin:auto;visibility:hidden;z-index:10}.tool-tip-wrapper:hover .tool-tip{visibility:visible;animation-name:delay-visible;animation-delay:.5s;animation-fill-mode:backwards;animation-duration:.2s}@keyframes delay-visible{0%{visibility:hidden}to{visibility:visible}}footer{padding:3rem 2rem;background-color:var(--primary-color);display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:1rem;color:var(--light-accent-color);font-size:clamp(.9rem,.5rem + 2vw,1.1rem);font-weight:700;box-shadow:0 0 10px 0 var(--dark-accent-color);background-image:linear-gradient(var(--primary-color),70%,var(--dark-accent-color))}footer a{outline:none;text-decoration:none;background-color:var(--secondary-color);color:var(--light-accent-color);padding:.9rem 1rem;border-radius:10px;box-shadow:2px 3px 5px -1px var(--dark-accent-color);will-change:all;transition:all .1s ease-in-out}footer a:hover,footer a:focus{background-color:var(--light-accent-color);color:var(--primary-color);box-shadow:none}.portfolio-page{margin:4rem 0;display:flex;flex-direction:column;width:100%;align-items:center;gap:4rem}.portfolio-page-title{font-size:clamp(1.2rem,.5rem + 2vw,2rem);color:var(--primary-color)}.projects{width:100%;display:flex;flex-direction:column;align-items:center;gap:10rem}.project-card{display:flex;flex-direction:column;align-items:center;gap:1rem}.main-info-section{justify-content:center;display:flex;align-items:center;flex-wrap:wrap-reverse;gap:1rem}.main-info-section.reverse{flex-direction:row-reverse}.project-title{font-size:clamp(1.4rem,.5rem + 2vw,2rem);color:var(--primary-color);text-shadow:0px 0px 2px var(--dark-accent-color);letter-spacing:.12rem}.project-img-wrapper{z-index:1;margin:0 1rem;max-width:750px;overflow:hidden;border-radius:30px;border:3px solid var(--secondary-color);display:flex;box-shadow:0 0 5px 0 var(--dark-accent-color)}.project-img-wrapper img{width:100%}.project-description{position:relative;font-size:clamp(1rem,.5rem + 2vw,1.6rem);max-width:600px;color:var(--light-accent-color);background-color:var(--primary-color);background-image:linear-gradient(var(--primary-color),70%,var(--dark-accent-color));display:flex;align-items:center;padding:clamp(2rem,1rem + 3vw,4rem) 2rem;font-weight:700;border-radius:30px}.project-description p{z-index:1;position:relative}.project-description .backing{position:absolute;top:0;height:100%;width:150%;left:-50%;background-color:var(--primary-color);background-image:linear-gradient(var(--primary-color),70%,var(--dark-accent-color));box-shadow:0 0 5px 0 var(--dark-accent-color);border-radius:30px}.project-description .backing.reverse{left:0}.details-section{display:flex;width:100%;gap:1rem;padding:0 1rem}.details-section.reverse{flex-direction:row-reverse}.details-section>*{flex:1}.project-tech-info{display:flex;flex-direction:column;align-items:center;gap:1rem}.project-links{display:flex;gap:1rem}.project-links a{display:block;width:clamp(26px,16px + 2vw,45px);height:clamp(26px,16px + 2vw,45px);outline-color:var(--secondary-color)}.project-links a img{filter:var(--dark-accent-img-filter)}.project-links a:hover img,.project-links a:focus img{filter:var(--secondary-img-filter)}.tech-used{width:100%;max-width:850px;min-width:250px;background-color:var(--primary-color);background-image:linear-gradient(var(--primary-color),70%,var(--dark-accent-color));display:flex;flex-direction:column;align-items:center;gap:2rem;padding:2rem;color:var(--light-accent-color);font-weight:700;position:relative;border-radius:30px}.tech-used-title{font-size:clamp(1.3rem,.5rem + 2vw,2rem);text-shadow:2px 3px 1px var(--dark-accent-color);z-index:1}.tech-used ul{display:flex;flex-direction:column;list-style:none;gap:1rem;z-index:1}.tech-used li{font-size:clamp(1rem,.5rem + 2vw,1.5rem)}.tech-used .backing{position:absolute;border-radius:30px 0 0 30px;top:0;left:0;width:120%;height:100%;background-color:var(--primary-color);background-image:linear-gradient(var(--primary-color),70%,var(--dark-accent-color))}.tech-used .backing.reverse{left:-20%;width:70%}.project-details{background-color:var(--secondary-color);color:var(--dark-accent-color);color:var(--light-accent-color);text-shadow:0px 0px 4px var(--dark-accent-color);font-size:clamp(1rem,.5rem + 2vw,1.4rem);font-weight:700;max-width:700px;padding:2rem;display:flex;align-items:center;box-shadow:0 0 5px 0 var(--dark-accent-color);line-height:2rem;border-radius:30px;z-index:2}@media only screen and (width < 1414px){.project-description .backing{display:none}.project-description{box-shadow:0 0 5px 0 var(--dark-accent-color)}}@media only screen and (width < 701px){.details-section,.details-section.reverse{flex-direction:column}.tech-used .backing{display:none}.tech-used{box-shadow:0 0 5px 0 var(--dark-accent-color)}}*{margin:0;padding:0;box-sizing:border-box}html{font-size:16px;font-family:roboto,sans-serif;--primary-color: hsl(210, 32%, 28%);--secondary-color: hsl(0, 84%, 64%);--light-accent-color: hsl(0, 0%, 87%);--dark-accent-color: hsl(216, 18%, 16%);--dark-accent-img-filter: brightness(0) saturate(100%) invert(10%) sepia(5%) saturate(3243%) hue-rotate(177deg) brightness(91%) contrast(85%);--secondary-img-filter: brightness(0) saturate(100%) invert(34%) sepia(24%) saturate(3076%) hue-rotate(325deg) brightness(119%) contrast(88%);scroll-behavior:smooth;scrollbar-color:var(--primary-color) var(--light-accent-color)}