@import"https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap";*{margin:0;padding:0;box-sizing:border-box;font-family:Inter,sans-serif}ul li{list-style:none}body{width:100dvw;overflow-x:hidden}.container{width:900px;max-width:80dvw;margin:0 auto}.container .in-progress-container{position:absolute;width:900px;max-width:80dvw;text-align:center;padding:10px;background:#000000e8;z-index:10;rotate:-10deg}.container .in-progress-container h1{font-size:4rem;color:#fff}.container .projects-section{margin-top:5rem;display:flex;flex-direction:column;position:relative}.container .projects-section:before{content:"";position:absolute;width:50px;top:-40px;height:3px;align-self:center;display:block;background:#000}.container .projects-section h2{font-size:2.5rem;padding:10px;cursor:pointer;display:inline-block;position:relative;mix-blend-mode:difference;background:#fff}.container .projects-section h2:after{content:"";position:absolute;inset:0;width:0;height:100%;background:#fff;transition:width .2s ease;mix-blend-mode:difference}.container .projects-section h2:hover:after{width:100%}.container .projects-section .projects-cards{display:flex;align-items:flex-start;margin-top:1rem;gap:5px}.container .projects-section .projects-cards .card-projects{flex:1;font-weight:500;border:1px solid black;cursor:pointer;transition:.1s ease-in-out}.container .projects-section .projects-cards .card-projects:hover .card-img p{width:100%;display:block;transition:.1s ease-out;padding:10px}.container .projects-section .projects-cards .card-projects p{padding:10px}.container .projects-section .projects-cards .card-projects:hover{background:#000;color:#fff;box-shadow:0 3px 10px -6px #000000bf}.container .projects-section .projects-cards .card-projects .card-img{display:flex;align-items:center;justify-content:center}.container .projects-section .projects-cards .card-projects .card-img p{width:0%;font-size:.75rem;display:none;padding:10px;transition:.3s ease-in-out}.about{margin-top:5rem;display:flex;justify-content:space-between;align-items:center;text-align:left;background:#fff}.about .dwight-image img{width:400px;animation:3s levitate infinite ease-in-out}@keyframes levitate{0%{transform:translateY(-.5rem)}50%{transform:translateY(.5rem)}to{transform:translateY(-.5rem)}}.about h1{display:inline-block;position:relative;cursor:pointer;font-size:3.75rem;color:#fff;mix-blend-mode:difference;padding:10px}.about h1:after{content:"";position:absolute;inset:0;width:0;height:100%;background:#fff;transition:width .2s ease;mix-blend-mode:difference}.about h1:hover:after{width:100%}.about p{position:relative;font-size:1.25rem;cursor:pointer;padding:10px}.about p:after{content:"";position:absolute;top:0;left:0;width:0;height:100%;background:#fff;transition:width .3s ease;mix-blend-mode:difference}.about h1:hover+p:after,p:hover:after,h1:has(+p:hover):after{width:100%}@keyframes widthAnima{to{width:100%}}h1.anima:after,p.anima:after{animation:widthAnima .3s forwards}@media (max-width: 600px){body .container{min-width:100vw}body .container .about{margin-top:1rem}body .container .about .dwight-image img{display:none}body .container .about h1{text-align:center;font-size:2rem;color:#fff;mix-blend-mode:difference;padding:10px}body .container .about p{font-size:1.15rem;cursor:pointer;padding:10px}body .container .projects-section{margin-top:2.5rem;display:flex;flex-direction:column;position:relative}body .container .projects-section:before{top:-24px}body .container .projects-section h2{font-size:2rem;padding:10px;cursor:pointer}body .container .projects-section .projects-cards{display:grid;padding:5px;margin-top:0}body .container .projects-section .projects-cards .card-projects{flex:1;font-weight:500;border:1px solid black;cursor:pointer;transition:.1s ease-in-out}body .container .projects-section .projects-cards .card-projects:hover .card-img p{width:100%;display:block;transition:.1s ease-out;padding:10px}body .container .projects-section .projects-cards .card-projects p{padding:10px}body .container .projects-section .projects-cards .card-projects:hover{background:#000;color:#fff;box-shadow:0 3px 10px -6px #000000bf}body .container .projects-section .projects-cards .card-projects .card-img{display:flex;align-items:center;justify-content:center}body .container .projects-section .projects-cards .card-projects .card-img p{width:0%;font-size:.75rem;display:none;padding:10px;transition:.3s ease-in-out}}.header-container{width:900px;max-width:80dvw;margin:0 auto}.header-container .header-nav{display:flex;justify-content:space-between;align-items:center;padding:10px 0}.header-container .header-nav h1{font-size:2.75rem;cursor:pointer;background:#fff;color:#000;padding:10px;transition:.2s ease-in-out}.header-container .header-nav h1:hover{background:#000;color:#fff}.header-container .header-nav ul{display:flex;gap:15px;font-size:1.125rem}.header-container .header-nav ul li{background:#fff;color:#000;padding:10px;cursor:pointer;border-radius:2px;transition:.15s ease-in-out}.header-container .header-nav ul li:hover{background:#000;color:#fff;transition:.15s ease-in-out}footer{width:900px;max-width:80vw;display:flex;justify-content:center;margin:0 auto;margin-top:5rem}footer p{position:absolute;bottom:0;padding-bottom:10px}