/* Fonts */
@font-face {
    font-family: 'Open Sans';
    src: url(/media/fonts/OpenSans/static/OpenSans-Regular.ttf);
    font-display: swap;
}

:root {
    --navbar-height: 0px; /* Základná hodnota, bude prepísaná JavaScriptom */
    --bs-border-width: 1px;
    --bootstrap-transition-time: 0.15s;
    --bootstrap-transition-time-fast: calc(var(--bootstrap-transition-time) * 0.667);

    /* Light mode */
    /* Bootstrap colors */
    --ab-bs-body-color-light: #001e42;
    --ab-bs-body-color-rgb-light: 0,30,66;
    --ab-bs-body-bg-light: #f0f0f0;
    --ab-bs-body-bg-rgb-light: 240,240,240;
    --ab-bs-secondary-color-light: #202020; /* #1e7aa1; 666666 */
    --ab-bs-secondary-color-rgb-light: 32,32,32;
    --ab-bs-secondary-color-rgba-light: rgba(var(--ab-bs-secondary-color-rgb-light),1);
    --ab-bs-secondary-bg-light: #ffffff;
    --ab-bs-secondary-bg-rgb-light: 255,255,255;
    --ab-bs-tertiary-color-light: #404040;
    --ab-bs-tertiary-color-rgb-light: 64,64,64;
    --ab-bs-tertiary-color-rgba-light: rgba(var(--ab-bs-tertiary-color-rgb-light),1);
    --ab-bs-tertiary-bg-light: #f8f8f8;
    --ab-bs-tertiary-bg-rgb-light: 248,248,248;
    --ab-bs-border-color-light: #c0c0c0;
    --ab-bs-border-color-rgb-light: 192,192,192;
    --ab-bs-border-color-rgba-light: rgba(var(--ab-bs-border-color-rgb-light),1);
    --ab-bs-info-light: #00b3ff;
    --ab-bs-info-rgb-light: 0, 179, 255;
    /* Custom colors */
    --ab-color-base-light: #ffffff;
    --ab-color-base-rgb-light: 255,255,255;
    --ab-color-hover-light: var(--ab-bs-info-light);
    --ab-color-hover-rgb-light: var(--ab-bs-info-rgb-light);
    --ab-color-active-light: #0096ff;
    --ab-color-active-rgb-light: 0, 150, 255;
    --ab-color-gradient-start-bs-light: #00b3ff;
    --ab-color-gradient-end-bs-light: #001e42;
    --ab-color-transparent-light: #000000;
    --ab-color-transparent-rgb-light: 0,0,0;

    /* Dark mode */
    /* Bootstrap colors */
    --ab-bs-body-color-dark: #FFFFFF;
    --ab-bs-body-color-rgb-dark: 255,255,255;
    --ab-bs-body-bg-dark: #0a0e1d;
    --ab-bs-body-bg-rgb-dark: 10,14,29;
    --ab-bs-secondary-color-dark: #e0e0e0;
    --ab-bs-secondary-color-rgb-dark: 224, 224, 224;
    --ab-bs-secondary-color-rgba-dark: rgba(var(--ab-bs-secondary-color-rgb-dark),1);
    --ab-bs-secondary-bg-dark: #182130;
    --ab-bs-secondary-bg-rgb-dark: 24,33,48;
    --ab-bs-tertiary-color-dark: #c0c0c0;
    --ab-bs-tertiary-color-rgb-dark: 192, 192, 192;
    --ab-bs-tertiary-color-rgba-dark: rgba(var(--ab-bs-tertiary-color-rgb-dark),1);
    --ab-bs-tertiary-bg-dark: #0f172a;
    --ab-bs-tertiary-bg-rgb-dark: 15,23,42;
    --ab-bs-border-color-dark: #606060;
    --ab-bs-border-color-rgb-dark: 96,96,96;
    --ab-bs-border-color-rgba-dark: rgba(var(--ab-bs-border-color-rgb-dark),1);
    --ab-bs-info-dark: #0dcaf0;
    --ab-bs-info-rgb-dark: 13,202,240;
    /* Custom colors */
    --ab-color-base-dark: #000000;
    --ab-color-base-rgb-dark: 0,0,0;
    --ab-color-hover-dark: var(--ab-bs-info-dark);
    --ab-color-hover-rgb-dark: var(--ab-bs-info-rgb-dark);
    --ab-color-active-dark: #00b3ff;
    --ab-color-active-rgb-dark: 0, 179, 255;
    --ab-color-gradient-start-bs-dark: #27fcff;
    --ab-color-gradient-end-bs-dark: #59a2ff;
    --ab-color-transparent-dark: #ffffff;
    --ab-color-transparent-rgb-dark: 255,255,255;
}

html[data-bs-theme="light"] {
    --bs-body-color: var(--ab-bs-body-color-light);
    --bs-body-color-rgb: var(--ab-bs-body-color-rgb-light);
    --bs-body-bg: var(--ab-bs-body-bg-light);
    --bs-body-bg-rgb: var(--ab-bs-body-bg-rgb-light);
    --bs-secondary-color: var(--ab-bs-secondary-color-rgba-light);
    --bs-secondary-bg: var(--ab-bs-secondary-bg-light);
    --bs-secondary-bg-rgb: var(--ab-bs-secondary-bg-rgb-light);
    --bs-tertiary-color: var(--ab-bs-tertiary-color-rgba-light);
    --bs-tertiary-bg: var(--ab-bs-tertiary-bg-light);
    --bs-tertiary-bg-rgb: var(--ab-bs-tertiary-bg-rgb-light);
    --bs-border-color: var(--ab-bs-border-color-light);
    --bs-info: var(--ab-bs-info-light);
    --bs-info-rgb: var(--ab-bs-info-rgb-light);
    --ab-color-base: var(--ab-color-base-light);
    --ab-color-base-rgb: var(--ab-color-base-rgb-light);
    --ab-color-hover: var(--ab-color-hover-light);
    --ab-color-hover-rgb: var(--ab-color-hover-rgb-light);
    --ab-color-active: var(--ab-color-active-light);
    --ab-color-active-rgb: var(--ab-color-active-rgb-light);
    --ab-color-gradient-start: var(--ab-color-gradient-start-bs-light);
    --ab-color-gradient-end: var(--ab-color-gradient-end-bs-light);
    --ab-color-transparent: var(--ab-color-transparent-light);
    --ab-color-transparent-rgb: var(--ab-color-transparent-rgb-light);
}

html[data-bs-theme="dark"] {
    --bs-body-color: var(--ab-bs-body-color-dark);
    --bs-body-color-rgb: var(--ab-bs-body-color-rgb-dark);
    --bs-body-bg: var(--ab-bs-body-bg-dark);
    --bs-body-bg-rgb: var(--ab-bs-body-bg-rgb-dark);
    --bs-secondary-color: var(--ab-bs-secondary-color-rgba-dark);
    --bs-secondary-bg: var(--ab-bs-secondary-bg-dark);
    --bs-secondary-bg-rgb: var(--ab-bs-secondary-bg-rgb-dark);
    --bs-tertiary-color: var(--ab-bs-tertiary-color-rgba-dark);
    --bs-tertiary-bg: var(--ab-bs-tertiary-bg-dark);
    --bs-tertiary-bg-rgb: var(--ab-bs-tertiary-bg-rgb-dark);
    --bs-border-color: var(--ab-bs-border-color-dark);
    --bs-info: var(--ab-bs-info-dark);
    --bs-info-rgb: var(--ab-bs-info-rgb-dark);   
    --ab-color-base: var(--ab-color-base-dark);
    --ab-color-base-rgb: var(--ab-color-base-rgb-dark);
    --ab-color-hover: var(--ab-color-hover-dark);
    --ab-color-hover-rgb: var(--ab-color-hover-rgb-dark);
    --ab-color-active: var(--ab-color-active-dark);
    --ab-color-active-rgb: var(--ab-color-active-rgb-dark);
    --ab-color-gradient-start: var(--ab-color-gradient-start-bs-dark);
    --ab-color-gradient-end: var(--ab-color-gradient-end-bs-dark);
    --ab-color-transparent: var(--ab-color-transparent-dark);
    --ab-color-transparent-rgb: var(--ab-color-transparent-rgb-dark);
}


/* BODY */
html {
    font-family: 'Open Sans', sans-serif;
    border-color: var(--bs-secondary-color);
}

.font-weight-400 {
    font-weight: 400;
}

.font-weight-500 {
    font-weight: 500;
}

.article-bg {
    background-color: var(--bs-secondary-bg);
    border-radius: 1rem;
    border: 1px solid var(--bs-border-color);
}

/* Headings */
@property --ab-color-gradient-start {
    syntax: '<color>';
    initial-value: #00b3ff; /* Light mode defaults */
    inherits: false;
    }

@property --ab-color-gradient-end {
    syntax: '<color>';
    initial-value: #001e42; /* Light mode defaults */
    inherits: false;
}

.heading {
    background: linear-gradient(to bottom, var(--ab-color-gradient-start), var(--ab-color-gradient-end));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: --ab-color-gradient-start var(--bootstrap-transition-time), --ab-color-gradient-end var(--bootstrap-transition-time);
}

.color-text-body {
    color: var(--bs-body-color);
}

.color-text-secondary {
    color: var(--bs-secondary-color);
}

.color-text-tertiary {
    color: var(--bs-tertiary-color);
}

html[data-bs-theme="light"] .heading {
    --ab-color-gradient-start: var(--ab-color-gradient-start-bs-light);
    --ab-color-gradient-end: var(--ab-color-gradient-end-bs-light);
}

html[data-bs-theme="dark"] .heading {
    --ab-color-gradient-start: var(--ab-color-gradient-start-bs-dark);
    --ab-color-gradient-end: var(--ab-color-gradient-end-bs-dark);
}


/* NAVBAR */
.navbar-padding {
    padding-top: var(--navbar-height);
}

nav.navbar {
    font-size: 1.6rem;
    text-decoration: none;
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: 1px solid var(--bs-border-color);
    backdrop-filter: blur( 1rem );
    -webkit-backdrop-filter: blur( 1rem );
}

img.navbar-brand-image {
    height: 2.5rem;
}

a.nav-link {
    color: var(--bs-tertiary-color);
    text-wrap: nowrap;
    padding: 0rem 0.5rem 0.125rem 0.5rem;
}

a.nav-link:hover, a.nav-link:focus, a.nav-link:active {
    color: var(--ab-color-transparent);
}

.vr {
    background-color: var(--bs-tertiary-color);
}


/* Dark/Light mode toggle switch*/
.btn-light-dark-mode {
    width: 3.2rem;
    height: 3.2rem;
    border-radius: 50%;
    padding: 0.75rem;
    border: none;
    transition: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--bs-tertiary-color);
}

.btn-light-dark-mode:hover {
    color: var(--ab-color-transparent);
}

.btn-light-dark-mode:active {
    color: var(--ab-color-transparent) !important;
}

html[data-bs-theme="light"] .btn-light-dark-mode:hover {
    background-color: rgba(var(--ab-color-transparent-rgb),0.25);
}

html[data-bs-theme="light"] .btn-light-dark-mode:active {
    background-color: rgba(var(--ab-color-transparent-rgb),0.35) !important;
}

html[data-bs-theme="dark"] .btn-light-dark-mode:hover {
    background-color: rgba(var(--ab-color-transparent-rgb),0.25);
}

html[data-bs-theme="dark"] .btn-light-dark-mode:active {
    background-color: rgba(var(--ab-color-transparent-rgb),0.175) !important;
}

.btn-light-dark-mode > span {
    line-height: 1;
}

.btn-light-dark-mode .icon-outline {
    display: inline-block;
}

.btn-light-dark-mode .icon-fill {
    display: none;
}

.btn-light-dark-mode:hover .icon-outline {
    display: none;
}

.btn-light-dark-mode:hover .icon-fill {
    display: inline-block;
}

html[data-bs-theme="light"] .light-icon-group, html[data-bs-theme="dark"] .dark-icon-group {
    display: inline-block !important;
}

html[data-bs-theme="light"] .dark-icon-group, html[data-bs-theme="dark"] .light-icon-group {
    display: none !important;
}

i.theme-icon {
    font-size: 1.5rem;
    vertical-align: middle;
}


/* HERO */
a.btn.btn-primary.hero-button {
    max-width: 100%;
    height: 4.5rem;
    border-radius: 5rem;
    border-width: 2px;
    border-style: solid;
    transition-duration: var(--bootstrap-transition-time);
}

a.btn.btn-primary.hero-button#hero-button-1 {
    color: var(--bs-body-bg);
    border-color: var(--bs-secondary-color);
    background-color: var(--bs-secondary-color);
}

a.btn.btn-primary.hero-button#hero-button-2 {
    color: var(--bs-secondary-color);
    border-color: var(--bs-secondary-color);
    background-color: var(--bs-secondary-bg);
}

a.btn.btn-primary.hero-button#hero-button-1:hover {
    color: var(--bs-secondary-bg);
    border-color: var(--ab-color-hover);
    background-color: var(--ab-color-hover);
}

a.btn.btn-primary.hero-button#hero-button-2:hover {
    color: var(--ab-color-hover);
    border-color: var(--ab-color-hover);
    background-color: var(--bs-tertiary-bg);
}

a.btn.btn-primary.hero-button#hero-button-1:active {
    border-color: var(--ab-color-active);
    background-color: var(--ab-color-active);
}

a.btn.btn-primary.hero-button#hero-button-2:active {
    color: var(--ab-color-active);
    border-color: var(--ab-color-active);
    background-color: var(--bs-body-bg);
}

@media only screen and (max-width: 575.98px) {
    .btn-hero-wrapper {
        width: 100%;
    }

    a.btn.btn-primary.hero-button {
        width: 100%;
    }
}

@media only screen and (min-width: 575.98px) {
    a.btn.btn-primary.hero-button {
        aspect-ratio: 3 / 1;
    }
}


/* ABOUT */
.about-image {
    border-radius: 5%;
    max-height: 20rem;
    transition: var(--bootstrap-transition-time);
}


/* SERVICES */
.collapsing  {
    transition-duration: var(--bootstrap-transition-time); /* predvolená hodnota je 0.35s */
  }

.accordion-button {
    transition-duration: 0s;
    color: var(--bs-secondary-color);
}

.accordion-button:hover {
    color: var(--ab-color-hover);
}

.accordion-button:focus {
    box-shadow: none;
}

.accordion-button:active {
    color: var(--ab-color-active);
}

.accordion-button:not(.collapsed) {
    color: var(--bs-info);
    --bs-accordion-bg: var(--bs-secondary-bg);
    --bs-accordion-active-color: var(--bs-tertiary-color);
    --bs-accordion-active-bg: var(--bs-body-bg);
    box-shadow: none; 
}

.accordion-button:not(.collapsed):hover {
    color: var(--ab-color-hover);
}

.accordion-button:not(.collapsed):active {
    color: var(--ab-color-active);
}

.accordion-button::after {
    transition: transform var(--bootstrap-transition-time) ease-in-out;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='rgba(255%2C255%2C255%2C0.85)' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/%3E%3C/svg%3E");
}
  
.accordion-button:hover::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='rgba(255%2C255%2C255%2C1.0)' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/%3E%3C/svg%3E");
}

.accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='rgba(255%2C255%2C255%2C1.0)' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/%3E%3C/svg%3E");
}


/* SKILLS */
.carousel.skills {
    overflow: hidden;
    display: flex;
}

.carousel.skills:hover {
    animation-play-state: paused;
}

.carousel.skills > * {
    flex: 0 0 100%;
}

.group.skills {
    display: flex;
    gap: 1rem;
    padding-right: 1rem;
    will-change: transform;
    animation: scrolling 60s linear infinite;
}

.card.skills {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem;
    border-radius: 1rem;
    height: 10rem;
    aspect-ratio: 1 / 1;
    color: var(--ab-bs-secondary-bg-dark);
    background-color: white;
}

.card.skills:hover {
    color: var(--ab-bs-secondary-bg-dark);
    background-color: white;
    border-color: var(--ab-color-hover);
}

.card-image-wrapper.skills {
    height: 5.75rem;
    width: 100%;
}

.card-text-wrapper.skills {
    height: 2rem;
}

.card-img-skill {
    max-height: 5rem;
    max-width: 100%;
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
}

@keyframes scrolling {
    0% {
    transform: translateX(0);
    }
    100% {
    transform: translateX(-100%);
    }
}


/* PROJECTS */
/* Card */
.card {
    border: 1px solid var(--bs-border-color);
    transition-duration: var(--bootstrap-transition-time);
}

.card:hover {
    border: 1px solid var(--ab-color-hover);
    background-color: var(--bs-tertiary-bg);
}

.card:active {
    border: 1px solid var(--ab-color-active);
    background-color: var(--bs-body-bg);
}

.card-img-top.lazyloaded {
    transition: transform var(--bootstrap-transition-time) ease-in-out;
}

.card:hover .card-img-top.lazyloaded {
    transform: scale(1.25);
}

.card-body {
    display: flex;
    flex-direction: column;
}

.card-body a.btn {
    color: var(--bs-secondary-color);
    padding: 0.5rem 1rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 5rem;
    background-color: var(--bs-secondary-bg);
    transition-duration: var(--bootstrap-transition-time-fast);
}

.card-body a.btn:hover {
    color: var(--ab-color-hover);
    border-color: var(--ab-color-hover);
}
    
.card-body a.btn:active {
    color: var(--ab-color-active);
    border-color: var(--ab-color-active);
    background-color: var(--bs-tertiary-bg);
}

.card-text {
    color: var(--bs-tertiary-color);
}

/* Button */
button.btn.btn-projects-toggle {
    height: calc(3.5rem + calc(var(--bs-border-width) * 2)); /* 58px */
    min-height: calc(3.5rem + calc(var(--bs-border-width) * 2));
    border: 1px solid var(--bs-border-color);
    border-radius: 5rem;
    color: var(--bs-secondary-color);
    background-color: var(--bs-body-bg);
    transition-duration: var(--bootstrap-transition-time-fast);
}

button.btn.btn-projects-toggle:hover {
    color: var(--ab-color-hover);
    background-color: var(--bs-tertiary-bg);
    border-color: var(--ab-color-hover);
}

button.btn.btn-projects-toggle:active {
    color: var(--ab-color-active);
    background-color: var(--bs-body-bg);
    border-color: var(--ab-color-active);
}

.btn-projects-toggle-text {
    transition-duration: var(--bootstrap-transition-time-fast);
}

i.projects-toggle-icon {
    transition: transform var(--bootstrap-transition-time) ease;
    display: inline-block; /* Helps ensure transform works reliably */
}

i.projects-toggle-icon.rotate {
    transform: rotate(180deg);
}


/* CONTACT */
/* Info */
@media only screen and (min-width: 767.98px) {
    .contact-container {
        width: 720px;
    }
}

.contact-items-wrapper {
    height: 100%;
}

@media only screen and (max-width: 767.98px) {
    .contact-items-wrapper {
        height: 20rem;
    }
}

.h-100div5 {
    height: calc(100% / 5);
}

.h-100div6 {
    height: calc(100% / 6);
}

.h-100div7 {
    height: calc(100% / 7);
}

a.contact-item .contact-icon {
    padding: 0 0.25em 0 0;
    margin: 0 0.5rem 0 0;
    border-radius: 50%;
    transition-duration: var(--bootstrap-transition-time);
}

.contact-item-link {
    text-decoration: none;
    color: unset;
}

.contact-item {
    transition-duration: var(--bootstrap-transition-time);
    text-wrap: nowrap;
}

.contact-item:hover {
    color: var(--ab-color-hover);
}

.contact-item:active {
    color: var(--ab-color-active);
}

/* Map */
iframe.contact-map {
    border: 0; /* original */
    border-radius: var(--bs-border-radius);
    width: 100%;
    height: 100%;
    min-height: 20rem;
}

/* Form */
.form-control:hover {
    border-color: var(--ab-color-hover);
    background-color: var(--bs-tertiary-bg);
}

.form-control:focus {
    border-color: var(--ab-color-hover);
    background-color: var(--bs-tertiary-bg);
    box-shadow: 0 0 0 0.25rem rgba(var(--ab-color-hover-rgb), 0.5);
}

input.form-control:-webkit-autofill {
    -webkit-box-shadow:
        0 0 0 1000px var(--bs-tertiary-bg) inset;
}
  
input.form-control:-webkit-autofill:focus {
    -webkit-box-shadow:
        0 0 0 1000px var(--bs-tertiary-bg) inset,
        0 0 0 0.25rem rgba(var(--ab-color-hover-rgb), 0.5);
}

form#form-contact {
    max-width: 696px;
}

textarea.form-control#form-message {
    resize: none;
    height: 8rem;
}

.form-floating>textarea:focus~label::after {
    background-color: var(--bs-tertiary-bg);
}

button.btn.btn-submit {
    height: calc(3.5rem + calc(var(--bs-border-width) * 2)); /* 58px */
    min-height: calc(3.5rem + calc(var(--bs-border-width) * 2));
    border: 1px solid var(--bs-border-color);
    border-radius: 5rem;
    color: var(--bs-secondary-color);
    background-color: var(--bs-body-bg);
    transition-duration: var(--bootstrap-transition-time-fast);
}

button.btn.btn-submit:hover {
    color: var(--ab-color-hover);
    border-color: var(--ab-color-hover);
    background-color: var(--bs-tertiary-bg);
}

button.btn.btn-submit:active {
    color: var(--ab-color-active);
    background-color: var(--bs-body-bg);
    border-color: var(--ab-color-active);
}

.btn-submit-text {
    transition-duration: var(--bootstrap-transition-time-fast);
}

.btn-submit:hover .btn-submit-text {
    color: var(--ab-color-hover);
}

.btn-submit:active .btn-submit-text {
    color: var(--ab-color-active);
}

.field-validation-error {
    color: var(--bs-danger);
}

#FormSubmitSuccess{
    color: var(--bs-success);
}

#FormSubmitFail{
    color: var(--bs-danger);
}


/* FOOTER */
.footer-text {
    line-height: 1.75;
    font-weight: 400;
    color: var(--bs-tertiary-color);
}

.footer-text-link {
    color: inherit;
    vertical-align: unset;
    overflow: unset;
    transition-duration: var(--bootstrap-transition-time);
}

.footer-text-link:hover {
    color: var(--ab-color-hover);
}

.footer-text-link:active {
    color: var(--ab-color-active);
}


/* LAZYSIZES */
img.about-image.lazyload, img.about-image.lazyloading {
    min-height: 15rem;
}

.lazyload,
.lazyloading {
    opacity: 0;
}

.lazyloaded {
    opacity: 1;
    transition: opacity 300ms;
}

img.lazyload:not([src]) {
    visibility: hidden;
}


/* Hover.css */
.hvr-underline-from-center:before, .hvr-underline-from-left:before, .hvr-underline-from-right:before {
    background: var(--ab-color-hover);
    height: 2px;
    transition-duration: var(--bootstrap-transition-time);
}

div.footer-text a.hvr-underline-from-center:before, div.footer-text a.hvr-underline-from-left:before, div.footer-text a.hvr-underline-from-right:before {
    background: var(--ab-color-hover);
    height: 2px;
    transition-duration: var(--bootstrap-transition-time);
}


/* TYPED.JS */
/* Cursor */
.typed-cursor {
    opacity: 1;
    animation: typedjsBlink 0.7s infinite;
    -webkit-animation: typedjsBlink 0.7s infinite;
}

@keyframes typedjsBlink {
    50% {
        opacity: 0.0;
    }
}

@-webkit-keyframes typedjsBlink {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.0;
    }

    100% {
        opacity: 1;
    }
}

/* If fade out option is set */
.typed-fade-out {
    opacity: 0;
    transition: opacity .25s;
    -webkit-animation: 0;
    animation: 0;
}

@media only screen and (max-width: 1199.98px) {
    .typed-wrapper {
        height: 5rem;
    }
}


/* PARTICLES.JS */
#particles-js {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
}

.body-content {
    backdrop-filter: blur(1px);
    background-color: rgba(var(--bs-body-bg-rgb),0.5);
}


/* Custom background image/gradient */
/*
body {
    background-image: url(../media/images/background-coding-3.avif?v1);
    background-color: rgba(255,255,255,0.1);
    background-blend-mode: lighten;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}

.body-content {
    backdrop-filter: blur(2px);
}

html[data-bs-theme="light"] .body {
    background-color: rgba(255,255,255,0.75);
}

html[data-bs-theme="dark"] .body {
    background-color: rgba(0,0,0,0.5);
}
*/