@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap'); * { box-sizing: border-box; font-family: "Plus Jakarta Sans"; color: white; } html, body { margin: 0px; padding: 0px; scroll-behavior: smooth; } body { background: #050505; } header, main, footer { width: 1270px; margin: auto; max-width: 100%; padding-left: 25px; padding-right: 25px; } header { display: flex; justify-content: center; align-items: center; margin: 25px 0px; width: 100%; } header nav { padding: 15px 25px; border: 1px solid #363636; border-radius: 10px; background: rgba(255, 255, 255, 0.025); } header nav ul { list-style-type: none; margin: 0px; padding: 0px; display: flex; flex-direction: row; gap: 25px; } header nav ul:hover { cursor: default; } header nav ul li a { text-decoration: none; font-weight: 600; font-size: 20px; color: rgba(255, 255, 255, 0.75); transition: .5s; } header nav ul li a:hover { color: rgba(255, 255, 255, 1); cursor: pointer; text-shadow: 0px 0px 2.5px rgba(255, 255, 255, 1); } section#home { display: flex; height: 75vh; justify-content: center; align-items: center; text-align: center; position: relative; } section#home .container-scroll { position: absolute; bottom: -15vh; text-align: center; } section#home .container-scroll span { color: rgba(255, 255, 255, 0.75); font-size: 16px; } section#home .container-scroll .scroll { height: 50px; width: 2px; display: block; margin: 25px auto; background: rgba(255, 255, 255, 0.05); overflow: hidden; } section#home .container-scroll .scroll div { height: 25px; width: 2px; display: block; background: rgba(255, 255, 255, 0.75); animation: scroll 2.5s infinite cubic-bezier(0.455, 0.03, 0.515, 0.955); } @keyframes scroll { 0% { height: 0px; transform: translateY(0px); } 50% { height: 25px; transform: translateY(25px); } 100% { height: 0px; transform: translateY(50px); } } section#home h1 { font-size: 64px; font-weight: 900; letter-spacing: 25px; padding-left: 25px; width: 720px; max-width: 100%; text-transform: uppercase; } section#home h2 { font-size: 32px; font-weight: 700; text-align: center; } section#home h3 { color: rgba(255, 255, 255, 0.75); font-weight: 500; font-size: 24px; display: flex; align-items: center; justify-content: center; } section#home h3 i { margin-left: 5px; } section#home h3 svg { height: 20px; margin-right: 10px; } h2.sub-title { font-size: 36px; display: flex; flex-direction: column; margin: 0px; margin-bottom: 50px; } h2.sub-title small { color: rgba(255, 255, 255, 0.75); margin-bottom: 15px; font-weight: 600; margin-top: 5vh; } section#about { display: grid; grid-template-columns: 1fr 1fr; gap: 75px; } section:not(#home) { margin: 20vh 0px 25vh 0px; } section#contact { text-align: center; } p { font-size: 20px; line-height: 150%; color: #D8D7D7; } section#skillset .container-skillset { display: flex; justify-content: start; align-items: start; gap: 50px; } section#skillset .single-skillset { width: 100%; background: rgba(255, 255, 255, 0.025); border-radius: 5px; border: 1px solid #363636; padding: 25px; cursor: pointer; height: 250px; display: flex; flex-direction: column; align-items: start; justify-content: center; transition: .5s; } section#skillset .single-skillset:hover { background: rgba(255, 255, 255, 0.05); } section#skillset .single-skillset h3 { font-size: 32px; margin-bottom: 0px; margin-top: 75px; transition: .5s; } section#skillset .single-skillset:hover h3 { margin-top: 0px; text-shadow: 0px 0px 2.5px rgba(255, 255, 255, 0.5); } section#skillset .single-skillset p { margin-top: 15px; margin-bottom: 0px; height: 30px; opacity: 1; transition: .5s; } section#skillset .single-skillset:hover p { height: 0px; opacity: 0; } section#skillset .single-skillset ul { list-style-type: none; margin: 0px; padding: 0px; height: 0px; overflow: hidden; transition: .5s; opacity: 0; } section#skillset .single-skillset:hover ul { margin-top: 25px; height: 62.5px; opacity: 1; } section#skillset .single-skillset img { height: 25px; transition: .5s; opacity: 1; } section#skillset .single-skillset:hover img { height: 0px; opacity: 0; } section#skillset .single-skillset div { display: flex; gap: 15px; height: 0px; opacity: 0; transition: .5s; } section#skillset .single-skillset div img { opacity: 0; } section#skillset .single-skillset:hover div { height: 25px; opacity: 1; margin-top: 25px; } section#skillset .single-skillset:hover div img { height: 25px; opacity: 1; } section#skillset .single-skillset li { font-size: 20px; margin-bottom: 10px; } section#skillset .single-skillset li:last-child { margin-bottom: 0px; } section#about .container-experience .single-experience { display: grid; grid-template-columns: 150px 1fr; margin-bottom: 45px; } section#about .single-experience h3 { margin-bottom: 10px; margin-top: 0px; font-size: 24px; } section#about .single-experience h3 span:nth-child(2) { font-weight: normal; margin-left: 5px; } section#about .single-experience p { margin: 0px; } section#about .single-experience:last-child { margin-bottom: 0px; } section#about .single-experience i { color: rgba(255, 255, 255, 0.75); font-size: 20px; } section#project .container-project { border-bottom: 1px solid #363636; margin-bottom: 50px; } section#project button { background: none; border: none; color: white; font-size: 20px; font-weight: 700; display: inline-flex; flex-wrap: wrap; align-items: center; cursor: pointer; } section#project button svg { margin-left: 15px; margin-top: 2.5px; } section#project .single-project { padding-bottom: 35px; padding-top: 35px; border-top: 1px solid #363636; } section#project .single-project:hover { cursor: pointer; } section#project .single-project:last-child { margin-bottom: 0px; } section#project .single-project h3 { font-size: 24px; margin-top: 10px; margin-bottom: 25px; transition: .5s; } section#project .single-project:hover h3 { text-shadow: 0px 0px 2.5px rgba(255, 255, 255, 0.5); } section#project .single-project:hover h3 small, section#project .single-project:hover h3 small span { text-shadow: none; } section#project .single-project h3 small { display: block; margin-top: 10px; font-size: 20px; } section#project .single-project h3 small i { font-weight: normal; } section#project .container-single-project { display: grid; grid-template-columns: 3fr 2fr; gap: 75px; } section#project .container-single-project p { margin: 0px; } section#project .container-single-project img { max-height: 35px; } section#project .container-single-project span { width: auto; padding: 15px 25px; display: inline-flex; background: rgba(255, 255, 255, 0.025); gap: 25px; border-radius: 5px; border: 1px solid #363636; transition: .5s; } section#project .single-project:hover .container-single-project span { background: rgba(255, 255, 255, 0.075); } section#project .hide, section#project .single-project.hide { display: none; } section#blog .single-blog { background: rgba(255, 255, 255, 0.025); border-radius: 5px; border: 1px solid #363636; padding: 20px 25px; margin-bottom: 25px; text-decoration: none; display: block; transition: .5s; } section#blog .single-blog:hover { background: rgba(255, 255, 255, 0.05); } section#blog .single-blog h3 { margin-top: 0px; margin-bottom: 5px; font-size: 24px; text-transform: capitalize; transition: .5s; } section#blog .single-blog:hover h3 { text-shadow: 0px 0px 2.5px rgba(255, 255, 255, 0.5); } section#blog .single-blog p { margin: 0px; } section#blog .single-blog article { display: flex; align-items: center; } section#blog .single-blog div { width: 100%; } section#blog .single-blog svg { margin-left: 25px; } section#blog .single-blog:last-child { margin: 0px; } section#gear h3 { font-size: 24px; } section#gear ul li { margin-bottom: 5px; font-size: 20px; line-height: 175%; } section#gear ul li i { color: rgba(255, 255, 255, 0.75); } section#gear ul li b { font-weight: 600; color: rgba(255, 255, 255, 1); } section#gear .container-gear { display: grid; grid-template-columns: 1fr 1fr; gap: 75px; } section#contact .container-contact { display: flex; gap: 25px; justify-content: center; align-items: center; margin-top: 25px; } section#contact .container-contact a { text-decoration: none; } section#contact .container-contact a img { opacity: .75; transition: .5s; height: 35px; } section#contact .container-contact a:hover img { opacity: 1; } footer { display: grid; grid-template-columns: 2fr 3fr; padding-top: 25px; padding-bottom: 25px; border-top: 1px solid #363636; } footer p { font-size: 18px; margin: 0px; } footer div:last-child p { text-align: right; } header, main, footer { position: relative; z-index: 2; overflow-x: hidden; } #accent-logo { max-width: 100%; position: fixed; z-index: 0; top: 0; left: 0; right: 0; margin: auto; } #accent-grain { position: fixed !important; top: 0; bottom: 0; left: 0; right: 0; opacity: 1; z-index: 1; } #accent-type { margin-right: 5px; display: inline-block; } span.ti-cursor { color: rgba(255, 255, 255, 0.25) !important; } #accent-preloader { position: fixed; z-index: 3; top: 0; left: 0; right: 0; bottom: 0; background-color: #050505; display: flex; align-items: center; justify-content: center; transition: .5s; transition-delay: 1.25s; } #accent-preloader span { text-transform: uppercase; font-size: 24px; font-weight: 700; letter-spacing: 15px; transition: .5s; transition-delay: .5s; text-align: center; animation: glow 1s infinite alternate; } @keyframes glow { from { text-shadow: 0px 0px 0px rgba(255, 255, 255, 0); } to { text-shadow: 0px 0px 2.5px rgba(255, 255, 255, .75); } } #accent-preloader.out, #accent-preloader.out span { opacity: 0; } #accent-type { opacity: 1; transition: .5s; } #accent-type.hide { opacity: 0; }