@import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Josefin+Sans:ital,wght@1,700&family=Nunito+Sans:opsz,wght@6..12,300&family=Righteous&display=swap");

:root {
  font-size: 16px;
  --orange: #fd7014;
  --orange-light: #fd7e2c;
  --orange-dark: #e46512;

  --black: #222831;
  --black-light: #2a3038;
  --black-dark: #1f242c;

  --white: #f0f0f0;
  --gray: #393e46;

  --footer-bg: #1a1d22;
  --footer: #f0d5c4;
}

* {
  padding: 0;
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 520;
  scroll-behavior: smooth;
}

body {
  background-color: var(--black);
}

/* img {
  max-width: 100px;
  max-height: 100px;
} */

#nav-bar {
  display: flex;
  align-items: center;

  height: 10vh;
}

#nav-bar > .logo {
  height: 90%;
  width: auto;

  flex: 5 1 initial;
}

#nav-bar > .empty-area {
  flex: 5;
}

#nav-bar > .menu {
  flex: 5;
  display: flex;
  gap: 4px;
  justify-content: space-between;
  align-items: center;

  list-style: none;
}

#nav-bar > .menu > li {
  box-sizing: border-box;
}

#nav-bar > .menu > li > a {
  text-decoration: none;
  color: var(--white);
  text-transform: uppercase;
  font-size: 1.2rem;
}

#nav-bar > .menu > .active {
  background-color: var(--orange);
  border-radius: 0.2rem;
}

#nav-bar > .menu > .active:hover {
  border-radius: 0.1rem;
}

#nav-bar > .menu > .active > a {
  padding: 1rem;
}

#nav-bar > .vertical-bar {
  flex: 1;
  display: flex;
  justify-content: center;
  /* align-items: center; */
}

#nav-bar > .vertical-bar > .bar {
  box-sizing: border-box;
  height: 100%;
  background-color: #e46512;
  border: 5px solid #1a1d22;
}

#nav-bar > .social {
  flex: 2;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 1;
}

#nav-bar > .social > a {
  flex: 1;
}

#nav-bar > .social > a > iconify-icon {
  font-size: 1.5rem;
  color: var(--orange);
  transition-duration: 200ms;
}

#nav-bar > .social > a:hover > iconify-icon {
  color: var(--white);
}

#home {
  display: flex;
  flex-direction: row;

  height: 90dvh;
}

#home > .image-container {
  flex: 1;

  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-end;

  margin-left: 2%;
}

#home > .image-container > img {
  flex: 1;
  max-width: 80%;
}

#home > .text-container {
  flex: 1;

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;

  color: var(--white);
  font-family: sans-serif;
}

#home > .text-container > span {
  width: 70%;
  font-size: 500%;
  font-family: "Arial", "Righteous", sans-serif;
  text-transform: uppercase;
}

#home > .text-container > .name-line-1,
#home > .text-container > .name-line-2 {
  font-weight: 750;
  width: 70%;
  color: var(--white);
}

#home > .text-container > .name-line-2 {
  color: var(--orange);
}

#home > .text-container > .heading {
  font-size: 2.5rem;
  font-family: Arial, Helvetica, sans-serif;
  text-transform: none;
  opacity: 0.8;
}

#home > .text-container > p {
  width: 70%;
  text-align: left;
  padding-top: 2%;
  font-size: 1.2rem;
}

#home > .text-container > button {
  margin-top: 1%;
  padding: 0.5rem 1rem;

  text-align: center;
  text-transform: uppercase;
  border: 0.2rem solid var(--orange);
  border-radius: 0.2rem;
  color: var(--white);
  background-color: transparent;

  cursor: pointer;
  transition-duration: 200ms;
}

#home > .text-container > button:hover {
  background-color: var(--orange);
}

#home > .text-container > hr {
  width: 50%;
  opacity: 0.1;
  border: 0.1px solid var(--orange);
  margin-top: 1rem;
}

#about {
  display: flex;
  flex-direction: column;
  height: 99dvh;
  background-color: var(--black);
}

#about > .text-container {
  flex: 2;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;

  color: var(--white);
  font-family: Arial, Helvetica, sans-serif;
}

#about > .text-container > .heading {
  font-family: "Nunito Sans";
  font-size: 2.5rem;
  font-weight: 800;
}

#about > .text-container > .description {
  font-family: "Nunito Sans";
  width: 40%;
  font-size: 1.5rem;
  margin-top: 1rem;
  text-align: justify;
}

#about > .box-container {
  flex: 3;
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 1%;
  padding: 5%;
}

#about > .box-container > .empty {
  flex: 1;
}

#about > .box-container > .box {
  flex: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  box-sizing: border-box;
  width: 100%;
  min-width: 16rem;
  aspect-ratio: 2/2.5;
  background-color: #1f242c;
  color: var(--white);
  border-radius: 2%;

  transition-duration: 500ms;
}

#about > .box-container > .box:hover {
  box-shadow: 0.1px 0.1px 4px 0.1px var(--orange);
}

#about > .box-container > .box:hover > iconify-icon {
  color: var(--orange-light);
}

#about > .box-container > .box > iconify-icon {
  flex: 3;
  display: flex;
  align-items: center;
  color: var(--orange);
  margin-top: 2%;
  font-size: 700%;
}
#about > .box-container > .box > .title {
  flex: 1;
  margin-top: 1rem;

  font-size: 150%;
  font-weight: bold;
  font-family: "Nunito Sans";
  transition-duration: 100ms;
}

#about > .box-container > .box:hover > .title {
  font-size: 151%;
}

#about > .box-container > .box > .skill-list {
  flex: 2;

  font-size: 100%;
  font-family: "Nunito Sans";
}

#about > .box-container > .box > .skill-list > li > a {
  text-decoration: none;
  color: var(--footer);
  transition-duration: 200ms;
}
#about > .box-container > .box > .skill-list > li > a:hover {
  text-decoration: underline;
  color: var(--orange);
}

#resume {
  display: flex;
  flex-wrap: wrap;
  gap: 2%;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  height: 100vh;
  box-sizing: border-box;
  padding: 4%;
}

#resume > .heading {
  flex: 1;
  /* background-color: #e46512; */
  width: 100%;

  display: flex;
}

#resume > .heading > .title {
  flex: 4;
  display: flex;
  flex-direction: column;
}

#resume > .heading > .title > .name {
  text-transform: uppercase;
  font-size: 2.5rem;
  font-weight: 700;

  color: var(--orange);
}

#resume > .heading > .title > .tagline {
  color: var(--white);
  opacity: 0.9;
}

#resume > .heading > .button {
  flex: 1;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: flex-start;
}

#resume > .heading > .button > button {
  padding: 3%;
  background-color: transparent;
  color: var(--orange);
  border: 2px solid var(--orange);
  border-radius: 0.2rem;

  transition-duration: 100ms;
  cursor: pointer;
}

#resume > .heading > .button > button:hover {
  background-color: var(--orange);
  color: var(--white);
}

#resume > .section {
  flex: 2;
  display: flex;
  flex-direction: row;
  gap: 1%;

  width: 100%;
}

#resume > .section > div {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;

  box-sizing: border-box;
  color: var(--white);

  /* background-color: #1a1d22; */
}

#resume > .section > div > .heading {
  flex: 1;
  font-size: 1.5rem;
}

#resume > .section > div > .heading > hr {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  width: 90%;
  border-color: var(--orange);
  opacity: 0.2;
}

#resume > .section > div > .content {
  flex: 4;
  display: flex;
  flex-direction: column;
  width: 70%;
  /* background-color: #e46512; */
}

#resume > .section > div > .content > .skill {
  flex: 1;
}

#resume > .section > div > .content > .skill > .heading {
  display: flex;
  justify-content: flex-start;

  margin-bottom: 1%;
  font-size: 100%;
}

#resume > .section > div > .content > .skill > .heading > .percentage {
  margin: auto;
  font-size: 90%;
}

#resume > .section > div > .content > .skill > .bar {
  display: inherit;
}

#resume > .section > div > .content > .skill > .bar > .color {
  border-color: var(--orange);
  border-width: 0.1rem;
}

#resume > .section > div > .content > .skill > .bar > .ninety {
  width: 90%;
}

#resume > .section > div > .content > .skill > .bar > .fourty {
  width: 40%;
}

#resume > .section > div > .content > .skill > .bar > .sixty {
  width: 60%;
}

#resume > .section > div > .content > .main {
  display: flex;
  flex-direction: row;
  gap: 1%;

  margin-bottom: 2%;
}

#resume > .section > div > .content > .main > .title {
  transition-duration: 200ms;
}

#resume > .section > div > .content > .main > .title > a {
  text-decoration: none;
  color: var(--orange);
  font-weight: 700;
  font-size: 120%;
}

#resume > .section > div > .content > .main > .title > a:hover {
  text-decoration: underline;
}

#resume > .section > div > .content > .main > .year {
  font-size: 90%;
}

#resume > .section > div > .content > .tools {
  display: flex;
  justify-content: flex-start;
  gap: 1%;
}

#resume > .section > div > .content > .tools > .tool {
  padding: 2%;
  background-color: var(--black-light);
  font-size: 80%;
  letter-spacing: 0.1rem;

  border-radius: 0.4rem;
}

#resume > .section > div > .content {
  display: flex;
  flex-direction: column;
  gap: 2%;
}

#resume > .section > div > .content > .name {
  font-size: 120%;
  font-weight: 600;
  color: var(--orange);
}

#resume > .section > div > .skills-and-interests {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 1%;
  flex-basis: content;
}

#resume > .section > div > .skills-and-interests > .hobby {
  font-size: 90%;
  text-align: center;
  letter-spacing: 0.05rem;
  padding: 1%;
  background-color: var(--black-light);
  border-radius: 0.4rem;
}

#contact {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  height: 100vh;
}

#contact > .text {
  flex: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;

  color: var(--white);
}

#contact > .text > .first-line > span {
  font-size: 500%;
  font-weight: 600;
}

#contact > .text > .first-line > .first-text {
}

#contact > .text > .first-line > .second-text {
  color: var(--orange);
}

#contact > .text > .second-line {
  font-size: 150%;
}

#contact > .content {
  flex: 3;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;

  width: 100%;
}

#contact > .content > div {
  flex: 1;

  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

#contact > .content > div > iconify-icon {
  font-size: 2.5rem;
  color: var(--orange);
}

#contact > .content > div > span {
  display: flex;
  flex-direction: column;
  align-items: center;

  color: var(--white);
  padding: 2%;
  line-height: 150%;
  font-size: 1.5rem;
}

#contact > .content > div > span > a {
  text-decoration: none;
  color: var(--orange-dark);

  transition-duration: 200ms;
}

#contact > .content > div > span > a:hover {
  color: var(--orange);
}

.footer {
  display: flex;
  justify-content: center;
  align-items: center;

  bottom: 0;
  height: 5vh;
  background-color: var(--footer-bg);
  color: var(--white);
  font-family: Arial, "Nunito Sans";

  opacity: 0.8;
}

/* --------------------------------- */
.back-to-top {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  padding: 0.3rem 0.4rem 0.2rem 0.4rem;

  text-decoration: none;
  color: var(--white);

  border: 2px solid var(--orange);
  border-radius: 0.4rem;

  transition-duration: 100ms;
}

.back-to-top:hover {
  background-color: var(--orange);
}

/* Scroll bar */
/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: var(--black-light);
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: var(--orange-dark);
  border-radius: 1vh;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: var(--orange);
}