styles.css

*,
*::before,
*::after {
   box-sizing: border-box;
}
:root {
   --primary-color: #00c9a7;
   --complementary-color: #e6dfd7;
   --heading-font: "Trirong", serif;
   --body-text-font: "Anonymous Pro", monospace;
   --text-color: #17191b;
   --light-color: #fff;
   --border: #00c9a7 1px solid;
   --box-padding: 150px 300px;
   --gap: 150px;
   --hover-color: #222;
   --typewriter-speed: 6s;
   --typewriter-steps: 34;
}
body {
   margin: 0px;
   font-family: var(--body-text-font);
   color: var(--text-color);
   font-size: 22px;
   line-height: 2;
}
/* scrollbar*/
::-webkit-scrollbar {
   width: 7px;
}
::-webkit-scrollbar-track {
   background: #e6dfd7;
}
::-webkit-scrollbar-thumb {
   background: #00c9a7;
   border-radius: 7px;
}
/* headings */
h1,
h2,
h3,
h4 {
   font-family: var(--heading-font);
   margin: 0;
}
h1 {
   font-size: 240px;
   line-height: 1;
   text-transform: lowercase;
}
h2 {
   font-size: 140px;
   line-height: 1;
}
h3 {
   font-size: 80px;
   line-height: 1.2;
}
h4 {
   font-size: 48px;
   line-height: 1;
   text-transform: capitalize;
}

/* buttons */
.btn,
.btn-secondary,
.btn-outline-light {
   font-family: var(--body-text-font);
   font-size: 18px;
   padding: 20px 80px;
   cursor: pointer;
}
.btn {
   color: var(--light-color);
   background-color: var(--primary-color);
   border: var(--primary-color) 1px solid;
}
.btn:hover {
   border: var(--primary-color) 1px solid;
   color: var(--text-color);
   background-color: var(--light-color);
}
.btn-secondary {
   background-color: var(--light-color);
   border: none;
   color: var(--text-color);
}
.btn-secondary:hover {
   background-color: var(--primary-color);
   color: var(--light-color);
}
.btn-outline-light {
   color: var(--light-color);
   border: #fff 1px solid;
   background-color: transparent;
   margin-top: 25px;
}
.btn-outline-light:hover {
   background-color: var(--light-color);
   color: var(--text-color);
}

.intro,
.projects,
.about {
   padding: var(--box-padding);
}

.intro,
.single-project h4,
.single-project h3,
.single-project p,
.about {
   user-select: none;
}

/* navigation */
.nav {
   display: flex;
   justify-content: flex-end;
   align-items: center;
   border-bottom: #00c9a7 1px solid;
   padding: 25px 0;
   overflow: hidden;
   position: fixed;
   width: 100%;
   z-index: 1;
   top: 0;
   left: 0;
   background-color: #fff;
}
.nav-item {
   font-size: 20px;
   text-decoration: none;
   color: #17191b;
   margin: 0 30px;
}
.link:hover {
   color: #00c9a7;
}
.logo,
.rights {
   margin-right: auto;
}
.logo {
   font-weight: bold;
}

/* intro */
.intro {
   display: flex;
   flex-direction: column;
   margin-top: 4%;
}
.description {
   font-size: 54px;
   line-height: 1.2;
   margin: 30px 0 30px 0;
   position: relative;
   width: max-content;
}
.description::before,
.description::after {
   content: "";
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
}
.description::before {
   background-color: var(--light-color);
   animation: typewriter var(--typewriter-speed) steps(var(--typewriter-steps))
      1s forwards;
}
.description::after {
   width: 2px;
   background-color: var(--text-color);
   animation: typewriter var(--typewriter-speed) steps(var(--typewriter-steps))
         1s forwards,
      blink 1s steps(var(--typewriter-steps)) infinite;
}
@keyframes typewriter {
   to {
      left: 100%;
   }
}
@keyframes blink {
   to {
      background: transparent;
   }
}
.dscr-mobile {
   display: none;
}
.status {
   font-size: 28px;
}
#video {
   width: 100%;
   height: 920px;
   object-fit: cover;
   object-position: center;
}

/* projects */
.projects {
   padding-bottom: 0;
}
.projects h2 {
   margin-bottom: 70px;
}
.works,
.about {
   display: flex;
   flex-wrap: wrap;
   gap: var(--gap);
}
.single-project {
   display: flex;
   flex-direction: column;
   flex-basis: calc(50% - 120px);
   flex-grow: 1;
   border: var(--border);
   padding: 40px;
}

/* preview hover */
.project-preview {
   display: flex;
   justify-content: center;
   align-items: center;
   background: var(--hover-color);
   background-size: cover;
   position: relative;
   min-width: 50%;
   margin-bottom: 35px;
}
.project-image {
   opacity: 1;
   display: block;
   width: 100%;
   height: auto;
}
.preview-hover {
   opacity: 0;
   position: absolute;
}
.project-preview:hover .project-image {
   opacity: 0.6;
   transition: opacity 0.25s;
}
.project-preview:hover .preview-hover {
   opacity: 1;
}
.technologies {
   margin: 10px 0 0 0;
}

/* cta */
.cta {
   justify-content: center;
   text-align: center;
   background-color: var(--primary-color);
   color: var(--light-color);
   padding: 60px;
}

/* about */
.info,
.skills {
   flex-basis: calc(50% - 250px);
   flex-grow: 1;
}
.info .btn {
   display: flex;
   align-items: center;
   gap: 15px;
   margin-top: 30px;
}
.info a {
   text-decoration: none;
}
.skill-list {
   list-style: none;
   margin: 0;
   padding: 0;
   font-size: 48px;
}
.skill-list li {
   line-height: 1.7;
   margin: 30px 0;
}
.ongoing {
   color: var(--primary-color);
}
.planned {
   color: var(--complementary-color);
}

/* 404 page */
.error-page {
   display: flex;
   justify-content: center;
   align-items: center;
   flex-wrap: wrap;
   gap: var(--gap);
   background: linear-gradient(to top, #00c9a7 0%, #082e67 100%);
   height: 100vh;
}
.error-img {
   width: 500px;
}
.error-text {
   display: flex;
   flex-direction: column;
   align-items: center;
   color: var(--light-color);
}
.error-text h1 {
   font-family: "Allerta", sans-serif;
   margin-bottom: 15px;
}
.error-link {
   color: var(--light-color);
   margin-top: 30px;
   text-decoration: none;
}

/* footer */
footer {
   display: flex;
   justify-content: flex-end;
   border-top: #00c9a7 1px solid;
   padding: 25px 0;
}
.brandLink {
   color: #17191b;
   text-decoration: none;
}
.txtLink {
   color: #00c9a7;
   text-decoration: none;
}
.footLink:hover {
   text-decoration: underline;
   text-decoration-thickness: 1px;
   text-underline-offset: 7px;
}

@media all and (max-width: 2048px) {
   .intro,
   .projects,
   .about {
      padding: 150px 250px;
   }
   .projects {
      padding-bottom: 0;
   }
}

@media all and (max-width: 1920px) {
   .intro,
   .projects,
   .about {
      padding: 120px 200px;
   }
   .projects {
      padding-bottom: 0;
   }
   .works,
   .about {
      gap: 120px;
   }
   #video {
      height: 840px;
   }
}

@media all and (max-width: 1400px) {
   body {
      font-size: 18px;
   }
   .intro,
   .projects,
   .about {
      padding: 100px 120px;
   }
   .projects {
      padding-bottom: 0;
   }
   .nav-item {
      font-size: 18px;
   }
   h1 {
      font-size: 150px;
   }
   h2 {
      font-size: 90px;
   }
   h3 {
      font-size: 60px;
   }
   h4 {
      font-size: 38px;
   }
   .intro {
      margin-top: 7%;
   }
   .description {
      font-size: 36px;
      margin: 20px 0 10px 0;
   }
   .status {
      font-size: 24px;
   }
   #video {
      height: 720px;
   }
   .works,
   .about {
      gap: 100px;
   }
   .single-project {
      padding: 30px;
   }
   .btn,
   .btn-secondary,
   .btn-outline-light {
      font-size: 16px;
      padding: 18px 68px;
   }
   .skill-list {
      font-size: 36px;
   }
   .skill-list li {
      line-height: 1.2;
   }
}

@media all and (max-width: 1280px) {
   #video {
      height: 620px;
   }
   .projects {
      padding-bottom: 0;
   }
   .works,
   .about {
      gap: 60px;
   }
   .skill-list {
      font-size: 30px;
   }
}

@media all and (max-width: 1024px) {
   .intro {
      margin-top: 10%;
   }
   .works,
   .about {
      flex-direction: column;
   }
   .cta {
      order: 1;
      flex-basis: 640px;
   }
   footer {
      flex-wrap: wrap;
      justify-content: flex-start;
   }
   .rights {
      line-height: 1.6;
      order: 1;
   }
   footer .link {
      margin-bottom: 15px;
   }
}

@media all and (max-width: 912px) {
   .intro,
   .projects,
   .about {
      padding: 60px 50px;
   }
   .projects {
      padding-bottom: 15px;
   }
   .intro {
      margin-top: 14%;
   }
   h1 {
      font-size: 120px;
   }
   h2 {
      font-size: 72px;
   }
   #video {
      height: 480px;
   }
   .projects h2 {
      margin-bottom: 40px;
   }
   .works {
      gap: 40px;
   }
   .about {
      gap: 20px;
   }
   .info .btn {
      margin-top: 20px;
   }
   .cta {
      flex-basis: 540px;
      padding: 80px;
   }
}

@media all and (max-width: 540px) {
   h1 {
      font-size: 90px;
   }
   .description {
      display: none;
      font-size: 30px;
   }
   .dscr-mobile {
      display: block;
   }
   .projects h2 {
      margin-bottom: 25px;
   }
   .project-preview {
      margin-bottom: 25px;
   }
   .intro {
      margin-top: 20%;
   }
   .cta {
      padding: 60px;
   }
   .skill-list li {
      margin: 15px 0;
   }
}

@media all and (max-width: 500px) {
   body {
      font-size: 16px;
   }
   h1 {
      font-size: 54px;
   }
   h2 {
      font-size: 42px;
   }
   h3 {
      font-size: 38px;
   }
   h4 {
      font-size: 28px;
   }
   .nav,
   footer {
      padding: 15px 0;
   }
   .intro {
      margin-top: 24%;
   }
   .intro,
   .projects,
   .about {
      padding: 40px 20px;
   }
   .projects {
      padding-bottom: 15px;
   }
   .nav-item {
      margin: 0 16px;
   }
   .logo {
      margin-right: auto;
   }
   .projects-link,
   .about-link {
      display: none;
   }
   .description {
      font-size: 24px;
      margin: 20px 0 0 0;
   }
   .status {
      font-size: 20px;
   }
   #video {
      height: 340px;
   }
   .works {
      gap: 30px;
   }
   .about {
      gap: 10px;
   }
   .info .btn {
      margin-top: 15px;
   }
   .single-project {
      padding: 20px;
   }
   .cta {
      flex-basis: 400px;
   }
   .skill-list {
      font-size: 26px;
   }
}

@media all and (max-width: 280px) {
   .intro {
      margin-top: 30%;
   }
   .description {
      font-size: 18px;
   }
   .status {
      font-size: 16px;
   }
   #video {
      height: 320px;
   }
   .btn,
   .btn-secondary,
   .btn-outline-light {
      padding: 16px 28px;
   }
   .info .btn {
      margin-top: 10px;
   }
   .skill-list {
      font-size: 18px;
   }
   .skill-list li {
      margin: 10px 0;
   }
}