/**
    * style.css
    * Website: Razan Niroula
    * Author: Razan Niroula
    * Description: This stylesheet controls the visual presentation of the Razan Niroula website, 
    * ensuring a responsive and user-friendly experience.
*/

:root {
    --bs-body-color: #161616;
    --bs-border-color: #003893;
    
    --e-global-color-primary: #003893;
    --e-global-color-secondary: #161616;
    --e-global-color-text: #000000;
    --e-global-color-accent: #003893;
    --e-global-color-f6830e2: #F6F1E4;
    --e-global-color-9cc31a6: #4C594F;
    --e-global-typography-primary-font-family: "Space Mono";
    --e-global-typography-primary-font-weight: 600;
    --e-global-typography-secondary-font-family: "Inconsolata";
    --e-global-typography-secondary-font-weight: 400;
    --e-global-typography-text-font-family: "Inconsolata";
    --e-global-typography-text-font-weight: 400;
    --e-global-typography-accent-font-family: "Space Mono";
    --e-global-typography-accent-font-weight: 500;
    font-family: "Inconsolata", Sans-serif;
}

@media (prefers-reduced-motion: no-preference) {
  :root {
    scroll-behavior: smooth;
  }
}

/* Font */
.inconsolata-regular {
  font-family: "Inconsolata", monospace;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}
.space-mono-regular {
  font-family: "Space Mono", monospace;
  font-weight: 400;
  font-style: normal;
}

.space-mono-bold {
  font-family: "Space Mono", monospace;
  font-weight: 700;
  font-style: normal;
}

.space-mono-regular-italic {
  font-family: "Space Mono", monospace;
  font-weight: 400;
  font-style: italic;
}

.space-mono-bold-italic {
  font-family: "Space Mono", monospace;
  font-weight: 700;
  font-style: italic;
}

body {
    --bs-body-font-family: "Space Grotesk", serif;
    touch-action: manipulation;
	overscroll-behavior: none;
}

body a {
    text-decoration: none;
}

/* Style */
.container,
.container-fluid,
.container-xxl,
.container-xl,
.container-lg,
.container-md,
.container-sm {
  --bs-gutter-x: 3rem;
}
.row {
    --bs-gutter-x: 2.5rem; }
.text-theme {
    color: var(--e-global-color-accent) !important;
}
.text-light-gray {
    color: #777777 !important;
}
.text-theme-dark {
  color: var(--e-global-color-text) !important;
}
.bg-theme {
    background-color: var(--e-global-color-accent) !important;
}
.btn-outline-dark {
    box-shadow: 4px 4px 0px 0px #003893;
}

.btn-theme {
    transition: all .3s;
    --bs-btn-color: #003893;
    --bs-btn-bg: #FFFFFF;
    --bs-btn-border-color: #003893;
    --bs-btn-hover-color: #003893;
    --bs-btn-hover-bg: #ffffff;
    --bs-btn-hover-border-color: #003893;
    --bs-btn-focus-shadow-rgb: 0, 0, 0, 0;
    --bs-btn-active-color: #003893;
    --bs-btn-active-bg: #ffffff;
    --bs-btn-active-border-color: #003893;
    --bs-btn-active-shadow: none;
    --bs-btn-disabled-color: #808080;
    --bs-btn-disabled-bg: #FFFFFF;
    --bs-btn-disabled-border-color: #808080;
}

@media (min-width: 768px) {
    .btn-theme {
        --bs-btn-padding-x: 2rem;
    }
}

@keyframes btn-animation-wobble-vertical {
  16.65% { transform: translateY(8px) }
  33.30% { transform: translateY(-6px) }
  49.95% { transform: translateY(4px) }
  66.60% { transform: translateY(-2px) }
  83.25% { transform: translateY(1px) }
  100% { transform: translateY(0) }
}

.btn-animation-wobble-vertical:active, .btn-animation-wobble-vertical:focus, .btn-animation-wobble-vertical:hover {
  animation-name: btn-animation-wobble-vertical;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: 1;
}

.max-content-wrap {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}

/* Header */
.navbar {
    --bs-border-width: 2px;
    --bs-navbar-nav-link-padding-x: 1.5rem;
}
.navbar-toggler, .navbar-toggler:focus {
    --bs-navbar-toggler-focus-width: 0rem;
}
.navbar-nav {
    --bs-nav-link-font-size: 1.25rem;
    --bs-nav-link-font-weight: 700;
}
.nav-link {
    --bs-nav-link-color: var(--e-global-color-text);
    --bs-navbar-active-color: var(--e-global-color-accent);
}

@media (max-width: 991.98px) {
    .offcanvas {
        background-image: url("../assets/moutain-line.svg");
        background-position: bottom center;
        background-repeat: no-repeat;
        background-size: contain;
    }
}
.offcanvas {
    --bs-offcanvas-width: 560px;
}
.offcanvas.offcanvas-end {
    border-left: 0px;
}

.background-overlay {
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  position: absolute;
}

/* Typing Effect */
.typing-effect {
  position: relative;
}
.typing-effect.display-6 {
  font-size: calc(1.175rem + 1.5vw);
}
.cursor {
  animation: blink 1s infinite;
}

@keyframes blink {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

/* Portfolio */
.portfolio-card {
    position: relative;
    border-top: 1px solid var(--e-global-color-accent);
    padding: 1.5rem;
    transition: transform .3s ease;
    overflow: hidden;
    cursor: pointer;
}

/*.portfolio-card:hover {
    transform: translateY(-5px);
  }*/

/* Top border animation */
.portfolio-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--e-global-color-accent);
    transition: width .3s ease;
}

.portfolio-card:hover::before {
    width: 100%;
}

.top-icon {
    color: var(--e-global-color-accent);
    margin-top: 1.25rem;
    display: inline-block;
    transition: transform .3s ease;
}

.portfolio-card:hover .top-icon {
    transform: scale(1.2);
    color: var(--e-global-color-text);
}

/* Mouse Cursor */
@media (hover: none) and (pointer: coarse) {
  .mouse-cursor {
    display: none !important;
  }
}
@media (max-width: 767px) {
    .mouse-cursor {
        display: none !important;
    }
}

.mouse-cursor {
    position: fixed;
    left: 0;
    top: 0;
    pointer-events: none;
    border-radius: 50%;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    visibility: hidden;
}
.cursor-inner {
    margin-left: -3px;
    margin-top: -3px;
    width: 6px;
    height: 6px;
    z-index: 50;
    background-color: var(--e-global-color-accent);
    -webkit-transition: width 0.3s ease-in-out, height 0.3s ease-in-out, margin 0.3s ease-in-out, opacity 0.3s ease-in-out;
    transition: width 0.3s ease-in-out, height 0.3s ease-in-out, margin 0.3s ease-in-out, opacity 0.3s ease-in-out;
}
.cursor-inner.cursor-hover {
    margin-left: -40px;
    margin-top: -40px;
    width: 80px;
    height: 80px;
    background-color: var(--e-global-color-accent);
    opacity: 0.3;
	mix-blend-mode: difference; 
	-ms-mix-blend-mode: difference;
}
.cursor-outer {
    margin-left: -15px;
    margin-top: -15px;
    width: 30px;
    height: 30px;
    border: 2px solid var(--e-global-color-accent);
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    z-index: 50;
    opacity: 0.5;
    -webkit-transition: all 0.08s ease-out;
    transition: all 0.08s ease-out;
}
.cursor-outer.cursor-hover {
    opacity: 0;
}

/* Footer */
.footer .background-overlay {
    background-image: url("../assets/moutain-line.svg");
    background-position: bottom right;
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0.20;
}
.icon-link {
    font-size: 1.35em;
}