.container{max-width:1000px;margin:auto;padding:0 200px}main{margin:auto;width:80%;color:#fff}.section-title{text-align:center;font-size:3rem;padding:10px;box-shadow:1px 1px 10px;animation:animate 3s linear infinite}@keyframes animate{0%{box-shadow:1px 1px 10px var(--primary)}to{box-shadow:1px 1px 10px var(--secondary)}}#about-me .container{width:100%;display:flex;flex-direction:column;align-items:center}#about-me .portfolio-link-btn{background-color:var(--primary);margin-bottom:20px;width:200px;padding:10px 0;border-radius:25px;position:relative;overflow:hidden;cursor:pointer}#about-me .portfolio-link-btn:hover{transform:scale(1.1);transition:1s}#about-me .portfolio-link-btn:after{content:"";display:block;background-color:#fff;width:10px;height:100px;position:absolute;top:0;left:-10px;animation:overlay-transition 1s ease-in-out 1s forwards;opacity:.5}@keyframes overlay-transition{0%{transform:translate(0)}to{transform:translate(210px)}}#about-me .portfolio-link-btn:hover:after{transform:translate(100px);transition-duration:2s}#about-me .top{width:100%;position:relative;display:flex;justify-content:center;align-items:center;padding:50px;margin-bottom:20px}#about-me .top:before{content:"";position:absolute;display:block;width:100vw;height:2px;background-color:#fff;top:0}#about-me .top:after{content:"";position:absolute;display:block;width:100vw;height:2px;background-color:#fff;bottom:0}#about-me .top-container{width:100%}#about-me .top-container{text-align:center}#about-me .top-header{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;animation-name:fade-in;animation-duration:4s}@keyframes fade-in{0%{opacity:0}to{opacity:1}}#about-me .top-header img,.top-header .right{width:50%}#about-me .top-header #larger-title{font-size:2.5rem}#about-me .top-header #scroll-skills{display:flex;width:100%;text-align:center;overflow:hidden}#about-me .top-header #scroll-skills span{padding:5px;animation:scroll 15s linear infinite}@keyframes scroll{0%{transform:translate(500px)}to{transform:translate(-500px)}}#about-me .bio{width:100%;background-color:#fff;color:#000}#about-me .bio p{text-align:left}#about-me .bio img{float:right;width:10%;border-radius:50%;border:rgb(126,106,190) solid 1px}#portfolio{display:flex;flex-direction:column;align-items:center}#portfolio .container{width:100%;display:flex;flex-direction:column;align-items:center}.section-body{width:100%;position:relative}#portfolio .project-slider{width:100%;display:flex;overflow:hidden}#portfolio a{color:#fff}#portfolio .arrow{position:absolute;font-size:2rem;width:50px;height:75px;top:50%;transform:translateY(-100%);color:#fff;text-align:center;cursor:pointer;z-index:100}#portfolio .project{width:100%;display:flex;flex-direction:column;align-items:center;flex-shrink:0;flex-grow:0;padding:10px;transition:translate .3s ease-in-out}#portfolio .project img{width:50%}#portfolio .project a{margin:10px}.img-slider-img{width:100%;height:100%;display:block;flex-shrink:0;flex-grow:0;transition:translate .3s ease-in-out}.img-slider-btn{height:120px;width:120px;display:block;position:absolute;top:50%}#contact-title{text-align:left}#contact input{display:block;margin-top:10px;max-width:300px;width:100%}#contact #contactMe-message{display:block;margin-top:10px;max-width:300px;width:100%;height:100px}#contact button{margin-top:10px}footer .container{color:#fff;display:flex;justify-content:space-between;align-items:center}footer a{color:#fff}footer .right{display:flex}footer .right p{margin:0 20px}header .container{display:flex;justify-content:space-between;align-items:center}header a{text-decoration:none;font-size:1.25rem;color:#7e7e7e}header .brand{position:relative;overflow:hidden;width:100%}@keyframes imgGrow{0%{width:0}}header .brand:after{content:"";width:10px;height:100px;background-color:#fff;position:absolute;left:0;top:0;animation:blockToRight 1s ease-in-out forwards}@keyframes blockToRight{0%{opacity:0;transform:translate(0)}30%{opacity:1}70%{opacity:1}to{opacity:0;transform:translate(300px)}}header .brand:before{content:"";width:300px;height:100px;background-color:#000;position:absolute;left:0;top:0;animation:wipe-on-brand 1s ease-in-out forwards}@keyframes wipe-on-brand{0%{transform:translate(0)}to{transform:translate(300px)}}header ul{color:var(--accent2);margin:0;padding:0;display:flex;list-style-type:none;justify-content:start;gap:20px}.nav-active{color:#fff}.nav-item{position:relative;overflow:hidden;width:100px;text-align:center}.nav-item:hover{transform:scale(1.1);transition-duration:.5s}.nav-item:after{content:"";height:100px;width:300px;transform:skew(-15deg);background-color:#000;position:absolute;top:0;left:-3px;animation:wipe-on-nav 1s forwards}@keyframes wipe-on-nav{0%{transform:translate(0)}to{transform:translate(103px)}}.hamburger-menu{position:relative}.hamburger-button{background:none;border:none;cursor:pointer;display:flex;flex-direction:column;justify-content:center;align-items:center}.bar{width:25px;height:3px;background-color:#000;margin:3px 0;transition:.3s}.menu{display:none;position:absolute;top:100%;left:0;background-color:#fff;border:1px solid #ccc;width:100%;text-align:center}.menu.open{display:block}.menu a{display:block;padding:10px;text-decoration:none;color:#000}.menu a:hover{background-color:#f0f0f0}.dropdown-menu{position:relative;display:inline-block}.dropdown-button{background-color:#000;color:#fff;border:none;padding:10px;cursor:pointer}.dropdown-content{display:none;position:absolute;background-color:#fff;border:1px solid #ccc;min-width:160px;box-shadow:0 8px 16px #0003;z-index:1}.dropdown-content.show{display:block}.dropdown-content a{color:#000;padding:12px 16px;text-decoration:none;display:block}.dropdown-content a:hover{background-color:#f1f1f1}@media screen and (max-width: 768px){header .container{display:flex;flex-direction:column}#about-me .top{display:flex;flex-direction:column;align-items:center}#about-me .top .left{text-align:center;margin-bottom:40px}#about-me .top .right button{min-height:40px}#portfolio .project-description{display:none}footer .right{display:block}}:root{--bg: rgb(0, 0, 0);--primary: #39a76c;--secondary: #4b55a1;--accent: #93509a;--accent2: #8292f4}.container{color:var(--blue);background-color:var(--white);padding:15px}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:var(--bg)}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}svg{display:block}ul,li{margin:0;padding:0}