@import url('https://fonts.googleapis.com/css2?family=Major+Mono+Display&family=Poppins:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&family=Orbitron:wght@400;500;600;700&display=swap'); /*tech-font*/

/*Scrollbar customization*/
/* width */
::-webkit-scrollbar {
  width: 5px;
}

/* Track */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey; 
  border-radius: 10px;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #8b5cf6; 
  border-radius: 4px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #ec4899; 
}

/*Scrollbar customization*/
  
html{
  scroll-behavior: smooth;
}

body {
    font-family: 'Poppins', sans-serif;
    background-color: #0f172a;
    color: #e2e8f0;
}

.tech-font {
    font-family: 'Orbitron', sans-serif;
}

.skill-bar {
height: 8px;
border-radius: 4px;
background-color: #334155;
overflow: hidden;
}

.skill-progress {
height: 100%;
border-radius: 4px;
background: linear-gradient(90deg, #6366f1, #8b5cf6, #ec4899);
transition: width 1s ease-in-out;
}

#cookie-consent-popup {
    transition: opacity 1s ease;
    animation: slideFromBelow 1s ease-out;
}
#cookie-consent-popup.hidden {
    transform: translateY(100%);
    opacity: 0;
    transition: all 0.5s ease-in-out;
}

.toggle-checkbox:checked + .toggle-label {
    background-color: #8E24AA;
}

.toggle-checkbox:checked + .toggle-label:before {
    transform: translateX(1rem);
}

.toggle-label {
    display: block;
    width: 2.6rem;
    height: 1.2rem;
    position: relative;
    cursor: pointer;
    transition: all 0.3s ease;
}

.toggle-label:before {
    content: '';
    position: absolute;
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 50%;
    background: white;
    top: 0.15rem;
    left: 0.2rem;
    transition: all 0.3s ease;
}

.scroll-animation {
  animation: 2s ease-out 0s slideFromBelow; /*animation-time | effect method | delay until animation-time | animation*/
}

.section-divider {
    position: relative;
    height: 80px;
    overflow: hidden;
}

.section-divider::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.5), transparent);
}

.akanefont {
    font-family: 'Major Mono Display', monospace;
}

/*.gradient-text-header {
    background: linear-gradient(90deg, #8b5cf6, #10b981);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}*/

.gradient-text {
    background: linear-gradient(90deg, #6366f1, #8b5cf6, #ec4899);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.glow {
    text-shadow: 0 0 10px rgba(139, 92, 246, 0.7);
}

.card-hover {
    transition: all 0.3s ease;
}

.card-hover:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(139, 92, 246, 0.3);
}

.card-hover-no-shadow {
    transition: all 0.3s ease;
}

.timeline-item::before {
    content: '';
    position: absolute;
    left: -1.5rem;
    top: 0;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background: #8b5cf6;
}

.timeline::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 2px;
    background: #334155;
}

.social-icon {
    transition: all 0.3s ease;
}

.social-icon:hover {
    transform: scale(1.2);
}

.nav-link {
    position: relative;
}

.nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -2px;
    left: 0;
    background: #8b5cf6;
    transition: width 0.3s ease;
}

.nav-link:hover::after {
    width: 100%;
}

.typewriter {
    overflow: hidden;
    /*border-right: .15em solid #4fd1c5;*/
    white-space: nowrap;
    margin: 0 auto;
    display: inline-block !important;
    animation: 
        typing 2.5s steps(50, end),
        caret .75s step-end;
}

@keyframes typing {
    from { width: 0% }
    to { width: 100% }
}

@keyframes caret {
    from, to { border-color: transparent }
    100% { border-color: #4fd1c5; }
}

.fade-in {
    animation: fadeIn 1s ease-in-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

.floating {
    animation: floating 3s ease-in-out infinite;
}

@keyframes floating {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0px); }
}

.top-button,
.bottom-button {
  position: fixed; /* Keep buttons in place while scrolling */
  bottom: 20px; /* Adjust distance from bottom */
  right: 10px; /* Adjust distance from right */
  padding: 8px 8px;
  background-color: #808080; /* Customize color */
  color: #fff; /* Customize text color */
  text-decoration: none; /* Remove underline */
  cursor: pointer;
  border-radius: 20%;
}

.top-button:hover,
.bottom-button:hover {
  transform: scale(0.8); /* Decrease size by 20% */
  transition: transform 0.25s ease-in-out; /* Add smooth transition */
}

.top-button {
  bottom: 68px; /* Adjust distance from bottom for two buttons */
}

@keyframes slideFromBelow {
  0% {
    transform: translateY(500%);
  }
  100% {
    transform: translateY(0);
  }
}

/* Custom animations for back-to-top button*/
/*@keyframes float {
    0%, 100% {
        transform: translateY(0px);
    }

    25% {transform: translateY(3px);
    }

    50% {
        transform: translateY(0px);
    }

    75% {
        transform: translateY(-3px);
    }
}*/

@keyframes pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.4);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(99, 102, 241, 0);
    }
}

.back-to-top {
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease-in-out;
}

.back-to-top.visible {
    opacity: 1;
    visibility: visible;
}

/*.back-to-top:hover .arrow-icon {
    animation: float 3s ease-in-out infinite;
}*/

#backToTop {
    animation: pulse 2s infinite;
}