style.css

@import url("https://fonts.googleapis.com/css2?family=Comfortaa&family=Kaushan+Script&family=Oswald&display=swap");

:root {
  /* Light mode */
  --primary-color: #ff5c5c;
  --primary-variant: #ff2d2d;
  --secondary-color: #1b9999;
  --on-primary: rgb(250, 250, 250);
  --on-background: rgb(66, 66, 66);
  --on-background-alt: rgba(66, 66, 66, 0.7);
  --background: rgb(255, 255, 255);
  --box-shadow: 0 5px 20px 1px rgba(0, 0, 0, 0.5);

  /* Typescale */
  --fs-h1: 7.993rem;
  --fs-h2: 5.653rem;
  --fs-body: 2rem;
  --fs-nav: 2.4rem;

  /* Typescale - Smaller */
  --fs-h1-small: 5.61rem;
  --fs-h2-small: 4.209rem;
  --fs-body-small: 1.8rem;
  --fs-nav-small: 2rem;

  /* Typescale - Smallest */
  --fs-h1-smallest: 3rem;
  --fs-h2-smallest: 3.052rem;
  --fs-body-smallest: 1.6rem;
  --fs-nav-smallest: 1.5rem;
}

[data-theme="dark"] {
  /* Dark Mode */
  --primary-color: rgb(150, 65, 255);
  --primary-variant: #6c63ff;
  --secondary-color: #03dac5;
  --on-primary: #000;
  --on-background: rgba(255, 255, 255, 0.9);
  --on-background-alt: rgba(255, 255, 255, 0.7);
  --background: #121212;
}

/**************************/
/* #Base Styles           */
/**************************/

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  font-size: 62.5%;
}

body {
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--on-background);
  font-family: Comfortaa, sans-serif;
  background-color: var(--background);
  background-image: url("data:image/svg+xml,%3Csvg width='180' height='180' viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M81.28 88H68.413l19.298 19.298L81.28 88zm2.107 0h13.226L90 107.838 83.387 88zm15.334 0h12.866l-19.298 19.298L98.72 88zm-32.927-2.207L73.586 78h32.827l.5.5 7.294 7.293L115.414 87l-24.707 24.707-.707.707L64.586 87l1.207-1.207zm2.62.207L74 80.414 79.586 86H68.414zm16 0L90 80.414 95.586 86H84.414zm16 0L106 80.414 111.586 86h-11.172zm-8-6h11.173L98 85.586 92.414 80zM82 85.586L87.586 80H76.414L82 85.586zM17.414 0L.707 16.707 0 17.414V0h17.414zM4.28 0L0 12.838V0h4.28zm10.306 0L2.288 12.298 6.388 0h8.198zM180 17.414L162.586 0H180v17.414zM165.414 0l12.298 12.298L173.612 0h-8.198zM180 12.838L175.72 0H180v12.838zM0 163h16.413l.5.5 7.294 7.293L25.414 172l-8 8H0v-17zm0 10h6.613l-2.334 7H0v-7zm14.586 7l7-7H8.72l-2.333 7h8.2zM0 165.414L5.586 171H0v-5.586zM10.414 171L16 165.414 21.586 171H10.414zm-8-6h11.172L8 170.586 2.414 165zM180 163h-16.413l-7.794 7.793-1.207 1.207 8 8H180v-17zm-14.586 17l-7-7h12.865l2.333 7h-8.2zM180 173h-6.613l2.334 7H180v-7zm-21.586-2l5.586-5.586 5.586 5.586h-11.172zM180 165.414L174.414 171H180v-5.586zm-8 5.172l5.586-5.586h-11.172l5.586 5.586zM152.933 25.653l1.414 1.414-33.94 33.942-1.416-1.416 33.943-33.94zm1.414 127.28l-1.414 1.414-33.942-33.94 1.416-1.416 33.94 33.943zm-127.28 1.414l-1.414-1.414 33.94-33.942 1.416 1.416-33.943 33.94zm-1.414-127.28l1.414-1.414 33.942 33.94-1.416 1.416-33.94-33.943zM0 85c2.21 0 4 1.79 4 4s-1.79 4-4 4v-8zm180 0c-2.21 0-4 1.79-4 4s1.79 4 4 4v-8zM94 0c0 2.21-1.79 4-4 4s-4-1.79-4-4h8zm0 180c0-2.21-1.79-4-4-4s-4 1.79-4 4h8z' fill='%231b9999' fill-opacity='0.3' fill-rule='evenodd'/%3E%3C/svg%3E");
}

a {
  text-decoration: none;
}

img {
  max-width: 100%;
  display: block;
}

.container {
  max-width: 130rem;
  margin: 0 auto;
  padding: 0 1.5rem;
}

section:not(:first-of-type) {
  padding: 10rem 3rem;
}

@media screen and (max-width: 400px) {
  section:not(:first-of-type) {
    padding: 10rem 0rem;
  }
}

/**************************/
/* #Typography            */
/**************************/

h1,
h2 {
  font-family: "Kaushan Script", sans-serif;
  margin-bottom: 0;
  letter-spacing: 2px;
}

.heading-container {
  text-align: center;
  margin-bottom: 8rem;
}

.heading-primary {
  font-size: var(--fs-h1);
}

.heading-primary--main {
  display: block;
}

.heading-secondary {
  font-size: var(--fs-h2);
}

.heading-secondary::after {
  content: "";
  display: block;
  height: 3px;
  width: 7rem;
  margin: 0 auto;
  background-color: var(--primary-color);
}

.home-description {
  color: var(--on-background);
  font-size: var(--fs-body);
  font-weight: normal;
}

.home-description span {
  color: var(--primary-color);
  font-weight: bold;
}

@media screen and (max-width: 1280px) {
  .heading-primary {
    font-size: var(--fs-h1-small);
  }

  .heading-secondary {
    font-size: var(--fs-h2-small);
  }

  body {
    font-size: var(--fs-body-small);
  }
}

@media screen and (max-width: 476px) {
  .heading-primary {
    font-size: var(--fs-h1-smallest);
  }

  .heading-secondary {
    font-size: var(--fs-h2-smallest);
  }

  .home-description {
    font-size: var(--fs-body-small);
  }
}

/**************************/
/* #Navigation            */
/**************************/

.nav {
  font-family: Oswald, sans-serif;
  font-size: var(--fs-nav);
  letter-spacing: 3px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.95);
  height: 8rem;
}

.nav-list {
  list-style: none;
  display: flex;
  gap: 3rem;
}

.link {
  color: var(--primary-color);
  text-decoration: none;
  border-bottom: 3px solid transparent;
  font-weight: bold;
}

.link:hover,
.link:focus {
  color: var(--on-background);
}

.nav-link:hover,
.nav-link:focus {
  border-bottom: 3px solid;
}

.theme-switch-wrapper {
  display: flex;
  align-items: center;
  gap: 1rem;
  z-index: 100;
}

.theme-switch-wrapper span {
  margin-right: 10px;
}

.theme-switch {
  display: inline-block;
  height: 34px;
  position: relative;
  width: 60px;
}

.theme-switch input {
  display: none;
}

.slider {
  background: #ccc;
  bottom: 0;
  cursor: pointer;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  transition: 0.4s;
}

.slider::before {
  background: #fff;
  bottom: 4px;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  position: absolute;
  transition: 0.4s;
}

input:checked + .slider {
  background: var(--primary-color);
}

input:checked + .slider::before {
  transform: translateX(26px);
}

.slider.round {
  border-radius: 34px;
}

.slider.round::before {
  border-radius: 50%;
}

.fas {
  font-size: var(--fs-body);
  margin-right: 5px;
}

.mobile-menu-container {
  display: none;
}

.mobile-menu {
  cursor: pointer;
  transition: color 0.2s ease;
  font-size: 3rem;
}

.mobile-menu:hover {
  color: var(--primary-color);
}

@media screen and (max-width: 1024px) {
  .nav {
    font-size: var(--fs-nav-small);
  }
}

@media screen and (max-width: 768px) {
  .nav-list {
    list-style: none;
    display: flex;
    gap: 3rem;
  }
  .nav-list {
    padding: 8rem 0;
    flex-direction: column;
    align-items: center;
    gap: 7rem;
    position: absolute;
    top: 8rem;
    font-size: 3rem;
    left: 0;
    width: 100vw;
    background: rgba(255, 255, 255, 0.95);
    border-bottom: 2px solid var(--primary-color);
    transform: translateX(-100%);
    transition: all 0.3s ease-in-out;
  }

  .show {
    transform: translateX(0);
  }

  .mobile-menu-container {
    display: block;
  }
}

@media screen and (max-width: 450px) {
  .nav {
    font-size: var(--fs-nav-smallest);
  }
  .nav-list {
    font-size: 2rem;
  }

  .theme-switch-wrapper {
    gap: 0;
  }

  .theme-switch {
    display: inline-block;
    height: 28px;
    position: relative;
    width: 55px;
  }

  .slider::before {
    background: #fff;
    bottom: 4px;
    content: "";
    height: 20px;
    width: 20px;
    left: 4px;
    position: absolute;
    transition: 0.4s;
  }
}
/**************************/
/* #Home Section Styles   */
/**************************/

.home {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.home-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.home-text-group {
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 3rem;
}

.home-image-group {
  display: flex;
  justify-content: end;
}

.home-image-group img {
  width: 80%;
}

.home-link:link,
.home-link:visited {
  font-weight: bold;
  display: inline-block;
  padding-left: 1.25rem;
  margin-top: 0.5rem;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

@media screen and (max-width: 1024px) {
  .home-text-group {
    gap: 2rem;
  }

  .home-image-group img {
    width: 90%;
  }
}

@media screen and (max-width: 920px) {
  .home {
    padding-top: 9rem;
  }

  .home-container {
    grid-template-columns: 1fr;
    gap: 10rem;
  }

  .home-text-group {
    text-align: center;
    align-items: center;
  }
}

@media screen and (max-width: 768px) {
  .home-text-group {
    text-align: center;
    align-items: center;
  }

  .home-image-group {
    justify-content: center;
  }

  .home-image-group img {
    width: 75%;
  }
}

@media screen and (max-width: 600px) {
  .home-image-group img {
    width: 90%;
  }
}

/**************************/
/* #About Section         */
/**************************/

.about-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(30rem, 1fr));
  gap: 5rem;
}

.image-container {
  border: 1px solid var(--primary-color);
  border-radius: 10px;
  width: auto;
  background: var(--background);
  box-shadow: var(--box-shadow);
  display: flex;
  flex-direction: column;
  gap: 5rem;
  padding: 3rem;
  text-align: center;
}

.about-image {
  width: 100%;
  justify-self: flex-end;
}

/**************************/
/* #Buttons               */
/**************************/

.btn {
  letter-spacing: 1px;
  cursor: pointer;
  border-radius: 10px;
  border: 2px solid var(--primary-color);
  outline: none;
  padding: 0.5em 1.5em;
  font-size: var(--fs-body);
}

.btn:disabled {
  opacity: 0.4;
  cursor: default;
}

.btn:hover:not(.outline) {
  filter: brightness(110%);
}

.primary {
  background: var(--primary-color);
  color: var(--on-primary);
}

.secondary {
  border: 2px solid var(--secondary-color);
}

.secondary,
.secondary:hover,
.outline.secondary:hover {
  background: var(--secondary-color);
  color: var(--on-primary);
}

.outline {
  background: var(--background);
  color: var(--on-background);
}

.outline:hover {
  background: var(--primary-color);
  color: var(--on-primary);
}

@media screen and (max-width: 768px) {
  .btn {
    font-size: var(--fs-body-smallest);
  }
}

@media screen and (max-width: 350px) {
  .about-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(25rem, 1fr));
    gap: 5rem;
  }
}

/**************************/
/* #Project Section       */
/**************************/

.btn-container {
  margin-bottom: 5rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: 3rem;
}

.text-box {
  width: 40%;
  text-align: justify;
  background: rgb(0 0 0 / 50%);
  color: var(--on-primary);
  border-radius: 1rem;
  padding: 30px;
  margin: 0 auto;
}

@media screen and (max-width: 1240px) {
  .text-box {
    width: 60%;
  }
}

@media screen and (max-width: 768px) {
  .text-box {
    width: 100%;
    font-size: var(--fs-body-smallest);
  }
}
/**************************/
/* #Contact Section       */
/**************************/

.social-icons {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: 5rem;
  place-items: center;
}

.fab {
  font-size: 10rem;
  cursor: pointer;
  color: var(--primary-color);
}

.fab:hover {
  color: var(--on-background);
}

@media screen and (max-width: 480px) {
  .social-icons {
    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
  }
  .fab {
    font-size: 7rem;
  }
}

@media screen and (max-width: 350px) {
  .social-icons {
    gap: 5rem;
  }
}