@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&family=Varela+Round&display=swap');

*{ margin:0; padding:0; box-sizing:border-box; }
a, a:link, a:visited{ color:inherit; text-decoration:none; }
li{ list-style:none; }
.container{ width:1140px; margin:0 auto; }

header{ position:fixed; color:white; top:0; z-index:1; width:100%; padding:1rem; }
header .container{ display:flex; justify-content:space-between; align-items:center; width:100%; }
header nav ul{ display:flex; }
header nav ul li{ padding:10px; }
header button{ background: transparent; border:0; cursor: pointer; color:white; }
header h1 button{ font-size: 2rem; font-weight: bold; }
header nav ul li button{ font-size: 1.2rem; }

main{ width:100%; height:100vh; color:white; background:linear-gradient(rgba(0,0,0,0.8), rgba(0,0,0,0.8)), url('images/me.jpg') center center; background-size:cover; display:flex; justify-content:center; align-items:center; text-align:center; }
main h4{ font-size:2rem; }
main h2{ font-size:3.5rem; margin:2rem 0; letter-spacing:3px; font-family:'Varela Round', sans-serif; }
main p{ max-width:500px; margin:0 auto; font-size:1.25rem; }
main button.download{ background-color:transparent; border:3px solid white; border-radius:20px; padding:1rem 2rem; margin-top:3rem; color:white; font-weight:bold; cursor:pointer; }
main button.mouse{ background-color:transparent; border:none; color:white; font-size:2rem; position:absolute; bottom:1rem; left:50%; transform:translateX(-50%); animation:upDown 1s ease-in-out infinite; cursor:pointer; }

@keyframes upDown{ 0%, 100%{ bottom:1rem; } 50%{ bottom:1.5rem; } }
main h2 span::after{ content:""; height:40px; width:3px; background-color:#fff; display:inline-block; animation: blink .7s ease-in-out infinite; }
@keyframes blink { 0%{ opacity: 1; } 100%{ opacity: 0; } }

section{ font-family:'Poppins', sans-serif; padding:5rem 0; }
section:nth-child(2n){ background-color:#f8f8f8; }
section .title{ margin-bottom:3rem; }
section .title h4{ font-size:1.35rem; color:#ed4848; position:relative; }
section .title h2{ font-size:3.5rem; }

section .about-self::after{ content:""; clear:both; display:block; }
section .about-self .left{ width:50%; float:left; }
section .about-self .left img{ max-width:100%; }
section .about-self .right{ width:50%; float:left; padding:0 2rem; }
section .about-self .right h3{ font-size:2.25rem; margin-bottom:1rem; }
section .about-self .right h3 strong{ color:#ed4848; }
section .about-self .right p{ font-size:1.15rem; margin:1rem 0; }

section .do-me::after{ content:""; display:block; clear:both; }
section .do-me .do-inner{ background-color:#fff; width:30%; padding:2rem; float:left; margin-right:5%; cursor:pointer; }
section .do-me .do-inner:last-child{ margin-right:0; }
section .do-me .do-inner .icon i{ font-size:2.5rem; color:#ff6a6a; }
section .do-me .do-inner .content h3{ font-size:2rem; margin:1rem 0; }
section .do-me .do-inner:hover{ background-color:lightcoral; color:white; }
section .do-me .do-inner:hover i{ color:white; }

section.portfolio::after{ content:""; display:block; clear:both; }
section.portfolio .portfolio-inner{ width:30%; margin-right:5%; padding:1rem 1rem 1.5rem 1rem; float:left; background-color:#f8f8f8; border:1px solid #ccc; margin-bottom:3rem; }
section.portfolio .portfolio-inner:nth-child(3n){ margin-right:0; }
section.portfolio .portfolio-inner img{ width:100%; display:block; }

section.contact .contact-me::after{ content:""; display:block; clear:both; }
section.contact .contact-me .left{ 
    width: 100%; 
    max-width: 500px; 
    margin: 0 auto; 
    float: none;
}
section.contact .contact-me .left .card{ border:1px solid #ccc; padding:1rem; display:flex; align-items:center; margin-bottom:1.25rem; background:#fff; }
section.contact .contact-me .left .card .icon i{ font-size:2rem; margin-right:15px; color:#ff6a6a; }

@media screen and (max-width: 1140px){
  .container, main .container, section .container{ width: 95%; }
  section .about-self .left, section .about-self .right{ width:100%; padding:0; float:none; }
  section .do-me .do-inner, section.portfolio .portfolio-inner{ width:48%; margin-right:0; margin-bottom:1.5rem; }
  section .do-me .do-inner:nth-child(2n+1), section.portfolio .portfolio-inner:nth-child(2n+1){ margin-right:4%; }
}

@media (max-width: 768px){
  html{ font-size: 14px; }
  section .do-me .do-inner, section.portfolio .portfolio-inner{ width:100%; margin-right:0; }
}

header.active{ background-color:rgba(0,0,0,0.8); animation:fadeIn 0.5s; }

@keyframes fadeIn{ from{opacity:0;} to{opacity:1;} }