*{padding:0;margin:0;font-family:Helvetica;box-sizing:border-box}body{background-color:#272727}a,svg{transition:.4s;text-decoration:none}ul,li{list-style:none}.container{width:60%;display:flex;justify-content:center;align-items:center}#content{width:100%;display:flex;justify-content:center;flex-wrap:wrap;gap:3rem}#content h2{color:#fff;border-bottom:3px solid #fbff44;margin-bottom:1.5rem}#content h3{color:#fff;font-size:1.175rem;padding-bottom:1rem}#navbar{position:fixed;width:100%;display:flex;justify-content:center;align-items:center;background-color:#111;padding:.5rem 3rem;z-index:2}#navbar .container{justify-content:space-between}#navbar img{width:30px;position:relative;top:5px}#navbar span{padding-left:1rem;color:#fff;font-size:2rem;font-weight:700}#navbar ul{display:flex}#navbar ul li{padding:0 1rem}#navbar ul a{font-size:1.25rem;color:#fff}#navbar ul a:hover{color:#fbff44}#hero{width:100%;margin-top:2rem;height:17.5rem;display:flex;justify-content:center;align-items:center;background-color:#111}#hero h2{padding-left:1rem;color:#fbff44;font-size:1.25rem;border:none;margin-bottom:0}#hero h1{padding-left:1rem;color:#fff;font-size:4rem}#hero p{font-size:1.25rem;padding-top:.25rem;padding-left:1rem;color:#a6a6a6}#about{width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center}#about .primary-bg{display:flex;justify-content:center;align-items:center;flex-direction:column;margin-top:2rem;background-color:#111}#about .primary-bg div{position:relative;width:60%;padding:2rem 0;text-align:start}#about .primary-bg div .skills{width:100%;display:flex}#about .primary-bg div .skills div{width:100%;border-radius:5px;background:#272727;padding:1.5rem}#about .primary-bg div .skills h4{color:#fbff44;padding-bottom:1rem}#about .primary-bg div .skills span{color:#fff}#about h1{color:#fbff44;align-self:flex-start;padding-bottom:1rem}#about p{color:#a6a6a6;font-size:1.25rem;padding-bottom:1rem}#about .text-image{display:flex;flex-direction:row;align-items:center;position:relative}#about .text-image .img-decoration{display:flex;justify-content:center;position:relative}#about .text-image .img-decoration img{margin-left:2rem;width:400px;height:395px;object-fit:fill;border-radius:8px;z-index:1}#about .text-image .img-decoration:before{content:"";width:220px;height:220px;position:absolute;top:49%;left:53%;background:#fbff44;border-radius:10px;z-index:0}#services{width:60%;display:flex;flex-direction:column;justify-content:center;align-items:center}#services h2{margin-bottom:3rem}#services .card-container{width:100%;display:flex;justify-content:space-around}#services .card-container .card{margin:.75rem;padding:2rem;text-align:center;background-color:#111;border-radius:5px}#services .card-container i{font-size:6rem;color:#fbff44}#services .card-container p{width:100%;color:#a6a6a6}#contact{width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center}#contact div{width:60%;padding:3rem 0}#contact li{display:flex;align-items:center;color:#fbff44;font-size:2.5rem;margin-bottom:1.5rem}#contact li a{padding-left:1rem;font-size:1.5rem;color:#a6a6a6}#contact li a:hover{color:#fff}#footer{width:100%;background-color:#111;padding:1rem 3rem;text-align:center}#footer span{font-size:.75rem;color:#a6a6a6}#footer ul{padding-top:1rem;display:flex;justify-content:center;gap:1rem}#footer a{font-size:2rem;color:#fbff44}#footer small{color:#a6a6a6;font-size:.75rem;padding-bottom:1rem}@media screen and (max-width: 768px){#navbar div{width:100%;display:flex;align-items:center;position:relative}#navbar div img{position:relative;top:2px;width:27}#navbar span{font-size:1.25rem}#navbar nav{display:none}#hero{padding:0 1.5em}#hero h2{font-size:.75rem}#hero h1{font-size:1.5rem}#hero p{font-size:1rem}#services{width:100%;padding:0 1rem}#services .card-container{flex-direction:column}#about .primary-bg{width:100%}#about .primary-bg div{width:100%;padding:1rem}#about .text-image{width:100%;padding:0 1rem}#about .text-image div{width:100%}#about .text-image .img-decoration,#about img{display:none}#contact div{width:100%;padding:0 2rem}#contact a{font-size:.5rem}}@media screen and (max-width: 992px){#navbar .container{width:100%}#navbar div{display:flex;align-items:center}#navbar div img{position:relative;top:2px;width:27}#navbar span{font-size:1rem}#navbar nav a{font-size:1rem}#about .primary-bg{width:100%}#about .primary-bg div{width:100%;padding:1rem}#about .text-image{width:100%;padding:0 1rem}#about .text-image div{width:100%}#about .text-image .img-decoration,#about img{display:none}#contact div{width:100%;padding:0 2rem}#contact a{font-size:.5rem}}