/* Files */
@import url("font.css");
@import url("responsive.css");
@import url("typingEffect.css");
@import url("glassmorphism.css");
@import url("flagFonticon.css");

/* ---------- General Layout ---------- */
:root {
  --background: #101018;
  --main-font-color: #f5f5f5;
  --sec-font-color: #bcc3c8;
  --main-color: #22596d;
  --sec-color: #317f9b;
  --primary-font: Rubik, Lato, DM, Roboto, Tahoma, Sans-Serif;
}
body.light {
  --background: #eee;
  --main-font-color: #111;
  --sec-font-color: #333;
  --main-color: #22596d;
  --sec-color: #317f9b;
}
body.light .menu li:hover i {
  color: var(--background);
}
body.light .special-btn:not(.glass) i {
  color: var(--background);
}
body.light .btn-primary {
  color: var(--background);
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  height: 100vh;
  font-family: var(--primary-font);
  background-color: var(--background);
  color: var(--main-font-color);
}
/* ---------- Browser Style ---------- */
::selection {
  border-radius: 5px;
  background-color: var(--sec-color);
  color: var(--main-font-color);
}
/* ---------- Special Buttons ---------- */
/* main container */
.specialButtons {
  display: none;
  top: 2rem;
  padding: 0 2rem;
  position: fixed;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 99;
}
.specialButtons .setting {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}
.special-btn:hover {
  cursor: pointer;
}
.specialButtons .setting i,
.specialButtons .flag-icon {
  transition: all 0.2s;
}
.specialButtons .setting .special-btn:hover i {
  transform: scale(1.3);
}
@media screen and (min-width: 992px) {
  .specialButtons {
    display: flex;
  }
}
.special-btn {
  background-color: var(--main-color);
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(3rem + 2px);
  height: calc(3rem + 2px);
  border-radius: 50%;
  z-index: 99;
}
.special-btn i {
  font-size: 1.5rem;
}
/* language */
.flag-icon {
  font-size: 1.6rem;
}
.specialButtons .setting .special-btn:hover .flag-icon {
  padding-top: 0.1rem;
  transform: scale(1.4);
}
/* social */
.social {
  display: flex;
  flex-direction: row-reverse;
  position: relative;
  align-items: center;
}
.social .social-list {
  border-radius: 3rem;
  width: 3rem;
  padding-right: 3rem;
  position: absolute;
  overflow: hidden;
  transition: all 0.3s;
}
.social .special-btn:hover ~ .social-list,
.social-list:hover {
  width: 15rem;
}
.social ul {
  list-style-type: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 3rem;
  padding: 0 1rem;
  z-index: 1;
  font-size: 1.3rem;
}
.social ul li a {
  text-decoration: none;
  color: inherit;
  transition: all 0.3s;
  display: inline-block;
}
.social ul a:hover {
  color: var(--sec-color);
  transform: scale(1.3);
}
/* toggle menu mobile */
.menuToggle {
  display: none;
}
/* ---------- Toggle Contents Parts ---------- */
article .row:not(.activePart) {
  display: none;
}
/* ---------- Content ---------- */
.container > .row {
  min-height: 100vh;
}
.container .row {
  align-items: center;
}
.content .btn {
  margin-bottom: 15px;
}
.content .job {
  font-size: 1.6rem;
}
@media screen and (max-width: 768px) {
  .content {
    text-align: center;
  }
}
@media screen and (min-width: 1200px) {
  .content {
    padding-left: 30px;
  }
}
/* call to action */
.cta a {
  text-decoration: none;
  color: var(--sec-color);
}
/* image profile */
.profile {
  margin: 0 auto;
  background-image: url("../../files/media/profile-light.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 50%;
  width: 300px;
  height: 300px;

  border: 4px solid var(--main-color);
  filter: grayscale(0.7);
  transition: filter 0.5s;
}
.profile:hover {
  filter: none;
}
/* ---------- Menu ---------- */
.menu {
  /* initialize menu for animation */
  position: relative;
}
.menu ul {
  list-style-type: none;
  display: flex;
  justify-content: space-evenly;
  align-items: flex-end;
  gap: 3rem;
}

/* Add animation for horizontal menu */
@media screen and (max-width: 992px) {
  aside.active .menu {
    transform: translateX(0%);
  }
  aside:not(.active) .menu {
    transform: translateX(100%);
  }
  aside.active {
    z-index: 100;
  }
  .menu {
    padding: 1rem 2rem;
    transition: all 0.5s;
  }
  /* horizontal menu */
  .menuToggle {
    display: block;
  }
  aside {
    padding: 0 !important;
    position: fixed;
    right: 0;
    width: 40%;
    height: 100%;
  }
  aside .menu ul,
  aside .menu {
    height: 100%;
  }
  aside .menu .closeMenu {
    display: inline-block !important;
    animation-name: showFromRight;
    animation-duration: 0.5s;
  }
  aside .glass {
    border-radius: 0;
    border-radius: 2rem 0 0 2rem;
    border-right: none;
  }
  .menu ul {
    flex-direction: column;
    justify-content: space-around;
  }
  .container {
    overflow-y: hidden;
  }
}

/* resize the horizontal menu at table break point (> 768px) */
@media screen and (min-width: 768px) {
  aside {
    width: 28%;
  }
}
/* close btn for mobile menu */
aside .menu .closeMenu {
  display: none;
  position: absolute;
  top: 1.5rem;
  left: 1.5rem;
  font-size: 1.7rem;
  cursor: pointer;
}

@media screen and (min-width: 992px) {
  /* initialize for vertical menu animation */
  body {
    overflow-x: hidden;
  }
  /* vertical menu */
  aside {
    top: 0;
    right: 2rem;
    position: fixed;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
  /* Add animation for vertical menu */
  .menu {
    animation-name: showFromRight;
    animation-duration: 0.5s;
  }
  .menu ul {
    min-height: 75vh;
    flex-direction: column;
  }

  /* Add HOVER animation when vertical menu is enabled  */
  .menu ul li:hover i {
    background-color: var(--main-color);
  }
  .menu ul li:hover span {
    padding-right: 20px;
  }
  .menu ul li span {
    padding-right: 10px;

    transition: all 0.3s;
  }
}
.menu ul li span {
  user-select: none;
}
.menu ul li {
  direction: rtl;
  text-align: center;
  cursor: pointer;
}
.menu ul li i {
  width: 3rem;
  height: 3rem;
  text-align: center;
  line-height: 3rem;
  border-radius: 50%;

  transition: all 0.3s;
}

/* ---------- Helper Classes ---------- */
.title {
  color: var(--sec-color);
  font-size: 3rem;
  margin: 1rem 0;
}
.description {
  padding: 1rem 0;
  font-size: 1.5rem;
  color: var(--sec-font-color);
}
.btn.btn-primary {
  display: inline-block;
  text-decoration: none;
  background-color: var(--sec-color);
  color: var(--main-font-color);
  font-size: 1rem;
  outline: none;
  border: none;
  padding: 0.5rem 0.8rem;
  border-radius: 0.7rem;
  font-family: inherit;
  transition: all 0.3s;
}
.btn.btn-primary:hover {
  background-color: var(--main-color);
  cursor: pointer;
}
/* ---------- Animations ---------- */
@keyframes showFromRight {
  from {
    right: -100%;
  }
  to {
    right: 0%;
  }
}
@keyframes showMenuBottom {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}