@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap');

body {
    font-family: 'Roboto Mono', monospace;
    line-height: 1.6;
}

.flag-background {
    position: relative;
    background-image: url('../assets/img/flag.jpg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.flag-background::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(255, 255, 255, 0.8);
}

.social-icons a img {
    transition-property: transform;
    transition-duration: 0.3s;
    transition-timing-function: ease;
    filter: brightness(0) saturate(100%) invert(70%) sepia(0%) saturate(624%) hue-rotate(160deg) brightness(91%) contrast(96%);
    transition: 0.3s filter linear, 0.3s -webkit-filter linear;
}

.social-icons a img:hover {
    filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(217deg) brightness(104%) contrast(105%);
}

.svg-tint-neutral-300 {
    filter: brightness(0) saturate(100%) invert(70%) sepia(0%) saturate(624%) hue-rotate(160deg) brightness(91%) contrast(96%);
}

.svg-tint-neutral-100 {
    filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(217deg) brightness(104%) contrast(105%);
}

.svg-tint-neutral-800 {
    filter: brightness(0) saturate(100%) invert(12%) sepia(5%) saturate(223%) hue-rotate(1deg) brightness(97%) contrast(93%);
}

.svg-tint-orange-600 {
    filter: brightness(0) saturate(100%) invert(40%) sepia(93%) saturate(2252%) hue-rotate(357deg) brightness(93%) contrast(96%);
}

/* The cursor animation */
@keyframes cursor-animation {
    0%, 70%, 100% {
        opacity: 1; /* Cursor is fully visible */
    }
    20%, 50% {
        opacity: 0; /* Cursor is invisible */
    }
}

/* Create the blinking cursor using a pseudo-element */
.cursor::after {
    content: "\2588"; /* The character for the cursor */
    animation: cursor-animation 1s steps(1) infinite; /* Apply the animation */
}

/* The hakz cursor effect animation */
@keyframes hakz-dark-animation {
    0%, 70%, 100% {
        background-color: #262626;
        color: #f5f5f5; /* Cursor is fully visible */
    }
    20%, 50% {
        background-color: transparent;
        color: #262626; /* Cursor is invisible */
    }
}

/* The hakz cursor effect animation */
@keyframes hakz-light-animation {
    0%, 70%, 100% {
        background-color: #f5f5f5;
        color: #262626; /* Cursor is fully visible */
    }
    20%, 50% {
        background-color: transparent;
        color: #f5f5f5; /* Cursor is invisible */
    }
}

/* Make the text blink like it is actively selected by the cursor */
.hakz-dark {
    animation: hakz-dark-animation 1s steps(1) infinite; /* Apply the animation */
}

/* Make the text blink like it is actively selected by the cursor */
.hakz-light {
    animation: hakz-light-animation 1s steps(1) infinite; /* Apply the animation */
}