:root{--debuggingBorder: 2px solid red;--maxContentWidth: 1200px;--maxCardWidth: 1020px;--defaultFontFamily: "Inter Variable", sans-serif;--colorPalette-1: #071f8c;--colorPalette-2: #263eab;--colorPalette-3: #3f67af;--colorPalette-4: #658fc9;--colorPalette-5: #9abae0;--colorPalette-6: #95d1e3;--colorPalette-7: #ffffff;--cardsLightMode: #ffffff;--cardsDarkMode: #444654;--darkModeDefault: linear-gradient( 90deg, rgba(27, 25, 25, 1) 0%, rgba(83, 73, 73, 1) 50%, rgba(27, 25, 25, 1) 100% );--lightModeDefault: aliceblue}*,*:before,*:after{margin:0;padding:0;-webkit-box-sizing:border-box;box-sizing:border-box;font-family:var(--defaultFontFamily);transition:all .5s ease,color .1s ease}html{scroll-behavior:smooth;color-scheme:dark light}body.dark-mode{color:#fff;background-size:contain;overflow-x:hidden;background:var(--darkModeDefault)}body{min-height:100vh;background-color:var(--lightModeDefault);color:#000;overflow-x:hidden}img,picture,svg,video{display:block;max-width:100%}ol,ul{list-style-type:none}a{text-decoration:none;all:unset;cursor:pointer}.fullWidth{width:100vw}.flex{display:flex}.project-modal{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#000000b3;display:flex;align-items:center;justify-content:center;z-index:999}.project-modal iframe{width:80%;height:80%;border:none}.close-button{position:absolute;top:10px;right:10px;background-color:#fff;border:none;border-radius:50%;width:30px;height:30px;cursor:pointer;font-size:20px;font-weight:700;text-align:center;line-height:1;color:#333}.close-button:hover{background-color:#ccc}@keyframes intensifyShadow{0%{box-shadow:0 4px 8px var(--colorPalette-4)}10%{box-shadow:0 5px 10px var(--colorPalette-4)}20%{box-shadow:0 6px 12px var(--colorPalette-4)}30%{box-shadow:0 7px 14px var(--colorPalette-4)}40%{box-shadow:0 8px 16px var(--colorPalette-4)}50%{box-shadow:0 9px 18px var(--colorPalette-4)}60%{box-shadow:0 10px 18px var(--colorPalette-4)}70%{box-shadow:0 11px 18px var(--colorPalette-4)}80%{box-shadow:0 12px 18px var(--colorPalette-4)}90%{box-shadow:0 13px 18px var(--colorPalette-4)}to{box-shadow:0 14px 18px var(--colorPalette-4)}}@keyframes reverseIntensifyShadow{0%{box-shadow:0 14px 18px var(--colorPalette-4)}10%{box-shadow:0 13px 18px var(--colorPalette-4)}20%{box-shadow:0 12px 18px var(--colorPalette-4)}30%{box-shadow:0 11px 18px var(--colorPalette-4)}40%{box-shadow:0 10px 18px var(--colorPalette-4)}50%{box-shadow:0 9px 18px var(--colorPalette-4)}60%{box-shadow:0 8px 16px var(--colorPalette-4)}70%{box-shadow:0 7px 14px var(--colorPalette-4)}80%{box-shadow:0 6px 12px var(--colorPalette-4)}90%{box-shadow:0 5px 10px var(--colorPalette-4)}to{box-shadow:0 4px 8px var(--colorPalette-4)}}@keyframes rotateShadow{to{box-shadow:-10px 10px 8px var(--colorPalette-4)}25%{box-shadow:0 10px 8px var(--colorPalette-4)}50%{box-shadow:10px 10px 8px var(--colorPalette-4)}75%{box-shadow:0 10px 20px var(--colorPalette-4)}}@keyframes changingBackgroundGradient{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}@keyframes slowOpacityIncrease{0%{opacity:0;filter:blur(5px)}to{opacity:1;filter:blur(0px)}}@keyframes pulsingGold{0%{filter:grayscale(1);filter:brightness(50%);transform:scale(1)}45%{filter:grayscale(1);filter:brightness(50%);transform:scale(1.008)}50%{filter:grayscale(0);filter:brightness(100%);transform:scale(1.008)}60%{filter:grayscale(.8);filter:brightness(90%);transform:scale(1.008)}to{filter:grayscale(1);filter:brightness(50%);transform:scale(1)}}@keyframes intensifyShadowV2{0%,to{filter:drop-shadow(0px 2px 1px white)}10%,90%{filter:drop-shadow(0px 1.8px 1px white)}20%,80%{filter:drop-shadow(0px 1.6px 1px white)}30%,70%{filter:drop-shadow(0px 1.4px 1px white)}40%,60%{filter:drop-shadow(0px 1.2px 1px white)}50%{filter:drop-shadow(0px 1px 1px white)}}@keyframes simpleWhiteOutline{0%{filter:drop-shadow(0 0 1px white) grayscale(1)}10%{filter:drop-shadow(0 0 1px white) grayscale(0)}}@keyframes fade-in{0%{opacity:0;transform:translate(-250px) scaleX(.8)}to{opacity:1;transform:translate(0) scaleX(1)}}.animate-fade-in{animation:fade-in .5s ease}body.dark-mode{background-color:#282424}body.dark-mode nav ul li a{text-decoration:none;color:#ccc;font-weight:700;transition:color .3s ease-in-out}body.dark-mode header#headerContainer{background-color:#00000052;box-shadow:0 2px 4px #cacaca1a}.animatedHide{width:0;margin:0;padding:0;transition:color .3s ease-in-out}header,#blurrer{position:fixed;top:0;left:0;display:flex;align-items:center;background-color:#ffffff52;box-shadow:0 2px 4px #0000001a;z-index:4}#blurrer{height:57px;z-index:-1;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background:linear-gradient(to top,rgba(255,255,255,0),var(--lightModeDefault))}body.dark-mode #blurrer{background:linear-gradient(180deg,#000 0%,rgba(0,0,0,.36) 100%)}header section a{display:flex;align-items:center;gap:10px}header section h1{font-size:2rem;cursor:pointer}nav{max-width:var(--maxContentWidth);margin:0 auto;display:flex;align-items:center;padding:10px 20px;justify-content:space-between;flex-wrap:wrap}#nav ul{display:flex;align-items:center;opacity:1;visibility:visible;position:relative;transform:translateY(0);transition:all .5s ease,transform .5s ease}nav ul li{margin-right:20px;cursor:pointer}nav ul li a{text-decoration:none;color:#333;font-weight:700;transition:color .3s ease-in-out}nav ul li a:hover{color:#ff9d2c}#navBarBurger{width:0;transition:width .5s ease}#defaultLogo{cursor:pointer;transition:width .5s ease}#toggleModeLogo:hover{transform:scale(1.1);box-shadow:#ff9d2ccc 0 0 20px,#ff9d2ccc 0 0 10px;border-radius:50%}header section:hover,body.dark-mode header section:hover,body.dark-mode nav ul li a:hover{text-shadow:rgba(255,157,44,.8) 0px 0px 20px,rgba(255,157,44,.8) 0px 0px 10px;color:#fff}header section:hover img,body.dark-mode header section:hover img{box-shadow:#ff9d2ccc 0 0 20px,#ff9d2ccc 0 0 10px;border-radius:50%}header section:hover{color:#000}section#hero{padding-top:5rem;padding-bottom:3rem;background-color:var(--borderColorardsLightMode);display:flex;align-items:center;justify-content:center;height:90vh}section>div.card#myCard{max-width:var(--maxCardWidth);margin:0 auto;display:flex;align-items:center;align-content:center;justify-content:center;padding:4rem;gap:4rem;height:max-content}section>div.card:hover{transform:scale(1.05);box-shadow:0 4px 8px var(--borderColorolorPalette-4);border-radius:25px;border:1px white solid;animation:intensifyShadow 6s forwards,reverseIntensifyShadow 6s forwards 12s,fadeInCenter 2s ease-in-out forwards;overflow:hidden}section>div.card:hover:before{content:"";position:absolute;top:0;left:0;opacity:0;width:100%;height:100%;background:linear-gradient(90deg,rgba(4,0,79,1) 0%,rgba(61,40,40,1) 50%,rgba(4,0,79,1) 100%);z-index:-1;animation:slowOpacityIncrease 2s forwards linear,pulsingGold 10s ease-in-out infinite}div#myCard>article{display:flex;flex-direction:column}h1.myName{font-size:36px;font-weight:bolder;margin-bottom:10px}p.myDescription{font-size:18px;color:#777}.subtitle{text-align:justify;max-width:25rem;padding:2rem 0;font-size:20px}em.highlight{color:orange;font-style:italic;font-weight:bolder;text-decoration:underline;text-decoration-color:var(--borderColorolorPalette-1);text-decoration-thickness:2px}img#myPicture{max-width:100%;height:auto;border-radius:10px;-webkit-backdrop-filter:white;backdrop-filter:white}#doubleDownLogo{margin:-45px auto 0}#doubleDownLogo:hover{transform:scale(1.1);filter:drop-shadow(5px 2px 5px orange)}div#skills-container{height:80vh}div#skills-container>h2,div#skills-container>h3,div#skills-container>p{text-align:center}div#skills-container>h2,div#skills-container>h3{margin-top:2rem;margin-bottom:2rem}div#skills-container>div.text-container{max-width:500px;margin:2rem auto}div.skills-content{width:100vw;max-width:1220px;flex-direction:row;display:flex;flex-wrap:wrap;gap:1rem;justify-content:center;align-content:center;margin:0 auto}div.skills-content img{transition:all .2s linear;margin-top:1rem;filter:grayscale(1)}div.skills-content div:before{border:2px solid red;width:100px;height:100px}div.skills-content div:hover>:where(img){transform:scale(1.5);margin:.5rem 1rem 0;transition:all .2s linear;filter:drop-shadow(0 0 3px white) grayscale(0);--border-order-gap: 2px;--border-thickness: 2px;--border-color: #ff8800;padding:calc(var(--border-order-gap) + var(--border-thickness));--gradient-colors: #0000 0 25%, var(--border-color) 0 50%;--horizontal-border: repeating-linear-gradient( 90deg, var(--gradient-colors) ) repeat-x;--vertical-border: repeating-linear-gradient(180deg, var(--gradient-colors)) repeat-y;background:var(--horizontal-border) var(--background-position, 25%) 0,var(--vertical-border) 0 var(--background-position, 125%),var(--horizontal-border) var(--background-position, 125%) 100%,var(--vertical-border) 100% var(--background-position, 25%);background-size:200% var(--border-thickness),var(--border-thickness) 200%;cursor:pointer;filter:grayscale(50%);transition:.3s;--background-position: 75%;filter:grayscale(0%)}#whyMe{font-size:7rem}#whyMeContainer{height:96vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2rem}#whyMeScrollable{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:2rem;overflow-x:scroll;scroll-behavior:smooth;padding-bottom:3rem;-ms-overflow-style:none;scrollbar-width:none}#whyMeScrollable::-webkit-scrollbar{display:none}.whyMeScrollableContainer{width:min(80%,var(--maxCardWidth));position:relative}.contentCard{border:1px solid limegreen;width:min(20rem);height:50vh}.contentCard>h3{font-weight:bolder;font-size:2rem}.next>img,.previous>img{display:none}.next,.previous{display:flex;position:absolute;align-items:center;z-index:1;top:0;bottom:0;width:3rem}.next{right:-3px;background:linear-gradient(to right,rgba(255,255,255,0),var(--lightModeDefault))}.previous{left:-3px;background:linear-gradient(to left,rgba(255,255,255,0),var(--lightModeDefault))}body.dark-mode .next{right:-3px;background:linear-gradient(to right,rgba(255,255,255,0),var(--darkModeDefault))}body.dark-mode .previous{left:-3px;background:linear-gradient(to left,rgba(255,255,255,0),var(--darkModeDefault))}.whyMeScrollableContainer:hover :where(.next>img,.previous>img){display:block}div#skills-container>div>p{text-align:center}main{display:flex;align-items:center;flex-direction:column}.projectSubContainer{width:min(80%,var(--maxCardWidth));gap:4rem;margin:0 auto;display:flex;flex-direction:row}main .projectSubContainer:has(.reversed){justify-content:flex-end}.projectContainer{display:flex;align-items:center;justify-content:center;width:100vw}main section{display:flex;gap:2rem;margin:4rem 0}main section.reversed{flex-direction:row-reverse;text-align:right}main h2{font-size:2rem;padding:.5rem 0}main h4{font-size:1rem;opacity:70%;padding-bottom:.5rem}main .readMore{color:orange;font-weight:700;margin-right:auto}main p{max-width:20rem;font-style:italic}main .projectUrl{display:block;padding:.5rem 1rem;background-color:orange;border:1px solid black;border-radius:20px;margin-top:.5rem;width:fit-content;font-weight:700}main .reversed .projectUrl{margin-left:auto}main section img{width:300px;height:200px;border:5px solid white;border-radius:12px}.projectContainer:hover :where(.projectSubContainer){transform:scale(1.1,1.2)}.projectContainer:hover{-webkit-backdrop-filter:invert(70%) opacity(30%);backdrop-filter:invert(70%) opacity(30%)}.filler{flex:0;transition:flex 1s}.projectContainer:hover .filler{flex:auto}@media screen and (max-width: 768px){#navBarBurger{width:25px;transition:width .5s ease}#defaultLogo{width:0;transition:width .5s ease}#nav ul{opacity:0;transform:translateY(-10px);transition:opacity .5s ease,visibility .5s ease,transform .5s ease;visibility:hidden}section>div.card#myCard{flex-direction:column-reverse;flex-wrap:wrap;max-width:fit-content}section#hero{height:max-content}#whyMe{font-size:6rem}.projectSubContainer section,.projectSubContainer section.reversed{flex-direction:column}.projectSubContainer:hover .projectUrl{margin-left:auto;margin-right:auto}.projectSubContainer:hover section,.projectSubContainer:hover section.reversed{text-align:center}.projectSubContainer{gap:unset}}@media screen and (max-width: 750px){#nav ul{display:none}.next,.previous,body.dark-mode .next,body.dark-mode .previous{background:unset}.contentCard,body.dark-mode .contentCard{height:unset}.contentCard>h3,.contentCard>p{padding:.5rem}}@media screen and (max-width: 500px){#whyMeContainer{padding-top:1.5rem;justify-content:unset}#whyMe{font-size:5rem}}@media (pointer: coarse){#toggleModeLogo:hover{transform:none;box-shadow:none;border-radius:0}header section:hover,body.dark-mode header section:hover,body.dark-mode nav ul li a:hover{text-shadow:none;color:initial}header section:hover img,body.dark-mode header section:hover img{box-shadow:none;border-radius:0}}