.hero{display:flex;justify-content:center;flex-direction:column;height:100vh;background:url(./port-hero-img-DjIFOpR-.jpg);background-repeat:no-repeat;background-size:cover;background-position:center}.hero .hero-text{display:flex;flex-direction:column;align-items:center;justify-content:center;background-color:transparent;height:100vh}.hero .hero-text .name-box{display:flex;flex-direction:column;align-items:center;justify-content:center;background-color:transparent}.hero .hero-text .name-box h1{margin:20px 0 0;font-size:70px;background-color:transparent;color:#fcf6f5;animation:loadDan 1.5s steps(30,end) forwards;animation-delay:.3s;overflow:hidden;white-space:nowrap;width:0}.hero .hero-text .name-box h3{margin:20px 0 0;font-size:25px;background-color:transparent;color:#fcf6f5;animation:loadDev 1.5s forwards;animation-delay:1.7s;opacity:0}.hero .hero-text #noah{margin-left:10px;margin-bottom:10px;position:absolute;bottom:0;align-self:flex-start;background-color:transparent;color:#fcf6f5}.hero .hero-text #noah a{text-decoration:none;color:#fcf6f5;background-color:transparent}.hero .hero-text #noah a:hover{text-decoration:underline}.section-title{text-align:center}@keyframes loadDan{0%{width:0}to{width:100%}}@keyframes loadDev{0%{transform:translateY(0);opacity:0}to{transform:translateY(-20px);opacity:1}}.color-options{font-weight:700}.sailor-blue{color:#00203f;background-color:#adefd1}.mint{color:#adefd1;background-color:#00203f}.forest-green{color:#2c5f2d;background-color:#97bc62}.moss-green{color:#97bc62;background-color:#2c5f2d}.sky-blue{color:#79abe3;background-color:#fcf6f5}.white1{color:#fcf6f5;background-color:#79abe3}.island-green{color:#2bae66;background-color:#fcf6f5}.white2{color:#fcf6f5;background-color:#2bae66}.royal-purple{color:#603f83;background-color:#c7d3d4}.ice-flow{color:#c7d3d4;background-color:#603f83}.nav-container{display:flex;justify-content:center;position:-webkit-sticky;position:sticky;top:0;background-color:transparent;height:0;z-index:1000}.nav-container .nav{height:7vh;display:flex;align-items:center;justify-content:center;width:80%;background-color:transparent}.nav-container .nav .nav-items{display:flex;align-items:center;justify-content:center;border-radius:20px;height:60%;width:100%}.nav-container .nav .nav-items .nav-item{display:flex;justify-content:center;height:20px;padding:9px 15px;color:#000;background-color:#fcf6f5;border:1px solid black;width:33%;text-decoration:none}.nav-container .nav .nav-items .nav-item:hover{animation:color-change .5s forwards}.nav-container .nav .nav-items .nav-item:hover p,.nav-container .nav .nav-items .nav-item:hover img{animation-name:color-change;animation-duration:.5s;animation:color-change .5s forwards}.nav-container .nav .nav-items .nav-item p{margin:0 0 0 5px;color:#000}.nav-container .nav .nav-items .vl{border-left:1px solid black;height:100%;margin:0 15px}@keyframes color-change{0%{background-color:#fcf6f5;color:#000}to{background-color:#000;color:#fcf6f5}}#nav-home{border-top-left-radius:20px;border-bottom-left-radius:20px;border-style:solid none solid solid}#nav-contact{border-top-right-radius:20px;border-bottom-right-radius:20px;border-style:solid solid solid none}#nav-projects{border-right:none;border-left:none}.contact-container{display:flex;flex-direction:column;align-items:center}.contact-container div{display:flex;align-items:center;margin-bottom:30px}.contact-container div img{height:50px}.contact-container div a{margin-left:10px;text-decoration:none;color:#000;font-size:40px}.contact-container div a:hover{text-decoration:underline}.contact-container div span{font-size:40px;margin-left:4px}.projects{display:flex;justify-content:center}.projects .projects-container{width:1000px}.projects .projects-container .single-project{display:flex;padding:30px;align-items:center;justify-content:center}.projects .projects-container .single-project img{height:35vh;width:40vh;border-radius:10px}.projects .projects-container .single-project .project-text{display:flex;flex-direction:column;margin:0 20px;height:35vh}.projects .projects-container .single-project .project-text p{margin:10px 0;font-size:25px;transition:transform .3s;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:5;overflow:hidden;text-overflow:ellipsis}.projects .projects-container .single-project .project-text h3{margin:0;font-size:40px}.projects .projects-container .single-project .project-text h4{margin:5px 0 0;font-size:30px}.projects .projects-container .single-project .project-text .project-links{display:flex}.projects .projects-container .single-project .project-text .project-links a{margin:0 10px;border:1px solid black;border-radius:5px;text-decoration:none;font-size:25px;font-weight:700;padding:5px;color:#000;transition:transform .5s,background-color .5s ease,color .5s ease}.projects .projects-container .single-project .project-text .project-links a .overlay{position:absolute;bottom:0;left:0;width:100%;height:0;background-color:#000;transition:height .5s ease;display:flex;justify-content:center;align-items:center;overflow:hidden}.projects .projects-container .single-project .project-text .project-links a .overlay #button-img{height:35px;width:35px;visibility:hidden;border:none;border-radius:0;opacity:0;transition:opacity 1s ease;background-color:#000}.projects .projects-container .single-project .project-text .project-links a:hover{color:#fcf6f5;background-color:#000;transform:scale(1)}.projects .projects-container .single-project .project-text .project-links a:hover .overlay{height:100%}.projects .projects-container .single-project .project-text .project-links a:hover .overlay #button-img{visibility:visible;opacity:1}.projects .projects-container .single-project .project-text .project-links a p{margin:0}#projects-title{text-align:center}.about{flex-direction:column;align-items:center;display:flex;justify-content:center}.about h2{margin-top:50px}.about .img-text{display:flex;justify-content:center;align-items:center}.about .img-text p{margin-left:60px}.about .dan-container{border:2px solid black;margin-left:20px;width:380px;display:flex;flex-direction:column;align-items:center}.about .dan-container #dan-img{height:400px;width:90%;border:2px solid black;margin-top:17px}.about .dan-container .dan-titles{display:flex;flex-direction:column;align-items:end;width:90%;margin:10px 0;font-size:larger}.about .dan-container .dan-titles h4,.about .dan-container .dan-titles h5{margin:0}.about .bio{font-size:30px}.about #creatures{text-align:center;margin-top:100px;font-size:40px}.about .dog-section{display:flex;justify-content:space-around}.about .dog-section .dog{width:320px;display:flex;flex-direction:column;align-items:center;border:2px solid black;margin:0 20px;font-size:20px}.about .dog-section .dog img{height:300px;border:2px solid black;width:90%;margin-top:14px}.about .dog-section .dog h4{margin:10px 0 0}.about .dog-section .dog p{text-align:center;margin:5px 0 10px}.about #interests{font-size:40px}.about .interests{display:flex;flex-wrap:wrap;justify-content:center}.about .interests .interest-row{width:100%;display:flex;flex-wrap:wrap;justify-content:center}.about .interests .interest-row .interest{width:400px;margin:15px;display:flex;flex-direction:column;transition:transform .3s}.about .interests .interest-row .interest h4{text-align:center;font-size:30px;margin:0 0 10px;background-color:transparent}.about .interests .interest-row .interest p{margin:0;font-size:25px;background-color:transparent}.about .interests .interest-row .interest .list{display:flex;flex-wrap:wrap;background-color:transparent}.about .interests .interest-row .interest .list p{margin:10px 20px 0 0;background-color:transparent}.about .about-section{display:flex;flex-direction:column;align-items:center}.about .about-section h3{text-align:center;font-size:40px;margin-bottom:0}.about .about-section .school{width:75%}.about .about-section .school h4{font-size:30px;margin:20px 0 0}.about .about-section .school h5{margin:0;font-size:25px;font-weight:300}.about .about-section .school p{margin:10px 0 0;font-size:25px}@media only screen and (min-width: 1000px){.bio{width:40%}}@media only screen and (min-width: 481px) and (max-width: 999px){.bio{width:60%}}@keyframes loadAboutDan{0%{transform:translateY(100px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes loadAboutText{0%{transform:translate(100px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes loadCooper{0%{transform:translate(-150px);opacity:0}to{transform:translate(0);opacity:1}}@keyframes loadFreddie{0%{transform:translate(150px);opacity:0}to{transform:translate(0);opacity:1}}.cooper{animation:loadCooper 1.5s forwards}.freddie{animation:loadFreddie 1.5s forwards}.loadAboutDan{animation:loadAboutDan 1.5s forwards}.loadAboutText{animation:loadAboutText 1.5s forwards}footer{color:#fcf6f5;background-color:#000;display:flex;align-items:center;justify-content:center;height:4vh}footer a{background-color:#000}footer .footer-icon{height:15px;margin-left:10px;background-color:#000}.skills-grid{display:flex;flex-wrap:wrap;justify-content:center}.skills-grid .skills-list{width:100%;max-width:600px;display:flex;flex-wrap:wrap;justify-content:center}.skills-grid .skills-list .skill{width:90px;margin:15px;display:flex;flex-direction:column;align-items:center;justify-content:center}.skills-grid .skills-list .skill .image-container{position:relative;text-align:center;display:flex;flex-direction:column;align-items:center}.skills-grid .skills-list .skill:hover p{animation:fadeIn .3s ease .1s forwards}.skills-grid .skills-list .skill:hover img{transform:translateY(-25px)}.skills-grid .skills-list .skill img{max-width:100%;height:auto;transition:transform .3s ease,translate .3s ease}.skills-grid .skills-list .skill p{opacity:0;position:absolute;bottom:0;margin:5px 0 0;background-color:transparent;font-weight:700}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.player{height:30px;width:200px;display:flex;align-items:center;margin-top:10px}.player .react-player{width:0!important;height:0!important}.player button{margin-right:15px;font-size:20px;border-radius:5px;padding:5px 10px;box-shadow:5px 5px #000;transition:transform .2s,box-shadow .2s}.player button:hover{box-shadow:none;transform:translate(5px,5px)}.player progress{margin-top:10px;animation:progressBarLoad 3s linear forwards}@keyframes progressBarLoad{0%{width:0%}to{width:100%}}@media only screen and (max-width: 750px){.nav-container{display:none}.hero .hero-text .name-box h1{font-size:50px}.about .img-text{flex-direction:column;align-items:center}.about .img-text .dan-container{width:350px}.about .img-text p{padding-right:20px}.about .dog-section{flex-direction:column}.about .dog-section #cooper{margin-bottom:20px}.projects{flex-direction:column;align-items:center}.projects .projects-container{width:400px}.projects .projects-container .single-project{flex-direction:column;align-items:flex-start}.projects .projects-container .single-project .project-text{margin:0;height:15vh}.projects .projects-container .single-project .project-text h3{margin:10px 0}.projects .projects-container .single-project .project-text p{display:none}.projects .projects-container .single-project .project-links{margin-top:10px}.contact-container div a{font-size:30px}}*{font-family:Dosis,sans-serif;background-color:#fcf6f5;scroll-behavior:smooth}body{margin:0}main{margin:0}.divider{margin-bottom:50px}h2{font-size:50px;padding:10px 0;text-align:center}